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”.
Interface
Top Menu Bar
WPBakery Page Builder Grid Builder has a native WPBakery Page Builder interface with top main menu bar which consists of following controls:
- 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.
- Grid Element Settings – Design Options – standard WPBakery Page Builder Design Options module which affects all grid element.
- 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.
- Preview and Save options.
Builder Layout and Zones
Grid Builder has a WPBakery Page Builder Backend style layout with defined blocks:
- “Normal” zone – main part to operate with. This zone consists of 3 (three) rows which can be divided into several columns.
- “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.
- “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:
- Grid Element Settings;
- “Normal” and “Hover” zone settings;
- Column settings;
- Content elements.
Grid Element Settings
|
Param name
|
Description
|
|---|---|
| Design Options | Control borders, background and other styling options |
“Normal” and “Hover” Zone Settings
|
Param name
|
Description
|
|---|---|
| Height mode | Sizing proportions for height and width. Note: Select “Original” to scale image without cropping (Example: for masonry style grid). |
| Add link | Select link option (Values: Post link, Large image, Large image (prettyPhoto), Custom) Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Use featured image on background? | Featured image overwrites background image and color from “Design options”. |
| Image size | Enter image size (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme). Alternatively enter size in pixels (Example: 200×100 (Width x Height)). |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Column Settings
|
Param name
|
Description
|
|---|---|
| Width | Select column width. |
| Use featured image on background? | Featured image overwrites background image and color from “Design options”. |
| Image size | Enter image size (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme). Alternatively enter size in pixels (Example: 200×100 (Width x Height)). |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Content Elements
Grid Builder offers content elements which can be used to build and style your grid element template.
Text Block
 |
“Text block“ allows you to insert paragraph type text and format it using WYSIWYG editor. Moreover text block allows adding media(images and videos). |
|
Param name
|
Description
|
|---|---|
| Text | WYSIWYG editor for inserting content. |
| CSS Animation | Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers. |
| Extra class name | Add class name in order to refer to this element in CSS. |
| Design Options | Control borders, background and other styling options. |
Separator
 |
“Separator“ add separator line to your page. |
|
Param name
|
Description
|
|---|---|
| Color | Separator color. |
| Separator alignment | Select separator alignment. |
| Style | Separator style. |
| Border width | Border width in pixels. |
| Element width | Separator element width in percents. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options |
Separator with Text
 |
“Separator with Text“ add separator line to your page together with text which can be positioned in the centre, left or right sides of line. |
|
Param name
|
Description
|
|---|---|
| Title | Separator title. |
| Title position | Select title location. |
| Color | Separator color. |
| Separator alignment | Select separator alignment. |
| Style | Separator style. |
| Border width | Border width in pixels. |
| Element width | Separator element width in percents. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options |
Icon
 |
With WPBakery Page Builder you can easily add icons from following libraries:
|
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Icon library | Select icon library. |
| Icon | Select icon from library. |
| Color | Icon color. |
| Background shape | Background shape for icon. |
| Background color | Select color for background shape. Note: Select custom color to enable color picker |
| Size | Icon size. |
| Icon alignment | Select icon alignment. |
| URL (Link) | Add link to icon. |
| CSS Animation | Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options |
Single Image
 |
Add simple image to your layout and style it. Add CSS animation or apply Design Options. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Widget title | Enter text which will be used as widget title. Leave blank if no title is needed. |
| Image source | Image source from Media Library (default) or External link |
| Image | Select image from media library |
| External link | Enter external link to image. Note: available if “External link” is chosen from “Image source” |
| CSS Animation | Select type of animation if you want this element to be animated when it enters into the browsers viewport. Note: Works only in modern browsers. |
| Image size | Enter image size. Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by current theme. Alternatively enter image size in pixels: 200×100 (Width x Height). Leave empty to use “thumbnail” size. |
| Image alignment | Select image alignment. |
| Image style | Select display style. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options |
Button
 |
