Grid Builder

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
Judul	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: Font Awesome, Open icons, Typicons, Entype, Linecons

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.

Video Tutorial #

See how easy it is to create grid element template from scratch by using WPBakery Page Builder Grid Builder.