What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Create WordPress Column Layout

How to Create WordPress Column Layout

As the basic design elements, columns give you more flexible layouts for blog posts and pages. Although multiple-column layout is great for magazines and newspapers, you can take advantage of them to make your blog content eye-catching. In this guide, we will outline the process of how to create WordPress column layout using both coding and plugin methods.

Add Multi-Column Content Using CSS?

Perhaps the most ideal way to create multiple columns is via HTML or CSS code. In this example, the “div” tag and a style attribute are used to create WordPress column layouts in one single post/page. To display your content in two columns, you can use the following configuration code in the Text editor.

<div style="width:30%; padding:0 10px 0 0; float:left;">
Blog Content in Left Column #1
Blog Content in Left Column #1
Blog Content in Left Column #1
</div>
 
<div style="width:30%; padding:0 10px 0 0; float:right;">
Blog Content in Right Column #2
Blog Content in Right Column #2
Blog Content in Right Column #2
</div>
 
<div style="clear:both;"></div>

The above HTML code can create two columns like below:

Add Multi-Column Content in WordPress Through with Code

It is also possible to tweak the size of your columns by reconfiguring the padding and width values. Also, you can adjust the numbers to specify the column width and space. To create three columns, just insert another block of code. Be sure to change the width percentage accordingly.

Utilize the Advanced WP Columns Plugin

The plugin method is meant for new starters who have little experience working with CSS/HTML code. Here, we’re going to take the example of the Advanced WP Columns plugin to generate multiple columns. Note that, its simple user interface allows you to make quick selections and add useful elements at the touch of a button.

Advanced WP Columns

Download & Install Advanced WP Columns

The first step is to enable this “Advanced WP Columns” plugin in WordPress. To do so, simply download this plugin via the above URL and then upload it through your “WordPress Uploader”. To get more installation details and methods, just refer to this WordPress plugin installation tutorial. If done correctly, this WP plugin will be added to the “Installed Plugins” as below.

Download & Install Advanced WP Columns

Create Multi-Column Content in a Post

To proceed, you should enter a post edit screen by jumping into “Posts” > “Add New” as follows. In the “Visual” editor, there will be a new “Advanced WP Columns” option. If you click on this button, a highly-customizable user interface will appear onscreen. From this pop-up window, this plugin gives the options to “Add”, “Remove” and “Resize” your columns. For a better understanding of those functions, we will explain them in detail as follows.

  • Add two/three/four columns – just press the “Empty” button to create two, three, four and pre-made columns layout. Of course, you can drag and drop this blue “Add” button to add more columns.
  • Remove the existing columns – just drag and drop this red “Remove” button to the below column bar to delete your unneeded column.
  • Resize the width of columns – just move the sliders on your column bar to resize the space width between columns.

Create Multi-Column Content

Apart from that, the column content can also be personalized via the formatting options. For instance, you can adjust the text formats, choose between various colors and insert images based on personal indulgences. Once done with all customizations, just click the “Add Columns” button to place them within the “Visual” editor.

Add Columns to Post

Make Advanced Settings to this Plugin

To view and edit more options related to the default columns theming and other settings, you should go to “Settings” > “Advanced WP Columns” from the WordPress dashboard. As is shown, you will be able to modify the full width of all columns, choose the “Initial Structure” and enable “Responsive Layout” with little extra effort.

Advanced Column Settings

If needed, you can choose to display only one column per row when the screen width is smaller than the specified “Resolution breaking point”. Also, there is an option to define the space percentage of each column after the resolution break. Beware that, the optimal column “Resolution” and “Occupation” are 1024 and 80% respectively. Do check the bottom “Save Changes” button at length.

Utilize the WP Easy Columns Plugin for Web Contents

This is the typical plugin used by many newbies to achieve a magazine style or grid design to layout their web contents via the simple shortcode that will be generated automatically. One of the main highlights of this plugin is that you can choose among more than 30 unique column variations on any of your post and page. In addition, the WP Easy Columns plugin works fine with any theme so that you do not need to worry about the compatibility issue.

By default, this plugin will achieve a responsive design for your column layout with the standard percentage of width and margin after analyzing your webpage. However, it is possible that you want to control over the column width and margin based on the pixel or percentage level. If so, you need to click the Settings button and then the Easy Columns button in your WordPress admin panel. Here, you can enable the custom column options by deciding these two aspects freely.

Custom Column Options

Add the Columns

Now, you can start adding the column to better display your contents. Here, you need to open an existing article or create a new one. In the toolbar of the visual editor, there is a special Easy Columns button available. Just click it.

Here, you can choose a variety of column combinations. In our example, we pick up the typical 1/3, 1/3, 1/3 option. This way, you can display your content using 3 columns, each of which is about 33% in width of the container.

Easy Columns Button

In addition, you can choose to insert the single column that takes up half, a quarter, three quarters or a third of the whole container. There are 9 options for you to choose.

Now, you can click the Insert button, and then, replace the words of “Third Column” with your true contents in the shortcode. Check the final result of this example in the following.

1-Column Example

Utilize the Responsive Column Widgets Plugin for Widgets

In addition to the blog content, some of you may also want to create a custom-column widget box that can be shown on your posts, pages, the footer section and sidebar. If so, this plugin is just your choice that helps you easily display all your wanted widgets horizontally using a grid system.

Based on the installation, the Responsive Column Widgets plugin automatically creates a widget box with the proper label, sidebar ID, description and tag. In this case, you can directly go to Appearance > Widgets in your WordPress admin, and then, drag your wanted widgets into this special box for display.

Responsive Column Widgets Plugin

After that, you can click the Responsive Column Widgets button from the same drop-down list, and then, hit the Manage button from the main menu. Here, you can find your existing widget box, along with the required shortcode to be displayed.

Widget Box

If you do not want to make any further modification, you can directly copy the generated shortcode to your preferred location to showcase these widgets in a column layout. In the following, we’d like to display a 4-column sample with the widgets of affiliate, recent posts, recent comments, calendar, categories, tag cloud and search.

Responsive Column Widgets Sample

Customize the Widget Box

If you want to customize this widget box, you should edit it. In the edit page, you firstly can modify the widget box. Personally, we suggest you keeping all the fields of this part unchanged, for the default values are properly determined by this plugin.

Next, you should decide some parameter values of this widget box, such as the total number of columns, the maximum number of rows and widgets, the order of the omitting and show-only widgets and the spans of the columns.

Widget Box Parameter Values

Here is a note that you can set the different number of columns for each row. For instance, if you want to showcase 4 widgets in the first row, 2 widgets in the second row and 3 widgets in the third row, then, you need to enter the value of “4, 2, 3” in the right field.

In addition, you can also decide the style of this box for the background color, paddings and the maximum width.

Custom Box Style

Besides, this plugin allows an auto-insert function. If you turn on it, these widget columns will be inserted automatically to your preferred areas and positions. But personally, we recommend you to think twice before enabling this function.

Auto-Insert

Author

Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. This girl is popular among our readers as she is outgoing and energetic. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *