Content Elements

⌘K
  1. Home
  2. Docs
  3. Learning More
  4. Content Elements

Content Elements

This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as bricks. With those bricks, you are building your layout. Most of the content elements have options to set them click pencil icon. To save changes click save button.

Row

“Row“ is the main content element of WPBakery Page Builder  . Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have an unlimited number of rows.   To change row’s position, click and drag row’s drag handler (top left row’s corner) and drag row around (vertical axis).

 

Param name
Description
Row stretchSelect stretching options for row and content (Note: stretched may not work properly if parent container has “overflow: hidden” CSS property).
Column gapSet gap between columns, all columns within row will be affected by this value.
Full height rowSet row to be full height.
Note: if content will exceed screen size then row will be bigger than screen height as well.
Columns positionSet columns position for full height row – Top, Middle, Bottom.
Note: active only if “Full height row” is selected.
Equal heightSet all columns to be equal height.
Note: all columns will have same height as longest column.
Content positionSet content position within columns – Default, Top, Middle, Bottom.
Note: Default value will be used top or other if defined within theme.
Use video backgroundSet YouTube background for row.
YouTube linkEnter link to YouTube video to set it as row background.
Note: YouTube video will overwrite background images and can be used with parallax effect.
ParallaxAdd parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
ImageSelect image from media library for parallax.
Note: active only if “Parallax” effect is chosen.
Parallax speedControl parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.
Note: active only if Image or Video parallax effect is enabled.
Row IDEnter row ID (Note: make sure it is unique and valid according to w3c specification).
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.

Important: Row allows you build complex layouts by inserting inner row within root level row/column. Take into account that it is not allowed to insert inner row within inner row.

Column

“Columns“ are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

Param name
Description
Use video backgroundSet YouTube background for row.
YouTube linkEnter link to YouTube video to set it as row background.
Note: YouTube video will overwrite background images and can be used with parallax effect.
ParallaxAdd parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
ImageSelect image from media library for parallax.
Note: active only if “Parallax” effect is chosen.
Parallax speedControl parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.
Note: active only if Image or Video parallax effect is enabled.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.
Width & ResponsivenessControl width, offset and visibility of element on different devices.

Section

“Section“ is root type container element that allows you to ‘group’ several rows. You can insert section into root canvas only (section element can not be inserted into any other element, including row). Section element can contain only row elements.
Param name
Description
Section stretchAdd class name in order to refer to this element in CSS.
Full height section?Set section to be full height.
Note: if content will exceed screen size then row will be bigger than screen height as well.
Content positionSet content position within columns – Default, Top, Middle, Bottom.
Note: Default value will be used top or other if defined within theme.
Use video background?Set YouTube background for section.
YouTube linkEnter link to YouTube video to set it as section background.
Note: YouTube video will overwrite background images and can be used with parallax effect.
ParallaxAdd parallax type background for section (Note: If no image is specified, parallax will use background image from Design Options).
ImageSelect image from media library for parallax.
Note: active only if “Parallax” effect is chosen.
Parallax speedControl parallax effect speed with 1.5 value set as default. For traditional parallax effect 1.0 is the minimum value.
Note: active only if Image or Video parallax effect is enabled.
CSS AnimationAdd animation to your element.
Section IDEnter section ID (Note: make sure it is unique and valid according to w3c specification).
Disable sectionAllows you to disable section (It will not be visible to the public).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

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
TextAdd/Edit content using WYSIWYG editor TinyMCE.
CSS animationsAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
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
ColorChoose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.
Separator alignmentSelect separator alignment.
StyleChoose line styling – solid, dotted, dashed, shadow etc.
BorderBorder width in pixels.
Element widthDefine line width within column in percents.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
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
TitleText which will appear on the line.
Add iconAdd icon to separator from Icon Library.
Title positionAllows positioning of your text in the centre, left or right side of the line.
Separator alignmentSelect separator alignment.
ColorChoose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.
StyleChoose line styling – solid, dotted, dashed, shadow etc.
BorderBorder width in pixels.
Element widthDefine line width within column in percents.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

ZigZag Separator

“ZigZag separator“ add separator line in form of zig zag. It uses SVG graphics to form the line and can be positioned in the centre, left or right sides of line.
Param name
Description
Separator alignmentSelect separator alignment.
ColorChoose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.
Element widthDefine line width within column in percents.
Border widthBorder width size with “Medium” as default.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Message Box

