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
andalign_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.