How to Create Columns in WordPress Pages or Posts
Sometimes, when you’re adding content to a page or a post, it may look better to create a more complex layout. For instance, what if you don’t want paragraph after paragraph of content spanning the full width of your page? What if you want columns more like a magazine? If so, you’re in luck! It’s easy create columns in WordPress pages or posts that will impress your site’s visitors with a more polished experience.
Our Case Study: Nonprofit 5k
The screenshots below were taken from an Evermore nonprofit customer that raises money for children through 5k running races. On their registration page, they had a lot of information to communicate and asked our support team how to organize it more effectively. We will be using this as an example for the rest of this help article. This example uses pages, but the same steps apply for posts (and other types of content) as well!
Step 1: Activate Genesis Columns Advanced
Navigate to Plugins in your admin area and ensure Genesis Columns Advanced is activated.
(For non-Evermore users: you’ll want to follow the installation instructions instead.)
Step 2: Use Shortcode to Create Columns in WordPress Pages or Posts
Shortcode may sound technical, but don’t worry, no coding is required. While logged in to your admin panel, navigate to the page that you would like to add columns.
In the formatting tool, all the way to the right, click on the columns icon.
In this example, they selected a two column shortcode layout. By doing the same, WordPress automatically creates the following shortcode for you and it looks like this:
[one-half-first]Place your content for the first column here.[/one-half-first]
[one-half]Place your content for the second column here.[/one-half]
Step 3: Insert Your Content
As you can see in the bolded section of the above shortcode, you place your content within these parameters. You’ll want to place your content (text, images, video) where the bold instructions say to do so.
It’s really that simple. Don’t forget to update / publish your work! Let’s take a look at how it looks on the back end and on the front end.
Left Column: Editing View
The information in yellow was placed directly between the following shortcode:
[one-half-first]Place your content for the first column here.[/one-half-first]
Left Column: Display View
The text for When, What, and Who now appears on the left side of the page.
Right Column: Editing View
The information in yellow was placed directly between the following shortcode:
[one-half]Place your content for the second column here.[/one-half]
Right Column: Display View
The text for Awards, Early Packet Pickup, and T-Shirts now appears on the right side of the page.
You’re done! The same principle applies to any number of columns you add.