Column Shortcodes

You can use the column shortcodes with either the visual or the text tab. This example will be showing how to use them with the text tab.

After deciding on the layout you want on your page, click on the ‘select shortcode’ icon on your content page. This will pull up a full menu with the different shortcodes available.

 
Select the option that best suits your needs, and it will insert the shortcodes directly into your page where your cursor is. It will look like this: [one_third][/one_third]

 
In between the code, type in your content. In my example, I will be doing three buttons in a row. The code now looks like this: [one_third]<a href="#" class="btn2">row 1</a>[/one_third]

Repeat this for each section. For some of the shortcodes, there may be a “last” option. This just means that it will push the content after it into the next “row”. The final code looks as below:
[one_third]<a href="#" class="btn">row 1</a>[/one_third]
 
[one_third]<a href="#" class="btn">row 2</a>[/one_third]
 
[one_third_last]<a href="#" class="btn">row 3</a>[/one_third_last]

The extra lines between each column are important, not just for human readability, but because the shortcodes use those to adjust positioning.

Click on the “Preview” button to the right of the content, and in a new page you will see a live preview of what you are working on. It should look something like this:

However, without the spacing in your code, it might look like this:



If you have any questions, or if your columns end up looking strange, feel free to check out the official plugin page for more information, or email the web services team at webservices@dixie.edu. Thank you!

Here are some more visual examples provided by the official documentation: