Blog Design 101 For WordPress Beginners.

Discussion

Hi guys, so I’m, trying my hands at writing informative and productive posts based on my experience as a WordPress blogger since 2013. I would also gladly appreciate it if you have any additional information on whatever I discuss that is beneficial please do share it, someone might find it very useful.

Divider 4

Blog Design 101

I didn’t get the hang of designing my blog until recently and I am absolutely not a pro at it. What I did was Google. Google is key people and extremely important (also you need to know what you’re googling, to find the goodies) Google has helped me discover a lot of things (posts, blogs, editors etc.) that have greatly helped in designing my blog. Aside from Google, asking other people also helps a lot. You can make a post reaching out to bloggers and so many people will respond to you and just like magic you have many different options to choose from and learn about various users experiences.

We all know that there are many various platforms that are being used to host various Blogs/Sites, but I am more conversant with WordPress, I will try to cover as much ground as I can possibly remember about designing when it comes to it. Please note that I am not a professional when it comes to this and everything I am writing or showing is free to do and use by anyone, nor do I claim to own any of them, if they aren’t mine.

Divider 4.5

WordPress

There is something about WordPress that has to be noted.

WordPress.com which powers a lot of sites, as it gives everyone who signs up a free site, and if you’re not satisfied offers paid plans, but it’s not compulsory you get a plan aside from the free one.

WordPress.Org is a site which helps many people who are self-hosting but using WordPress. This is paid hosting, there is no free plan, apart from widgets and plugins, which can be found at WordPress.org. It has a lot more flexibility than WordPress.com and you can do a lot with it.

Both have a very similar interface especially if the self-hosted site has Jetpack enabled, makes running the site a lot easier and smoother.

p.s. the links provided lead to more detailed explanations of what is being discussed, and most provide detailed screenshots and videos.Pink #1

The Blog’s Theme

The first aspect of designing a blog is choosing the right theme. On WordPress.com, there are many preset themes to choose from, from free to paid. Sadly you can only upload a theme via WordPress.com if you use the Business or Premium Plan. Withstanding there are many free themes, that are hidden gems, once you get the hang of customizing it (with the help of graphic designing, WordPress tools & widgets)

When you’re self-hosting and you make use of WordPress like I said it is more flexible, you can upload themes yourself, which is extremely awesome, which means you can scout the many various sites with lists on the so-called best WordPress themes, many are free to use, if you don’t feel like paying for a theme or getting someone to customize a theme for you.

You can either watch the tutorial video below for a visual and audio guide to how to access, choose and activate themes and also read more about it at WordPress Support.

p.s. if you don’t want the WordPress “W” logo to show up, on the browser address bar icon, all you have to do is add a site icon. Learn more

 

Pink #2

Pages & Posts

Posts are what keeps people coming back to our sites. It’s where the content we produce come alive and shine. It’s our job to make our posts as engaging as possible, while also carrying our unique brand and voice. No two person posts can be the same even if they are talking about the same thing unless it’s a reblog.

It’s important to set up the Pages that are going to be accessed on a site, there are preset pages already, such as About, Contact etc. You can also further include an FAQ page, Review Policy, Portfolio etc.

Simant wrote an extremely informative post on How to Write an About Page That Really Matters! It will pay in the long run, to read and implement her tips.

Pages are just like posts but the only difference is, they are mostly static, where posts and updates done on the sites don’t automatically add to it unless manually edited. The Differences Between Posts and Pages in WordPress

I love having a Landing Page, this is the static page, that loads up when a URL (domain) is loaded (the first thing that is seen), it’s like an introduction to what is being offered and can be found on the site. Instead of accessing all posts once a person loads the site (this is called the blogroll). This can be configured when Customizing the site, under the Homepage settings. Usually, when there’s a landing page, there is a different page for viewing of all posts on a site, which URL is usually yourdomain.com/blog. This can also be configured during Customization.

Depending on the theme, the design of pages varies,(plus plug-ins/widgets for self-hosted WordPress users) but I know it allows the addition of a Feature Image, which adds to the beauty of a page. It is also not compulsory to add a Feature image, whatever floats your boat.

WordPress Support explanation of Landing Pages is very informative and helpful.

You should also take note, it is all up to you which page you want your sites URL to point to. It could either be the blogroll or landing page and if a blogroll is more preferable for your theme than a landing page.

Setting up Pages before Customization helps in the long run, as it allows for easy arrangement of the sites Menu.

Also, WordPress has provided an ultimate list of all their helpful shortcodes, that makes Pages and Posts, better such as including audio, video, image, documents and miscellaneous kinds of stuff. List of all WordPress Shortcodes.

Pink #3

Categories & Tags

This helps with the organization of the posts being published on the site, Categories can be Food, Music, Books, Reviews, Articles, Love etc. and under Categories, you can add Subcategories such as under Food, you can have Drinks, Snacks, Recipes etc. This makes it easy to access certain kinds of posts on a site and makes it for a smoother user experience. The great thing about Categories is when clicked it can form a page featuring all posts under the category on that site, the same goes for clicking Tags.

Tags are the keywords of a post, that will help users locate and bring up your posts under the tag, it is similar to Categories, but where Categories have a wide range, tags are more specific and straight to the point. There are also widgets for Categories and Tags to be put on a sites sidebar(s) or footer area(s). Categories vs. Tags

They are essentially made to assist in post organization and viewing on the site. Just like Pages, setting up Categories and Tags before Customization helps in the long run, as it allows for easy arrangement of the sites Menu.

Pink #4

Menu

At the most basic level, a WordPress menu is a collection or list of links. The most common placement of a menu is in the site navigation area or navigation bar and is referred to as a navigation menu.

Each link in a menu is called a menu item. Some menu items may have sub-menu items that are displayed in a drop-down menu. (Website Menus And How They Are Used In WordPress, 11-04-2014 by Jennifer Bourn) Read More

The Primary Menu is the Navigation menu and during Customization, if you have your pages, categories and tags already set up, you can add it to the Primary menu which will be displayed on all pages, for easy browsing by a user.

Pink #5

Widgets/Plug-ins

Widgets/Plug-ins are the tools that help people who visit your blog. There are various widgets to be found and used and the Text widget has a lot of benefits if you make use of the HTML version. Widgets allow for recent posts and comments to be easily located, follow buttons and email subscriptions, social media profiles such as Twitter, Instagram, FaceBook, or others via the text (HTML) widget, categories, tags etc. Widgets are useful and very helpful for site navigation. Widgets can be found under Appearance on your WordPress Admin page or through customisation. Widgets are displayed on the sidebar(s) and footer area(s) of a blog.

Note that for self-hosted WordPress users have to manually add a follow button, which is very easy to do as it allows for other WordPress users who have JetPack enabled to follow you and receive your posts in their WordPress reader. Add a Follow Button

Also, this is one of the best reasons for self-hosting WordPress, there are endless Widgets and Plug-ins for everything, it is limitless, unlike for WordPress.com users, who can only use the widgets that are being provided by WordPress.

Pink 6

Graphic Design & Elements

This is the fun part. The designing of the graphics for your site. Such as Featured Image, like Book Review, Announcement, Updates etc. or Dividers, such as the flowery numbers above, or whatever. You can find free Graphic Design Elements by simply searching on Google or even searching on Pinterest for the elements you need, such as Marbles, Flowers, Phones etc. other sites like Behance, 123RF etc. There are many free elements out there if you don’t have the dough to shell out on buying the non-free ones. You can even commission different Graphic Artists to personally make your graphics for you. For example, Lauren commissioned her icon.

You can also find much free stock images to use on your site such as Unsplash, Freepik, Pexels etc. a Google search can help find out more sites such as these. Canva has a very informative list of the good and bad stock images sites.

For editing of images and creating of featured images, I make use of these sites. Canva, Pixlr and Desygner. Canva and Desygner are somewhat similar, but Canva wins. It’s straightforward and easy to you, plus it has preset themes and designs which are free to use or you can tweak it and make the non-free ones your own. There are also tonnes of tutorials offered by Canva for beginners so I vote Canva as a prestigious blogging tool when it comes to designing.

I create my headers myself, by making use of graphic elements and using custom dimensions (1080px x 500px), when I am creating a design on Canva. I prefer personalizing my headers, because it gives my blog a look of originality, even if many people are using the same elements as I do.

I recommend Canva for creating post and blog headers, Under Create a design, when you click more, you’re giving various preset design options. Now under Social Media & Email Headers design options, making use of preset designs such as Twitter Header, Tumblr Banner, Google+ Header, to give you an idea of where to start or how to design your header. You can also upload your own images if the ones Canva provide are not suitable for you.

It also helps to understand the difference between PNG and JPEG images when it comes to designing headers. Many PNG images have the tendency to have transparent backgrounds, while JPEG images do not.

You know all these graphic elements that can be added to other pictures, without blocking out the background of where it is placed, only the graphic element is being shown. These are usually PNG, PSD, TIFF, GIF etc. images, have a transparent background. Unlike if the graphic element is a JPEG file, then it will surely have a white background. What’s the Difference Between JPG, PNG, and GIF?

In addition, to add more beauty to posts being published, images such as GIFs can make a post more animated, using of elements graphics and edited images to match the theme and plot of posts goes a long way.

It’s important that the images and elements you use on your site are ones you have the right to do so, that’s why I keep mentioning free ensure that the images have a Creative Commons License and when using images that aren’t yours to use or you’re not sure about the license please endeavour to include the image source.

Pink 7

Customisation

This is where everything comes together, the arrangement of the blog, the layout, the sidebar(s), footer area(s) for the widgets, the menu(s) etc. This is the virtual place to design your site according to the theme that has been selected and see how it looks without it being published or the changes being noted yet. Customisation is a very straightforward process. Just note that there are some features under customization that can’t be used by free WordPress users that aren’t using the business or premium plan.

Divider 4.5

This is all my brain can come up with at this point in time, so please if you have questions, please ask them, so I can provide further assistance if I can. Also if you also have the knowledge please share them below, like I said people in need will really appreciate it, but I will be more than thankful for your assistance.

p.s. you can join this wonderful group New Bloggers on Discord, which is run by Evelina @ Avalinah’s Books if you’re lost, in need of direction and whatever when it comes to blogging, this group is as helpful as it gets. All you need to do is contact her and she’ll add you, you can do that via her website or her Twitter @avalinahsbooks it also pays to get yourself and Evelina.

Lara Kareem

 

 

19 thoughts on “Blog Design 101 For WordPress Beginners.

  1. WOW! You put a lot of work into this post! I did something more or less the same months ago that’s how I can tell you congratulations! Really well done here ;$-)

    Liked by 1 person

  2. The ability to have more control over site appearance was one of the reasons I moved to self hosted. Plus I don’t like wordpress sticking ads in wherever it wants that I don’t approve of.

    I love my current theme.

    Good blog post! Informative.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.