A useful shortcode is the
[columns]...[/columns] shortcode. This shortcode creates invisible columns on the page that can be used to easily arrange content (images, text, etc) into columns and rows.
[columns]...[/columns] shortcode can use as many columns as you need, and multiple columns can be placed on a row.
Below are a couple of examples of columns being used in a post:
Initial columns shortcode setup
Add columns to your post or page by placing the shortcode in the visual editor. The below screenshot outlines an example of a basic
[columns col=2]]: This starts the first column. Content in-between the starting
[/columns]tags will be in the first column. The
col=2part is used on the first column tag and specifies how many columns are in a row. In this case, there are two columns lined up in a row. The
col=part only has to be used in the first column.
[/columns]: Ends the first column.
- Another set of opening and closing
[columns]shortcode tags. Content in-between these tags will be in the second column.
[columns end=yes]: Ends the set of columns. Include this tag once after using the above columns shortcode to ensure that layout for the rest of the post is unaffected.
Filling in the content
First decide where you would like your content (text, images, etc) to go. The columns are arranged in order by how they are placed in the body of the visual editor.
Using the same
[columns] set up from above, add a photo to the first column and some text to the second column. The shortcode and content should look something like this:
Previewing our page shows that the image is in the first column, and the text is in the second column next to it:
Adding more rows
We can add another row of content by adding in two more sets of opening and closing
[columns] tags. Be sure to add them in before the
[columns end=yes] tag.
Previewing the page, we can see that the added columns are underneath the first two:
Changing the number of columns per row
But what if there needs to be a different number of columns per row? Simply adjust the
col= part of the very first opening
For example, if the tag is
[columns col=4], then the end result looks like this: