Understanding WordPress Website Layouts.
Before you begin on your journey to build your first WordPress Website/Blog, there are a few fundamental or foundation ‘things’ you should understand. These are the absolute basics with regards to website design and are usually not only specific to WordPress.
If you have read my past posts you may have noticed that I have used the terms Website and Blog quite loosely and there is a reason for this. In the past, a BLOG was a BLOG and a WEBSITE was a WEBSITE. There were distinctive differences between the two, but with the latest developments in WordPress and Web-design (in general) these distinctive lines are now best described as ‘shades of grey‘ (i.e. a Website and Blog are almost the same thing, although functionality may differ somewhat). Hardcore Website Designers or Bloggers may argue, but that’s my opinion (share your opinion in the comments below). Once you get to know WordPress a little better, you will see there is only one settings in the WordPress Dashboard that sets these distinctions apart.
[boxibt style=”gray”]Defining a Website/Blog is a topic that I may cover in more detail at a later date.[/boxibt]
Lets get into the ‘meat’ of this post and share the structure of a WordPress Website/Blog with you…
The Structure of a WordPress Website
Most WordPress websites and/or blogs are made up of a few primary areas, no matter how they are dressed up with design (using a WordPress Theme) or graphics. These areas are a HEADER, a BODY & a FOOTER. Adding to this, most sites will also contain one or two SIDEBARS and at least one NAVIGATION AREA (for the menu containing links to pages within the site).
With a WordPress Website, your WordPress Theme will dictate the design, layout and structure of your website. Different Themes come with different options and functions but for the most part you will always have a HEADER, BODY, FOOTER, NAVIGATION BAR and one or several SIDEBAR options (the exception being Landing pages, which I’ll cover later).
As mentioned, most WordPress Websites will have a HEADER, BODY, FOOTER, SIDEBAR(S) & a NAVIGATION area. In the image above, I also show what I have termed an ‘EXTRA AREA’. This ‘extra area’ is becoming more and more popular and is usually used to catch a site visitors attention. Being the first area within the body section of a WordPress Website/Blog, this ‘Extra Area’ usually contains ‘Image Sliders’, ‘Product Promotions’ and/or any other form of a ‘Call-to-Action’ (something to prompt a user to click a link, or sign-up for a Newsletter etc).
Website Front-End VS The Back-End
I thought I’d best mention this now, so when it comes up later, you have an understanding of what it is…
The Front-End: What Web-Designers (Developers) refer to as the ‘front-end’ of a website/blog, is that part of website that is displayed to the user by default. In other words, when someone visits your website, the ‘front-end’ is what they view. The ‘front-end’ displays the website showing all the design features, fancy graphics and your chosen fonts, in an appealing and colourful structure.
I mentioned the ‘Front-End’ vs ‘Back-End’ now because if you ever get to play with code (and you eventually will), you need to understand that even the source code is broken up into HEADER and BODY Sections. It is important to know the difference between the ‘Front-End’ Page Structure and the ‘Back-End’ Code Structure.
[tabtitleitem title=”Front-End Design View” id=”tab_1″]
[tabtitleitem title=”Back-End Code View” id=”tab_2″]
[boxibt style=”gray”]Please NOTE: The ‘Back-End’ I am referring to here is the ‘RAW’ code (HTML Structure) of the WordPress Website. I am NOT referring to the WordPress Dashboard and/or the WordPress Editor’s ‘text view’ interface used to write your posts and pages. The WordPress Dashboard is another thing entirely and will be covered later…[/boxibt]
I could go on about the various uses of the different areas within both the ‘Front-End’ and the ‘Back-End’. but this will probably end up confusing you (if it hasn’t already). For now; know know this:
- The Front-End: Is the fancy graphical interface displayed when someone views a website.
- The Back-End: Is the Raw-Code view, showing code used to create the Front-End view (& more).
Knowing the basic WordPress Website Structure and the difference between the Front-End vs Back-End views will help you understand website layouts. Armed with this knowledge, you should have a better understanding of web-design manuals and courses, which will refer to both views. It may also help you decide on which WordPress Theme to use for your websites layout.