Add button with multiple color and styling options. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Text | Text which will appear on the button |
| Style | Select button display style |
| Shape | Select button shape |
| Color | Select color of the button Note: Available if “Style” is not “Custom” |
| Background color | Select color for background of the button with color picker Note: Available if “Style” is set to “Custom” |
| Text color | Select color for text on the button with color picker Note: Available if “Style” is set to “Custom” |
| Size | Select button display size |
| Alignment | Select button alignment |
| Set full width button? | Set button to full width within column Note: Available if “Alignment” is not “Inline” |
| Add icon? | Add icon to button from icon library. Control alignment of icon |
| CSS Animation | Add animation to your element |
| Extra class name | Add class name in order to refer to this element in CSS |
| Design Options | Control borders, background and other styling options |
Custom Heading
 |
Create custom heading with Google Fonts, choose one of predefined fonts and apply styling.
Important: If you are using non-latin characters be sure to activate them under Settings/WPBakery Page Builder/General Settings. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Text | If you are using non-latin characters be sure to activate them under Settings/WPBakery Page Builder/General Settings. |
| Element tag | Select element tag. |
| Text align | Select text alignment. |
| Font size | Enter font size. |
| Line height | Enter line height. |
| Text color | Select color for your element. |
| Use theme default font family | Use font family from the theme. |
| Font Family | Select font family. |
| Font style | Select font styling. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Empty Space
 |
Insert empty space between elements with custom height. |
|
Param name
|
Description
|
|---|---|
| Height | Enter empty space height. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options |
Post Title
 |
Post title element adds title of post, page or custom post types. In case of media grid it will add media title. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Element tag | Select element tag. |
| Text align | Select text alignment. |
| Use custom fonts? | Enable Google fonts. Note: enables “Custom fonts” tab |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Post Excerpt
 |
Post excerpt element adds excerpt of post, page or custom post types. In case of media grid it will add media description. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Element tag | Select element tag. |
| Text align | Select text alignment. |
| Use custom fonts? | Enable Google fonts. Note: enables “Custom fonts” tab |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Post Date
 |
This element adds post data to your grid element template. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Element tag | Select element tag. |
| Text align | Select text alignment. |
| Use custom fonts? | Enable Google fonts. Note: enables “Custom fonts” tab |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Post Author
 |
This element adds post author to your grid element template. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Element tag | Select element tag. |
| Text align | Select text alignment. |
| Use custom fonts? | Enable Google fonts. Note: enables “Custom fonts” tab |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Post Categories
 |
This element adds post category or categories to your grid element template. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active |
| Style | Select category display style: Comma, Rounded, etc. |
| Color | Select category style display color. Note: Active if style is different from None or Comma. |
| Category size | Select size of category display. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Post Image
 |
This element allows adding “Featured image’ or point to placeholder for media image from post, custom post types or media library. |
|
Param name
|
Description
|
|---|---|
| Add link | Select link option. Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active. |
| Image size | Enter image size (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme). Alternatively enter size in pixels (Example: 200×100 (Width x Height)). |
| Text align | Select alignment. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
| Design Options | Control borders, background and other styling options. |
Custom Fields
 |
Helps to retrieve custom field data from meta values of the post or custom post types. |
|
Param name
|
Description
|
|---|---|
| Field key name | Custom field name to retrieve meta data value. |
| Label | Enter label to display before key value. |
| Align | Select alignment. |
| Extra class name | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Woo Elements
 |
If you have Woo Commerce installed on your WordPress site – you will see list of Woo elements available for use in your grid template. Note: It will add also option to choose “Add to Cart” in link settings of linkable elements. |
Advanced Custom Fields
 |
If you have Advanced Custom Fields installed on your WordPress site – you will see ACF element available for use in your grid template. Using this element you can refer to a specific custom field. |
Video Tutorial
See how easy it is to create grid element template from scratch by using WPBakery Page Builder Grid Builder.