Build Your Own Business Website header image

All the Basics of Using Genesis 2 – Part 8 – Setup the Enterprise Pro Header

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.

We’ve set up the Site Layout in the Genesis 2 Enterprise Pro child theme and the next thing we’re going to do is set up the header. We need to keep in mind that the header has these two sections and there are really 3 ways to lay it out.

3 Ways to Layout the Header

You can have the full width text as I showed when we were looking at the areas in the Enterprise Pro page. You can have 320 pixels for text with a widget area on the right or you can have a logo image and a widget area on the right. Those are really the only 3 options that you have for the header.

Use a Logo in the Header and Widget Area

We’re going to start off by putting in a logo image and you do that from Appearance and Header. Then you choose a file. Notice it says 320 x 80 so we’re going to choose a file that is exactly that size, 320 x 80. I’ve made this one here that way, so we open up this one and upload it. Let’s save the changes, reload this and the text is going to go away and we’re going to have our logo image.

What Happens if the Logo Isn’t the Right Size?

I should address the question of what happens if the file is too big. So we can choose a file and let’s just choose something that’s ridiculously too big so you can see. I’ll choose a picture file here that’s just the wrong configuration. Say open to that and upload it.

Image is Too Large Overall

You can see what it does. It gives you this Crop Image dialog with a set size area. It doesn’t let me change area size any but I can move the area around to a different spot in the image. It maintains the proportion of this area. So I could crop this image and publish that as my logo image.

In the past this didn’t work well with png files but it works fine with png files now. I’ll save the changes and now there’s a header image. But obviously you’re not going to do that.

Image is Too Long

Let’s choose a different header image and let’s say you’re tempted to use a long header image. Longer than the 320 pixel area provided. It used to be that this was possible and it probably is still possible in some themes but in this case, if we upload this image the theme automatically sets up a crop for the maximum length. There’s no way for you to show an image that’s bigger than it’s supposed to be.

Image isn’t Long Enough

Let’s take a look at what happens If the image you have chosen is too small. This image here is 260 x 100 so it’s too tall but not wide enough. Let’s pick that one and upload it. It’s too tall but not wide enough so what it does is it scales it up to make it wide enough and then let’s you chop it down.

So they’re actually expanding the image here to be larger than it was so that you can crop it which is a horrible thing to do. You’re never going to do this because it’s going to look awful. The image is going to be distorted.

Let’s go back and choose the correctly sized image here and save it. Now if we want to get rid of these extra images we added we can come over to the media library to remove them. Just pick these images and using bulk actions choose delete permanently. Apply those changes and then go back over to Appearance and Header and they’re gone.

Configure the Widget Area

The next thing to do is to configure this widget area. This is really designed to be used with 3 different types of widgets.

Designed for 3 Types of Widgets

First is the menu widget that you see here. Another one is the Search widget. We can come over here and remove the menu widget. Then come back to our Search widget and drag and drop it in. We’re not going to use any title. Hit save and now we’ve got a great big Search box over here.

An alternative to that is we could add a text widget instead or in addition to this. I’m going to use that visual editor widget. Choose header right as the location. Now let’s add a title say, “Welcome to our website” and then you could put a phone number, for example. Let’s do that in HTML view so that this phone number is going to be our clickable phone number link. Refresh it and oh, that looks horrible.

Let’s put the Search above and see what that looks like. So you could do something like that or instead of that you could take the Search widget out altogether. And let’s change the title to say “Call us Anytime”. Save those changes and return to the page.

You can see what happens here if you’re using the title. The title appears above this thin line and then the content of the widget goes below that line. So if you don’t want it looking like that you can always just come over here take the title out.

Let’s see what it looks like if we take the text “Call us Anytime” out of the title and place that in with the content which, in this case, is a telephone number. Let’s give the text an h3 heading. Save it and reload it, there you go, “Call us Anytime”.

And those are really the 3 things that you can do with this. Again, that is you can use a text widget here, you can use a menu widget or you can use a Search box widget but there aren’t a lot of other things that actually work very well in this location.

0 Comments… add one
0 comments… add one

Leave a Comment