2.2 Vc Elements

Last Update: 2 February 2018

We have 40+ different styles of Element.

2.2.1 Tp Accordion

Accordion Styles: You can Select Accordion Styles using this option.
Transparent Navigator Bar?: By checking this option you can Make background transparent of accordion navigator bar.
Accordion Navigator Spacing: You can enter value to setup a gap in between two Accordion navigators.
Accordion Navigator Position: You can choose Accordion Navigator position using these options.
Autoplay: You can make tour accordions by selecting value in this option.(Note:Select auto rotate for tabs in seconds disabled by default).
Collapse All: By Checking this option up you can collapse all accordions by not having any active accordion.
Accordion Icon: You can select icon for accordion by using these options.
Accordion Icon Position: You can select Position for Accordion Icon Position by using these options.
Active Accordion: Enter number of Accordion which you want to show as active initially.(Note: to have all sections closed on initial load enter non-existing number) e.g. 1,2,3 etc.

Animation Settings:

Typography Options:

Color Options:

2.2.2 Advance Google Map

Add Single Or Multiple Addresses from Here
Latitude Value: Enter Latitude value of your location of Google map. You can find that using
Check link
Longitude Value: Enter Longitude value of your location of Google map. You can find that using Check link
Address text for Tooltip: Add text you want to show on Pin Icon as a Tooltip for this Location using this option.
Upload Pin Icon:Upload your address Pin Icon using this option. If blank We will use default icon.

MAP OVERLAY
Map Zoom: Enter values from 1 to 19 to zoom google map as per requirement.
Map Height: Enter Height of Google Map Section using this option.
Map Options: You can customise many google map options using this list.
Google Map Variations: You can Select Google map variations using this options.
Custom Styled Maps: We have Custom Styled Maps.
Creative Map Style: Choose one from these creative styles, which are with different color combinations and styles.

Animation Settings:

OverLay Options:

Color Options:

2.2.3 Advance Text Block

Content

Magic Scroll Settings:

Animation Settings:

Typography Settings:

Color Options:

2.2.4 Advertisement Banner

Styles: You can select different styles.
Advertisement Banner Image: Upload image of Advertisement banner using this option. .jpg, .png, .gif images supported.
Advertisement Banner Title: You can add title of advertisement banner using this option.
Advertisement Banner Sub Title: You can add sub title of advertisement banner using this option.
Hover Styles: You can Select Hover Styles using this option.

Animation Settings:

Typography Settings:

Color Settings:

Box Shadow Settings:

Button Settings:

2.2.5 Image Factory Settings

Animated Image Style: You can select different styles.
Image Source: Choose the Image Source from below options.
Image size: (Example: “thumbnail”, “medium”, “large”, “full” or other sizes defined by theme)(Example: 200×100 (Width x Height)).
Image Alignment: Choose image alignment from Right, Left or Center.
Image style: You can Select Image Styles using this option.
On Click Action: Select action for click action.
Image Hover Style: You can Select Link Open Traget Option for using this option.

Animation Settings:

Super Parallax Settings:

Mouse Move Parallax Settings:

Magic Scroll Settings:

On Hover Tilt Settings:

Overlay Special effect Settings:

2.2.6 Animated SVG

Icon Type: Pre Built SVG Icon / Custom Upload ?You can use our Pre Built Drawable SVG icons or You can upload your custom SVG from this option. You can check Drawable functionality of your SVG icon from
Check link.
Pre Built SVG icon: You can choose our tested drawable SVGs from this list.
SVG Animation Type: You can choose from different options of SVG draw animation. Test that here
Check link.
Animation Duration: You can Set SVG draw Animation Duration using this option. Test that here
Check link Check link.
SVG Alignment: You can choose alignment of SVG icon using this option.
Maximum Width: You can setup Maximum Width of SVG here in Percentage or in Pixels from this option.
Stroke(Border) Color: You can Choose SVG’s Stroke in Normal Terms Border Color Using This Option.

