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:

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:

  1. 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

pricing2Process

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

image2

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