Starting from version 4.4 WPBakery Page Builder comes together with Grid Builder which allows to create and modify grid element templates for Post Grid, Masonry Post Grid, Media Grid and Masonry Media Grid. Grid Builder can be accessed via WordPress admin “Grid Elements”.

InterfaceTop Menu Bar

WPBakery Page Builder Grid Builder has a native WPBakery Page Builder interface with top main menu bar which consists of following controls:

1. Grid template block – allows to choose one of predefined grid element templates as a starting point for creating new grid element. Note: choosing template will overwrite created layout.
2. Grid Element Settings – Design Options – standard WPBakery Page Builder Design Options module which affects all grid element.
3. Animation Presets (dropdown) – by default set to “Single block” which means there is no “Hover” state for your grid element. Selecting animation preset adds “Hover” tab, next to “Normal” tab in Grid Builder layout.
4. Preview and Save options.

Builder Layout and Zones

Grid Builder has a WPBakery Page Builder Backend style layout with defined blocks:

1. “Normal” zone – main part to operate with. This zone consists of 3 (three) rows which can be divided into several columns.
2. “Hover” zone – similar to “Normal” zone, but defines layout on “Hover” state. Note: this zone is visible only if “Animation preset” is selected different from “Single block”. Depending on animation chosen “Hover” zone may appear on top of “Normal”, replace “Normal” or partly replace “Normal” zone.
3. “Additional” zone – places for additional zone are located around “Normal” and “Hover” zones. Note: “Additional” zone can not be animated with “Animation Presets” and only one “Additional” zone can be added at the time.

Settings

WPBakery Page Builder Grid Builder has styling options and settings for following elements:

1. Grid Element Settings;
2. “Normal” and “Hover” zone settings;
3. Column settings;
4. Content elements.