“Message Box“ add noticeable message to your website in order to show success, error, warning etc.
Param name
Description
Message Box PresetsSelect predefined message box designs or choose “Custom” for custom styling.
StyleSelect message box style.
ShapeSelect message box shape.
ColorSelect message box color.
Icon librarySelect icon library.
IconSelect icon from library.
Message textAdd/Edit content using WYSIWYG editor TinyMCE
CSS animationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Facebook ‘Like’

“Facebook Like“ add social ‘Like’ button.
Param name
Description
Button typeSelect type of your button from predefined layouts.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Tweetmeme Button

“Tweetmeme button“ add default social ‘Tweet’ button.
Param name
Description
Choose a buttonSelect Twitter button type: Share a link, Follow, Hashtag, Mention
Depending on chosen button type align parameters for Twitter button
LanguageSelect Twitter button language.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Google +

“Google+ button“ add social “Google+“ button.
Param name
Description
Button sizeSelect size of the button.
AnnotationSelect type of annotation presented together with button.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Pinterest

“Pinterest“ add social ‘Pinit’ button.
Param name
Description
Button layoutSelect type of button layout.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

FAQ (Toggle)

“FAQ“ add collapsible toggle to your page.
Param name
Description
Toggle titleTitle of toggle which will be displayed near open/collapse button.
Toggle contentContent of toggle editable using WYSIWYG editor TinyMCE.
StyleToggle style.
ColorToggle icon color.
SizeToggle size.
Default stateAbility to set default state of toggle open or closed(collapsed).
Element IDEnter toggle ID (Note: make sure it is unique and valid according to w3c specification).
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.

Single Image

Add simple image to your layout and style it. Add CSS animation or apply Design Options.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
Image sourceMedia Library for inserting images from Media Library;
External link for inserting link to image;
Featured image for using Featured image (if specified).
ImageSelect image from media library. You can also upload images using media library.
External linkEnter direct link to external image.
Note: available if “External link” is chosen in “Image source”.
CSS animationAdd animation to your element.
Image sizeSet size of your image. Set large, small etc. or set your own width x height in pixels.
Note: External images accept only pixel values.
Add captionAdd caption defined in Media Library.
CaptionInsert caption – available only for External images.
Image alignmentSet alignment of element within a column.
Image styleSet image style – choose from square, rounded, border etc.
OnClick actionSelect onclick action:

  • None
  • Link to large image
  • Open prettyPhoto
  • Open custom link
  • Zoom
Image linkEnter link for onclick event.
Note: available if “Open custom link” is chosen in “OnClick action”.
Design OptionsControl borders, background and other styling options.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.

Image Gallery

Add responsive Image gallery. Choose your gallery type from Flex Slider, Nivo Slider or Image grid.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
Gallery typeSelect gallery type from Flex Slider, Nivo Slider or Image grid.
Auto rotate slidesSelect interval between auto-rotation of images or disable it.
Image sourceMedia Library for inserting images from Media Library;
External links for inserting link to image;
ImagesSelect images from media library. You can also upload images using media library.
External linksEnter direct link to external images.
Note: available if “External links” is chosen in “Image source”.
Image sizeSet size of your image. Set large, small etc. or set your own width x height in pixels.
Note: External images accept only pixel values.
OnClick actionSelect onclick action:

  • None
  • Link to large image
  • Open prettyPhoto
  • Open custom link
Custom linksEnter links for onclick event.
Note: available if “Open custom link” is chosen in “OnClick action”.
CSS AnimationAdd animation to your element.
Design OptionsControl borders, background and other styling options.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.

Image Carousel

Add fixed size animated image carousel.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
Auto rotate slidesSelect interval between auto-rotation of images or disable it.
ImagesSelect images from media library. You can also upload images using media library.
Image sizeSet size of your image. Set large, small etc. or set your own width x height in pixels.
On clickDefine action for onclick event if needed.
Slider modeSlides will be positioned horizontally (for horizontal swipes) or vertically (for vertical swipes).
Slider speedDuration of animation between slides (in ms).
Slides per viewSet numbers of slides you want to display at the same time on slider’s container for carousel mode. Supports also “auto” value, in this case it will fit slides depending on container’s width. “auto” mode isn’t compatible with loop mode.
Slider autoplayEnables autoplay mode.
Hide pagination controlIf YES pagination control will be removed.
Hide prev/next buttonsIf YES prev/next control will be removed.
Partial viewIf YES part of the next slide will be visible on the right side.
Slider loopEnables loop mode.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Pageable Container

