Shortcodes

Let's proceed with creating our pages. Here are some usefull links to Visual Composer tutorials, which may be useful when building a page:

Official Visual Composer FAQ page

Getting Started With Visual Composer Guide

Visual Composer: A Guide To Drag & Drop Page Building

How to Add Row and Column with Visual Composer.

The whole page is build with the following elements: Rows, Block containers, Content blocks, Gaps, Columns and Blogger shortcode.
It is possible to create as many options of the page, as you want. But, you can also use the same style we have provided ( as on our demo). The following steps will be required to create the page:

Go to Pages > Add New and create a new page.

2. Specify a name for it (e.g. Home 1) and click on "Publish" button:

3. Navigate to Backend Editor (Classic Mode) > Add Element. A set of shortcodes will be open after that:

Contact Form 7

This shortcode will allow you to style contact form on the page.

Form title – add contact form title
Select contact form – select type of contact form

Row

This shortcode will allow you to style row on the page.

Video tutorial

Row stretch – select row scratch

Columns gap – select column gap
Full height row? – check full height
Equal height – check equal height of columns
Content position – choose content position
Use video background? – check video position
Parallax – add background content of parallax
Row ID – enter row id
Extra class name – add extra class name

row1

row3

Design option

CSS box – add paddings, margins, border
Border color – select border color
Border style – select border style
Border radius – select border radius
Background – select background color
Image – add image
Theme defaults – select theme defaults
Box controls – check simplify controls

row4

Responsive Margins

Desctop margin top – choose margin top
Desctop margin bottom – choose margin bottom
Tablets margin top – choose margin top
Tablets margin bottom – choose margin bottom
Mobile margin top – choose margin top
Mobile margin bottom – choose margin bottom

Single Image

This shortcode will allow you to style Single image on the page.

Video tutorial

Widget title – add widget title
Image source – select image source
Image– download image
Image size – choose image size
Add caption? – choose image caption
Image alignment – choose image alignment
Image style – choose image style
On click action – select action on click
CSS Animation – select type of animation
Extra class name – add extra class name

Tabs

This shortcode will allow you to style tabs on the page.

Video tutorial

Parameters:

Style - choose the style. It can take one of the following values: classic, modern
Tab title align - align the title center, left/right
Tab content align - align the content: center, left/right
Extra class name – add extra class name

Tab title - add title
Item text - add the text
Item subtext - add the subtext

Empty Space

This shortcode will allow you to create empty space.

Video tutorial

Height – change height
Extra class name – add extra class name

Accordion

This shortcode will allow you to create the accordion block.

Video tutorial

Items – add title, make it active or not, add text
Extra class name – add extra class name

Banner

Parameters:

Title – enter title for banner
Title tag – choose font size of banner
Content– add content
Title position– choose title position
Image– add image
Image style – select image style

baner

Blog

Video tutorial

Title– add title
Title tag – choose title tag
Title align– choose title align
Custom Categories– select categories to be displayed
Order by – choose order by item
Order type – choose order type

Button

Video tutorial

Title– add title
Url – add Url of button
Style – add button style
Size – add button size
Background color – add background color
Buttons form style – choose form style
Extra class name – add extra class name

Clients

This shortcode will allow to style clients on your page.

Video tutorial

Style– choose style
Border – choose type of border
Logos– add logos options
Item column size– choose size of columns
Extra class name – add extra class name

Contact block

Video tutorial

Title – add title
Items – add items options
List border bottom – choose type of border bottom
Align – choose block position
Color style – choose color style
Extra class name – add extra class name

Content Slider

This shortcode will allow to style content slider.

Video tutorial

Title– add title
Title tag– choose title font size
Title separator – choose separator value
Autoplay mode – choose autoplay mode
Sliding speed – choose sliding speed
Prev/next slide arrows – choose arrow option
Points navigation – choose points option
Slides per view – choose numbers of characters in slider
Loop – switch on/off
Touch mode – Disable/enable
Mouse wheel control – Disable/enable
Mode – choose mode option
Extra class name– add extra class name

content

Counter

This shortcode will allow displaying counter.

Video tutorial

Title – add title
Title tag– choose title font size
Count – add count numbers
Animation speed – add speed in seconds
Separator – Disable/enable
Block icon – choose icon position or hide
Extra class name – add extra class name

Contact form

Video tutorial

Title – enter title for your contact from section
Title tag– choose title font size
Title divider – disable/enable
Style – choose style
Select form – choose type of form
Extra class name – add extra class name

Gallery

This shortcode will allow adding content to the gallery.

Video tutorial

