To display content in areas other than the main content area of a page or post, you can put widgets into widget areas.
For instance, the sidebar is a widget area.
So to put some content in to the sidebar you could drag a text widget into the sidebar widget area. Then configure that particular widget. For a text widget you simply type text into the text widget and that text will display in your sidebar.
Widgetized Home Pages
The front pages of many Genesis child themes are built from widget areas. See these examples…
- Example One (does NOT use a Flexible Layout Grid)
- Example Two (does use a Flexible Layout Grid)
- Example Three (does use a Flexible Layout Grid)
If you go to…
Dashboard > Appearance > Widgets
You might see a list of widget areas with names such as…
- Front Page 1
- Front Page 2
- Front Page 3
- etc.
Your theme might use the term Home Page 1 instead of Front Page 1 to name the widget areas. You should be able to tell from the names of the widget areas, if your home page design or layout is widgetized. Just look for home-page-1 or front-page-1 widget areas etc.
Building your own front page layouts
There are two basic ways to build grid type layouts for your Genesis powered site.
Flexible Layouts
These are special widget areas used in some modern themes.
Normally if you put more than one widget in a widget area the widgets display one on top of the other in a single column.
But with a Flexible Layout the widgets display in a nice grid layout such as this…
Flexible Layouts are a great way to build nice looking front pages fast. But they have one big limitation. You are stuck with the grid options that the designer built into the theme.
But there is another option…
Genesis Column Classes
You can build your own grid layout inside any widget area or web page using some very simple HTML code, Genesis Column Classes.
Using column class HTML you can stack one row of divs or boxes on top another. So for instance you could start with a full width row containing a headline. Then divide the next row into two boxes each containing an image and some text. Then below this add another row containing three or four boxes etc.
The grids you build would look like the graphic above. But using Genesis Column Class HTML you design your own layout grids exactly the way you want them.
You can use column classes in a flexible layout
What if you really want a different layout option to a flexible layout that came with your theme. First add a single text widget to any widget area in a flexible layout. Then use column class code to build a grid layout inside that text widget. But remember, if you add more than one text widget to a Flexible Layout, the automatic code will kick in and start to build the flexible layout grid.
Column Class Code
The HTML code you need to build layouts using column classes is quite easy to learn. And once you’ve learned how to build these grid layouts you have much more control over the layout of all of your pages. Not just the front page.
CSS Styling
You can add CSS styling to Flexible Layouts. You can also style individual divs inside a column class layout.
One easy way to add a CSS class (styling) to a widget inside a Flexible Layout, is to use the Widget CSS Classes plugin.
After installing this plugin, a text box appears at the bottom of every widget you use.
Just type a unique class name in the appropriate box at the bottom of the widget and then add style via a CSS class to your CSS style sheet.
Adding styling to HTML column classes
You can easily assign a style to any HTML div by using the class= option. This gives you just as much control as you get using the plugin, if not more. And the code you need is quite simple.
Do you need to learn CSS?
There is a great premium plugin that writes the styles for you. Click here to find out more.