[columns] & [col]

Columns

You can use column classes to create a column-based layout in posts, pages, and inside text widgets. [columns]  is the wrapper for [col]  and must be used when [col]  is used.

[columns][/columns]Copy

Optional Parameters

align

• Type: string, comma-separated
• Description:  Align columns and the text within the columns horizontally and vertically within the content area. Accepts a comma-separated list of values in any order. Accepted values are (left, center, or right) and (top, middle, or bottom). This takes precedence over  align_cols  and align_text  they are also used.
• Example: [columns align="center, bottom"]

align_cols

• Type:  string
• Description: Aligns columns within the content area, with no effect on the text within. Accepts a comma-separated list of values in any order. Accepted values are (“left”, “center”, or “right”) and (“top”, “middle”, or “bottom”).
• Example: [columns align_cols="center, middle"] 

align_text

• Type:  string
• Description: Aligns the text within columns with no effect on the columns. Accepted values are “left”, “center”, or “right”. 
• Example: [columns align_text="center"] 

class

• Type:  string
• Description: Add additional HTML classes to the main grid HTML.
• Example: [columns class="some-class another-class"] 

gutter

• Type:  integer
• Default: 30
• Description: Space between columns, in pixels. Accepts the values of “xxxs”, “xxs”, “xs”, “sm”, “md”, “lg”, “xl”, “xxl”.
• Example:  [columns gutter="xl"] 

id

• Type:  string
• Description: Add an HTML id to the main column wrapping HTML. 
• Example: [columns id="my-columns"] 

style

• Type:  string
• Description: Add custom inline CSS styling to the HTML. 
• Example:  [columns style="border: 1px solid #f4f4f4;"] 

Col [col]

Shortcodes

[col][/col]Copy

This will create equal width columns depending on home many columns are displayed inside the [columns] wrap

[col_auto][/col_auto]Copy

This will create a column the width of the the content inside.

[col_one_twelfth][/col_one_twelfth]
[col_one_sixth][/col_one_sixth]
[col_one_fourth][/col_one_fourth]
[col_one_third][/col_one_third]
[col_five_twelfths][/col_five_twelfths]
[col_one_half][/col_one_half]
[col_seven_twelfths][/col_seven_twelfths]
[col_two_thirds][/col_two_thirds]
[col_three_fourths][/col_three_fourths]
[col_five_sixths][/col_five_sixths]
[col_eleven_twelfths][/col_eleven_twelfths]
[col_one_whole][/col_one_whole]Copy

Optional Parameters

align

• Type: string, comma-separated
• Description:  Align columns and the text within the columns horizontally and vertically within the content area. Accepts a space-separated list of values in any order. Accepted values are (left, center, or right) and (top, middle, or bottom). This overrides align_cols and align_text if used.
• Example: [col align="center"] 

bg

• Type: string
• Description:  Accepts 3 or 6 digit hex value with or without hash (#).
• Example: [col bg="ffe6e6"] 

bottom

• Type: integer
• Default:  Null, but CSS adds bottom margin; “md” is 32px.
  Description:  The amount of bottom margin/spacing on each grid entry. Accepts “none”, “xxxs”, “xxs”, “xs”, “sm”, “md”, “lg”, “xl”, or “xxl”.
• Example: [col bottom="xl"] 

class

• Type: string
• Description:  Add additional HTML classes to the column HTML. 
• Example: [col class="some-class another-class"] 

id

• Type: string
• Description:  Add an HTML id to the column HTML. 
• Example: [col id="my-column"] 

image

• Type: integer | string
• Description:  Define an image to use as a background image. Accepts the image ID or ‘featured’ if ‘link’ parameter is a page/post ID.
• Example: [col image="246"] or [col image="featured" link="1450"] 

image_size

• Type: string
• Description: Configure the image size to use. Accepts a value of any theme-defined image size.
  Example: [col image_size="one-half"] 

overlay

• Type: string
• Description:  The style of overlay, if any, to add on an entry. Typically used when using a background image via the “image” parameter. Accepts gradient, light, dark.
• Example: [col overlay="dark"] 

link

• Type: string (url) or integer
• Description:  The full URL or page/post ID the entire column should link to.
• Example: [col link="1450"]  or [col link="https://maitheme.com"]  

style

• Type: string
• Description:  Add custom inline CSS styling to the HTML.
• Example:  [col style="border: 1px solid #f4f4f4;] 

Usage examples

[columns]
[col]
<h3>Logo Positions</h3>
Logo on the left, centered,or on the right.
[/col]
[col]
<h3>Sticky Header</h3>
Optional sticky/fixed header.
[/col]
[col]
<h3>Shrink Header</h3>
Optional shrinking header/logo.
[/col]
[col]
<h3>Header Content</h3>
Menus or widgets in the header (including social icons).
[/col]
[/columns]Copy

Let’s take a look at how this works:

It all looks like this:

Creates 4 globally centered columns of content.