Visual Composer Shortcodes

Hydd use an visual composer additional blocks or shortcodes that organized into tabbed sections and each option has a description of what it will do. Following steps gives the brief descriptions of each visual composer shortcode options.

Navigate to Pages > Add New. Click BACKEND EDITOR button.

A Visual Composer tab for backend is open. Click on Plus icon(+).

Add element pop will open and Navigate to Theme Addons. You can see the visual composer options.

Visual Composer Shortcode list

Below showing a complete list of all the shortcodes included in Visual Composer and having customization options for each one. The list of Visual Composer shortcodes are following.

Row Settings

Section Title

List Item

Feature Box

Icon Settings

Circle Counters

Service Box

Google Maps

Anything Carousel

Piechart

Day Counter

Counters

Day Counter

Event Lists

EDD

Pricing Table

HTML Block

Blog Post

Latest Post

Portfolio Grid

Portfolio Slider

Client Slider

Modals

Testimonial Grid

Testimonial Slider

Team Grid

Team List

Team Slider

Table

Twitter

Contact Info

Contact Form

Mailchimp Form

Woo Product Slider

Services Grid

Row Settings

General – The General setting for Latest Product Slider are following.

Row stretch – Select stretching options for row and content such as Strech Row, Strech Row and Content, Strech Row and Content(No Paddings).

Use video background? – Checked video will be used as row background.

Parallax – Add parallax type background for row.

Row ID – You can Enter row ID for one page template.

Background Style – You can choose various background style such as light bg, dark bg, theme color bg, Image Left Content on Right, Image Right Content On Left.

Image Left Content on Right – This options allows you to add the Image on the left side and content on right side. In row settings choose image left, content on right option from the background style options. Choose the image want to show on left side. The image will shows 50% on the left part and you can set the content inside the row shows remaining 50% on right part of the section.

Column Match Height – Use this option to make all column in equal heights.

Center Row Content – Use this option to add container and center the inner content. Useful when using full-width pages.

Enable Background Image Overlay? – Check this box to enable the overlay for background image.

Typography Style – Choose the text color for required background style.

CSS Animation – Select type of animation for element to be animated when it “enters” the browsers viewport.

Minimum Height – You can enter a minimum height for this row.

Design Options – The design option includes the border styles, margin, padding, background options.

Video – You can check this box to enable the options for video background.

Background – Select the kind of background would you like to set for this row.

Default – This is default background style.

Single Color – This option allows you choose the single color for background.

Gradient Color – This option allows you choose the gradient color.

Image/Parallax – You can choose image with normal or parallax for background options.

Youtube Video – You can set youtube video for background.

Hosted Video – You can set hosted video for background style.

Effect – This option allows you to choose effect for the background styles.

Easy Parallax – If enabled, the elements inside row – will move slowly as user scrolls.

Fade Effect on Scroll – If enabled, the the content inside row will fade out slowly as user scrolls down.

Enable Overlay – This option allows you to set the overlay color for background style. Select RGBA values or opacity will be set to 20% by default and You can select Fancy Multi Color Overlay also.

Seperator – You can enable/disable seperator using different shapes with different positions.

Hide Row – You can hide this row for all screens from Large Desktop to Small Mobile.

USER FRIENDLY

STUNNING FLEXIBILITY

Row Settings Output

Section Title

Generel – You can add Extra Classes, Animation and Alignment from this options.

Heading – This option allows you to add Heading and includes the following options.

Heading Type – This option allows you to add heading type such as h2, h3, h4, h5, div.

Heading Text Transform – The text transform option such as Default, None, Capitalize, Uppercase, Lowercase.

Heading Font Size – This option allows you to add font size for heading.

Heading Color – You can choose color for the heading.

Heading Margin – You can set the margin for the header.

Content – You can add Content for this section title option.

Section Title

I am text block. Please change this dummy text in your page editor for this section. I am text block. Please change this dummy text in your page editor for this section. I am text block. Please change this dummy text in your page editor for this section.

Section Title Output

List Item

Generel – You can add Extra Classes, Animation and Alignment from this options.

Icon – This option allows you to add Icon and includes the following options.

Alignment – You can choose alignment for the icon such as Default, Center, Left, Right.

Choose from Icon library – This option allows you to select icon library such as Font Awesome, Lineicons, Flaticons, Icomoon.

Icon – This option allows you to select icon from libraries.

Icon Color – You can choose color for Icon.

Icon size – You can set size of the icon.

I am text block. Please change this dummy text in your page editor for this list item section. I am text block. Please change this dummy text in your page editor for this list item section. I am text block. Please change this dummy text in your page editor for this list item section.

List Item Output

Feature Box Settings

Generel – The General setting for the feature box are following.

ID – This option allows you to set ID.

Extra Classes – You can add extra classes for the feature box.

CSS Animation – You can select animation for the feature box such as Top to bottom, Bottom to top, Left to right, Right to left.

Style – You can select the feature box style such as default box, box with background, outline box, overlay style.

Alignment – Choose alignment options such as Default, Center, Right, Left.

Image – The Image includes the following options.

Image – This option allows you to set Image for feature box.

Image Shapes – You can set shapes for the images such as Rounded, Circle, Angled.

Image Filters – Choose filter option such as default, Grayscale.

Image Hover Effects – You can set hover effects such as Fade Out, Fade In, Grow.

Icon – This option allows you to add Icon and includes the following options.

Choose from Icon library – You can choose icon from the library such as Font Awesome, Lineicons, Flaticons, Icomoon.

Icon Size – Choose icon size such as Small, Medium, Large, Extra Large.

Icon Shape – You can select icon with different shapes such as Circle, Rounded, Square, Angle.

Icon Background Style – The background style contains Default Background, Light Background, Dark Background, Transparent, Pattern Background, Bordered, Bordered Without Background.

Icon Hover Style – Color, Background Color, Border Color, All colors.

Heading – The following options include the Heading settings.

Heading URL – Enter the destination URL and link text.

Heading Type – This option allows you to add heading type such as h2, h3, h4, h5, div.

Heading Font Size – This option allows you to add font size for heading.

Heading Alignment – You can choose heading alignment such as Default, Center, Left, Right.

Content – This option allows you to add content for the feature box.

Styling – This option allows you to add color for Heading, Content, Icon, Icon Background Color.