2.2.7 Before After

Before After Style: Horizontal/ Vertical/ Opacity ? Choose Style of Before After Option from Most popular Horizontal or Vertical as well as Latest Opacity.
Image for Before: Choose Image for Before Section from this option.
Image Label for Before: Add Label in Text format for Before Section.
Image for After: Add Label in Text format for After Section.
Mouse Hover: You can choose Mouse hover or Mouse Drag Option for animation to take effect.
Separator Line on/off: You can Show or Hide Separator line from this option.
Initial Effect Position: You can Select Number to initiate effect position. If you select 50 It will start from the middle.
Separator Icon: You can upload Separator icon from this option.

Animation Settings:

2.2.8 TS Button

Button Style: You can select different styles.
Button Text: You can write title of button from here.
Button URL: Add Button URL, Link Open Option and Follow-No Follow Option from this option.
Alignment: Choose button alignment from Right, Left or Center.
Mouse Hover: You can choose Mouse hover or Mouse Drag Option for animation to take effect.
Separator Line on/off: You can Show or Hide Separator line from this option.
Initial Effect Position: You can Select Number to initiate effect position. If you select 50 It will start from the middle.
Separator Icon: You can upload Separator icon from this option.

Icon Library:
Icon Position: Select Position of Icon before or after content from this option.

On Load Animated Background:

Content Hover Effects:

Magic Scroll:

Animation Settings:

Typography Settings:

Color Settings:

Box Shadow Settings:

2.2.9 Count Down

Launch Date

Animation Settings:

Typography Settings:

2.2.10 Creative Info Box

Menu Style: You can select different styles.
Title: You can add title of creative info box using this option.
sub Title: You can add sub title of creative info box using this option.

Animation Settings:

Button Settings:

Color Settings:

Typography Settings:

2.2.11 TP Empty Space

Desktop Empty Space: More than 768px Empty space for screens above 50px , which considered as a Desktop Screen size.

Tablet Empty Space: In between 768px and 480px width Empty space for screens above 40px , which considered as a Desktop Screen size.

Mobile Empty Space: Less than 480px width Empty space for screens above 20px , which considered as a Desktop Screen size.

2.2.12 Food Menu

Menu Style: You can select different styles.
Title: You can add title of food menu using this option.
Tag: You can add tag of food menu using this option.
Price: You can add price of food menu using this option.
Description: You can add description of food menu using this option.

Animation Settings:

Color Settings:

Typography Settings:

2.2.13 Breadcrumbs

Layout: You can select different layout.
Title Style Layout: You can select different title style layout.
Vertical Position: You can Select Breadcrumbs Title Vertical Position Layout using this option.Breadcrumb Bar Display: You can turn on/off breadcrumb bar using this option.
Breadcrumbs Styles: You can Select Breadcrumbs Styles using this option.
Breadcrumbs Bar Position: You can Select Breadcrumbs Bar Position using this option.
Breadcrumbs Bar Text Color: You can select color and Opacity for breadcrumbs bar Text using this option.
Page Title Options: You can select color and Opacity for breadcrumbs bar Text using this option.
Breadcrumb Width: You can Select a width of this section Container box or Full width
Breadcrumb Height: You can enter a height of this section in pixels using this option. e.g. 300px,700px
On Scroll Effect: You can turn on/off on scroll parallax effect of whole breadcrumb section using this option.

Icon Settings:

Background Options:

Background Options: You can Select Background Options styles using this option.

Texture Background

Top Layer: You can Select Top layer styles using this option.

Color Settings:

Typography Settings:

2.2.14 Animated Text

Styles: You can select different Styles.
Prefix Text: Enter Text, Which will be show before/ahead the Animated Text.
Title of Heading Animation: Add Multiple Text by adding Enter in each line. You can use ctrl + Enter Or Cmnd + Enter to add new line in text area.
Postfix Text: Enter Text, Which will be show After/Behind the Animated Text.
Content Alignment: Select alignment of whole Section using this option.

