Content Elements - Visual Composer - FSC “Row“ is the main content element of Visual Composer. Rows are used to divide your page into the logic blocks with columns, columns later

Created by Raitis S, last modified on Feb 09, 2016

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 ofthem as bricks. With those bricks you are building your layout. Most of the content elements have options to set them clickpencil icon. To save changes click save button.

ContentsContents

Row

Column

Text Block

Separator

Separator with Text

Message Box

Facebook 'Like'

Tweetmeme Button

Google +

Pinterest

FAQ (Toggle)

Single Image

Image Gallery

Image Carousel

Pageable Container

Pageable Container Section

Tabs

Tabs Section

Tours

Tours Section

Accordion

Accordion Section

Post Grid

Masonry Post Grid

Media Grid

Masonry Media Grid

Post Carousel

Post Slider

Witgetised Sidebar

Button

Call to Action

Video Player

Google Maps

Raw HTML

Raw JS

Flickr Widget

Progress Bar

Pie Chart

Round Chart

Line Chart

Default Widgets of WP

Button 1.0

Button 2.0

Call to Action 1.0

Call to Action 2.0

Tabs 1.0

Tour 1.0

Accordion 1.0

3rd Party Plugins Support

Row

Row

“Row“ is the main content element of Visual Composer. 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 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).

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 thatit 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 reposition).

mouse (to reposition).


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.

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).


Text Add/Edit content using WYSIWYG editor TinyMCE.

CSS animations Add animation to your element.



Separator

“Separator“ add separator line to your page.


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 with in pixels.

Element width Define line width within column in percents.



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.


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 with in pixels.

Element width Define line width within column in percents.



Message Box

“Message Box“ add noticeable message to your website in order to show success, error, warning etc.


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.



Facebook 'Like'

“Facebook Like“ add social 'Like' button.


Button type Select type of your button from predefined layouts.


Tweetmeme Button

“Tweetmeme button“ add default social 'Tweet' button.


Choose a button Select Twitter button type: Share a link, Follow, Hashtag, Mention

Depending on chosen button type align parameters for Twitter button

Language Select Twitter button language.


Google +

“Google+ button“ add social “Google+“ button.


Button size Select size of the button.

Annotation Select type of annotation presented together with button.


Pinterest

“Pinterest“ add social 'Pinit' button.


Button layout Select type of button layout.


FAQ (Toggle)

“FAQ“ add collapsible toggle to your page.


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).




Single Image

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


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".


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:

None

Link to large image

Open prettyPhoto

Open custom link

Zoom

Image link Enter link for onclick event.

Note: available if "Open custom link" is chosen in "OnClick action".



Image Gallery

Add responsive Image gallery. Choose your gallery type from Flex Slider, Nivo Slider or Image grid.



Gallery type Select gallery type from Flex Slider, Nivo Slider or Image grid.

Auto rotate slides Select interval between autorotation 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:

None

Link to large image

Open prettyPhoto

Open custom link

Custom links Enter links for onclick event.

Note: available if "Open custom link" is chosen in "OnClick action".



Image Carousel

Add fixed size animated image carousel.

Paramname

Description

Widget

title

Title of element which will be displayed above widget.

Auto

rotate

slides

Select interval between autorotation 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).

Sliderspeed

Duration of animation between slides (in ms).

Slides perview

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'tcompatible with loop mode.

Sliderautoplay

Enables autoplay mode.

Hidepaginationcontrol

If YES pagination control will be removed.

Hideprev/nextbuttons

If YES prev/next control will be removed.

Partialview

If YES part of the next slide will be visible on the right side.

Sliderloop

Enables loop mode.

Extraclassname


DesignOptions


Pageable Container

Pageable Container is Tab based complex element which consists of inner section collections(tabs) and itsstructure is similar to row and column hierarchy. You can create as many inner sections within element as youwish and then place any type of content within.



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 nonexisting number.

Pagination style Select pagination style.

Pagination color Select pagination color. Note: available only if "Pagination style" is selected.

Pagination position Select pageable navigation position.



Pageable Container Section

Pageable container section is an instance of Pageable Container element and controls one specific section. Itis similar to principe row and column.

is similar to principe row and column.


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.


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.



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 nonexisting number.


Pagination color Select pagination color.

Note: available only if "Pagination style" is selected.



Tabs Section

Tabs section is an instance of Tabs element and controls one specific tab/section. It is similar to principe row

and column.




Note: you can leave it empty.




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.



Style Select tour display style.

Shape Select tour shape.

Color Select tour color.


Note: content area of tour will be transparent.

Spacing Select tour spacing.

Note: space between tour titles.

Gap Select tour gap.

Note: space between tour titles and content area.

Position Select tour navigation position "Left" or "Right".

Alignment Select section title alignment.

Navigation width Select tour navigation width.

Autoplay Select auto rotate for tour in seconds.





Pagination color Select pagination color.

Note: available only if "Pagination style" is selected.



Tours Section

Tours section is an instance of Tours element and controls one specific section. It is similar to principe row and

column.







Accordion

Accordion is a complex element which consists of inner section collections and its structure is similar to row





Style Select accordion display style.

Shape Select accordion shape.

Color Select accordion 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.


Allow collapsible all Allow collapse all accordion sections.

Icon Select accordion navigation icon.

Position Select accordion navigation icon position.





Accordion Section

Accordion section is an instance of Accordion element and controls one specific section. It is similar to principe

row and column.








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. Predefinedtemplates 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.


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.


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.


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).



Grid elements per

row




Note: active only if "Data source" is set to "List of IDs"






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









button




button



button



button



button

Select button size.


button



button



Media Grid

Add media from Media library to your WordPress site in grid view.


Images General Select images from media library.



Grid elements per

row


row



Note: active only if "Data source" is set to "List of IDs"





Grid element

template









button




button



button



button



button

Select button size.


button



button


Arrows design Pagination Select design for arrows.

Arrows position Pagination Arrows will be displayed inside or outside grid.


Arrows color Pagination Select color for arrows.


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.


Masonry Media Grid

Add media from Media library to your WordPress site in masonry grid view.


Images General Select images from media library.



Grid elements per

row




Note: active only if "Data source" is set to "List of IDs".


Note: active only if "Data source" is set to "Custom query".



Grid element

template









button




button



button



button



button

Select button size.


button



button



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 infiniteloop.

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.

Witgetised Sidebar

“Widgetised Sidebar“ add widget area created before.



Sidebar Choose which widget area to output.



Button

Add button with multiple color and styling options:

Modern

Classic

Flat

Outline

3D

Custom

Outline custom


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.



Call to Action

Create call to action block with heading, text, button and control its styling.


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.




Video Player

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


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 aspectratio

Select aspect ratio of video with 16:9 set as default.

Alignment Control alignment of video player within container (column).



Google Maps

Insert Google Maps within your iframe.



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 web4. Click folder icon to reveal "Embed on my site" link5. Copy iframe code and paste it

Map height Enter map height in pixels.



Raw HTML

Insert your custom HTML content if necessary


Raw HTML Enter your HTML content.


Raw JS

Insert your custom JS code if necessary


Raw JS Enter your JS code.


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/



Flickr ID Enter Flickr ID.

Number of photos Choose number of photos to display.

Type Choose photo stream type.

Display Choose photo display order.



Progress Bar

Display progress bar with custom values. Style your whole progress bar or separate values according to your

needs.



Units Enter measurement units (if needed) Eg. %, px, points, etc. Graph value and unit will be

appended to the graph title.

Color Select global bar color.

Values: Label Enter text used as title of bar.

Values: Value Enter value of bar.

Values: Color Select 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.

animation?



Pie Chart

Display pie chart with your custom value and styling parameters.



Pie value Input graph value here. Choose range between 0 and 100.

Pie label value Input integer value for label. If empty "Pie value" will be used.

Units Enter measurement units (if needed) Eg. %, px, points, etc. Graph value and unit will be appended to

the graph title.

Bar color Select pie chart color.

Extra class

name


Design

Options


Round Chart

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

Round

Doughnut



Design Select type of chart from Round or Doughnut.

Style Select chart color style.

Note: If chosen Custom then all predefined color dropdowns will be changed to color picker.

Gap Select gap between chart values.

Outline color Select color for gap and outline.

Custom outline color Set custom outline color.

Note: available only when "Outline color" is set to Custom.

Show legend Select to display legend.

Show hover values Select to display values on hover.

Values: Title Enter title for chart area.

Values: Value Enter value for chart area.

Values: Color Select color for chart area.


Animation Select chart animation style.



Line Chart

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

LineVertical bar



Design Select type of chart from Round or Doughnut.

Style Select chart color style. Note: If chosen Custom then all predefined color dropdowns will be changed to color picker.

Gap Select gap between chart values.

Outline color Select color for gap and outline.

Custom outline color Set custom outline color. Note: available only when "Outline color" is set to Custom.

Show legend Select to display legend.

Show hover values Select to display values on hover.

Xaxis values Enter values for Xaxis. Note: Separate values with semicolon.

Values: Title Enter title for chart area.

Values: Yaxis values Enter values for chart area Yaxis. Note: Separate values with semicolon.


Animation Select chart animation style.



Empty Space

Insert empty space between elements with custom height.


Height Enter empty space height.



Custom Heading

Custom Heading

Create custom heading with Google Fonts, choose one of predefined fonts and apply styling.

Important: If you are using nonlatin characters be sure to activate them under Settings/VisualComposer/General Settings.


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 thetheme

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.



Icon Element

With Visual Composer you can easily add icons from following libraries:

Font AwesomeOpen iconsTypiconsEntypeLinecons


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.




Woo Elements

Starting from version 4.4.0 Visual Composer offers all Woo Commerce shortcodes automatically mapped

within your 'Add Element' window once you have Woo Commerce and Visual Composer installed on your

WordPress site.

Default Widgets of WP

With Visual Composer you can easily add all existing default WP widgets. All widgets are listed within Visual

Composer element list.




DEPRECATED

Button 1.0

Add button with or without icon to your layout. Control size, link and text of the button.


Text on the

button

Text which will appear on the button.


Color Color of the button.

Icon Set icon which you want to display on button. Icon is not mandatory and by default field value is

'None'.

Size Choose one of the predefined sizes for your button.

Extra class

name


DEPRECATED

Button 2.0

Add button with multiple color and styling options.


Text on the button Text which will appear on the button.


Button Alignment Select button alignment.

Style Select predefined style of the button, including square, rounded, outline, round, etc.




DEPRECATED

Call to Action 1.0

Create call to action block with text, button and control its styling.


Text Text which will appear on call to action block.

Text on the

button

Text which will appear on the button.


Icon Set icon which you want to display on button. Icon is not mandatory and by default field value is

"None".


Button position Choose one of predefined button positions.


Extra class

name


DEPRECATED

Call to Action 2.0

Create call to action block with heading, text, button and control its styling.


Heading first line Text which will appear as a heading on call to action block.



Auto rotate tabs Auto rotate tabs each X seconds.


Heading first line Text which will appear as a heading on call to action block.

Heading second line Text which will appear as a second heading on call to action block.

CTA style Choose styling of call to action block from round, square, etc.

Element width Call to action element width in percents within a column.

Text align Choose text align within call to action block.

Custom Background

Color

Choose custom background color for call to action block with color picker which allow control

opacity.

Promotional text Add/Edit text of call to action block using WYSIWYG editor TinyMCE.

Text on the button Text which will appear on the button.


Style Select predefined style of the button, including square, rounded, outline, round, etc.



Button position Choose one of predefined button positions.



DEPRECATED

Tabs 1.0

“Tabs“ is a complex element which consists of inner section collections(tabs) and its structure is similar to row



Tabs and tab element has different parameters to operate with.

Tabs Parameters

Tab Parameters

Paramname

Description

Title Title of tab which will be

displayed in Tab header.

Tab ID unique 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



Auto rotate tabs Auto rotate tabs each X seconds.




Active section Enter section number to be active on load or enter false to collapse all sections.

Allow collapsible all Select to allow all sections to be collapsible.


Tour 1.0

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

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

Tour Parameters

Tab Parameters

Paramname

Description

Title Title of tab which will bedisplayed in Tab header.

Tab ID unique tab id which can beused within link (can not bemodified).

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 rowand column hierarchy. You can create as many inner sections within element as you wish and then place anytype of content within.

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

Tour Parameters

Tab Parameters


Title Title 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 SupportOccasionally Visual Composer 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.

elements

Documents

Content Elements - Visual Composer - FSC “Row“ is the main content element of Visual Composer. Rows are used to divide your page into the logic blocks with columns, columns later