Once you’ve written and then prioritized the content you want to display on your home page. You need to decide how you want to layout the page.
Flexible Layouts
If your theme has flexible layout code built in to the home page widget areas, just drag (up to nine) widgets in to any one of the home page widget areas.
I often use calendar widgets to discover what the grid looks like. Each time I add a calendar widget I look at the home page of my web site and see how the grid displays.
The image below shows the available grid layout options for Altitude Pro theme.
Other themes that have flexible layouts might have slightly different layout grids.
And many older themes don’t have flexible layouts at all.
Some real world examples of layouts you might want to build
This example uses four widgets. One Text Widget above Three Genesis Featured Post Widgets.
Headline in Text Widget
Three important widgets
I hope you’re starting to understand why it’s important that you are confident and competent using three commonly used widgets…
- The Text Widget
- Genesis Featured Post Widget
- Genesis eNews Extended Widget
Once you really understand how these three widgets work, you can build all kinds of good looking layouts.
But remember, to do this your theme must have a Flexible Layout Grid built in to the home page.
Let’s look at another real world example
Three widget layout…
- Text widget containing a headline (top).
- Text widget containing an image (left hand).
- eNews Extended widget for mailing list signups (right hand).
A Six Widget Layout…
- Text widget containing a headline (top).
- Four Featured Post widgets (middle).
- Simple Social Icons widget (bottom).
Remember, there are many different ways to configure the Genesis Featured Post widget. You can…
- Include or exclude the featured image.
- Set image and text alignment.
- Include or exclude headline and paragraph text.
- Set the number of words to display in the excerpt or snippet.
- etc.
If you experiment with the Text widget, Genesis Featured Post widget and the Genesis eNews Extended widget you’ll soon find all kinds of good looking layouts for your home page.
The next layout uses five widgets…
Start with a text widget containing the main headline (top).
Then add four more text widgets that each contain…
- A Font Awesome Icon.
- A headline.
- A short paragraph of text.
- And a button.
Background photos and background colors
The Altitude Pro theme is typical of the look many small businesses want.
The front page of Altitude Pro has four photo background sections, two white background sections and one light grey background section.
But with a bit of tweaking to the CSS you can make any row or section any color you choose.
For instance you could make a blue background with big bold text like this…
White text on a black background can also be effective, in moderation.
The important points in this post are…
Think about the three important widgets
- Text widget
- Genesis Featured Post widget
- Genesis eNews Extended widget
Then look at your content. Work out which widget will display each piece of content most effectively.
For instance if you want to link from your home page, to your most important pages or posts inside your site. Use the Genesis Featured Post or Genesis Featured Page widget. The featured post and featured page widgets are very similar to each other.
Another very popular look is to place an icon above a headline. Then place a short paragraph of text and a button just underneath. The Text widget would be ideal for this layout.
And almost everyone wants a sign up form for their MailChimp email newsletter. The Genesis eNews Extended widget is perfect for this.
Once you really understand the simple but vitally important concepts I outline above, you’re ready to move on to start building your own front page layouts using Genesis Flexible Layouts.
BUT! Don’t forget. To do this your theme must have the column class code built in to make this work. I use this theme for a lot of the examples on this site because it’s a great starting point for building a typical freelance or small business website.
The planning is over, it’s time for action
Go to my video tutorials and follow along as I make some common layouts for different Genesis Child themes.