Skip to Content

The Best Ways to Create Columns in WordPress — Revealed

The Best Ways to Create Columns in WordPress — Revealed

By learning how to create columns in WordPress, you can get your message across clearer and your users can scan what you offer with ease.

Multiple methods can be harnessed on WordPress to create a multi-column layout.

Some are easy, some are fiddly, and some are basic HTML. Those may be a necessity though depending on the WordPress platform you use.

More styling can be done on self-hosted WordPress websites. But, even with free plans on WordPress.com, you can take advantage of columns.
 

How to create columns in WordPress

Using the block editor is as easy as adding a column block. Time-consuming but very effective for complex layouts. Using the Classic Editor, the Shortcodes Ultimate plugin makes light work of adding columns. An alternative is using HTML for columns only, or HTML tables for columns with borders.
 

Add Columns to your WP theme using CSS and HTML 

The WP theme customizer simplifies editing your theme stylesheet.

Go to your Appearance menu, select “customize”, then “Additional CSS”.

Insert the following:

.column-left {
float: left;
width: 33.333%;
}

.column-right {
float: right;
width: 33.333%;
}

.column-center {
display: inline-block;
width: 33.333%;
}

Then in your WP editor, use the “text” editor and paste the following HTML…

<div class="container">
<div class="column-left">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-center">
<h2>Insert column title</h2>
Your content here.
</div>
<div class="column-right">
<h2>insert column title</h2>
Type your text in here.
</div>
</div>

The CSS customizer adds the code to your theme stylesheet. Once added, use the HTML to insert columns.
 

Create complex column layouts with ease using the WP block editor

There is a block bundled into Gutenberg for creating column layouts.

Click the + icon, type in “columns” then select the columns block. Next, select the layout you want. There are five options to use up to three columns, just with different widths.

Next is to set up your content within the block.

As this is the block editor, everything is controlled by blocks. The fastest way is to add the paragraph block, bold your column title (if you are using titles), then type in your content for the column.

Alternatively, you can build blocks within blocks.

Add a “heading” block, then a paragraph block, or a text and image block. Design your columns to your liking.

As an example, the layout below is using a two-column layout (70:30) to display the about us content on the left with the images aligned to the right.

The images are inserted in the second column with two columns of 50:50 stacked beside the paragraph block.

The blocks editor does make it easier to design complex layouts with columns.

Creating a layout like the one shown above would be time-consuming to code manually with CSS and HTML.

For complex column layouts, it will help to use the block editor.
 

Use the WordPress Shortcodes Ultimate Plugin

The Ultimate Shortcodes plugin is jam-packed with content styling options. Suffice to say, columns is one of them and you can get up to five columns to show on a desktop display.

Go to your plugins page, click add new and search for Shortcodes Ultimate.

Once installed and activated, a new button appears in your WordPress editor screen beside the “add media” button. Clicking that will load a screen with all available shortcodes.

The columns are a free feature. Shortcodes with a red icon are premium. The others are free.

Select the columns, then follow the instructions to style them however you like.

Using the custom CSS they provide on their website, you can add that to your custom CSS on the settings page for the plugin, then add columns with text inside buttons.

Placing this in the text editor…

<h2><span style="color: #ff0000;">Learn More</span></h2>
About Us
Services
FAQs
Feedback
Pricing

Where the “1/5” is in the shortcodes above, those numbers control how many columns are inserted. Use “1/3” for three columns. 

And of course, if you do use the buttons, you can link the text to go to the pages you want your visitors to go to.

As it is shortcodes, those can be put anywhere on your site. No fiddling around with CSS is required.

If you do not want to add plugins or use the block editor, or if you use WordPress.com, you can still take advantage of columns, just with far less styling and customization…
 

How to create columns in WordPress with HTML

For users of WordPress.com without access to the CSS customizer, HTML within your WordPress editor is the only way to create columns.

HTML is still popular despite being one of the more (ahem) mature computing languages. It gives you the basics for a multi-column layout. Just without fancy styling.

If you are content to have columns without any borders, backgrounds, or content boxes surrounding blocks of text, HTML is the way to go.

In your WP editor, click the text tab to edit your content with HTML and insert the following:

 <div style="width: 33.3%; padding: 20px; float: left;"> 

Three HTML elements control your column layout.

The first is the width. The max-width on any theme is 100% to take up the full size of a screen. For desktops, if you want four columns, you would change the width to 25%. 25 times 4 is 100 so 25% gives you a four-column layout.

The padding is the spacing between the columns. Otherwise, it would be difficult to tell where one block of text ends and the next begins.

The last part is the float element. This is used to float the columns to the left or right of the page.

Each part can be changed to the size of the columns you need. For example, if you only wanted two columns, you would set the width to 50%.

<div style="width: 50%; padding: 20px; float: left;">Your content here</div>
<div style="width: 50%; padding: 20px; float: left;">Your second column content here</div>

Create an HTML table to add columns with borders in WordPress

Another way to add columns without requiring CSS edits is to create a table in HTML.

The following HTML code creates a two column table

<table style="width: 100%; height: 48px;" border="”5″" width="”1200″" cellspacing="”50″" cellpadding="”50″">
<tbody>
<tr style="background-color: #fff73f;">
<td style="text-align: center; height: 16px;"><strong>Column Title </strong></td>
<td style="text-align: center; height: 16px;"><strong>Next column title</strong></td>
</tr>
<tr style="height: 16px;">
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
<td style="height: 300px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra venenatis urna, sit amet venenatis erat sagittis sit amet. Donec sit amet sollicitudin elit. Cras ultricies hendrerit arcu, id blandit lacus feugiat non.</td>
</tr>
</tbody>
</table>

Similar to creating columns with no borders in HTML, the sizing of HTML tables can be adjusted by changing the width and height. As can the background colors.

To create a table in HTML in WordPress, set the “table style” first then drop into <tbody> to load the content.

The <tr> is for “table row”. The <td> is for “table details”.

Column titles are set in the row. Use the table details <td> area to insert paragraphs of content inside a column.