Grid Builder

⌘K
  1. Home
  2. Docs
  3. Learning More
  4. Grid Builder

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 OptionsControl borders, background and other styling options

“Normal” and “Hover” Zone Settings

Param name
Description
Height modeSizing proportions for height and width.
Note: Select “Original” to scale image without cropping (Example: for masonry style grid).
Add linkSelect 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 sizeEnter 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 nameIf 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 OptionsControl borders, background and other styling options.

Column Settings

Param name
Description
WidthSelect column width.
Use featured image on background?Featured image overwrites background image and color from “Design options”.
Image sizeEnter 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 nameIf 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 OptionsControl 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
TextWYSIWYG editor for inserting content.
CSS AnimationSelect 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 nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Separator

“Separator“ add separator line to your page.
Param name
Description
ColorSeparator color.
Separator alignmentSelect separator alignment.
StyleSeparator style.
Border widthBorder width in pixels.
Element widthSeparator element width in percents.
Extra class nameIf 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 OptionsControl 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
TitleSeparator title.
Title positionSelect title location.
ColorSeparator color.
Separator alignmentSelect separator alignment.
StyleSeparator style.
Border widthBorder width in pixels.
Element widthSeparator element width in percents.
Extra class nameIf 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 OptionsControl borders, background and other styling options

Icon

With WPBakery Page Builder you can easily add icons from following libraries:

  • Font Awesome
  • Open icons
  • Typicons
  • Entypo
  • Linecons
  • Mono Social
  • Material
Param name
Description
Add linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
Icon librarySelect icon library.
IconSelect icon from library.
ColorIcon color.
Background shapeBackground shape for icon.
Background colorSelect color for background shape.
Note: Select custom color to enable color picker
SizeIcon size.
Icon alignmentSelect icon alignment.
URL (Link)Add link to icon.
CSS AnimationSelect 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 nameIf 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 OptionsControl 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 linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
Widget titleEnter text which will be used as widget title. Leave blank if no title is needed.
Image sourceImage source from Media Library (default) or External link
ImageSelect image from media library
External linkEnter external link to image.
Note: available if “External link” is chosen from “Image source”
CSS AnimationSelect 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 sizeEnter 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 alignmentSelect image alignment.
Image styleSelect display style.
Extra class nameIf 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 OptionsControl borders, background and other styling options

Button

Add button with multiple color and styling options.
Param name
Description
Add linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
TextText which will appear on the button
StyleSelect button display style
ShapeSelect button shape
ColorSelect color of the button
Note: Available if “Style” is not “Custom”
Background colorSelect color for background of the button with color picker
Note: Available if “Style” is set to “Custom”
Text colorSelect color for text on the button with color picker
Note: Available if “Style” is set to “Custom”
SizeSelect button display size
AlignmentSelect 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 AnimationAdd animation to your element
Extra class nameAdd class name in order to refer to this element in CSS
Design OptionsControl 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 linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
TextIf you are using non-latin characters be sure to activate them under Settings/WPBakery Page Builder/General Settings.
Element tagSelect element tag.
Text alignSelect text alignment.
Font sizeEnter font size.
Line heightEnter line height.
Text colorSelect color for your element.
Use theme default font familyUse font family from the theme.
Font FamilySelect font family.
Font styleSelect font styling.
Extra class nameIf 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 OptionsControl borders, background and other styling options.

Empty Space

Insert empty space between elements with custom height.
Param name
Description
HeightEnter empty space height.
Extra class nameIf 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 OptionsControl 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 linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
Element tagSelect element tag.
Text alignSelect text alignment.
Use custom fonts?Enable Google fonts. Note: enables “Custom fonts” tab
Extra class nameIf 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 OptionsControl 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 linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
Element tagSelect element tag.
Text alignSelect text alignment.
Use custom fonts?Enable Google fonts. Note: enables “Custom fonts” tab
Extra class nameIf 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 OptionsControl borders, background and other styling options.

Post Date

This element adds post data to your grid element template.
Param name
Description
Add linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
Element tagSelect element tag.
Text alignSelect text alignment.
Use custom fonts?Enable Google fonts. Note: enables “Custom fonts” tab
Extra class nameIf 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 OptionsControl borders, background and other styling options.

Post Author

This element adds post author to your grid element template.
Param name
Description
Add linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
Element tagSelect element tag.
Text alignSelect text alignment.
Use custom fonts?Enable Google fonts. Note: enables “Custom fonts” tab
Extra class nameIf 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 OptionsControl borders, background and other styling options.

Post Categories

This element adds post category or categories to your grid element template.
Param name
Description
Add linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active
StyleSelect category display style: Comma, Rounded, etc.
ColorSelect category style display color.
Note: Active if style is different from None or Comma.
Category sizeSelect size of category display.
Extra class nameIf 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 OptionsControl 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 linkSelect link option.
Note: Additional option “Woo Commerce Add to Cart” if Woo Commerce plugin is active.
Image sizeEnter 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 alignSelect alignment.
Extra class nameIf 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 OptionsControl 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 nameCustom field name to retrieve meta data value.
LabelEnter label to display before key value.
AlignSelect alignment.
Extra class nameIf 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.

Was this article helpful to you? No 3 Yes 10