How to Add Multi-Column Content in WordPress Posts (No HTML Required)

Using tables is a popular way to add multi-column content layouts in WordPress websites. However, you will need a solid grasp in HTML and CSS to do that. Does this mean you won’t be able to create multi-column layouts without knowing HTML and CSS? Not necessarily. You can still create these layouts without writing a single line of code. Today, I will show you how to do that.

Creating Multi-Column Layouts

In order to create a multi-column layout, we will use a free plugin – Advanced WP Columns. Download and install the plugin. After Activating the plugin, go to the editing screen of a post or page. You will notice a new button titled ‘Advanced WP Columns’ in the visual editor toolbar.

Clicking on the new button will open a new pop-up window like the following:

Advanced WP Columns comes with some default layouts. In order to use the default layouts, click on the ‘Empty’ drop-down menu. This will reveal a menu with options like Two Columns, Three Columns, Four Columns, etc. If you select Three Columns, the content editor will be divided into three columns like the following:

In the default layouts, the width of all of the columns is exactly the same. If you want to change the width, drag the handle on the column bar. As you drag the handle, the final width will change automatically. You can also add text in the columns from this window. The plugin offers some formatting options along with text color, inserting links and images.

Creating Custom Layouts

If you don’t want to use the default layout or want more columns, you can create your own layouts too.  To do that, drag the ‘+ Add’ button to the handle bar and drop it. Then, adjust the width by dragging the handle. By doing this, you can add more than four columns in your layout. To remove a column, drag the ‘- Remove’ button on the column. You will be asked for confirmation, click ‘OK.’

Once you have your columns organized, click the ‘+ Add Columns’ button. This will automatically bring the layout into the WordPress content editor.

Setting up Advanced WP Columns

In order to change the default options and other settings of the plugin, go to Settings > Advanced WP Columns from your website dashboard. You will be provided with a page like the following:

‘Container width’ lets you define the full width of the columns. The next one lets you change the default initial structure. For instance, if you want to load Advanced WP Columns with two columns, select ‘Two Columns’ here. Then, you will find options to enable responsiveness of the layout, select the breaking point and paragraph formatting. If you want to apply some styling on the container, column or the gutter, provide the CSS class name in their respective fields. Once you have made all the changes, click ‘Save Changes.’

So, that’s how you create multi-column layouts in your WorPress website without writing any HTML or CSS code. Let me know if you have any questions about using the plugin. Also don’t forget to share your experience after using Advanced WP Columns.