Animation Settings:

Color Settings:

Typography Settings:

2.2.15 Heading Style

Styles: You can select different Styles.
Title: You can add title of Heading Style using this option.
Extra Title: This is the part of title and available for some heading styles.
Extra Title Position: You can select this as prefix or postfix to main title text.
Sub Title: You can add sub title of Heading Style using this option.

Animation Settings:

Color Settings:

Typography Settings:

2.2.16 Icon Counter

Select Layout: You can select layout carousal and individual.
Styles: You can Select Icon Counter Styles using this option.
Title: You can add title of Icon Counter using this option.
Sub Title: You can add sub title of Icon Counter using this option.
Digits: Enter value of digits/numbers you want to showcase in icon counter. e.g. 200,300.
Symbol Meta Value: You can add any value in this option which will be setup as prefix or postfix on Digits. e.g. +,%,etc.
Box Alignment: You can select Box Alignment for icon using this option.

Content Hover Effects:

Animation Settings:

Icon Options:

Color Settings:

Typography Settings:

Carousal Settings:

2.2.17 Info banner

Styles: You can Select Info banner Styles using this option.
Alignment: Choose Info Banner alignment from Right, Left or Center.
Banner Image: Upload image of info banner using this option. .jpg, .png, .gif images supported.
Title: You can add Title of info banner using this option.
Symbol Meta Value: You can add any value in this option which will be setup as prefix or postfix on Digits. e.g. +,%,etc.
Button URL: Add Button URL, Link Open Option and Follow-No Follow Option from this option.

Content Hover Effects:

Animation Settings:

Color Settings:

Typography Settings:

Responsive Hide/Unhide options:

2.2.18 Info box

Select Layout: You can select layout carousal and individual.
Info Box Style: You can Select Info Box Styles using this option.
Title Of Info Box: You can add Title of info box using this option.
Description Of Info Box: You can add description of Info Box using this option.
Padding Top: You can set Padding Top using this option. E.g. 20px, 50px, 70px, etc.
Padding Bottom: You can set Padding Bottom using this option. E.g. 20px, 50px, 70px, etc.
Vertical Center: By checking this option up You can By checking this option You can make stylish list content vertical center.
Column Padding Remove: By checking this option up You can remove column padding of info boxes.
Internal Padding Remove: By checking this option up You can remove internal padding of info boxes.

Content Hover Effects:

Animation Settings:

Color Settings:

Typography Settings:

Icon Settings:

Button Settings:

Box Shadow Settings:

Border Settings:

Responsive Hide/Unhide options:

2.2.19 Magic Scroll

Magic Scroll: You can put animation on scroll for your section using this option.
Scroll Type: Choose options of animation based on position and scale for section.
(X) / Horizontal Distance: Enter Value of Horizontal Distance. You can use positive and negative value here. e.g. 10, -10 etc.
(Y) / Vertical Distance: Enter Value of Vertical Distance. You can use positive and negative value here. e.g. 10, -10 etc.
Mouse Move Parallax: This effect will be parallax on mouse move. It will move image as you move your mouse hover.
Move Parallax (X): Enter Value of Horizontal Speed move parallax. You can use positive and negative value here. e.g. 10, -10 etc.
Move Parallax (Y): Enter Value of Vertical Speed move parallax. You can use positive and negative value here. e.g. 10, -10 etc.
Cursor Icon: This option will be Cursor Icon on Content.
Select Cursor Icon: Upload image of Cursor Image using this option. You can upload .jpg, .png, .gif formats.
Box Inner Padding: Enter value of padding in between box and content.

On Hover Tilt:

On Load Animated Background:

Continuous Effect:

Content Hover Effects:

Animation Settings:

Border Settings:

Boxshadow Settings:

Border Settings:

Responsive Hide/Unhide options:

2.2.20 Row Separator