Pageable Container is Tab based complex element which consists of inner section collections(tabs) and its structure is similar to row and column hierarchy. You can create as many inner sections within the element as you wish and then place any type of content within.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
AutoplaySelect auto rotate for tabs in seconds.
Note: disabled by default.
Active sectionEnter active section number.
Note: to have all sections closed on initial load enter non-existing number.
Pagination styleSelect pagination style.
Pagination colorSelect pagination color.
Note: available only if “Pagination style” is selected.
Pagination positionSelect pageable navigation position.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Pageable Container Section

Pageable container section is an instance of Pageable Container element and controls one specific section. It is similar to principe row and column.
Param name
Description
TitleEnter section title.
Note: you can leave it empty
Section IDEnter section ID (Note: make sure it is unique and valid according to w3c specification).
Add iconAdd icon to button from icon library.
Extra class nameAdd class name in order to refer to this element in CSS.

Tabs

Tabs is a complex element which consists of inner section collections(tabs) and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
StyleSelect tabs display style.
ShapeSelect tabs shape.
ColorSelect tabs color.
Do not fill content areaDo not fill content area with color.
Note: content area of tab will be transparent.
SpacingSelect tabs spacing.
Note: space between tab titles.
GapSelect tabs gap.
Note: space between tab titles and content area.
AlignmentSelect tabs section title alignment.
AutoplaySelect auto rotate for tabs in seconds.
Note: disabled by default.
Active sectionEnter active section number.
Note: to have all sections closed on initial load enter non-existing number.
Pagination styleSelect pagination style.
Pagination colorSelect pagination color.
Note: available only if “Pagination style” is selected.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Tabs Section

Tabs section is an instance of Tabs element and controls one specific tab/section. It is similar to principe row and column.
Param name
Description
TitleEnter section title.
Note: you can leave it empty.
Section IDEnter section ID (Note: make sure it is unique and valid according to w3c specification).
Add iconAdd icon to button from icon library.
Extra class nameAdd class name in order to refer to this element in CSS.

Tours

Tours is a complex element which consists of inner section collections and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
StyleSelect tour display style.
ShapeSelect tour shape.
ColorSelect tour color.
Do not fill content areaDo not fill content area with color.
Note: content area of tour will be transparent.
SpacingSelect tour spacing.
Note: space between tour titles.
GapSelect tour gap.
Note: space between tour titles and content area.
PositionSelect tour navigation position “Left” or “Right”.
AlignmentSelect section title alignment.
Navigation widthSelect tour navigation width.
AutoplaySelect auto rotate for tour in seconds.
Note: disabled by default.
Active sectionEnter active section number.
Note: to have all sections closed on initial load enter non-existing number.
Pagination styleSelect pagination style.
Pagination colorSelect pagination color.
Note: available only if “Pagination style” is selected.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Tours Section

Tours section is an instance of Tours element and controls one specific section. It is similar to principe row and column.
Param name
Description
TitleEnter section title.
Note: you can leave it empty.
Section IDEnter section ID (Note: make sure it is unique and valid according to w3c specification).
Add iconAdd icon to button from icon library.
Extra class nameAdd class name in order to refer to this element in CSS.

Accordion

Accordion is a complex element which consists of inner section collections and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
StyleSelect accordion display style.
ShapeSelect accordion shape.
ColorSelect accordion color.
Do not fill content areaDo not fill content area with color.
Note: content area of accordion will be transparent.
SpacingSelect accordion spacing.
Note: space between accordion sections, section titles and content area.
GapSelect accordion gap.
Note: space between accordion sections.
AlignmentSelect accordion section title alignment.
AutoplaySelect auto rotate for tabs in seconds.
Note: disabled by default.
Allow collapsible allAllow collapse all accordion sections.
IconSelect accordion navigation icon.
PositionSelect accordion navigation icon position.
Active sectionEnter active section number.
Note: to have all sections closed on initial load enter non-existing number.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Accordion Section

Accordion section is an instance of Accordion element and controls one specific section. It is similar to principe row and column.
Param name
Description
TitleEnter section title.
Note: you can leave it empty.
Section IDEnter section ID (Note: make sure it is unique and valid according to w3c specification).
Add iconAdd icon to button from icon library.
Extra class nameAdd class name in order to refer to this element in CSS.

Post Grid

