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

Cherry Framework 4. How to use grid (columns) shortcodes

This tutorial shows how to use Grid Shortcodes in Cherry Framework 4.

Cherry Framework 4. How to use grid (columns) shortcodes

Grid shortcodes allow wrapping content into rows and organizing it into columns.

  1. In order to insert shortcode into the page, use the Insert Shortcode button in Page or Post editor of WordPress Dashboard:

    Cherry Framework 4. How to use grid (columns) shortcodes-1

    Select Grid in the Filter by Type:

    Cherry Framework 4. How to use grid (columns) shortcodes-2

  2. To display columns inline, you will need to wrap them in the Row shortcode:

    Cherry Framework 4. How to use grid (columns) shortcodes-3

    It includes the following options:

    • Width Type: select fixed to full width for the content display;

    • Anchor: allows creating anchor link for content displayed in particular shortcode;

    • Class: create custom css class for shortcode and assign custom css rule for this piece of content;

    • Styling preset: select one of existing styles;

    • Background Type option adds colored, image or video background out of box;

    • Background Color sets background color when it’s selected in Background type;

    • Background Image sets background image when it’s selected in Background type;

    • Background image position inherits the css background-position property options;

    • Background image repeat inherits the css background-repeat property options;

    • Background image attachment sets whether background is fixed or scrolls with content;

    • Content: insert content you would like to display in the Box shortcode;

    • Live preview shows how the content will look like, i.e. you can edit the shortcode layout before publishing it;

    • Preset allows saving custom shortcode settings, i.e. if you are going to use the same shortcode settings for content, you can save current options in Preset.

  3. The Row Inner shortcode allows creating nested rows on a page. The set of options in the Row Inner is the same as in the Row shortcode.

  4. Column is used to build multi-column layout within the row. The following options are available here:

    Cherry Framework 4. How to use grid (columns) shortcodes-4

    • Size sets column width for each type of screen resolution. The Size option inherits grid system: you can select box size from 1 to 12;

    • Offset defines left margin of column;

    • Pull and Push options set column order;

    • Collapse column paddings reset padding of a column;

    • Class: create custom css class for shortcode and assign custom css rule for this piece of content;

    • Background Type option adds colored, image or video background out of box;

    • Styling preset: select one of existing styles;

    • Background Color sets background color when it’s selected in Background type;

    • Background Image sets background image when it’s selected in Background type;

    • Background image position inherits the css background-position property options;

    • Background image repeat inherits the css background-repeat property options;

    • Background image attachment sets whether background is fixed or scrolls with content;

    • Class: create custom css class for shortcode and assign custom css rule for this piece of content;

    • Content: insert content you would like to display in the Box shortcode;

    • Live preview shows how the content will look like, i.e. you can edit the shortcode layout before publishing it;

    • Preset allows saving custom shortcode settings, i.e. if you are going to use the same shortcode settings for content, you can save current options in Preset.

  5. Column Inner allows building nested columns with shortcodes. The set of options in the Column Inner is the same as in the Column shortcode.

  6. The Clear shortcode resets float, i.e. next content block should appear under the column.
    You can assign custom class to it as well.

  7. The Box shortcode wraps content into box on a page:

    Cherry Framework 4. How to use grid (columns) shortcodes-5

    • Box styling preset: select of the existing color schemes;

    • Background Color sets background color when it’s selected in Background type;

    • Background Image sets background image when it’s selected in Background type;

    • Background image position inherits the css background-position property options;

    • Background image repeat inherits the css background-repeat property options;

    • Background image attachment sets whether background is fixed or scrolls with content;

    • Fill sets up size according to the parent container;

    • Class: create custom css class for shortcode and assign custom css rule for this piece of content;

    • Content: insert content you would like to display in the Box shortcode;

    • Live preview shows how the content will look like, i.e. you can edit the shortcode layout before publishing it;

    • Preset allows saving custom shortcode settings, i.e. if you are going to use the same shortcode settings for content, you can save current options in Preset.

  8. Box Inner allows building nested content in boxes. The set of options in the Box Inner is the same as in the Box shortcode.

  9. Space is used to create vertical indent between blocks.

Feel free to check the detailed video tutorial below:

Cherry Framework 4. How to use grid (columns) shortcodes