Separator Style: You can select different styles of separator styles.
Color: Choose separator Color.
Normal Image
Hover Image
X-Position: Enter Value of X positions .You can use positive and negative value here. e.g. 10, -10 etc.

Y-Position: Enter Value of Y positions . You can use positive and negative value here. e.g. 10, -10 etc.
Image Shadow: Enter Value of image E.g. 1px 1px 2px 2px #d3d3d3 etc.
Border Radius: Image Rounded Shadow of 50%.
Image URL (Link): Link Open Option and Follow-No Follow Option from this option.

Animated Hover Effect:

Image Effects:

2.2.21 Pin Points

Image Source: Choose the Image Source from below options.
Main Background Image: You can choose Main Background image for all pins from this option.
Tooltip Style: You can select tooltip Styles by using this option.
Background Color: You canselect color and Opacity for tooltip background color using this option.
Tooltip Animation: Select Tooltip Animation from given design options.
Pin Trigger: You can select the way tooltip will open using Pin.
X-Position: Enter Value of X positions .You can use positive and negative value here. e.g. 10, -10 etc.
Y-Position: Enter Value of Y positions . You can use positive and negative value here. e.g. 10, -10 etc.
Tooltip Direction: Select Tooltip style from given design options.
Pin Title: Enter Title Text for Pin using this option.
Content Description: Enter Title Text for Pin Description using this option.
Content Embeded Code: Enter content for Pin Content Embeded using this option.
Pin Style: You can Select Pin Styles using this option.
Pin Options: You can select pin design using this options
Pin Color: You can select color and Opacity for Pin color using this option.
Pin Hover Icon Color: You can select color and Opacity for pin hover icon color using this option.
Pin Background Color: You can select color and Opacity for pin hover icon color using this option.
Pin Hover Background Color: You can select color and Opacity for pin hover background color using this option.
Icon Size: Select Icon size from given design options.
Pin Effect: You can select Effect of Pin which will be continuous.

Title Font Size: You can add font size in Pixels using this option. E.g. 14px, 20px, etc.
Title Line Height: You can add Line Height in Pixels using this Option. E.g. 12px, 10px, etc.
Title Color: You can select color and Opacity for border using this option.

2.2.22 Modal Popups

Pop Up Initiator: You can choose Image or Button on click of that Pop up will be open.
Alignment: Choose alignment from Right, Left or Center.

Animation Settings:

Button Settings:

2.2.23 Pricing Table

Pricing Table Size: You can Pricing Table Size using this option.
Title: You can add title of Pricing Table using this option.
Sub Title: You can add sub title of Pricing Table using this option.
Display Button: You can Show or Hide Button from this option.

Content
Enter Price Tag: You can add digits/count of your number. e.g. 999, 99 .
Prefix Symbol: An optional symbol to place next to the number counted to. e.g. “%” or “$”
Postfix Symbol: An optional symbol to place next to the number counted to. e.g. “%” or “$”
Prefix Position: You can Select Prefix Position using this option.
Postfix Position: You can Select Postfix Position using this option.
Classic Editor: Multiple Values by pressing Enter.

Animation Settings:

Button Settings:

Icon Settings:

Typography Settings:

Color Settings:

Content Hover Effects:

2.2.24 Progress Bar

Main Style: You can select different styles.
Progress Bar Styles: You can Select Progress Bar Styles using this option.
Progress Bar Height: You can Select Progress Bar Height using this option.
Chart Fill Color: You can Select Charts fill color using this option.
Empty space color: You can select color for the space which isn’t filled by value.

Pie Chart Styles: You can Select Pie Chart Styles using this option.
Pie Chart Round Styles: You can Select Pie Chart Round Styles using this option.

Title: You can add title of Progress bar using this option.
Sub Title: You can add sub title of Progress bar using this option.
Dynamic Value: You can add Dynamic value of Progress bar using this option.
Numbers: This value will be just static numbers on progress bar. e,g, 30,70 etc.
Prefix/Postfix Symbol: An optional symbol to place next to the number counted to. e.g. \”%\” or \”+\”
Symbol Position: You can Select Symbol Position using this option.

