The column shortcodes allow you to make column layouts within your page. The column widths are percentage based, so they will work in any size of containing element and can be nested (see bottom). The column layout shortcode system comprises of two shortcodes: [row] and [col]. See examples here The columns are implemented using the Grid component of the Kube Framework.
[row] shortcode options
Option | Default | Example | Description |
---|---|---|---|
padding | 1 | padding="0" | Adds a small amount of padding inside each column. |
padding_top | -1 | padding_top="10" | Set the padding-top by setting this value to anything other than -1 . |
padding_bottom | -1 | padding_bottom="10" | Set the padding-bottom by setting this value to anything other than -1 . |
gaps | 0 | gaps="1" | Adds a gap between each column. |
borderl | 0 | borderl="1" | Adds a border between each column. (border-left) |
borderb | 0 | borderb="1" | Adds a border at the bottom of each row. (border-bottom) |
vertical_gap | 0 | vertical_gap="1" | Remove bottom margin. |
min_height | (empty) | min_height="200px" | Makes all columns’ starting height equal; accepts a CSS height value. |
class | (empty) | class="my-column-layout" | Adds a custom class to the layout wrapper. |
convert | (empty) | convert="phone-width-100" | The screen size at which the column layout should adjust to full width:
|
hide | (empty) | hide="hide-phone" | Choose to hide this shortcode on device(s):
|
[col] shortcode options
Option | Default | Example | Description |
---|---|---|---|
width | 25 | width="33" | The width of all columns should match one of the following column layouts:
|
class | (empty) | class="my-column-class" | Adds a custom class to the column. |
Example
[row padding="1" gaps="0" borderl="1" borderb="1" min_height="200" class="my-column-layout" convert="cvt-tablet" hide="hide-desktop"] [col width="33"]Column 1 content[/col] [col width="33"]Column 2 content[/col] [col width="33"]Column 3 content[/col] [/row]
Additional options
There are some additional classes you can use as part of the Kube Grid component that aren’t shortcode attributes.
Centered
Center the column within the row, using the example below.
[row] [col width="40" class="tcs-unit-centered"]40%[/col] [/row]
Push right
Push the column to the right if the width does not add up to 100%.
[row] [col width="50" class="tcs-unit-push-right"]50%[/col] [/row]
Push by unit
Push the column to the right by percentage amount if the width does not add up to 100%.
[row] [col width="20" class="tcs-unit-push-50"]20%[/col] [/row]
Nested column shortcodes
Nested column layouts shortcodes will not work using the same row
and col
shortcodes as the outer columns, due to limitations of the WordPress shortcode parsing system. However, we have added the duplicate shortcodes row1
, row2
, row3
, row4
, and row5
, as well as col1
, col2
, col3
, col4
, and col5
that you can use for the inner column layouts. Only use one shortcode of each type within a nested group.
Example
[row] [col width="33"] [row1] [col1 width="50"]Column 1a content[/col1] [col1 width="50"]Column 1b content[/col1] [/row1] [/col] [col width="33"]Column 2 content[/col] [col width="33"]Column 3 content[/col] [/row]