Next in this Basics of Using Genesis 2 tutorial we are going to begin customizing Pages in the Enterprise Pro child theme. We are going to begin by setting up the Front Page and then we’ll set up the Blog and Archive Pages.
When we installed Enterprise Pro we also talked about how it handled a static Front Page and how you had to add widgets to make this page work as a static page rather than as a blog page. This is what we’re going to work on now. There are 2 widget areas on the page. You have your Home Top widget area and you have a Home Bottom widget area.
Home Top Widget Area – Option 1
There are probably 3 main things that you could do with this Home Top widget area.
Using the Area as Full Width Text Area
The first one is to use just plain old ordinary content in it as if it were a regular front page. Go to Appearance and Widgets. But before we add one to this Home Top widget area, let’s go to the demonstration site that I use for my Genesis Professional Website course. Go to pages and I’ll just borrow some text here.
Now that I’ve got this text let’s go back to that widgets page and add it to a text widget. In fact, I’m going to use the visual editor version of this. So drag that into Home Top. I’ll go to the HTML view and paste it then come back to Visual view. I’ll make this first sentence a heading, so h2 tag and then the rest is fine. Hit save and refresh this page.
And here’s our text. So you can put a big bunch of text here. Notice how it goes right up against the menu area. There’s a little trick you can use to add a bit of space up there and that is you can add a character above the text, just like that and then make its color white so it doesn’t show up.
That’s just a little hack to get around your inability to really style this easily. And if you want this text to be larger, of course, you can use custom styles to style this.
Add an Image
The other thing you could do is add an image into this section as well. So there’s lots of things you can do here just by using it as one big full width text area. Before we go on to look at the other things we can do, I want to format the bottom widgets as well.
Home Bottom Widget Area
The Home Bottom is one widget area and it’s designed very specifically to use this Featured Page widget.
Use the Featured Page Widget
So let’s add that widget to this area. I’m going to choose Builders Spec Home Design for my Page and I want to show the featured image. You have some choices here but we’re going to choose the featured image at 358 x 200 because that’s what it’s designed for. We’ll show the page title, page content, 200 characters and “Learn More” will be text for the link and save that.
Let’s go back to the page and refresh it and now you’ll see we’ve got that widget area in Home Bottom with the big image, the name of the post and the “Learn More” link. To add more of these we just need to repeat that process.
So again we’ll come and grab the Genesis Featured Page and this one will be Custom Home Design, use the featured image, grab the large one, show content and title with 200 characters and “Learn More” and save it.
Then one last time, Genesis Featured Page, Remodel, show featured image, show a title, show content, 200 characters and “Learn More” text and save it.
Let’s refresh this page and now we’ve got these 3 big widget areas with nice big images, text and links off to those pages. And it’s starting to look more like a home page.
Home Top Widget Area – Option 2
Something else that you can do with this Home Top area that it’s very specifically designed for is again using the Featured Page widget but instead configure it differently than we did in the Home Bottom widget.
Using the Featured Page Widget
Let’s come over to our Widgets and in Home Top we’ll remove the visual editor and just drop it down into the inactive widget sections. Then come back over and grab another Featured Page widget and put it in.
This time I’ll choose the Finished Project page. Check the Show Featured Image and instead of the featured image we’re going to use the Home Top image which is quite a bit larger and we’re going to make it left aligned. We’ll show the page title and page content. We’ll show 300 characters and let’s say “Check Out This Home” and save it.
Now, what should be happening is this link text “Check Out This Home” should be coming over here on the right beneath the 300 characters. The reason that it isn’t is because this image is not actually the big size. So what you really want in this case, is an image that actually fits the featured image size which is that 750 x 600.
So what I’m going to do here is come back over to this East Side Craftsman Home, I’m going to edit it and I’m going to choose a new featured image for it so you can see what it’s supposed to look like.
I’ll set the featured image and I don’t think I have anything that’s 750 pixels wide in the media library so I’m going to upload an image. Here’s one that is 800 x 600. Say okay to that and open. This is one of the reasons why you want to be mindful of your image sizes.
Amy asks, “Why aren’t bullets showing up on the home page?”. The reason is that is the style that Genesis 2 created for the home page.
So we set the featured image and then let’s come back to our page and update it. We’ll take a look and now you can see we’ve got this massive image that’s been cropped to fit in there. The text and link are in the right place now as well. This is very similar to the StudioPress demo example where there’s a big image but it’s got mostly white background. You can of course do something like that yourself.
Home Top Widget Area – Option 3
The third thing that you can do is use a slider and you can use any kind of slider really but I’m going to use the Genesis Responsive Slider here. It’s actually kind of cool.
Add a Slider (Genesis Responsive Slider)
Let’s go over to our Plugins and Add New. Search for Genesis Responsive Slider but again, any slider will work there. Anything that will go in a widget will go there without too many issues.
There’s the Genesis Responsive Slider. We’ll activate the plugin, come over and now under Genesis there are slider settings. It’s setup to show pages 25, 27 and 29 so that’s fine but you can choose whichever pages you want. Only show 3 of them. The maximum width of the slider here needs to be 1140 and we probably want to make it 400 pixels tall for maximum height.
We’ll display Next and Previous and display pagination. We’re going to display the post page title, display content, display excerpts and we’ll use “Continue Reading”. We’ll limit the content to 500 characters and we’re going to take the slider width to 40% and use the top right location. Let’s save the settings.
Before we can see that though, we have to come over here to Appearance and Widgets and in our Home Top take out the Featured Page and instead put in the Genesis Responsive Slider widget. Reload this. And there we go, we’ve got a nice little slider on our page.
Image Sizes for the Slider Should all be the Same
You can see what happens when we upload a larger image because what it does is it takes the full width of the full size image. So what you want to do then is to make sure that your full size images for these things are all the same size. In this case, they aren’t.
So what we’ll do is come back over and set the same size again. Let’s edit that page. You know that’s a little tricky because the slider here is dependent upon these images all being the same size. So the ones I’m using right now are 640 x 360. I’ll set the featured image, update, view it and there we go. We’ll be in good shape now.
So as long as all the images are the same size, the featured image is the same size, this slider works pretty nicely. You can scroll through it and if you click on the links or click on the image it takes you to that specific page.
Home Top Widget Area – Option 4
You can also create sort of a hybrid of this. We’ll leave the slider in place but add some text above it. Let’s come back over to widgets and add the visual editor widget to Home Top above the slider widget. Add a title and a little bit of text. Let’s save that and take a look.
Obviously that’s not how you want it to look so instead of having text in the title, let’s move it from there to the top of the content and make it an h2, that should be the right size here. And let’s center everything and I’m even going to bet you want a little bit of extra space so we’ll add the extra character above and make it white. Save that.
With this option you get a little bit of descriptive text, then a slider and then your featured pages followed by your footer area.