Logos – add image
Extra class name – add extra class name

gallery

Heading

This shortcode will allow to add a beautiful heading to your page.

Video tutorial

Title – enter your title
Title tag – select heading tag
Title divider – choose divider
Subtitle – enter your subtitle
Breadcrumbs – add content to breadcrumbs
Breadcrumbs separator – choose separator
Extra class name – add extra class name

Icon Text

This shortcode will allow to add cool icons uploaded by yourself or from included library.

Video tutorial

Title – enter your title
Title tag – select heading tag
Title separator – choose separator
Icon position – choose icon position
Content – add your content here
Block align – select how shortcode will be aligned on the pageIcons

This shortcode will allow to style icons.

Video tutorial

Title – add title
Icon style– choose icon style
Icon – select icon from library
Extra class name – add extra class name

Google Map

Video tutorial

Latitude – add latitude
Longitude – add longitude
Zoom – add zoom value
Market text – add market text
Map marker – choose map marker
Extra class name – add extra class name

Restaurant menu

This shortcode will allow to style restaurant menu.

Video tutorial

Title – add title
Title tag – choose title font size
Title align – choose title align
Custom categories – shoose category for blog
Order by – choose order field
Order type – choose order type
Count items – choose count items

Messages

This shortcode will allow to style messages.

Video tutorial

Message – add message
Title tag – choose title font size
Icon – select icon from list
Type – choose type of message
Extra class name – add extra class name

messages

Portfolio

This shortcode will allow displaying your portfolio items on the page.

Video tutorial

Custom Categories – choose category
Order by – select how your portfolios will be ordered on the page
Order type – choose type
Count items – enter number of items to be displayed
Preview style – choose page to be linked

Pricing

This shortcode will allow to style pricing on the page.

Video tutorial

Title – add title
Title tag – choose title tag
Currency – choose currency icon
Currency position – choose currency position
Price – add price
Interval – add interval
Price and currency style – choose price and currency style
Content add content and/or image
Background image – add background image
Short description – add short description of pricing
Price align – choose price position
Activ item? – choose actviv or not activ representing
Button – add button Url
Extra class name – add extra class name

pricing1

Process

This shortcode will allow to style process block.

Video tutorial

Items – add title, subtitle, media, photo, text
Numbering – enable or disable it
Divider – enable or disable it
Extra class name – add extra class name

Skills

This shortcode will allow to style skills.

Video tutorial

Title – add title
Title tag – choose font size
Style – choose style
Count – enter count numbers
Extra class name – add extra class name

Image Slider

This shortcode will allow to add image slider on the page.

Video tutorial

Paralax– enable or disable paralax
Title block– enable or disable title block
Images – you can add images
Extra class name – you can give extra class name

Tabs

This shortcode will allow to style tabs element.

Video tutorial

After shortcode was added on the page you must add Tab item

First, add information in General tab

Style– choose style
Tab title align – choose tab title align
Tab content align– choose tab content align
Extra class name – you can give extra class name

Then add information in Tab style.

Title color – select color
Title font size – can add title font size
Content color – select content color
Content font size – we can choose content font size

Team

This shortcode will allow adding team members on the page.

Video tutorial

First, add information in General tab

Name – enter team member name
Position– enter member's position
Photo – upload image for your member
Style – select style from dropdown list
Content insert needed content
Extra class name - you can give extra class name

Then add information in Social tab.

Social icon – select social icon.
Social URL– paste the social link.

Testimonials

Video tutorial

After shortcode was added on the page you must add Testimonials item.

Then add your information.

Title – enter your title
Author– enter author
Author tag – choose tag
Author style – choose style:inline;block
Stars – choose amount of stars
Position – give position to testimanials
Icon – choose icon type
Image – download image
Block divider – enable or disable it
Content– add content
Extra class name – add extra class name

Text block

This shortcode will allow to add text block on your page.

Video tutorial

Title – enter your title
Title tag – choose title tag
Text align – select how shortcode will be aligned on the page
Title separator – choose: desable, enable, line
Text – type your text here and/or add media.
Text style – choose style option
Text align – choose text position
Extra class name – add extra class name

Time line

Video tutorial

Items – add date, title, subtitle, text
Extra class name – add extra class name

Video banner

Video tutorial

Style – choose style option
Align – choose position of video banner
Title – enter your title.
Title tag – choose title tag
Title separator – choose title separator
Text style – choose text style
Text – add text
Button text – add button text
Youtube video ID – insert id of youtube video
Image background – enable or disable background image
Banner background image – add image
Extra class name – give extra class name