Dividing part of a post/page into columns is becoming more and more common. Unique layouts can be achieved; providing a more stimulating visual experience.
Using column shortcodes, however, can often be a fairly tedious task. Remembering which shortcode and the proper format to use can be cumbersome. Instead, we decided to create an editor button which will negate the “guessing game”.
Enabling the Button
The first step is to ensure the Column Shortcodes button has been added to the button arrangement; and saved.
Next, visit the post editor and click the new button. Inserting a set of column shortcodes is a three-step process:
- Select the number of columns.
- Select the column sizes.
- Insert column shortcodes.
Select Number of Columns
When first clicking the editor button, an overlay window will open where the first option will be visible. Simply select the number of columns which will be created.
Select Column Sizes
Once the number of columns has been selected; a new option will become visible asking for the column sizes.
The available column sizes (based on the number of columns) will auto-populate. As a column size is selected; a preview will display illustrating how the columns will appear.
Inserting Column Shortcodes
After the number of columns and column sizes have been selected; it’s time to “Insert” the shortcodes into the content editor. Clicking the “Insert” button will insert a template into the editor, where the content of each column can be adjusted.
Shortcodes in Editor
After the shortcodes have been inserted into the editor; the placeholder text (“CONTENT”) inside each set of shortcodes should be adjusted. Anything can be inserted into a column shortcode area including lists, images and links.
Finally, preview the results to see the new columns inside the post.