Sometimes it’s hard to figure out what components actually makes your WordPress Homepage. Widgets, Sidebars, Headers, Body Content, Navigation Menus, Background Images and Footers all play their own part in making your homepage and website come to life.
In this article I would like to briefly describe each one. As always, we here at Supernova Media use Genesis Framework on WordPress, so all our examples will either be from this site or one of our demo sites using Genesis.
Headers – A typical website has a header across the top of the page. It will must likely be your logo. Being one of the first things a visitor sees when they land on your page you want it to make that all important first impression a good one. The header area of your site can have it’s own background colour or image, your navigation menus can be placed above and below and even along side the header. The width and height of you header can be edited. The header image can be an active link, say taking the user back to your home page. You can even choose to have a smaller header for the inside pages of your site. Also, depending on the theme you choose there may be a widget area along the header where you can place custom content.
The Genesis themes allows for customizable headers, from the WordPress dashboard, simply goto Appearance, then Headers, to add you header. Edits can also be made in the style sheet for custom height and width setting without any worry of losing your edits with future updates. I went a little off topic with all the theme edits talk but it’s hard not to talk about coding, .
[ For more general information on the header: http://codex.wordpress.org/Designing_Headers ]
Navigation Menus – Having a good organized navigation menu is a must for your site. Whether you are selling a product or just have a simple blogging site your navigation menu should be designed to guide the user throughout your site with ease. The location, number and style of your navigation menu will depend on the specific theme you choose. I remember when website’s navigation was located in the right-hand column, boy am I glad that things have changed since then.
[ I recently wrote a blog on editing and customizing your WordPress navigation menu. Check it out to see what all you can do with your navigation menu. ]
Backgrounds – Almost each component of your website can have it’s own background. This opens up huge design possibilities. A background can be a simple hex code colour or an image file. It can be static or move with the content as you scroll down the page. You can drastically change the look of your site by simply changing the background of your site. It is amazing how you can take one theme, make a few edits to the back ground and you have two complete different sites.
Body Content – This area is the place where your content is displayed. The body are will be either full or partial width and have sidebars along one side or both sides. Most sites have a plain white background for their body content.
Sidebars & Widgets – The sidebar of your site can be either on the left or right or none at all depending on the width of your page content area, even sometimes two along side of each other. Some sites like ours at Supernova Media’s have only sidebars on select pages. The contents of a sidebar are called widgets. Widgets are small applications and their varieties are endless. One of my all time favorite widgets to use is the Text/Html Widget, it is so flexible. Yes, you do need to know a little coding, click here to see how to use the text html widget in another blog article we have.
Footers – The footer area of your website is located at the very bottom of your site. It is a valuable piece of web-space, you can include so much information in it for your users. Again you can opt to have a different footer on the inside pages of your site or keep it the same throughout, which gives your reader a good anchor point.
Home Page or Landing Page, Pages and Posts – I had to add these to this list. When you first visit a website the first page you will see is the Home page. (Oops, well some sites do have splash pages!)
And any other pages you visit from the home page are the inside pages or posts. The homepage may or may not have the sidebars. Once again the styling of the pages and post can be drastically changed with a few easy to apply element. Full width page with no sidebars, sidebar on the left or right or having two sidebars along with your page the choice is yours to make.
As you can see the combination of these individual elements are endless. Using a simple tool like Firebug will help you to identify elements on a web site. To see how you can use Firebug read this recent blog with a short video how to, check it out.
I do believe that you will get more customizing ability with a paid theme then a free one. I recently built a site using the default WordPress twenty-eleven theme. I had to do several edits to the theme files to get the look and feel I wanted. And as a result had to create a child theme of the twenty-eleven theme so my edits would not be over written each time the theme was updated. Talk about a learning curve! With Genesis by the very nature of the framework you never have to worry about your custom edits being over written with updates.
Hint: Before I choose a theme to work with I like to do a map of these various components. This allows me to have a good understanding of their layout and allows me to see the design possibilities of that theme.
Once again I hope this blog was of helpful for you, please post a comment we would love to hear from you and help you with your questions.
[Blog by Chrissie ]