[columns] & [col]

Columns

Learn more about the Mai Columns block in Mai Theme 2.0, a powerful and extremely versatile columns block. We set out to build the most flexible columns block available for WordPress. This block includes responsive columns control, custom arrangements, and different arrangements for different screen sizes.

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.