Add posts of your WordPress site in grid view. Choose posts type, build your own unique query and define what kind of information to display.
Param name
Tab
Description
Data sourceGeneralSelect content type for your grid.
Narrow data sourceGeneralEnter categories, tags or custom taxonomies.
Total itemsGeneralSet max limit for items in grid or enter -1 to display all (limited to 1000).
Display StyleGeneralSelect display style for grid.
Show filterGeneralAppend filter to grid.
Grid elements per rowGeneralSelect number of single grid elements per row.
GapGeneralSelect gap between grid elements.
Include onlyGeneralAdd posts, pages, etc. by title.
Note: active only if “Data source” is set to “List of IDs”.
Custom queryGeneralBuild custom query according to WordPress Codex.
Note: active only if “Data source” is set to “Custom query”
Items per pageGeneralNumber of items to show per page.
Note: active only if “Display style” is set to “Load more button”, “Lazy loading” or “Paginator”.
Order byData settingsSelect order type. If “Meta value” or “Meta value Number” is chosen then meta key is required.
SortingData settingsSelect sorting order.
OffsetData settingsNumber of grid elements to displace or pass over.
ExcludeData settingsExclude posts, pages, etc. by title.
Grid element templateItem designSelect predefined grid element template.
Note: It is allowed to create new template or modify selected. Predefined templates will be cloned.
Filter byFilterSelect filter source.
StyleFilterSelect filter display style.
AlignmentFilterSelect filter alignment.
ColorFilterSelect filter color.
Filter sizeFilterSelect filter size.
Button TextLoad more buttonEnter text for “Load more” button.
Note: “Load more” will be used by default.
Button styleLoad more buttonSelect button style.
Button shapeLoad more buttonSelect button shape.
Button colorLoad more buttonSelect button color.
Button sizeLoad more buttonSelect button size.
Button alignmentLoad more buttonSelect button alignment.
Button iconLoad more buttonAdd icon to “Load more” button.
Arrows designPaginationSelect design for arrows.
Arrows positionPaginationArrows will be displayed inside or outside grid.
Note: active only if “Arrow design” is chosen.
Arrows colorPaginationSelect color for arrows.
Note: active only if “Arrow design” is chosen.
Pagination stylePaginationSelect pagination style.
Pagination colorPaginationSelect pagination color.
Note: active only if “Pagination style” is chosen.
Loop pages?PaginationAllow items to be repeated in infinite loop (carousel).
Autoplay delayPaginationEnter value in seconds. Set -1 to disable autoplay.
Animation InPaginationSelect “animation in” for page transition.
Animation OutPaginationSelect “animation out” for page transition.
Design OptionsControl borders, background and other styling options.

Masonry Post Grid

Add posts of your WordPress site in masonry grid view. Choose posts type, build your own unique query and define what kind of information to display.
Param name
Tab
Description
Data sourceGeneralSelect content type for your grid.
Narrow data sourceGeneralEnter categories, tags or custom taxonomies.
Total itemsGeneralSet max limit for items in grid or enter -1 to display all (limited to 1000).
Display StyleGeneralSelect display style for grid.
Show filterGeneralAppend filter to grid.
Grid elements per rowGeneralSelect number of single grid elements per row.
GapGeneralSelect gap between grid elements.
Include onlyGeneralAdd posts, pages, etc. by title.
Note: active only if “Data source” is set to “List of IDs”
Custom queryGeneralBuild custom query according to WordPress Codex.
Note: active only if “Data source” is set to “Custom query”
Items per pageGeneralNumber of items to show per page.
Note: active only if “Display style” is set to “Load more button”, “Lazy loading” or “Paginator”.
Order byData settingsSelect order type. If “Meta value” or “Meta value Number” is chosen then meta key is required.
SortingData settingsSelect sorting order.
OffsetData settingsNumber of grid elements to displace or pass over.
ExcludeData settingsExclude posts, pages, etc. by title.
Grid element templateItem designSelect predefined grid element template.
Note: It is allowed to create new template or modify selected. Predefined templates will be cloned.
Filter byFilterSelect filter source.
StyleFilterSelect filter display style.
AlignmentFilterSelect filter alignment.
ColorFilterSelect filter color.
Filter sizeFilterSelect filter size.
Button TextLoad more buttonEnter text for “Load more” button.
Note: “Load more” will be used by default.
Button styleLoad more buttonSelect button style.
Button shapeLoad more buttonSelect button shape.
Button colorLoad more buttonSelect button color.
Button sizeLoad more buttonSelect button size.
Button alignmentLoad more buttonSelect button alignment.
Button iconLoad more buttonAdd icon to “Load more” button.
Design OptionsControl borders, background and other styling options.

Media Grid

