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 stretch	Select stretching options for row and content (Note: stretched may not work properly if parent container has “overflow: hidden” CSS property).
Column gap	Set gap between columns, all columns within row will be affected by this value.
Full height row	Set row to be full height. Note: if content will exceed screen size then row will be bigger than screen height as well.
Columns position	Set columns position for full height row – Top, Middle, Bottom. Note: active only if “Full height row” is selected.
Equal height	Set all columns to be equal height. Note: all columns will have same height as longest column.
Content position	Set 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 row.
YouTube link	Enter link to YouTube video to set it as row background. Note: YouTube video will overwrite background images and can be used with parallax effect.
Parallax	Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
Image	Select image from media library for parallax. Note: active only if “Parallax” effect is chosen.
Parallax speed	Control 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 ID	Enter row ID (Note: make sure it is unique and valid according to w3c specification).
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.

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 background	Set YouTube background for row.
YouTube link	Enter link to YouTube video to set it as row background. Note: YouTube video will overwrite background images and can be used with parallax effect.
Parallax	Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).
Image	Select image from media library for parallax. Note: active only if “Parallax” effect is chosen.
Parallax speed	Control 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 ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control borders, background and other styling options.
Width & Responsiveness	Control 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 stretch	Add 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 position	Set 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 link	Enter link to YouTube video to set it as section background. Note: YouTube video will overwrite background images and can be used with parallax effect.
Parallax	Add parallax type background for section (Note: If no image is specified, parallax will use background image from Design Options).
Image	Select image from media library for parallax. Note: active only if “Parallax” effect is chosen.
Parallax speed	Control 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 Animation	Add animation to your element.
Section ID	Enter section ID (Note: make sure it is unique and valid according to w3c specification).
Disable section	Allows you to disable section (It will not be visible to the public).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control 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
Text	Add/Edit content using WYSIWYG editor TinyMCE.
CSS animations	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
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	Choose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.
Separator alignment	Select separator alignment.
Style	Choose line styling – solid, dotted, dashed, shadow etc.
Border	Border width in pixels.
Element width	Define line width within column in percents.
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
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 with Text #

“Separator with Text“ add separator line to your page together with text which can be positioned in the centre, left or right sides of line.

Param name	Description
Title	Text which will appear on the line.
Add icon	Add icon to separator from Icon Library.
Title position	Allows positioning of your text in the centre, left or right side of the line.
Separator alignment	Select separator alignment.
Color	Choose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.
Style	Choose line styling – solid, dotted, dashed, shadow etc.
Border	Border width in pixels.
Element width	Define line width within column in percents.
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control 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 alignment	Select separator alignment.
Color	Choose color of your separator line, including Custom color chosen with Color picker or defined as RGB code.
Element width	Define line width within column in percents.
Border width	Border width size with “Medium” as default.
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control 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 Presets	Select predefined message box designs or choose “Custom” for custom styling.
Style	Select message box style.
Shape	Select message box shape.
Color	Select message box color.
Icon library	Select icon library.
Icon	Select icon from library.
Message text	Add/Edit content using WYSIWYG editor TinyMCE
CSS animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control borders, background and other styling options.

FAQ (Toggle) #

“FAQ“ add collapsible toggle to your page.

Param name	Description
Toggle title	Title of toggle which will be displayed near open/collapse button.
Toggle content	Content of toggle editable using WYSIWYG editor TinyMCE.
Style	Toggle style.
Color	Toggle icon color.
Size	Toggle size.
Default state	Ability to set default state of toggle open or closed(collapsed).
Element ID	Enter toggle ID (Note: make sure it is unique and valid according to w3c specification).
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.

Single Image #

Add simple image to your layout and style it. Add CSS animation or apply Design Options.

Param name	Description
Widget title	Title of element which will be displayed above widget.
Image source	Media Library for inserting images from Media Library; External link for inserting link to image; Featured image for using Featured image (if specified).
Image	Select image from media library. You can also upload images using media library.
External link	Enter direct link to external image. Note: available if “External link” is chosen in “Image source”.
CSS animation	Add animation to your element.
Image size	Set 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 caption	Add caption defined in Media Library.
Caption	Insert caption – available only for External images.
Image alignment	Set alignment of element within a column.
Image style	Set image style – choose from square, rounded, border etc.
OnClick action	Select onclick action:NoneLink to large imageOpen prettyPhotoOpen custom linkZoom
Image link	Enter link for onclick event. Note: available if “Open custom link” is chosen in “OnClick action”.
Design Options	Control borders, background and other styling options.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add 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 title	Title of element which will be displayed above widget.
Gallery type	Select gallery type from Flex Slider, Nivo Slider or Image grid.
Auto rotate slides	Select interval between auto-rotation of images or disable it.
Image source	Media Library for inserting images from Media Library; External links for inserting link to image;
Images	Select images from media library. You can also upload images using media library.
External links	Enter direct link to external images. Note: available if “External links” is chosen in “Image source”.
Image size	Set 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 action	Select onclick action:NoneLink to large imageOpen prettyPhotoOpen custom link
Custom links	Enter links for onclick event. Note: available if “Open custom link” is chosen in “OnClick action”.
CSS Animation	Add animation to your element.
Design Options	Control borders, background and other styling options.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.

