Build Your Own Business Website header image

All the Basics of Using Genesis 2 – Part 6 – Understanding the Parts of an Enterprise Pro Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve got the Genesis 2 Enterprise Pro Child Theme installed, the next thing I want to talk about are the elements of the Enterprise Pro page.

Typical Page Elements

We’re going to start on a regular page of Enterprise Pro, we’ll go to the About page. It essentially has 4 elements. Actually, it has 5 elements but we’re not going to see all of those elements yet until we start adding content. It’s got the header up here, it’s got a navigation section, it’s got what it calls the inner which is really just the rest of the page and it has the footer.

Enterprise Pro actually has a couple of different footer areas and right now we’re only seeing the bottom footer area but there’s actually a place for footer widgets that you’ll see once we start configuring the footer. Once that happens the footer gets to be quite a bit bigger than this.

But the page has essentially these 4 areas:

  • The header
  • The navigation area
  • The inner area which is divided up into 2 sections, the content and the sidebar
  • The footer

This image that is above the text in the Inner area wasn’t originally created at the full width of the page, that is it wasn’t really created so that was at least 660 pixels wide. So when WordPress recreated new images, it didn’t take this image and make it any bigger. It’s only its original size which means that I’m going to want to edit it.

I’ll click edit here and its alignment needs to be changed to none and then choose size as the full size. It’s only 640 pixels wide. Update those settings and then update the page. We’ll view the page and now we have the text jumping up there beside the image.

Enterprise Pro Header Layout

The header layout is different in every child theme and that’s something to bear in mind but there are some very common things. The sizes are different but it’s very common in a Genesis header to have a logo area and a widget area. Right now it’s being used as if it were a full width section.

Let’s come over to Settings and General Settings and make some changes. For the Site Title I’ll add, “Learn How to Develop a Small Business Website Using Genesis 2” and then in the Tagline, “Anyone can learn how”. Let’s save those changes and refresh the page.

Logo and Widget Areas

You can see the title spans the whole width because until I put a widget in this widget area here on the right side, this behaves like a full width header area. However, as soon as you add a widget to this area then this logo section becomes 320 pixels wide and the widget becomes 720 pixels wide.

I’ll show you what that looks like. We’ll come over to Appearance and Widgets and in our Header Right widget area we’ll add a Search widget. This is just an example, you could add whatever you want. So, I’ll take the Search and drop it here. We won’t add a title and hit save. Once we refresh the page, Search is over here and this long title is confined to this area on the left.

The Search could even be bigger than this because the actual widget area comes all the way over to here, it just right aligns it. So you can do different things with this, you could put your own text up there or some other thing in this place as well. But that’s what happens here when you put content in this widget area, it changes the logo space to only 320 pixels wide.

Enterprise Pro Navigation

Okay, now in this navigation section you can have no navigation, you can put primary navigation only or you can put primary and secondary navigation. Let’s go over to Menus and I do have a second menu. So I’ve got my another menu and I could set that as my second nav menu.

Save the menu, refresh this page and now I have a secondary menu here below the primary one. Again, I could have no menus, the primary menu or a primary and a secondary menu.

Remove Primary Menu but Keep Secondary

Someone asks, “What happens if I remove the primary menu?”. That’s an interesting question. Let’s go make that change. Under primary menu I’ll choose Select the Menu and then save changes. When we refresh the page only the secondary menu remains but it keeps the menu style, it doesn’t have the dark menu, it’s got the light menu.

Remove Both Menus

We could remove those entirely and we can do something that people often do which is to add the menu in the header. So let’s drag the Search widget out and drag in the navigation menu widget. Then we’ll just take our main menu, save it, reload it and now we’ve got a menu in the header instead.

Whoops, it still wants to put that heading in, let’s just delete the heading and save that. We’ll refresh the page and take a look. So you could have a logo with the menu up here in the header instead with no navigation down here if that’s the way you want it. And those are your options.

Enterprise Pro Inner and Footer Areas

Your inner layout has breadcrumbs and in this child theme the breadcrumbs don’t stretch all the way across. Instead they stay above the page content only and the sidebar still jumps up there. Then you’ve got your content and your sidebar and then your footer layout has footer widgets and then this little footer section. We’ll see footer widgets in play here in just a minute.

How to Determine the Size of the Widget

Amy asks, “How do you know or determine the size of the widget?”. You mean how did I know? Well, there’s a little bit of documentation about it but what I did was use a Chrome tool to inspect the element. I found the widget area, hovered over it and it showed that it is 720 pixels. That’s how I know. Firefox has a similar tool that beginner’s often find a bit easier to use.

0 Comments… add one
0 comments… add one

Leave a Comment