Add media from Media library to your WordPress site in grid view.
Param name
Tab
Description
ImagesGeneralSelect images from media library.
Display StyleGeneralSelect display style for grid.
Show filterGeneralAppend filter to grid.
Grid elements per rowGeneralSelect number of single grid elements per row.
GapGeneralSelect gap between grid elements.
Include onlyGeneralAdd posts, pages, etc. by title.
Note: active only if “Data source” is set to “List of IDs”
Custom queryGeneralBuild custom query according to WordPress Codex.
Note: active only if “Data source” is set to “Custom query”
Items per pageGeneralNumber of items to show per page.
Note: active only if “Display style” is set to “Load more button”, “Lazy loading” or “Paginator”.
Grid element templateItem designSelect predefined grid element template.
Note: It is allowed to create new template or modify selected. Predefined templates will be cloned.
Filter byFilterSelect filter source.
StyleFilterSelect filter display style.
AlignmentFilterSelect filter alignment.
ColorFilterSelect filter color.
Filter sizeFilterSelect filter size.
Button TextLoad more buttonEnter text for “Load more” button.
Note: “Load more” will be used by default.
Button styleLoad more buttonSelect button style.
Button shapeLoad more buttonSelect button shape.
Button colorLoad more buttonSelect button color.
Button sizeLoad more buttonSelect button size.
Button alignmentLoad more buttonSelect button alignment.
Button iconLoad more buttonAdd icon to “Load more” button.
Arrows designPaginationSelect design for arrows.
Arrows positionPaginationArrows will be displayed inside or outside grid.
Note: active only if “Arrow design” is chosen.
Arrows colorPaginationSelect color for arrows.
Note: active only if “Arrow design” is chosen.
Pagination stylePaginationSelect pagination style.
Pagination colorPaginationSelect pagination color.
Note: active only if “Pagination style” is chosen.
Loop pages?PaginationAllow items to be repeated in infinite loop (carousel).
Autoplay delayPaginationEnter value in seconds. Set -1 to disable autoplay.
Animation InPaginationSelect “animation in” for page transition.
Animation OutPaginationSelect “animation out” for page transition.
Design OptionsControl borders, background and other styling options.

Masonry Media Grid

Add media from Media library to your WordPress site in masonry grid view.
Param name
Tab
Description
ImagesGeneralSelect images from media library.
Display StyleGeneralSelect display style for grid.
Show filterGeneralAppend filter to grid.
Grid elements per rowGeneralSelect number of single grid elements per row.
GapGeneralSelect gap between grid elements.
Include onlyGeneralAdd posts, pages, etc. by title.
Note: active only if “Data source” is set to “List of IDs”.
Custom queryGeneralBuild custom query according to WordPress Codex.
Note: active only if “Data source” is set to “Custom query”.
Items per pageGeneralNumber of items to show per page.
Note: active only if “Display style” is set to “Load more button”, “Lazy loading” or “Paginator”.
Grid element templateItem designSelect predefined grid element template.
Note: It is allowed to create new template or modify selected. Predefined templates will be cloned.
Filter byFilterSelect filter source.
StyleFilterSelect filter display style.
AlignmentFilterSelect filter alignment.
ColorFilterSelect filter color.
Filter sizeFilterSelect filter size.
Button TextLoad more buttonEnter text for “Load more” button.
Note: “Load more” will be used by default.
Button styleLoad more buttonSelect button style.
Button shapeLoad more buttonSelect button shape.
Button colorLoad more buttonSelect button color.
Button sizeLoad more buttonSelect button size.
Button alignmentLoad more buttonSelect button alignment.
Button iconLoad more buttonAdd icon to “Load more” button.
Design OptionsControl borders, background and other styling options.

Post Slider

Create slider from your WordPress site posts, pages or custom posts. Display featured images and take full control over their settings and styling.
Param name
Description
Widget titleEnter text used as widget title (Note: located above content element).
Slider typeSelect slider type: Flex slider fade, Flex slider slide, Nivo slider.
Slider countEnter number of slides to display (Note: Enter “All” to display all slides).
Auto rotateAuto rotate slides each X seconds.
Post typesSelect source for slider: post, page.
DescriptionSelect source to use for description (Note: some sliders do not support it).
LinkLink type: Link to post, Link to bigger image, Open custom links, No link.
Custom linksEnter links for each slide here. Divide links with line breaks (Enter).

Note: active only if “Link” is set to “Open custom links”.

