Columns [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]

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]
This will create equal width columns depending on home many columns are displayed inside the [columns] wrap

[col_auto][/col_auto]
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]

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]

Let’s take a look at how this works:

It all looks like this:

Creates 4 globally centered columns of content.

Did this answer your question?