{"id":46137,"date":"2015-04-07T07:52:22","date_gmt":"2015-04-07T11:52:22","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=46137"},"modified":"2017-08-11T06:44:12","modified_gmt":"2017-08-11T10:44:12","slug":"wordpress-how-to-use-grid-columns-shortcodes-non-cherry-based","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-how-to-use-grid-columns-shortcodes-non-cherry-based.html","title":{"rendered":"WordPress. How to use grid (columns) shortcodes (non-Cherry based)"},"content":{"rendered":"

\r\n

This tutorial shows how to use grid columns in WordPress templates.<\/p>\r\n

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

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

In order to create the required page content layout using grid columns, you should perform the following steps:<\/p>\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

    Selecting the desired page to edit.<\/p>\r\n<\/li>\r\n

  3. \r\n

    Make sure you are using Text mode<\/strong>.<\/p>\r\n<\/li>\r\n

  4. \r\n

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

    [grid_X]<\/strong> content goes here [\/grid_X]<\/strong><\/p>\r\n<\/li>\r\n

  5. \r\n

    As a result, you should receive the structure like the following:<\/p>\r\n

    [grid_X][\/grid_X]<\/strong>, where X is a number from 1 to 12. <\/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 is used for making part of content appear fullwidth. Code looks like the following:<\/p>\r\n

      [grid_12]<\/strong> content goes here [\/grid_12]<\/strong><\/p>\r\n

      \"Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-1\"<\/a><\/p>\r\n

      \"Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-1a\"<\/a>\r\n<\/li>\r\n

    2. \r\n

      2 equal columns can be created on your page\/post adding this code to your page in Text mode:<\/p>\r\n

      [grid_6] <\/strong>first column content goes here [\/grid_6]<\/strong>[grid_6]<\/strong> second column content goes here [\/grid_6]<\/strong><\/p>\r\n

      \"Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-2\"<\/a><\/p>\r\n

      \"Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).-2a\"<\/a>\r\n<\/li>\r\n

    3. \r\n

      To make the content appear in 2 columns with different width, there can be used code with different number for [grid_X]<\/strong> elements in Text mode.<\/p>\r\n

      The only requirement is to keep 12 per row, for example using [grid3] + [grid9] <\/strong>or [grid8] + [grid4]<\/strong> codes. Example: <\/p>\r\n

      [grid_8]<\/strong> first column content goes here [\/grid_8]<\/strong>[grid_4] <\/strong>second column content goes here [\/grid_4]<\/strong><\/p>\r\n

      \"Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).--3\"<\/a><\/p>\r\n

      \"Wordpress-(without-cherry,-without-shortcodes-button)-.How-to-use-grid-(columns).3a\"<\/a><\/p>\r\n<\/li>\r\n

    4. \r\n

      Basically, you can create desired number of columns in a row keeping the structure of 12 per row.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

      The given columns are used for the layout framework on the basis of 960gs.<\/a>.<\/p>\r\n

      Feel free to check the detailed video tutorial below:<\/p>\r\n

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

      <\/p>","protected":false},"excerpt":{"rendered":"

      This tutorial shows how to use grid columns in WordPress templates.<\/p>\n","protected":false},"author":60,"featured_media":46149,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[656,1528,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46137"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=46137"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46137\/revisions"}],"predecessor-version":[{"id":82667,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/46137\/revisions\/82667"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/46149"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=46137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=46137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=46137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}