Thumbnail sizeEnter thumbnail size. Example: thumbnail, medium, large, full or other sizes defined by current theme. Alternatively enter image size in pixels: 200×100 (Width x Height).
Post/Page IDsEnter page/posts IDs to display only those records (Note: separate values by commas (,)). Use this field in conjunction with “Post types” field.
CategoriesEnter categories by names to narrow output (Note: only listed categories will be displayed, divide categories with linebreak (Enter)).
Order bySelect how to sort retrieved posts. More at WordPress codex page.
Sort orderSelect ascending or descending order. More at WordPress codex page.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Witgetised Sidebar

“Widgetised Sidebar“ add widget area created before.
Param name
Description
Widget titleTitle of element which will be displayed above widget.
SidebarChoose which widget area to output.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Button

Add button with multiple color and styling options:

  • Modern
  • Classic
  • Flat
  • Outline
  • 3D
  • Custom
  • Outline custom
Param name
Description
TextText which will appear on the button.
URL (Link)Button link.
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.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Call to Action

Create call to action block with heading, text, button and control its styling.
Param name
Description
HeadingEnter text for heading line.
SubheadingEnter text for subheading line.
Use Custom font for Heading?Adds option to set Custom font to Heading.
Use Custom font for Subheading?Adds option to set Custom font to Subheading.
Text alignmentSelect text alignment in “Call to Action” block.
ShapeSelect call to action shape.
StyleSelect call to action display style.
ColorSelect color of the Call to Action.
Note: Available if “Style” is not “Custom”.
Background colorSelect color for background with color picker.
Note: Available if “Style” is set to “Custom”.
Text colorSelect color for text with color picker.
Note: Available if “Style” is set to “Custom”.
TextAdd/Edit text of call to action block using WYSIWYG editor TinyMCE.
WidthSelect call to action width (percentage).
Add button?Add button to Call to Action. Control position, alignment, style, color etc.
Add icon?Add icon to Call to Action. Control position, alignment, background, color etc.
CSS animationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Hover Box

Add interactive hover box with image and paragraph content and active state control.
Param name
Tab
Description
ImageGeneralSelect image from media library.
Primary titleGeneralEnter text for the heading line.
Use custom font?GeneralAdds option to set Custom font to Heading.
Primary title alignmentGeneralSelect alignment for the title.
ShapeGeneralSelect hover box shape.
WidthGeneralSelect hover box width in percentage of a parent container.
AlignmentGeneralSelect hover box alignment in a parent container.
Reverse blocksGeneralSet active side of the hover box.
CSS animationGeneralAdd animation to your element.
Element IDGeneralAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameGeneralAdd class name in order to refer to this element in CSS.
Design OptionsDesign OptionsControl borders, background and other styling options.
Hover titleHover BlockEnter text for the hover heading line.
Use custom font?Hover BlockAdds option to set Custom font to Hover title.
Hover title alignmentHover BlockSelect alignment for the title.
Hover textHover BlockEnter paragraph text for the hover block.
Background colorHover BlockSelect background color for the hover block. (Note: Select Custom to choose a color with the color picker)
Add button?Hover BlockAdds option to set button at the bottom of the hover block.

Video Player

Insert video in your layout. Choose from multiple formats accepted by WordPress.
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
Video linkLink to the video. More about supported formats at WordPress codex page.
Video widthSelect video width in percentage. Percentage will be calculated from the size of container (column).
Video aspect ratioSelect aspect ratio of video with 16:9 set as default.
AlignmentControl alignment of video player within container (column).
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Google Maps

Insert Google Maps within your iframe.
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
Map embed iframe
  1. Visit Google maps to create your map.

  2. Find location

  3. Click “Share” and make sure map is public on the web

  4. Click folder icon to reveal “Embed on my site” link

  5. Copy iframe code and paste it

Map heightEnter map height in pixels.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Raw HTML

Insert your custom HTML content if necessary
Param name
Description
Raw HTMLEnter your HTML content.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Raw JS

Insert your custom JS code if necessary
Param name
Description
Raw JSEnter your JS code.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Flickr Widget

Display your photo stream from Flickr on your WordPress site with Flickr Widget. In order to place images you will need to determine your Flickr ID – which you can retrieve here: http://idgettr.com/
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
Flickr IDEnter Flickr ID.
Number of photosChoose number of photos to display.
TypeChoose photo stream type.
DisplayChoose photo display order.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Progress Bar

