Shortcodes – Make Columns

Adding columns can be used for a variety of things, starting with simply creating columns in your page for additional content, or it could be for creating icon boxes within your post or page where you need them to be laid out in columns. 

shortcodes editor

In the screenshot above, you will see the first icon on the row. This will allow us to generate columns, either preset columns or custom columns based on our own preference. 

Step – 1

For this example, we will create a 3-column layout. Click on the first icon for “Columns” and then select the “3 Columns” option.

create 3columns

Once you’ve selected and clicked on the 3 Columns option, you will see a set of shortcodes added to your content editor. From this point, we can now add content into each shortcode column instance where each one has a placeholder of “Your content here“.

column shortcode

If we add some Lorem Ipsum text content to each one, this is what it will look like in our page when viewed:

3 columns frontend

Adding Custom Columns

Aside from preset column layouts, you can also create custom columns. One the column icon, click it and then select the “Custom Grid” option. You should then get a popup window that looks like this:

custom grid1

In the “Number of Columns” field, type in how many columns you want. For this example, just add in 2 and then you will see your window change to be like this:

custom grid2

Now we need to adjust the 2 columns to use our custom sizes that we want. So let’s make the first column as 3 grid columns wide and the second one as 9 grid columns wide. To do this, we click on the box area, starting with clicking the “Grid 6 Offset 0” box.

NOTE Columns uses the Bootstrap grid column structure  which is based on a 12 column layout. You can learn more about the grid layout HERE

When we click on the first column box where it says “Click to Edit” in the purple area, we can then enter how many grid columns we want by entering 3 in the “Grid” field that you see highlighted.

custom grid3

Once we do the first column box, we can do the same for the second one, except we want this one to have a grid size of 9 because 3+9 = 12 (Remember Bootstrap layouts work off a 12-grid column structure.

custom grid4

Once we have this set, we can now click on “Inset” which then adds our custom column shortcode to our content editor. From this point on, we can then add content to the placeholder text area of each shortcode column instance.

custom grid5