Content Elements. Contents. Row

Transcription

1 Content Elements Created by Raitis S, last modified on Feb 09, 2016 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. Contents Contents 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

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

3 mouse (to re position). 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 CSS animations Add/Edit content using WYSIWYG editor TinyMCE. Add animation to your element. Separator Separator add separator line to your page. Separator alignment Style Border Element width Choose color of your separator line, including Custom color chosen with picker or defined as RGB code. Select separator alignment. Choose line styling solid, dotted, dashed, shadow etc. Border with in pixels. 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.

4 Title Add icon Title position Separator alignment Style Border Element width Text which will appear on the line. Add icon to separator from Icon Library. Allows positioning of your text in the centre, left or right side of the line. Select separator alignment. Choose color of your separator line, including Custom color chosen with picker or defined as RGB code. Choose line styling solid, dotted, dashed, shadow etc. Border with in pixels. 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 Style Shape Icon library Icon Message text CSS animation Select predefined message box designs or choose "Custom" for custom styling. Select message box style. Select message box shape. Select message box color. Select icon library. Select icon from library. Add/Edit content using WYSIWYG editor TinyMCE Add animation to your element. Facebook 'Like' Facebook Like add social 'Like'. Button type Select type of your from predefined layouts.

5 Tweetmeme Button Tweetmeme add default social 'Tweet'. Choose a Select Twitter type: Share a link, Follow, Hashtag, Mention Depending on chosen type align parameters for Twitter Language Select Twitter language. Google + Google+ add social Google+. Button size Annotation Select size of the. Select type of annotation presented together with. Pinterest Pinterest add social 'Pinit'. Button layout Select type of layout. FAQ (Toggle) FAQ add collapsible toggle to your page. Toggle title Title of toggle which will be displayed near open/collapse.

6 Toggle content Style Size Default state Element ID CSS animation Content of toggle editable using WYSIWYG editor TinyMCE. Toggle style. Toggle icon color. Toggle size. Ability to set default state of toggle open or closed(collapsed). Enter toggle ID (Note: make sure it is unique and valid according to w3c specification). Add animation to your element. Single Image Add simple image to your layout and style it. Add CSS animation or apply. Image source Image External link CSS animation Image size Add caption Caption Image alignment Image style OnClick action Title of element which will be displayed above widget. Media Library for inserting images from Media Library; External link for inserting link to image; Featured image for using Featured image (if specified). Select image from media library. You can also upload images using media library. Enter direct link to external image. Note: available if "External link" is chosen in "Image source". Add animation to your element. 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 defined in Media Library. Insert caption available only for External images. Set alignment of element within a column. Set image style choose from square, rounded, border etc. 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".

7 Image Gallery Add responsive Image gallery. Choose your gallery type from Flex Slider, Nivo Slider or Image grid. Gallery type Auto rotate slides Image source Images External links Image size OnClick action Custom links Title of element which will be displayed above widget. Select gallery type from Flex Slider, Nivo Slider or Image grid. Select interval between auto rotation of images or disable it. Media Library for inserting images from Media Library; External links for inserting link to image; Select images from media library. You can also upload images using media library. Enter direct link to external images. Note: available if "External links" is chosen in "Image source". 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. Select onclick action: None Link to large image Open prettyphoto Open custom link Enter links for onclick event. Note: available if "Open custom link" is chosen in "OnClick action". Image Carousel Add fixed size animated image carousel. Param name Widget title Auto rotate slides Images Image size On click Slider mode Title of element which will be displayed above widget. Select interval between auto rotation of images or disable it. Select images from media library. You can also upload images using media library. Set size of your image. Set large, small etc. or set your own width x height in pixels. Define action for onclick event if needed. Slides will be positioned horizontally (for horizontal swipes) or vertically (for vertical swipes).

8 Slider speed Slides per view Slider autoplay Hide pagination control Hide prev/next s Partial view Slider loop Extra class name Design Options Duration of animation between slides (in ms). 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. Enables autoplay mode. If YES pagination control will be removed. If YES prev/next control will be removed. If YES part of the next slide will be visible on the right side. Enables loop mode. 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 element as you wish and then place any type of content within. Autoplay Active section Pagination style Pagination color Pagination position Title of element which will be displayed above widget. Select auto rotate for tabs in seconds. Note: disabled by default. Enter active section number. Note: to have all sections closed on initial load enter non existing number. Select pagination style. Select pagination color. Note: available only if "Pagination style" is selected. Select pageable navigation position. 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.