Display progress bar with custom values. Style your whole progress bar or separate values according to your needs.
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
UnitsEnter measurement units (if needed) Eg. %, px, points, etc. Graph value and unit will be appended to the graph title.
ColorSelect global bar color.
Values: LabelEnter text used as title of bar.
Values: ValueEnter value of bar.
Values: ColorSelect single bar background color.
Options: Add Stripes?Add stripes to your progress bars.
Options: Add animation?Add animation to stripes. Will be visible with striped bars.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Pie Chart

Display pie chart with your custom value and styling parameters.
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
Pie valueInput graph value here. Choose range between 0 and 100.
Pie label valueInput integer value for label. If empty “Pie value” will be used.
UnitsEnter measurement units (if needed) Eg. %, px, points, etc. Graph value and unit will be appended to the graph title.
Bar colorSelect pie chart color.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Round Chart

Display chart with your custom value and styling parameters in following formats:

  • Round
  • Doughnut
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
DesignSelect type of chart from Round or Doughnut.
StyleSelect chart color style.
Note: If chosen Custom then all predefined color dropdowns will be changed to color picker.
GapSelect gap between chart values.
Outline colorSelect color for gap and outline.
Custom outline colorSet custom outline color.
Note: available only when “Outline color” is set to Custom.
Show legendSelect to display legend.
Show hover valuesSelect to display values on hover.
Values: TitleEnter title for chart area.
Values: ValueEnter value for chart area.
Values: ColorSelect color for chart area.
AnimationSelect chart animation style.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Line Chart

Display chart with your custom value and styling parameters in following formats:

  • Line
  • Vertical bar
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
DesignSelect type of chart from Round or Doughnut.
StyleSelect chart color style.
Note: If chosen Custom then all predefined color dropdowns will be changed to color picker.
GapSelect gap between chart values.
Outline colorSelect color for gap and outline.
Custom outline colorSet custom outline color.
Note: available only when “Outline color” is set to Custom.
Show legendSelect to display legend.
Show hover valuesSelect to display values on hover.
X-axis valuesEnter values for X-axis.
Note: Separate values with semicolon.
Values: TitleEnter title for chart area.
Values: Y-axis valuesEnter values for chart area Y-axis.
Note: Separate values with semicolon.
Values: ColorSelect color for chart area.
AnimationSelect chart animation style.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
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.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
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
TextEnter your content.
Element tagSelect element tag.
Note: H1 tag is available for Custom Heading starting from version 4.7.
Text alignSelect text alignment.
Font sizeSelect font size. By default the size defined by your theme for specific tag will be used.
Line heightSelect line height to set space between lines.
Text colorSelect color of your text.
Use font family from the themeSet font family of Custom Heading to theme default.
Note: This will disable Font Family and Font Style options.
Font FamilySelect Google Font family from predefined list.
Font styleSelect font styling available for chosen font family. For example light, normal, bold, italic, etc.
Google Fonts previewSee how you chosen Font Family and Font style looks like.
CSS AnimationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Icon Element

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

  • Font Awesome
  • Open icons
  • Typicons
  • Entype
  • Linecons
Param name
Description
Icons sourceSelect icon source (Library).
IconSelect icon from chosen Icon source (Library).
ColorSelect color of your icon.
Note: Custom color is available.
Background styleSelect background style for your icon (default is ‘None’).
Background colorSelect color of icon’s background (only if Background style is chosen).
Note: Custom color is available.
SizeSelect icon size from Mini, Small, Medium, Large, Extra Large.
Icon alignmentSelect icon alignment.
URL (link)Icon link.
CSS animationAdd animation to your element.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.
Design OptionsControl borders, background and other styling options.

Woo Elements

Starting from version 4.4.0 WPBakery Page Builder offers all Woo Commerce shortcodes automatically mapped within your ‘Add Element’ window once you have Woo Commerce and WPBakery Page Builder installed on your WordPress site.

Default Widgets of WP

With WPBakery Page Builder you can easily add all existing default WP widgets. All widgets are listed within WPBakery Page Builder element list.
Param name
Description
Widget titleTitle of widget which will be displayed above widget.
Element IDAdd unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class nameAdd class name in order to refer to this element in CSS.

DEPRECATED

Button 1.0

Add button with or without icon to your layout. Control size, link and text of the button.
Param name
Description
Text on the buttonText which will appear on the button.
URL (Link)Button link.
ColorColor of the button.
IconSet icon which you want to display on button. Icon is not mandatory and by default field value is ‘None’.
SizeChoose one of the predefined sizes for your button.
Extra class nameAdd class name in order to refer to this element in CSS.

