Column Shortcodes

You can insert columns into any main content area using the dedicated column shortcode toolbar button.

  1. 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.

  1. Select desktop percentage.
  2. Select tablet percentage; this kicks in at tablet portrait aspect ratio.
  3. Select mobile percentage; this will include SMartphones at both landscape and portrait aspect ratios. You’ll almost always want to set this to “100%”
  4. 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.
  5. If you’re adding the last column in a row, check the “Last” checkbox (this is important).
  6. Select “OK” and the system will insert the column shortcode into the content box.

  1. By default, the shortcode is inserted with the opening and closing shortcodes next to one another.
  2. 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]