Animation Settings:

Button Settings:

Typography Settings:

Color Settings:

2.2.25 Row Background Settings

Deep Layer: You can select different style.
Middle Layer: You can select different style.
Top Layer: You can select different style.

2.2.25 Social Icon

Social Icon Style: You can select different style.
Add Social Icon
Social Network: Choose Social Network from this option.
Social Link: Add Social Network Profile URL using this option.
Title Of Social Media: You can add title you want to show for social media using this option. E.g. FaceBook, Instagram, etc.
Icon Color: You can select color and Opacity for icon using this option.
Icon Hover Color: You can select color and Opacity for icon hover color using this option.
Background Color: You can select color and Opacity for icon hover color using this option.
Background Hover Color: You can select color and Opacity for icon hover color using this option.
Border Color: You can select color and Opacity for icon hover color using this option.
Border Hover Color: You can select color and Opacity for icon hover color using this option.

Icons Alignment: You can select Social Media Icon Alignment using this option.
Icon Font Size: You can add font size of Icon using this option.
Title Font Size: You can add font size of Icon using this option.
Title Letter Spacing: You can add font size of Icon using this option.

Animation Settings:

2.2.26 Stylish list

Content
Title: You can add title of stylish list using this option.
Title Color: You can select color and Opacity for title using this option
Title Size: You can add font size in Pixels using this option. E.g. 14px, 20px, etc.
Title Line height: You can add Line Height in Pixels using this Option. E.g. 12px, 10px, etc.
Title Letter Spacing: You can add Letter Spacing in Pixels using this Option. E.g. 1px, 2px, etc.
Vertical Center: By checking this option You can make stylish list content vertical center.

Animation Settings:

Typography Settings:

Icon Settings:

2.2.27 Tp Tabs

Tabs Styles: You can Select Tabs Styles using this option.
Justified Tab: You can style a tab in a justified mode, It will be in full width.
Tab Navigator Spacing: You can enter value to setup a gap in between two tab navigators.
Tab Navigator Position: You can choose Tab Navigator position using these options.
Tab Navigator Alignment: You can choose Tab Navigator alignment using these options.
Autoplay: You can make tabbing Autoplay by selecting value in this option.(Note:Select auto rotate for tabs in seconds disabled by default).
Active Tab: Enter number of tab which you want to show as active initially.(Note: to have all sections closed on initial load enter non-existing number) e.g. 1,2,3 etc.
Pagination Style: Select any style for pagination using these options.
Tab Navigator Padding: Enter value of inner padding of tab navigator. e.g 20px, 20px 40px , 20px 10px 20px 30px, etc.

Animation Settings:

Typography Settings:

Color Settings:

2.2.28 Tp Tours

Tours Styles: You can Select Tours Styles using this option.
Tour Navigator Spacing: You can enter value to setup a gap in between two Tour navigators.
Tour Navigator Position: You can choose Tour Navigator position using these options.
Tour Navigator Alignment: You can choose Tour Navigator alignment using these options.
Navigation width: You can make tour width selecting value in this option.
Active Tour : Enter number of Tour which you want to show as active initially.(Note: to have all sections closed on initial load enter non-existing number) e.g. 1,2,3 etc.
Pagination Style: Select any style for pagination using these options.
Tab Navigator Padding: Enter value of inner padding of tab navigator. e.g 20px, 20px 40px , 20px 10px 20px 30px, etc.

Animation Settings:

Typography Settings:

Color Settings:

2.2.29 Timeline

