Good evening everybody and welcome to lesson 8 of the How to Build a Professional Website Using the Genesis theme and WordPress. Tonight what we’re going to talk about what a Genesis page is constructed of. What we’re going to do is to set up the appearance of our site using Genesis Theme and WordPress Theme Settings.
This is the demonstration site, sbywh-final-agency.byobgenesis. This is the end result, this is what we’re shooting for throughout the course of this class. This is sbywh8.byobgenesis.com and this is where we are tonight. This is the site that we’re working on here, that’s where we essentially left off last week.
4 Main Parts of the Typical Genesis Theme Page
We’re going to talk about the main elements in a Genesis theme website. This is a typical Genesis page with all these default Genesis elements inserted. A typical Genesis page is made up of 4 main parts and those are arranged vertically in a page.
The first part is the Header which is this section right up here, the Navigation, which is the section that has the menus directly below the header, what Genesis calls the Inner which is essentially the inner page where all the content and sidebars are and finally, the footer. Those are the 4 parts of your Genesis page.
Default Genesis Header
First, we’re going to talk about the Default Genesis Header, that’s what this represents here and this is what happens by default with Genesis. If we don’t do anything else, what you get is the name of the site plus the tagline and it’ll expand to fill up the entire width of the page.
One way to think about that is like the Full Width Header Layout, that is the header spans from one edge of the page to the other and is 115 pixels tall. This is the Full Width Header Layout.
Genesis/Agency Header Layout
There’s also a widgetized header layout and the widgetized Genesis header is the one that you see in the example on their site where they’ve got an Agency title, the tagline and the menu across here.
That’s, in fact, what we have going on our main demonstration site, we’re using the widgetized version of the header. The widgetized version of the header has two sections, it has a logo section and that is 350 pixels wide.
Next to logo section is the header widget section which is 600 pixels wide and these widths are fixed for you. Below the header we have the default Genesis navigation and if you don’t do anything at all with Genesis Navigation, this is what it looks like.
Default Genesis Navigation
First, the Genesis navigation lists 3 scenarios. The first scenario is no navigation and that’s what we have going on in this case. In the demonstration case they’re using a widgetized header and they put the Navigation Menu in the widget area so there is no navigation section being displayed at all. That’s one scenario.
The other two scenarios are either to display the primary navigation only or to display the primary navigation and secondary navigation. We’ll take a look at secondary navigation menu here in a few minutes but you have the opportunity to create by default two menus in Genesis and Agency and both of those menus stack on top of each other.
The primary is the top one, the secondary is the bottom one. Those are your 3 scenarios, no navigation, primary navigation only and primary and secondary navigation.
Default Genesis Inner Layout
Next, we have the default Genesis inner layout and that’s what’s being represented here. This default layout also consists of 3 parts. It has the Breadcrumbs, the Content and the Sidebar. If we come back and look at what this Breadcrumb Trail right here, below the Breadcrumb Trail is the content area and the sidebar area.
Default Genesis Footer Layout
Genesis also has a default footer layout and this is what it looks like. For the moment you can ignore the content in this footer widgets area because these are things you have complete control of but the number and arrangement of those you don’t have control of. The default Genesis footer is comprised of two elements, the footer widgets element and it has 3 footer widgets. Those are the two parts of the Genesis footer.
Those are our 4 Main Page Sections. If we look at our demonstration site, this is the header and this is the home page. The home page is slightly different, it has a couple of other things added to it. It has this welcome widget area, it has the place for the slider and it’s got home widget area so it’s laid out differently than the standard page.
The standard page sits just like this, you’ve got your home area which does not have any navigation section to it so the navigation isn’t showing up and this also doesn’t have Breadcrumbs enabled so there is no breadcrumbs section here.
You’ve got just the header, you’ve got the inner with the content, the sidebars and the footer as you would expect. That’s the same thing that’s going on here, add a content to the About page so we can see this but here’s that default header. This is the primary navigation, it goes to the page and then down to the footer.
Notice there are no footer widgets here and the reason there are no footer widgets showing on this is because we haven’t placed any widgets in the footer sidebars. And until you place widgets in those they don’t show up but as soon as we place widgets in, those will show up as well.