Columns are basic website design elements. They allow you to display your content in chunks that are visually appealing. They allow you to create layouts that look like magazines and newspapers. But creating them can be tricky. It is possible to code them by hand, but that can require lots of adjustments for every single post. You can also create them using one of the many plugins, or even one of the many themes, that give you the ability to create your own layout. This article will discuss all three of these methods. Creating Columns in Code It is possible to create columns within your posts and pages using tables, but the ideal method to create columns is through HTML and CSS. The for WordPress show many advanced examples. Columns are actually easy to make in code. To create columns in the text editor use the tag along with a style attribute. Your content for your column 1 Your content for your column 1 Your content for your column 1 Your content for your column 2 Your content for your column 2 Your content for your column 2 This example of code creates two columns like this: You can change the size of the columns by adjusting the width and padding values. By adjusting the numbers you can create more or less space between the columns and change the width of the columns. To add more columns simply add another block of code. In this example, it was changed from 40% to 30%. For example: Your content for your column 1 Your content for your column 1 Your content for your column 1 Your content for your column 2 Your content for your column 2 Your content for your column 2 Your content for your column 3 Your content for your column 3 Your content for your column 3 This code would create two narrow columns and one wider column: Using this code you can create multiple columns on any page or post, creating a magazine or newspaper look. You can also layer them by continuing to add columns: I created the space between the lines by using a break tag between column 3 and 4: This is as simple as it gets for coding by hand. However, you still have to preview and make sure everything fits on your pages and posts the way you want them to — every single post. An easier way to do this in your visual editor is by using a plugin. Also, this only affects your posts and pages — not the site design itself. Plugins and Shortcodes Plugins do this coding for you. They give you choices so you can see how your columns will fit within the post. Some provide shortcodes that you place within your content. Others provide buttons or other additions to your visual editor, allowing you to make quick selections. Here is a quick look at some nice plugins. Type your content, and then in text mode highlight the portion you want to appear within a column, and select the column width. ET Shortcodes are responsive and extremely easy to use. It gives you access to all themes, plugins, premium technical support, perpetual updates, and layered Photoshop files. The Layout Builder creates a canvas for each post or page where you can drag and drop columns of various sizes. You select the columns from the menu. Once you have the layout the way you want it you can save it and reload it as many times as you want. You can also save the layout with the modules, so you can reuse it again. It gives you access to all themes, plugins, premium technical support, perpetual updates, and layered Photoshop files. Another plugin that will add columns is Advanced WP Columns. This free plugin has some nifty features. It lets you create columns with a simple interface without using shortcodes. It supports responsive layouts. It adds a button to your visual editor that brings up a screen where you can drag and drop your layout. You can choose between 2, 3, or 4 columns. Once you have your columns you can make adjustments by using sliders. The sliders will let you change the width of each column, and you can change the width of the space between the columns. This is easily done using the sliders on the screen. You can add your content directly into the columns in the popup if you want. You have the full range of textual features that you expect: bold, italic, underline, strikethrough, superscript, subscript, code, header, H2-H6, Paragraph, pre, link, etc. You can also place your content in the column within the visual editor. You can make any modifications to the content that you want from either the visual editor or the popup. The visual editor of course gives you more media features, so I find it the better choice. You can add images to any column. Instead of adding media as normal you have to give it the link, description, and dimensions. You can also set some defaults such as the container width, container CSS, and number of columns. This is an easy plugin to use and the pages look great. There is a user guide and a video tutorial to get you started. Not bad for a free plugin. This plugin adds shortcodes that work on both pages and posts. It adds a button to your visual editor. Clicking the button brings up a popup with lots of selections. Click on the row that has a layout that interests you and it adds placeholders to your text. Replace the description of the column with your text. Your content will be placed in the columns. If you want a different layout under this one you simply click the button again and select the row you like. You can click on as many rows as you like, but you have to click on them one at a time. At the bottom of the selection screen you can choose a single column width from a dropdown box. You can also add classes and styles. This is a nice way to easy add column combinations to your pages and posts. The only real downside is that you have to work between the shortcodes within your content. This can be a little confusing at first, especially if you have a lot of shortcodes within your text. Responsive Column Widgets This one also works with a shortcode. Unlike the others, there is no button to add them. It will let you place widgets in columns, so any widget you have can go anywhere you want. You create a widget box, add widgets to it, and then call them with a shortcode. You can set up the number of columns, number of widgets, number of columns per browser width, column span, and lots more. You can also write PHP code to display them in the theme template. There are lots of settings and it can take a while to work through them all. Setting them up is not as easy and intuitive as the others, but there are a lot more options. This is a drag and drop responsive page builder that adds buttons to your visual editor. You can add from 1 to 6 columns. It will also let you import or export your layout and you can even clone it for use in another page or post. This one is simple to use. I clicked to add 6 columns. This added 6 boxes that I could add content to. I could add CSS to each box individually. There are plus and minus buttons that allow you to increase or decrease the size of each column. You can also adjust the border, pattern, and margin. Clicking on the folder for the column opened up a box where I could choose from modules widgets to go in the column. After I was done with that row of columns I clicked on a cloning button on the left side of that row. This cloned the row and placed it under the first row. I could drag the rows and rearrange the order easily. I did run into an issue with saving my post as a draft. Every time I saved it, my content was erased. I had to give the post a name first. For sheer simplicity and ease of use, this one is hard to beat. Themes Using Shortcodes Many professionally designed themes come with shortcodes. Shortcodes allow you to easily use premade design elements without having to do any of the coding yourself. You can develop advanced layouts that include columns just by dropping a shortcode into the post. Shortcodes are one of the easiest methods to add columns without having to write your own code. Drag and Drop Other themes include options for designing your own layout. Many of them do this through drag and drop design elements. Here are a couple of examples. Divi has its very own page-builder built right in to the core of the theme. Using it, you can create pages with pretty much any kind of column-layout you want. You can load pre-made templates or you can use drag and drop to create your own layouts. There are a lot of premade layouts with lots of options. There are 11 different layout options if you choose to insert columns. Select the one that you want. Your columns appear in the layout you chose and you can start inserting modules. You can add as many rows as you want and give each one any layout of columns you choose. You can also go back and edit the layout and add or remove columns if you want. You can also drag and drop the rows. Divi is very easy to use and you can have a unique and professional layout in just a few minutes. Make includes a powerful drag and drop layout editor that allows you to create column layouts with a simple click. You can display between 1 and 4 columns in a section. Each column can contain a featured image or content. You can rearranged the columns by drag and drop. I installed this to try it out. When you create a new page you will have some layout options including one for columns. By default, there are three columns already placed. I added some images that I shot with my smartphone to each column and that was it. Using it was easy and straightforward. It is free for personal use on a single website. Wrapping Up Columns can really make your content pop. They can make your content easier on the eyes and visually more interesting. With so many good choices of tools to make them, anyone can have nice and elegant columns in their layouts. Have you used any of these methods to create columns? Did I leave out your favorite? Of course, opening a pop-up editor the way it does now would give more features, but it would be excellent to be able to just look a the layout in the designer and see the text inside an element and edit it. That would be something my clients would really love, because when I do a training session for a first timer, the page layout builder is a very difficult hurdle for them to conquer. This is the trick I am using: 1 create a page using Page builder facilities, 2 Change the post type from page to post using the Post Type Switcher plugin, 3 Back to page when necessary for modification layout or example. Not really simple but it works…. Which, again, is pointless. Thrive Themes also have a builder on offer. It looks like it is designed to work with only themes from Thrive Themes. Which is probably a good thing. Just wanted to quickly chime in here. But it is not as resposive as I want it to be. I think it need some update. It has some features Divi has not, like the intuitive sizing of elements. I like the prizing table much better than the divi one. I use it here: I also miss the possibility to copy elements. This is a feature of DIVI I really love. I hope the new version will make it easier to see a preview. Thanks for the great software. Its far beyond what I expect from a theme. The consistency makes it usable in daily live. I would like that the Divi page builder to have a user admin control based on user role. For instance, editor role could only change the content and properties of a page, but the editor would not change the layout of the page, like delete or move modules, columns or rows. This feature makes me think about change to page builders of others developers. I can invite you as a user if need be. Your WP text editor code to create columns is great and has solved a major issue for me. I am adding an image and a line of text underneath — so far so good. Any ideas what else I could try? It worked a dream. The only thing I struggled with was I wanted two columns just for the top part of the blog, then to revert to full width. Adding an explanation of how to do that to your blog might help other newbies like me. Congrats on the clarity of the explanations. I am helping a friend set her site up to gain experience. Could you suggest a link or resource to help me? Thanks a lot for sharing all this. But I have a question, about the last two solutions with drag and drop builder embedded in themes like Make and Divi. What if you want to change the theme? I thought we have to keep unbound the content and the theme in order to be able to change the theme when we want. Using a plugin to manage the colums allows to do it. It seems I can have one or the other. Even if I use the column code above, the second image always starts in the row where the text from the first image has stopped. Can anyone suggest anything?