Image Carousel #

Add fixed size animated image carousel.

Param name	Description
Widget title	Title of element which will be displayed above widget.
Auto rotate slides	Select interval between auto-rotation of images or disable it.
Images	Select images from media library. You can also upload images using media library.
Image size	Set size of your image. Set large, small etc. or set your own width x height in pixels.
On click	Define action for onclick event if needed.
Slider mode	Slides will be positioned horizontally (for horizontal swipes) or vertically (for vertical swipes).
Slider speed	Duration of animation between slides (in ms).
Slides per view	Set 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 autoplay	Enables autoplay mode.
Hide pagination control	If YES pagination control will be removed.
Hide prev/next buttons	If YES prev/next control will be removed.
Partial view	If YES part of the next slide will be visible on the right side.
Slider loop	Enables loop mode.
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control borders, background and other styling options.

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 title	Title of element which will be displayed above widget.
Style	Select tabs display style.
Shape	Select tabs shape.
Color	Select tabs color.
Do not fill content area	Do not fill content area with color. Note: content area of tab will be transparent.
Spacing	Select tabs spacing. Note: space between tab titles.
Gap	Select tabs gap. Note: space between tab titles and content area.
Alignment	Select tabs section title alignment.
Autoplay	Select auto rotate for tabs in seconds. Note: disabled by default.
Active section	Enter active section number. Note: to have all sections closed on initial load enter non-existing number.
Pagination style	Select pagination style.
Pagination color	Select pagination color. Note: available only if “Pagination style” is selected.
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control 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
Title	Enter section title. Note: you can leave it empty.
Section ID	Enter section ID (Note: make sure it is unique and valid according to w3c specification).
Add icon	Add icon to button from icon library.
Extra class name	Add 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 title	Title of element which will be displayed above widget.
Style	Select accordion display style.
Shape	Select accordion shape.
Color	Select accordion color.
Do not fill content area	Do not fill content area with color. Note: content area of accordion will be transparent.
Spacing	Select accordion spacing. Note: space between accordion sections, section titles and content area.
Gap	Select accordion gap. Note: space between accordion sections.
Alignment	Select accordion section title alignment.
Autoplay	Select auto rotate for tabs in seconds. Note: disabled by default.
Allow collapsible all	Allow collapse all accordion sections.
Icon	Select accordion navigation icon.
Position	Select accordion navigation icon position.
Active section	Enter active section number. Note: to have all sections closed on initial load enter non-existing number.
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control 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
Title	Enter section title. Note: you can leave it empty.
Section ID	Enter section ID (Note: make sure it is unique and valid according to w3c specification).
Add icon	Add icon to button from icon library.
Extra class name	Add 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 source	General	Select content type for your grid.
Narrow data source	General	Enter categories, tags or custom taxonomies.
Total items	General	Set max limit for items in grid or enter -1 to display all (limited to 1000).
Display Style	General	Select display style for grid.
Show filter	General	Append filter to grid.
Grid elements per row	General	Select number of single grid elements per row.
Gap	General	Select gap between grid elements.
Include only	General	Add posts, pages, etc. by title. Note: active only if “Data source” is set to “List of IDs”.
Custom query	General	Build custom query according to WordPress Codex. Note: active only if “Data source” is set to “Custom query”
Items per page	General	Number of items to show per page. Note: active only if “Display style” is set to “Load more button”, “Lazy loading” or “Paginator”.
Order by	Data settings	Select order type. If “Meta value” or “Meta value Number” is chosen then meta key is required.
Sorting	Data settings	Select sorting order.
Offset	Data settings	Number of grid elements to displace or pass over.
Exclude	Data settings	Exclude posts, pages, etc. by title.
Grid element template	Item design	Select predefined grid element template. Note: It is allowed to create new template or modify selected. Predefined templates will be cloned.
Filter by	Filter	Select filter source.
Style	Filter	Select filter display style.
Alignment	Filter	Select filter alignment.
Color	Filter	Select filter color.
Filter size	Filter	Select filter size.
Button Text	Load more button	Enter text for “Load more” button. Note: “Load more” will be used by default.
Button style	Load more button	Select button style.
Button shape	Load more button	Select button shape.
Button color	Load more button	Select button color.
Button size	Load more button	Select button size.
Button alignment	Load more button	Select button alignment.
Button icon	Load more button	Add icon to “Load more” button.
Arrows design	Pagination	Select design for arrows.
Arrows position	Pagination	Arrows will be displayed inside or outside grid. Note: active only if “Arrow design” is chosen.
Arrows color	Pagination	Select color for arrows. Note: active only if “Arrow design” is chosen.
Pagination style	Pagination	Select pagination style.
Pagination color	Pagination	Select pagination color. Note: active only if “Pagination style” is chosen.
Loop pages?	Pagination	Allow items to be repeated in infinite loop (carousel).
Autoplay delay	Pagination	Enter value in seconds. Set -1 to disable autoplay.
Animation In	Pagination	Select “animation in” for page transition.
Animation Out	Pagination	Select “animation out” for page transition.
Design Options		Control 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 source	General	Select content type for your grid.
Narrow data source	General	Enter categories, tags or custom taxonomies.
Total items	General	Set max limit for items in grid or enter -1 to display all (limited to 1000).
Display Style	General	Select display style for grid.
Show filter	General	Append filter to grid.
Grid elements per row	General	Select number of single grid elements per row.
Gap	General	Select gap between grid elements.
Include only	General	Add posts, pages, etc. by title. Note: active only if “Data source” is set to “List of IDs”
Custom query	General	Build custom query according to WordPress Codex. Note: active only if “Data source” is set to “Custom query”
Items per page	General	Number of items to show per page. Note: active only if “Display style” is set to “Load more button”, “Lazy loading” or “Paginator”.
Order by	Data settings	Select order type. If “Meta value” or “Meta value Number” is chosen then meta key is required.
Sorting	Data settings	Select sorting order.
Offset	Data settings	Number of grid elements to displace or pass over.
Exclude	Data settings	Exclude posts, pages, etc. by title.
Grid element template	Item design	Select predefined grid element template. Note: It is allowed to create new template or modify selected. Predefined templates will be cloned.
Filter by	Filter	Select filter source.
Style	Filter	Select filter display style.
Alignment	Filter	Select filter alignment.
Color	Filter	Select filter color.
Filter size	Filter	Select filter size.
Button Text	Load more button	Enter text for “Load more” button. Note: “Load more” will be used by default.
Button style	Load more button	Select button style.
Button shape	Load more button	Select button shape.
Button color	Load more button	Select button color.
Button size	Load more button	Select button size.
Button alignment	Load more button	Select button alignment.
Button icon	Load more button	Add icon to “Load more” button.
Design Options		Control 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
Text	Text which will appear on the button.
URL (Link)	Button link.
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.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control 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
Heading	Enter text for heading line.
Subheading	Enter 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 alignment	Select text alignment in “Call to Action” block.
Shape	Select call to action shape.
Style	Select call to action display style.
Color	Select color of the Call to Action. Note: Available if “Style” is not “Custom”.
Background color	Select color for background with color picker. Note: Available if “Style” is set to “Custom”.
Text color	Select color for text with color picker. Note: Available if “Style” is set to “Custom”.
Text	Add/Edit text of call to action block using WYSIWYG editor TinyMCE.
Width	Select 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 animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control borders, background and other styling options.

