If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress. How to use grid (columns) shortcodes (non-Cherry based)

This tutorial shows how to use grid columns in WordPress templates.

WordPress. How to use grid (columns) shortcodes (non-Cherry based)

In order to create the required page content layout using grid columns, you should perform the following steps:

  1. Go to Pages -> All pages section in your WordPress dashboard.

  2. Selecting the desired page to edit.

  3. Make sure you are using Text mode.

  4. Insert your content between [grid_X][/grid_X] elements like the following:

    [grid_X] content goes here [/grid_X]

  5. As a result, you should receive the structure like the following:

    [grid_X][/grid_X], where X is a number from 1 to 12.

Let’s check how to set the desired number of columns to the page content:

  1. 1 column is used for making part of content appear fullwidth. Code looks like the following:

    [grid_12] content goes here [/grid_12]

    Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-1

    Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-1a

  2. 2 equal columns can be created on your page/post adding this code to your page in Text mode:

    [grid_6] first column content goes here [/grid_6][grid_6] second column content goes here [/grid_6]

    Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-2

    Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-2a

  3. To make the content appear in 2 columns with different width, there can be used code with different number for [grid_X] elements in Text mode.

    The only requirement is to keep 12 per row, for example using [grid3] + [grid9] or [grid8] + [grid4] codes. Example:

    [grid_8] first column content goes here [/grid_8][grid_4] second column content goes here [/grid_4]

    Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).--3

    Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).3a

  4. Basically, you can create desired number of columns in a row keeping the structure of 12 per row.

The given columns are used for the layout framework on the basis of 960gs..

Feel free to check the detailed video tutorial below:

WordPress. How to use grid (columns) shortcodes (non-Cherry based)