How to Add a Three Column Grid to a Page

Share this on:

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?

3 column grid for page or post

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.
    genesis layout settings
  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 Imagenew image sizes in post editor

  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

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

6 responses to “How to Add a Three Column Grid to a Page”

  1. Nadia Avatar

    Hi I tried this using your directions and it didn’t work.
    I wanted exactly the three column that you have in your example but my content text showed up on three separate lines, not in three columns.

    1. Marcy Diaz Avatar

      I’m sorry to hear that, Nadia. When you copy in the column classes and divs, be sure that you are using the Text tab and not the Visual tab in the Editor. That could be what happened.

  2. Nickesha Avatar

    Thanks. This article was straightforward and helpful. Although the columns don’t appear in the editor, it does appear in the preview.

    1. Marcy Diaz Avatar

      Thank you, Nicke! I add an editor stylesheet to client sites; you can see how in this post –
      Your WordPress WYSIWYG Editor Can Reflect Your Theme Styles

      1. Nickesha Avatar

        Awesome, thanks again! This has really been helpful. :)

  3. Michael Martone Avatar

    Works great. Thank you. I knew how to use the column shortcodes but somehow never got it to work they way I wanted. Great post. Very easy to understand.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.