You can insert columns into any main content area using the dedicated column shortcode toolbar button.
- Place the cursor where you want to begin using columns then select the “Add Columns” toolbar button.
A popup options box will appear. Specify your desired desktop, tablet and mobile widths of the columns, add your content and then insert your shortcode into your content.
- Select desktop percentage.
- Select tablet percentage; this kicks in at tablet portrait aspect ratio.
- Select mobile percentage; this will include SMartphones at both landscape and portrait aspect ratios. You’ll almost always want to set this to “100%”
- OPTIONAL: enter the content to appear in that column. Tip: you can, and should, enter content after inserting the shortcode so go ahead and leave this blank.
- If you’re adding the last column in a row, check the “Last” checkbox (this is important).
- Select “OK” and the system will insert the column shortcode into the content box.
- By default, the shortcode is inserted with the opening and closing shortcodes next to one another.
- You’ll have an easier time separating those with a full paragraph then using that space to enter your content.
FAQs
Can I just copy/paste shortcodes or do I always have to use the toolbar button?
Go right ahead and copy/paste or if you are comfortable with understanding how the percentage values work, you can edit them manually.
Do I need to use the “last column in a row” setting?
Absolutely. It impacts overall content wrapping and styling. good news is you can manually change last=”false” to last=”true” manually if you forget when inserting from the toolbar button.
Getting Fancy With Attributes
You can use any of the following attributes to help tweak styling and frontend display:
Class
[lgc_column grid="25" tablet_grid="50" mobile_grid="100" class="push-25"]Some content[/lgc_column]
Style
[lgc_column grid="25" tablet_grid="50" mobile_grid="100" style="padding-left:0px;"]Some content[/lgc_column]
Equal Heights
By default, equal heights are set to “true” but you can deactivate using:
[lgc_column grid="25" tablet_grid="50" mobile_grid="100" equal_heights="true"]Some content[/lgc_column]
Converting legacy shortcodes to the new version is super easy. Here’s an example using a two column, 50/50 split:
Legacy version:
[twocol_one] Your content [/twocol_one] [twocol_one_last] Your content [/twocol_one_last]
New Version:
[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false"]
Your content.
[/lgc_column]
[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="true"]
Your content.
[/lgc_column]
- [twocol_one] becomes [lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”false”]]
- [/twocol_one] becomes [[/lgc_column]
- [twocol_one_last] becomes [lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”true”]]
- [/twocol_one_last] becomes [[/lgc_column]