Column layouts

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:

  • (empty) – None
  • phone-width-100 – Phone 1 column
  • units-phone-50 – Phone 2 column
  • mobile-width-100 – Tablet and phone 1 column
  • units-mobile-50 – Tablet and phone 2 column
  • units-tablet-50 phone-width-100 – Tablet 2 columns, phone 1 column
hide (empty) hide="hide-phone" Choose to hide this shortcode on device(s):

  • (empty) = None
  • hide-phone-ptr = Phone portrait
  • hide-phone = Phone landscape
  • hide-tablet-ptr = Tablet portrait
  • hide-tablet = Tablet landscape
  • hide-desktop = Desktop
  • hide-large = Large

[col] shortcode options

Option Default Example Description
width 25 width="33" The width of all columns should match one of the following column layouts:

  • 50-50
  • 60-40
  • 40-60
  • 66-33
  • 33-66
  • 70-30
  • 30-70
  • 75-25
  • 25-75
  • 80-20
  • 20-80
  • 33-33-33
  • 50-25-25
  • 25-50-25
  • 25-25-50
  • 50-30-20
  • 50-20-30
  • 20-50-30
  • 30-50-20
  • 30-20-50
  • 20-30-50
  • 60-20-20
  • 20-60-20
  • 20-20-60
  • 30-30-40
  • 30-40-30
  • 40-30-30
  • 25-25-25-25
  • 20-20-20-40
  • 20-20-40-20
  • 20-40-20-20
  • 40-20-20-20
  • 30-30-20-20
  • 30-20-30-20
  • 30-20-20-30
  • 20-30-20-30
  • 20-20-30-30
  • 20-20-20-20-20
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]

Still having trouble? Head over to the forums.

Forums