ShortCode & Settings

Shortcode

In this Section w'll explain what are the features Visual Composer.
Create a new Row ( section ) on the page, Full width Row can't be used on page with sidebar Go to Pages > Add New
Click On Backen Editor


ADD ROW LAYOUT


Go to Pages/Post and click Add Element

Select Row Module

Click on the Edit This Row (pencil icon) to Edit the Row element.
Click on the Edit This Row (pencil icon) to Edit the Row element.



To change the Row layout ( number of columns ) you need to click the second Icon from the left then select a layout or custom to make your own








EDIT, DUPLICATE AND REMOVE ELEMENTS



To Edit Row, Column or Module you need to click the Pencil icon.
To Copy Row or Module you need to click the Page icon.
To Delete Row, Column or Module you need to click the close icon.





SETUP ROW / COLUMN / CUSTOM HEADING / TEXT BLOCK, SIMGLE IMAGE DESIGN OPTIONS


When you edit row / column / custom heading / text block module, you can edit the design options.
Row / Custom Heading / Text Block element have null, you may want to set it you can set if it's required.




ROW TYPE



In this Section w'll explain how to use row type.
If you want to put your contents inside the container select row type as in container


If you want to put your contents in full width section select row type as Full Width Content



If you want to put your contents in full width background select row type as Full Width Background



If you've full width background section and if you want to use color as background simply go to Design Option click on Background and choose your favorite color.



  If you've full width background section and if you want to use image as background checked Use Overlay?

 

  Go to Design Option insert image.  

 
Create a Text Block ( WordPress editor ) on the page.

 

TEXT BLOCK SETTINGS




Text: Insert text here. Text Alignment: Set the alignment as left right or center. Font Size: Enter font size if required. Text Color: Select font color if required.
Create a Heading on the page, This is the main module you need to use to create title.

 

CUSTOM HEADING SETTINGS


 

Use only Below options:
Text Color: Enter the text color you want to diaplay as heading of thew section.
Text: Enter the text you want to diaplay as heading of thew section.
Element Tag: Select "H1 - H6", div or p
Text Align: Select alignment for your heading text.
Font Size: Select your font size.
Use theme default font family?: Use default font family for your text.
Create an Empty space on the page, great to use if you want to add space between elements.


 

EMPTY SPACE SETTINGS



 
Height: Enter height for empty space eg: 32px

CUSTOM HEADING SETTINGS


Create a Line / separator on the page.

 

LINE SAPERATOR SETTINGS




Line Type: Select line alignments as center or left.
Line color: Select the Line Color.
Top Margin: Add Top margin if needed, eg 20
Bottom Margin: Add Bottom margin if needed, eg 20
Create a Vertical Line on the page.



 

VERTICAL LINE SAPERATOR SETTINGS



Line color: Select the Line Color
Line Height: Enter height for empty space eg: 20
Top Margin: Add Top margin if needed, eg 20
Bottom Margin: Add Bottom margin if needed, eg 20
Create Heading & Description on the page.



 

HEADING & DESCRIPTION SETTINGS





Heading Tag: Select the tag for the heading.
Heading Text: Select the text for the heading.
Heading Position: Select the heading alignment left, right.
Heading Color: Select the heading color.
Dispaly Separator?: Select if you weant to display the saperator.
Use Number?: Select if you want to numbring the sections.
Number Text: Enter the section number.
Description Text: Enter the description text.
Text Color: Select the description text color.
Use Link?: checked if you want to use any link text en ter link and link text.
Top Margin: Add Top margin if needed, eg 20
Bottom Margin: Add Bottom margin if needed, eg 20
Show an Image on the page.



 

SINGLE IMAGE SETTINGS





Image source: Select the Image source Only Media Library
Image: Select the Image from media library
Image size: Enter size in pixels (Example: 200x100 (Width x Height)).
Image alignment: Select image alignment eg: left, right or center


BLOG SETTINGS





Blog View: You can choose between 2 style: Grid or List
Blog Style: You can choose style: one to four
Blog number of columns: For Masonary you can change the blog layout between 4, 3, 2 columns layout.
Category You can filter the blog using category, select the category you want to show.
Order You can change the order of the blog post in two the way: ASC or DESC.
Order By You can change the order of the blog post in 6 the way: by date, title, randome, author, ID or modifier.
Blog Pagination Checked if you want to display paginatio on your blog page
Post per page Set the number of post you want to show on the page.
Excerpt Length Set the excerpt length based on column layout
Display Discription Box? Check if you want to display description text and button.


 

BLOG CAROUSEL SETTINGS





Style You can choose between 3 styles.
Number of post to load Select the Number of post to Load.
Category You can filter the blog using category, select the category you want to show.
Order You can change the order of the blog post in two the way: ASC or DESC.
Order By You can change the order of the blog post in 6 the way: by date, title, randome, author, ID or modifier.


 

PORTFOLIO SETTINGS





Portfolio Design Type: You can select the design between 1 to 3.
Portfolio layout: You can select any of the layout such as "2 Column", "3 Column" and"4 Column".
Number of post to load: Select the Number of post to Load.
Category: You can filter the blog using category, select the category you want to show.
Order: You can change the order of the blog post in two the way: ASC or DESC.
Order By: You can change the order of the blog post in 6 the way: by date, title, randome, author, ID or modifier.
Image Hover Color
Use filter
Hover Text Color
Contents Hover Background Color
Open link in


 

TEAM SETTINGS





Team Style select the style for your team.
Number of columns You can select any of the columns layout such as "2 Column", "3 Column" and "4 Column".
Number of Team to load
Group Select team group to catagerise that
Order
Order By
Open link in new tab?
Background color
Heading color
Text color
Navigation type
After all this done, click "Save Changes" button.
Scroll down until you see the page options change the Page layout then publish the page


 

TEAM CAROUSEL SETTINGS





Carousel Style select the style for your team.
Group Select team group to catagerise that
Order
Order By
Number of Team to load
Open link in new tab?
Background color
Heading color
Text color
After all this done, click "Save Changes" button.
Scroll down until you see the page options change the Page layout then publish the page


 

CLIENT CAROUSEL SETTINGS





Style: Select the style for your client.
Client Image: Select the Multiple images.


PRICING TABLE SETTINGS





Style: Select the style for your client.
Number of Columns: You can select any of the columns layout such as "2 Column", "3 Column" & "4 Column"
Pricing Table: Select pricing group
Pricing Color: Select pricing color


 

GOOGLE MAP SETTINGS





Map Key Enter the map key for your map
Map title Enter the title for your map
Latitude Set your Latitude
Longitude Set your Longitude
Zoom Set the zoom for the map, Example : 20 ( for a close view ) , 5 ( for a far view )


 

LISTS SETTING





 

List Items: You can insert multiple list items. It contains following attributes: Icon LibraryIconList titleList Text
Contents position: Select the Contents alignment(optional).
Icon Color: Select the icon color(optional).
Icon Size: Enter the icon size (optional).
Title Font Size: Enter list title text font size(optional).
Description Text Size: Enter list description font size.(optional).


 

TESTIMONIALS SETTING





Testimonial Style: Select the testimonial style.
Testimonial List: The list contains bellow attributes:
Author image Select the Image for the testimonial, if type is with image.
Author Name Enter Author Name.
Author Information Enter Author information
Quote from author Main text for the testimonial.

 

Testimonial Style 2: When you select Testimonial style 2.

Step 1: Go to Row Setting > enter Row ID as testimonial and Extra class name as index-2 .
Step 2: Insert Section Image.
Step 3: Enter Section Heading.



 

ICON SETTING





  Select Icon: Select the Icon
Color Options Customize the Color options if needed.
Heading Enter the box title.
Descriprion Text Enter the box description.
Border Radius Enter the box border radius (e.g 20).
Text Align Set text alignment (e.g left, center).


 

ICON SETTING





  Box Image: Select image.
Image Size: Select image size.
Heading Enter the box title.
Descriprion Text Enter the box description.
Text Align Set text alignment (e.g left, center).
Color Options Customize the Color options if needed.

 

ICON BOX SETTING





  IconBox type Select the Iconbox style (design).
Select Icon: Select the Icon
Icon Size: Select Icon size.
Heading Enter the box title.
Main text Enter the box description.
Color Options Customize the Color options if needed.

BUTTON SETTING

Button type Select the Button style (design). Button size Select the button size. Use icon? Check if you want to display the icon. Border radius Select the button Border radius. Button text Enter the vutton text Font weight Select the font weight, light, regular, bold etc. Button link Insert the external link. Button position Select the Button alignment left, right. Left Margin Add Left Margin if needed, eg 20 Right Margin Add Right Margin if needed, eg 20 Top Margin Add Top margin if needed, eg 20 Bottom Margin Add Bottom margin if needed, eg 20 Color Options Customize the Color options if needed.


 

ACCORDIAN SETTING





  Widget title: Eneter Widget title.
Extra class name: Enter the extra class name for Accordion

 

ACCORDIAN SECTION SETTING





  Title: Eneter Accordion title.
Active Tab: Check for active tab.
Tab Number: Eneter tab number.
Color Options: Customize the Color options if needed.


 

PROMO BOX SETTING





  Box Title 1: Entrer box first title.
Box Title 2: Entrer box second title.
Box Text: Entrer box description text.
Select Icon Select icon.
Use Link?: Entrer box description text.
Link text: Check if you want to use likn.
Link: Entrer Button external link title.
Open link in new tab? Check if you want to opne a link in new tab.
Color Options: Customize the Color options if needed.


 

COUNTER TO SETTING





  Counter Style Select the Counter style ( design ).
Counter You can insert multiple counter the counter contains bellow inputs:
Icon Library Select icon library
Select Icon Select icon
Counter Enter the number for counter
Heading Heading for the counter
Color Options Customize the Color options if needed.  

Counter Style 3: When you select Counter style 3.

Step 1: Go to Row Setting > enter Row ID as counter and Extra class name as index-2 .
Step 2: Insert Section Image.



 

CODE BOX SETTING





  Enter the code you want to show Text for the code box.
Margin top Add Top margin if needed, eg 20
Margin bottom Add bottom margin if needed, eg 20


 

SERVICE SETTING

>
>


  Style: Select style between 1 to 3.
Column Layout: Select column layoute between Column 2 to Column 4.
Number of services: Enter the number of service items to load.
Service Group: Select service group
Order You can change the order of the blog post in two the way: ASC or DESC.
Order By You can change the order of the blog post in 6 the way: by date, title, randome, author, ID or modifier.


 

SERVICE CAROUSEL SETTING





  Style: Select style between 1 to 3.
Number of services: Enter the number of service items to load.
Service Group: Select service group
Order You can change the order of the blog post in two the way: ASC or DESC.
Order By You can change the order of the blog post in 6 the way: by date, title, randome, author, ID or modifier