Custom Home Page

If you’re like me, you’ve been drooling over the latest refresh by Team Gardner/Tomal.

The design isn’t out just yet, but let’s setup that custom home page layout for you to use with any other Genesis Child Theme.

First, Eric’s Explanatory Video

Now that we understand how the process works, lets walk through it together. You are welcome to skip to the end of the post and download the zip file for importing into the Extender Plugin for Genesis.  Just be sure to unzip the file and then import the .dat file.

Build a Foundation

First thing, you need to go to Extender Settings –> Top of the Left Column, you will find:

Toggle the Genesis Extender Static Homepage on and then choose the type of homepage you want. For this example, we are using the Full Page Option.

Now the extender plugin has control of your home page.

The layout for the home page:

• Slider
• 3 boxes
• Call to action area
• 3 boxes
• 3 Footer Widget areas

Create the widget areas

Left hand navigation of WordPress –> Genesis –> Extender Custom –> Custom Widget Area –> Click “Add” Button

Couple parts to fill in when recreating this example:

1. Widget Area Name (Make it easy to remember where it is later)
2. Turn it into a shortcode using the dropdown on the right
3. Add classes to the widget areas (Column Class CSS is included below for your convenience)
4. Save

Reminder, in this example there is no need for the custom conditional or choosing a hook area since the Custom Widget Areas are being used as shortcodes.

Build Your Homepage

Choose the Hook Boxes tab to the right of the Widget Areas tab.

Build your layout for your custom widget areas using the shortcodes, simply wrap your custom widget area name with [ ], aka square brackets.

Since you added the column classes, there is no need to add html markup to this area, simply add the shortcodes into rows.  Attach your Hook Box to the genesis_extender_home hook in the Hook Dropdown. Click save.

[slider-area]
[home_top_left][home_top-center][home_top_right]
and so forth, depending on what structure you chose for your layout.

Column Classes CSS

/* Column Classes */
.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin: 0 0 20px;
padding-left: 3%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48%;
}
.one-third,
.two-sixths {
width: 31%;
}
.four-sixths,
.two-thirds {
width: 65%;
}
.one-fourth {
width: 22.5%;
}
.three-fourths {
width: 73.5%;
}
.one-fifth {
width: 17.4%;
}
.two-fifths {
width: 37.8%;
}
.three-fifths {
width: 58.2%;
}
.four-fifths {
width: 78.6%;
}
.one-sixth {
width: 14%;
}
.five-sixths {
width: 82%;
}
.first {
clear: both;
padding-left: 0;
}

Pro tip, when you create a single column row (like the Call To Action Widget Area) give it the “first” class as this clears the div and prevents some wackiness in the HTML.

In Conclusion

Once you have your Custom Widgets created, you have set them as shortcodes, and added the shortcodes to your custom hook box; now its time to add your widgets to your widget areas. Of course, you have the Front-End CSS Builder to style the components of your home page to your liking.

Copy and paste this Custom CSS into your Custom CSS Editor, to add an equal amount of bottom margin to the single columns:

.first {
margin-bottom: 20px;
}

Shortcut

Click here to download the import file for this home page setup. (Please Note: It’s always a good idea to Export your current settings before Importing the ones provided here. Though they should not overwrite your current settings, better safe than sorry.)