How do I add the shortcodes?
- Make sure Lightweight Grid Columns is activated.
- While editing your post or page, go into the “Visual Editor”.
- Look for the columns icon (see screenshots tab).
- Choose your desktop, tablet and mobile grid widths.
- If you’re adding the last column in a row, check the “Last” checkbox (this is important).
What if I don’t want to use the TinyMCE button?
Fair enough! Simply add the shortcode to your content.
For example, the below will output 4 columns on desktop, 2 columns on tablet and 1 column on mobile
[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]
[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]
[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]
[lgc_column grid="25" tablet_grid="50" mobile_grid="100" last="true"]Some content[/lgc_column]
Take note of our last column – see the last=”true” part? Don’t forget 😉
What are my options for percentages?
This is taken directly from (http://unsemantic.com):
There are grid classes named grid-x where “x” is a number that represents the percentage width of each grid unit. These cover multiples of 5, up to 100 (grid-5, grid-10 … grid-95, grid-100). There are also classes for dividing a page into thirds: grid-33 and grid-66 which are 33.3333% and 66.6667% wide, respectively.
Are there any other options I can use in the shortcode?
Yes!
You can use:
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, JS equal heights are set to “true”.
[lgc_column grid="25" tablet_grid="50" mobile_grid="100" equal_heights="true"]Some content[/lgc_column]