Video Player #

Insert video in your layout. Choose from multiple formats accepted by WordPress.

Param name	Description
Widget title	Title of widget which will be displayed above widget.
Video link	Link to the video. More about supported formats at WordPress codex page.
Video width	Select video width in percentage. Percentage will be calculated from the size of container (column).
Video aspect ratio	Select aspect ratio of video with 16:9 set as default.
Alignment	Control alignment of video player within container (column).
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control borders, background and other styling options.

Raw HTML #

Insert your custom HTML content if necessary

Param name	Description
Raw HTML	Enter your HTML content.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control borders, background and other styling options.

Raw JS #

Insert your custom JS code if necessary

Param name	Description
Raw JS	Enter your JS code.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
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.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
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
Text	Enter your content.
Element tag	Select element tag. Note: H1 tag is available for Custom Heading starting from version 4.7.
Text align	Select text alignment.
Font size	Select font size. By default the size defined by your theme for specific tag will be used.
Line height	Select line height to set space between lines.
Text color	Select color of your text.
Use font family from the theme	Set font family of Custom Heading to theme default. Note: This will disable Font Family and Font Style options.
Font Family	Select Google Font family from predefined list.
Font style	Select font styling available for chosen font family. For example light, normal, bold, italic, etc.
Google Fonts preview	See how you chosen Font Family and Font style looks like.
CSS Animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control 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 source	Select icon source (Library).
Icon	Select icon from chosen Icon source (Library).
Color	Select color of your icon. Note: Custom color is available.
Background style	Select background style for your icon (default is ‘None’).
Background color	Select color of icon’s background (only if Background style is chosen). Note: Custom color is available.
Size	Select icon size from Mini, Small, Medium, Large, Extra Large.
Icon alignment	Select icon alignment.
URL (link)	Icon link.
CSS animation	Add animation to your element.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.
Design Options	Control borders, background and other styling options.

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 title	Title of widget which will be displayed above widget.
Element ID	Add unique element ID (Note: make sure it is unique and valid according to w3c specification).
Extra class name	Add class name in order to refer to this element in CSS.