Page tree
Skip to end of metadata
Go to start of metadata

Starting from version 4.4 Visual Composer 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".

Contents

Interface

Top Menu Bar

Visual Composer Grid Builder has a native Visual Composer 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 Visual Composer 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 Visual Composer 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

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

"Normal" and "Hover" Zone Settings

Param nameDescription
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: 200x100 (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 nameDescription
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: 200x100 (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 nameDescription
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 nameDescription
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 nameDescription
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 Visual Composer you can easily add icons from following libraries:

  • Font Awesome
  • Open icons
  • Typicons
  • Entype
  • Linecons

  

Param nameDescription
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 nameDescription
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: 200x100 (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 nameDescription
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 color

Select 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/Visual Composer/General Settings.

  

Param nameDescription
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/Visual Composer/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 nameDescription
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 nameDescription
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 nameDescription
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 nameDescription
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 nameDescription
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 nameDescription
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 nameDescription
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: 200x100 (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 nameDescription
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 specific custom field.

  

Video Tutorial

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