Select Style: You can Select timeline Styles using this option.
Starting Pin: You can select Icon/Image/Text as a Symbol of Pin Start from these options.
Icon Library: We have given options of icons from Font Awesome, Open Iconic, Typicons, Linecons, Entypo, and Mono Social.
Ending Pin: You can select Icon/Image/Text as a Symbol of Pin End from these options.
Icon Library: We have given options of icons from Font Awesome, Open Iconic, Typicons, Linecons, Entypo, and Mono Social.
Center Pin Icon Style: You can Select Icon Styles for middle part of timeline from here.

Content
Icon Library: We have given options of icons from Font Awesome, Open Iconic, Typicons, Linecons, Entypo, and Mono Social.
Icon: Your selected icon from selected Icon Library.
Pin Heading Text: You can add Heading of Pin from this section.
Pin Heading Position: You can select a position of Heading using this section.

Content Timeline
Content Title Text: You can add text for content’s title from this option.
Content Section URL: Add Content Section on Click Link, Link Open Option and Follow-No Follow Option from this option.
Content Section Image: You can Add Content Section’s Image from this option.
Content Description Text: You can Add Content Description from this option.
Main Section Alignment: You can Set Alignment of Main part from this option.
Content Section Alignment: You can Set Alignment of Main part from this option.

Animation Settings:

Typography Settings:

Color Settings:

2.2.30 View more toggle

Animation Settings:

Button Settings:

2.2.30 Unique box

Box Left: Enter Value of left.You can use positive and negative value here.E.g. auto,10%,20% etc.
Box Top: Enter Value of top.You can use positive and negative value here.E.g. auto,10%,20% etc.
Box Right: Enter Value of right.You can use positive and negative value here.E.g. auto,10%,20% etc.
Box Bottom: Enter Value of bottom.You can use positive and negative value here.E.g. auto,10%,20% etc.
Box Height: Enter Value of height.You can use positive and negative value here.E.g. auto,200px,500px etc.
Cursor Icon: This option will be Cursor Icon on Content.

Animation Settings:

Magic Scroll Settings:

Mouse Move Parallax Settings:

Responsive Hide/Unhide options:

Box Shadow Settings:

2.2.30 Video box

Choose Video Source: YouTube / Vimeo / Self Hosted ? You can Choose Video Source Type from this options.
Vimeo Id: You need to put YouTube id here. For Example, Here is a Youtube Id (oOhMGdFbYvU) from It’s Permalink (https://youtu.be/oOhMGdFbYvU).
YouTube Id: You need to put Vimeo id here. For Example, Here is a Vimeo Id (1819835) from It’s Permalink (https://vimeo.com/1819835).
Mp4 Video Link: You can upload Mp4 Version of video in Media Section of WordPress Backend and Put It’s Link Here. For Chrome, Safari and IE.
Mp4 Video Link: You can upload Mp4 Version of video in Media Section of WordPress Backend and Put It’s Link Here. For Chrome, Safari and IE.
Ogg Video Link: You can upload Mp4 Version of video in Media Section of WordPress Backend and Put It’s Link Here. For Firefox and Opera.
Only Icon / Full Banner: Enter Value of height.You can use positive and negative value here.E.g. auto,200px,500px etc.
Video On Popup: Popup Video on click .

Animation Settings:

Button Settings:

Box Shadow Settings:

2.2.30 Blog Post

Blog Style: You can select different styles.
Listing Layout: You can select different layout. grid , masonry , carousal , metro layout
Content
Choose Categories: You can choose categories from which you want to show posts by marking one or multiple.
Maximum Posts: Please entr number of posts you want to display.
Order By: You can upload Mp4 Version of video in Media Section of WordPress Backend and Put It’s Link Here. For Firefox and Opera.
Sorting Order: Enter Value of height.You can use positive and negative value here.E.g. auto,200px,500px etc.
Columns Setting: We have option Desktop Columns, Tablet Column ,Mobile Column .
Extra Options
Category Wise Filter: You can Turn On or Off Category wise Filtration option using this option.
More Post Loading Options: You can choose more post loading using this option.

Display Settings:

Animation Settings:

Button Settings:

Box Shadow Settings: