How to Add a Three Column Grid to a Page

Updated on December 21, 2018

There are many WordPress themes that use three (or more) widgets or widget areas across the home page, for blog posts, featured pages, or for a portfolio. These are generally styled by the theme. But what if you want to add three sections across to a regular page or post, perhaps for listing services or a price list?

This tutorial will show you how to add a three-across grid to a page with an image, a title, content, and a link, using column classes. You can also use any additional theme image sizes that you added to the post editor previously.

Genesis child themes have column classes that help with the theme layout. You can use the theme column classes in your posts or pages. If you’re using a theme that does not have the column classes, you can use a plugin, such as Genesis Easy Columns or Grid Columns. Genesis Easy Columns works in all themes and adds buttons to your post editor, so that you can add the Genesis column classes as shortcodes without switching to the Text tab. You can read more about using Grid Columns to add shortcodes for columns.

Step 1: Create a Column Grid

The first step is to create a column grid with code or plugin shortcodes. For this step, you will want to click on the Text tab in the post editor.

1. If you have an option to choose a full-width page template, do so. For Genesis themes, there are Layout Settings below the editor window to select your page layout. Choose the last image; usually it’s the full-width layout.
   
2. Copy the code below and paste it into the post editor (when on the Text tab)
3. Click the Save Draft button.
4. Now you can switch back to the visual editor.
5. Note that you will replace “Content” with your services information.

<!-- Add HTML below to post editor using Text tab -->
<div class="one-third first">Content</div>
<div class="one-third">Content</div>
<div class="one-third">Content</div> Add HTML below to post editor using Text tab -->

Step 2. Add an Image

1. Place your cursor just in front of “Content”. Use the Add Media button to choose an image size that will fit in one-third of your post width.
2. For Genesis themes, you can choose one of the home page image sizes. If you followed the example for Executive Pro theme last week, you would choose Home Size.
3. You can choose any alignment, you like; usually Alignment > Center or None.

Step 3. Add the Title Text

1. Next space your cursor down to a new line.
2. You can add the title for your services.
3. Make it a Heading using the Editor drop down.
4. H2 or H4 are good heading sizes for your titles.

Step 4. Add Some Text

1. Space your cursor down to a new line.
2. Now you can add your text.
3. You might want to make the text in your three columns about the same length, but doesn’t need to be exact.

Step 5. Add a Link to Another Page

1. Space your cursor down again.
2. This time add some text that will link to another page.
3. Go ahead and delete the word “Content”, if you haven’t already.
4. Use the link icons in the editor to link to your page.

Step 6. Add Some Styles (Optional)

The three-across grid should already look great because all the styles needed are already in your theme (or the grid plugin).

If you want to add a border, and some extra padding, you can add the CSS below to your Custom CSS editor or to your style.css. You can make the padding number bit larger, and you can change the border width (1px) or color (#ccc)

.one-third {
  border: 1px solid #ccc;
  padding: 10px;
}

Of course, you can add any other styles that you like.

You may need to add and additional class to your column classes, if you add extra styles, to keep those styles from altering the display of other pages.
In that case you would add a .services class (you can use whatever you like.), and the HTML would be:

<!-- Add HTML below to post editor using Text tab -->
<div class="one-third services first">Content</div>
<div class="one-third services">Content</div>
<div class="one-third services">Content</div>

And the CSS would be:

.one-third.services {
  border: 1px solid #ccc;
  padding: 10px;
}

Step 7. Add Some Styles to the WordPress Editor (Optional)

If you want your WordPress editor to reflect the column styles, you can add an editor stylesheet to your theme.
Just follow along with
Your WordPress WYSIWYG Editor Can Reflect Your Theme Styles