menu

Grid Container & Grid Item

For Brooks WordPress theme was developed 12 custom shortcodes lain in the “Developed for Brooks” tab in common popup within all shortcodes appeared on click button “+”, that you can find on every single page.

add_new

The Grid Container(1) is a parent shortcode for Grid Item(2) shortcode. This shortcode pair is an advanced way to compose your content from Visual Composer. As you can see below inside of Grid Item resides Single Woo Product(3) , but there can be a single picture or text block from standard Visual Composer library.admin

The Grid Container(1) has an option to adjust the grid type, columns number and gap between columns( shown below). Notice, the “Metro” structural style( last structural preview(3) shown below) mixes photos trying to fill empty space and oriented on the size of the content.  Other grid types don’t mix photos and photos will appear in the order in which were added. Also, you willing to add “small” and “large” gap between columns. grid4

The Grid Item(2) shortcode has options: Grid Item Format, Featured Item and Content Position (shown below). Using this options you may adjust item size.

For Grid Item Format may be set an aspect ratio of the inner content :

  1. Square – content size 1:1
  2. Horizontal – content size 2:1
  3. Vertical- content size 1:2

Notice, the grid item format doesn’t affect for “Masonry”(1) and “Simple”(2) grid types(shown above).

For example: “Masonry” grid type looks like :grid5

“Simple” grid type looks like:

grid6

And Metro grid type looks like:

grid7

Feature Item option can enlarge the item.

Content position consists of next options: top, bottom, center, stretch. This option has no sense in the “Masonry” grid type.

grid3

These shortcodes pair has powerful abilities for creating a wonderful display of content. Be creative and make experiments with content and options to reach outstanding look, like this:grid8