9 is similar to principe row and column. Title Section ID Add icon Enter section title. Note: you can leave it empty Enter section ID (Note: make sure it is unique and valid according to w3c specification). Add icon to 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 Shape Do not fill content area Spacing Gap Alignment Autoplay Active section Pagination style Pagination color Title of element which will be displayed above widget. Select tabs display style. Select tabs shape. Select tabs color. Do not fill content area with color. Note: content area of tab will be transparent. Select tabs spacing. Note: space between tab titles. Select tabs gap. Note: space between tab titles and content area. Select tabs section title alignment. Select auto rotate for tabs in seconds. Note: disabled by default. Enter active section number. Note: to have all sections closed on initial load enter non existing number. Select pagination style. 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.

10 Title Section ID Add icon Enter section title. Note: you can leave it empty. Enter section ID (Note: make sure it is unique and valid according to w3c specification). Add icon to from icon library. 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 Shape Do not fill content area Spacing Gap Position Alignment Navigation width Autoplay Active section Pagination style Pagination color Title of element which will be displayed above widget. Select tour display style. Select tour shape. Select tour color. Do not fill content area with color. Note: content area of tour will be transparent. Select tour spacing. Note: space between tour titles. Select tour gap. Note: space between tour titles and content area. Select tour navigation position "Left" or "Right". Select section title alignment. Select tour navigation width. Select auto rotate for tour in seconds. Note: disabled by default. Enter active section number. Note: to have all sections closed on initial load enter non existing number. Select pagination style. 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.

11 Title Section ID Add icon Enter section title. Note: you can leave it empty. Enter section ID (Note: make sure it is unique and valid according to w3c specification). Add icon to from icon library. 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. Style Shape Do not fill content area Spacing Gap Alignment Autoplay Allow collapsible all Icon Position Active section Title of element which will be displayed above widget. Select accordion display style. Select accordion shape. Select accordion color. Do not fill content area with color. Note: content area of accordion will be transparent. Select accordion spacing. Note: space between accordion sections, section titles and content area. Select accordion gap. Note: space between accordion sections. Select accordion section title alignment. Select auto rotate for tabs in seconds. Note: disabled by default. Allow collapse all accordion sections. Select accordion navigation icon. Select accordion navigation icon position. Enter active section number. Note: to have all sections closed on initial load enter non existing number. Accordion Section Accordion section is an instance of Accordion element and controls one specific section. It is similar to principe row and column. Title Enter section title.

12 Title Section ID Add icon Enter section title. Note: you can leave it empty. Enter section ID (Note: make sure it is unique and valid according to w3c specification). Add icon to from icon library. 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. Tab 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 " ", "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. Filter Select filter color. Filter size Filter Select filter size. Button Text Enter text for "". Note: "" will be used by default.

13 Button style Button shape Button color Button size Button alignment Button icon Select style. Select shape. Select color. Select size. Select alignment. Add icon to "". 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. 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. Tab 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.

14 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 " ", "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. Filter Select filter color. Filter size Filter Select filter size. Button Text Button style Button shape Button color Button size Button alignment Button icon Enter text for "". Note: "" will be used by default. Select style. Select shape. Select color. Select size. Select alignment. Add icon to "". Media Grid Add media from Media library to your WordPress site in grid view. Tab Images General Select images from media library. 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.

15 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 " ", "Lazy loading" or "Paginator". 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. Filter Select filter color. Filter size Filter Select filter size. Button Text Button style Button shape Button color Button size Button alignment Button icon Enter text for "". Note: "" will be used by default. Select style. Select shape. Select color. Select size. Select alignment. Add icon to "". 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.

16 Masonry Media Grid Add media from Media library to your WordPress site in masonry grid view. Tab Images General Select images from media library. 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 " ", "Lazy loading" or "Paginator". 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. Filter Select filter color. Filter size Filter Select filter size. Button Text Button style Button shape Enter text for "". Note: "" will be used by default. Select style. Select shape. Button color Button size Button alignment Button icon Select color. Select size. Select alignment. Add icon to "".

17 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. 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 Title of element which will be displayed above widget. Choose which widget area to output. Button Add with multiple color and styling options: Modern Classic Flat Outline 3D Custom Outline custom Text URL (Link) Style Shape Text which will appear on the. Button link. Select display style. Select shape. Select color of the. Note: Available if "Style" is not "Custom".

18 Background color Text color Size Alignment Set full width? Add icon? CSS Animation Select color for background of the with color picker. Note: Available if "Style" is set to "Custom". Select color for text on the with color picker. Note: Available if "Style" is set to "Custom". Select display size. Select alignment. Set to full width within column. Note: Available if "Alignment" is not "Inline". Add icon to from icon library. Control alignment of icon. Add animation to your element. Call to Action Create call to action block with heading, text, and control its styling. Heading Subheading Use Custom font for Heading? Use Custom font for Subheading? Text alignment Shape Style Background color Text color Text Width Add? Add icon? CSS animation Enter text for heading line. Enter text for subheading line. Adds option to set Custom font to Heading. Adds option to set Custom font to Subheading. Select text alignment in "Call to Action" block. Select call to action shape. Select call to action display style. Select color of the Call to Action. Note: Available if "Style" is not "Custom". Select color for background with color picker. Note: Available if "Style" is set to "Custom". Select color for text with color picker. Note: Available if "Style" is set to "Custom". Add/Edit text of call to action block using WYSIWYG editor TinyMCE. Select call to action width (percentage). Add to Call to Action. Control position, alignment, style, color etc. Add icon to Call to Action. Control position, alignment, background, color etc. Add animation to your element.

19 Video Player Insert video in your layout. Choose from multiple formats accepted by WordPress. Video link Video width Video aspect ratio Alignment Title of widget which will be displayed above widget. Link to the video. More about supported formats at WordPress codex page. Select video width in percentage. Percentage will be calculated from the size of container (column). Select aspect ratio of video with 16:9 set as default. Control alignment of video player within container (column). Google Maps Insert Google Maps within your iframe. Map embed iframe Title of widget which will be displayed above widget. 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 height Enter map height in pixels. Raw HTML Insert your custom HTML content if necessary Raw HTML Enter your HTML content.

20 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: Flickr ID Number of photos Type Display Title of widget which will be displayed above widget. Enter Flickr ID. Choose number of photos to display. Choose photo stream type. 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 Values: Label Values: Value Values: Options: Add Stripes? Options: Add animation? Title of widget which will be displayed above widget. Enter measurement units (if needed) Eg. %, px, points, etc. Graph value and unit will be appended to the graph title. Select global bar color. Enter text used as title of bar. Enter value of bar. Select single bar background color. Add stripes to your progress bars. Add animation to stripes. Will be visible with striped bars.

21 animation? Pie Chart Display pie chart with your custom value and styling parameters. Title of widget which will be displayed above widget. Pie value Input graph value here. Choose range between 0 and 100. Pie label value Units Bar color Extra class name Design Options Input integer value for label. If empty "Pie value" will be used. Enter measurement units (if needed) Eg. %, px, points, etc. Graph value and unit will be appended to the graph title. Select pie chart color. Round Chart Display chart with your custom value and styling parameters in following formats: Round Doughnut Design Style Gap Outline color Custom outline color Show legend Show hover values Values: Title Values: Value Values: Title of widget which will be displayed above widget. Select type of chart from Round or Doughnut. Select chart color style. Note: If chosen Custom then all predefined color dropdowns will be changed to color picker. Select gap between chart values. Select color for gap and outline. Set custom outline color. Note: available only when "Outline color" is set to Custom. Select to display legend. Select to display values on hover. Enter title for chart area. Enter value for chart area. Select color for chart area.

22 Values: Animation Select color for chart area. Select chart animation style. Line Chart Display chart with your custom value and styling parameters in following formats: Line Vertical bar Design Style Gap Outline color Custom outline color Show legend Show hover values X axis values Values: Title Values: Y axis values Values: Animation Title of widget which will be displayed above widget. Select type of chart from Round or Doughnut. Select chart color style. Note: If chosen Custom then all predefined color dropdowns will be changed to color picker. Select gap between chart values. Select color for gap and outline. Set custom outline color. Note: available only when "Outline color" is set to Custom. Select to display legend. Select to display values on hover. Enter values for X axis. Note: Separate values with semicolon. Enter title for chart area. Enter values for chart area Y axis. Note: Separate values with semicolon. Select color for chart area. Select chart animation style. Empty Space Insert empty space between elements with custom height. Height Enter empty space height. Custom Heading

23 Custom Heading Create custom heading with Google Fonts, choose one of predefined fonts and apply styling. Important: If you are using non latin characters be sure to activate them under Settings/Visual Composer/General Settings. Text Element tag Text align Font size Line height Text color Use font family from the theme Font Family Font style Google Fonts preview Enter your content. Select element tag. Note: H1 tag is available for Custom Heading starting from version 4.7. Select text alignment. Select font size. By default the size defined by your theme for specific tag will be used. Select line height to set space between lines. Select color of your text. Set font family of Custom Heading to theme default. Note: This will disable Font Family and Font Style options. Select Google Font family from predefined list. Select font styling available for chosen font family. For example light, normal, bold, italic, etc. 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 Awesome Open icons Typicons Entype Linecons Icons source Icon Background style Background color Size Icon alignment URL (link) CSS animation Select icon source (Library). Select icon from chosen Icon source (Library). Select color of your icon. Note: Custom color is available. Select background style for your icon (default is 'None'). Select color of icon's background (only if Background style is chosen). Note: Custom color is available. Select icon size from Mini, Small, Medium, Large, Extra Large. Select icon alignment. Icon link. Add animation to your element.

24 Woo Elements Starting from version 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. Title of widget which will be displayed above widget. DEPRECATED Button 1.0 Add with or without icon to your layout. Control size, link and text of the. Text on the URL (Link) Icon Size Extra class name Text which will appear on the. Button link. of the. Set icon which you want to display on. Icon is not mandatory and by default field value is 'None'. Choose one of the predefined sizes for your. DEPRECATED Button 2.0

25 Add with multiple color and styling options. Text on the URL (Link) Button Alignment Style Size Text which will appear on the. Button link. Select alignment. Select predefined style of the, including square, rounded, outline, round, etc. of the. Choose one of the predefined sizes for your. DEPRECATED Call to Action 1.0 Create call to action block with text, and control its styling. Text Text on the Icon Size Button position CSS animation Extra class name Text which will appear on call to action block. Text which will appear on the. of the. Set icon which you want to display on. Icon is not mandatory and by default field value is "None". Choose one of the predefined sizes for your. Choose one of predefined positions. Add animation to your element. DEPRECATED Call to Action 2.0 Create call to action block with heading, text, and control its styling. Heading first line Text which will appear as a heading on call to action block.

26 Heading first line Heading second line CTA style Element width Text align Custom Background Promotional text Text on the URL (Link) Style Size Button position CSS animation Text which will appear as a heading on call to action block. Text which will appear as a second heading on call to action block. Choose styling of call to action block from round, square, etc. Call to action element width in percents within a column. Choose text align within call to action block. Choose custom background color for call to action block with color picker which allow control opacity. Add/Edit text of call to action block using WYSIWYG editor TinyMCE. Text which will appear on the. Button link. Select predefined style of the, including square, rounded, outline, round, etc. of the. Choose one of the predefined sizes for your. Choose one of predefined positions. Add animation to your element. 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 Title of element which will be displayed above widget. Tab Parameters Auto rotate tabs Auto rotate tabs each X seconds. Param name 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

27 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 Title of element which will be displayed above widget. Tab Parameters Auto rotate tabs Auto rotate tabs each X seconds. Param name 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: 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 Active section Allow collapsible all Title of element which will be displayed above widget. Enter section number to be active on load or enter false to collapse all sections. Select to allow all sections to be collapsible. 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.

28 3rd Party Plugins Support Occasionally 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