{"id":38560,"date":"2014-12-04T03:25:29","date_gmt":"2014-12-04T08:25:29","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=38560"},"modified":"2017-08-14T06:08:14","modified_gmt":"2017-08-14T10:08:14","slug":"wordpress-how-to-use-grid-columns-shortcodes","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-use-grid-columns-shortcodes.html","title":{"rendered":"WordPress. How to use grid (columns) shortcodes (based on Cherry Framework 3.x)"},"content":{"rendered":"

\r\n<\/p>\r\n

Our support team is glad to present our new guide on working with WordPress grid (column) shortcodes <\/strong> that shows how to create the required page content layout.<\/p>\r\n

WordPress. How to use grid (columns) shortcodes<\/a><\/p>\r\n

\r\n\r\n\r\n<\/a>\r\n<\/div>\r\n
    \r\n
  1. \r\n

    Go to Pages -> All pages <\/strong> section in your WordPress dashboard. <\/p>\r\n<\/li>\r\n

  2. \r\n

    Click on Shortcodes<\/strong> button once you are in Visual editing mode. Choose Columns -> row <\/strong> option there. It will insert code like [row][\/row] to the page text:<\/p>\r\n

    \"WordPress.How_to_use_grid_(columns)_shortcodes_1\"<\/a><\/p>\r\n<\/li>\r\n

  3. \r\n

    Repeat the same procedure to insert [spanX] <\/strong> element to the page between [row][\/row] code. As a result, you should receive the structure like the following:
    \r\n\t\t[row][spanX][\/spanX][\/row], where X is a number from 1 to 12.\r\n\t\t<\/p>\r\n<\/li>\r\n

  4. \r\n

    Insert your content between [spanX][\/spanX] elements like the following:<\/p>\r\n

    \t\t[row][spanX] content goes here…<\/em> [\/spanX][\/row]<\/p>\r\n<\/li>\r\n<\/ol>\r\n

    Let’s check how to set the desired number of columns to the page content:<\/p>\r\n

      \r\n
    1. \r\n

      1 column<\/strong> is used for making part of content appear fullwidth. Code looks like the following:
      \r\n\t\t[row][span12] content goes here…<\/em> [\/span12][\/row]\r\n\t\t<\/p>\r\n

      \"WordPress.How_to_use_grid_(columns)_shortcodes_2\"<\/a>\r\n\t<\/li>\r\n

    2. \r\n