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 displaying your content in multiple columns 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:
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.
Display in Multiple Columns Using WordPress 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.
Download URL: https://wordpress.org/plugins/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.
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.
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.
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.
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.