In the old days, prior to the birth of WordPress, a homepage design layout was completely different than what it is now.
When I first started, websites were done in HTML only. Most had 3 columns and the whole website was pretty narrow, which resulted in lots of very crowded pages. Menus would go on and on with many sub-items. Links were this bright blue for active, red for hover and purple for visited, no matter what the site’s color scheme was! I cringed every time, it was an assault to my ‘creative’ side. 🙂
There really was no specific homepage design, no layout planning. Just a lot of blah blah text. And of course nothing was ‘responsive’ then because well cell phones and tablets didn’t exist. Wow! I’m really showing my age here.
Where is my homepage?
The scenario: I had set up and designed a new WordPress site for my friend/client. A few days after it went live, I received an email from her asking this exact question, word for word, “Where is my homepage?”
She wanted to change a bit of the text on the homepage but couldn’t find it in her list of pages in her WordPress dashboard. So I explained that, unlike her other site which uses a static homepage, this one uses widgets to create the different sections of the layout.
How to create your homepage design layout with widgets
Widgets gives you lots of possible configurations, especially when you install one of the latest Genesis themes, because they have what we call ‘flexible’ widgets, mostly 7 to 9 in total. Of course, you don’t have to use all of them, but it’s important to know they are designed to resize automatically depending on the number of widgets in each homepage section (blocks where the widgets are added to).
Disclosure:This blog post contains affiliate links, which means that I will earn a small commission if you click through and make a purchase, but at no additional cost to you.
It’s easier to understand visually.
Let’s take as an example the Refined Theme from Restored316 which has a slider widget at the top, 5 front-page sections as seen on this picture below, a ‘latest from the blog‘, an Instagram feed section and finally the footer.
Note that the front-page sections background color alternate for a nice effect and easy for us to see where they are.
In each section, you add the number of widgets you want, depending on the homepage design layout you need.
Front-Page Widget Configurations
Here is a guide showing you the number of widgets needed for each configuration.
If you look at the Refined demo again, in front-page 1, you see the 3 blocks for About, Shop and Blog. To achieve this layout, you must use first a blank text widget so that you can show the 3 widgets, just like the configuration shown above for 4 widgets.
Under these 3 blocks, there is an optin form which is not part of the section but a different widget called Wide Site CTA and this one will show in that position on the homepage, bu on all the other pages of the site it will show just above the footer. This is how this theme is designed.
This homepage design layout includes e-commerce
This theme is also compatible with WooCommerce for those selling products. The front-page 2 section features 3 and a widget called WooCommerce products would be available. But if you’re not, you can use this section to add pages or posts or a text widget.
Other options for your front-page sections
From the demo again:
The front-page 3 is using the 3 widgets configuration, one for the title and 2 under it for a video and text.
The front-page 4 is configured with 4 text widgets, one for the title and 3 under it for the services.
The front-page 5 is for the testimonials. It is using a simple text widget, with a title and some text. Then the testimonial rotator plugin is dragged in that widget.
Hope this post helped you understand better how a Genesis theme homepage is designed.
If you need help planning your own, I have a FREE GUIDE HERE for you.