DEPRECATED

Button 2.0

Add button with multiple color and styling options.
Param name
Description
Text on the buttonText which will appear on the button.
URL (Link)Button link.
Button AlignmentSelect button alignment.
StyleSelect predefined style of the button, including square, rounded, outline, round, etc.
ColorColor of the button.
SizeChoose one of the predefined sizes for your button.
Extra class nameAdd class name in order to refer to this element in CSS.

DEPRECATED

Post Carousel

Add posts of your WordPress site in carousel view. Choose posts type, build your own unique query and define what kind of information to display.Important: do not place posts carrousel element within same type of posts. Such option will trigger infinite loop.

DEPRECATED

Call to Action 1.0

Create call to action block with text, button and control its styling.
Param name
Description
TextText which will appear on call to action block.
Text on the buttonText which will appear on the button.
ColorColor of the button.
IconSet icon which you want to display on button. Icon is not mandatory and by default field value is “None”.
SizeChoose one of the predefined sizes for your button.
Button positionChoose one of predefined button positions.
CSS animationAdd animation to your element.
Extra class nameAdd class name in order to refer to this element in CSS.

DEPRECATED

Call to Action 2.0

Create call to action block with heading, text, button and control its styling.
Param name
Description
Heading first lineText which will appear as a heading on call to action block.
Heading second lineText which will appear as a second heading on call to action block.
CTA styleChoose styling of call to action block from round, square, etc.
Element widthCall to action element width in percents within a column.
Text alignChoose text align within call to action block.
Custom Background ColorChoose custom background color for call to action block with color picker which allow control opacity.
Promotional textAdd/Edit text of call to action block using WYSIWYG editor TinyMCE.
Text on the buttonText which will appear on the button.
URL (Link)Button link.
StyleSelect predefined style of the button, including square, rounded, outline, round, etc.
ColorColor of the button.
SizeChoose one of the predefined sizes for your button.
Button positionChoose one of predefined button positions.
CSS animationAdd animation to your element.
Extra class nameAdd class name in order to refer to this element in CSS.

DEPRECATED

Tabs 1.0

“Tabs“ is a complex element which consists of inner section collections(tabs) and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.

Tabs and tab element has different parameters to operate with.

Tabs Parameters

Param name

Description

Widget titleTitle of element which will be displayed above widget.
Auto rotate tabsAuto rotate tabs each X seconds.
Extra class nameAdd class name in order to refer to this element in CSS.

Tab Parameters

Param name

Description

TitleTitle of tab which will be displayed in Tab header.
Tab IDunique tab id which can be used within link (can not be modified).

Important: Tabs are considered as complex elements which do not allow to insert other complex elements within.

DEPRECATED

Tour 1.0

“Tour“ is a complex element which consists of inner sections(tabs) collection and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.

Tour and inner tab element has different parameters to operate with.

Tour Parameters

Param name

Description

Widget titleTitle of element which will be displayed above widget.
Auto rotate tabsAuto rotate tabs each X seconds.
Extra class nameAdd class name in order to refer to this element in CSS.

Tab Parameters

Param name

Description

TitleTitle of tab which will be displayed in Tab header.
Tab IDunique tab id which can be used within link (can not be modified).

Important: Tour are considered as complex elements which do not allow to insert other complex elements within.

DEPRECATED

Accordion 1.0

“Accordion“ is a complex element which consists of inner sections collection and its structure is similar to row and column hierarchy. You can create as many inner sections within element as you wish and then place any type of content within.

Accordion and inner section element has different parameters to operate with.

Tour Parameters

Param name

Description

Widget titleTitle of element which will be displayed above widget.
Active sectionEnter section number to be active on load or enter false to collapse all sections.
Allow collapsible allSelect to allow all sections to be collapsible.
Extra class nameAdd class name in order to refer to this element in CSS.

Tab Parameters

Param name

Description

TitleTitle of section which will be displayed in Section header.

Important: Accordion are considered as complex elements which do not allow to insert other complex elements within.

3rd Party Plugins Support

Occasionally WPBakery Page Builder is extended with support for popular 3rd party plugins. Currently these 3rd party plugins are supported:

  1. Layer Slider
  2. Revolution Slider
  3. Contact Form 7
  4. Gravity Form
  5. Ninja Forms
  6. ACF
  7. Woo Commerce
  8. Essential Grid

After placing content element to the working canvas (page), click pencil icon to see options available for this particular content element.

Was this article helpful to you? No 7 Yes 1