Visual Composer





1. Video tutorials

Back to top

Visual Composer video tutorials will quickly guide you through everything you need to know about Visual Composer page builder to create WordPress site.
Click here to see video tutorials.

2. Row settings

Back to top

After adding row, you can set up it by clicking on "Edit".

There are four tabs of row settings:

  • General
  • Design options
  • Background
  • Effect

Main

General

  • Content width - set up row width: Default - 1200px, Full width - window width.
  • Columns gap - select gap between columns in row.
  • Full height row - if checked row will be set to full height.
  • Equal height - if checked columns of current row will be set to equal height.
  • Content position - set content position within columns.
  • Use video background - if checked video will be used as row background. You can add link to YouTube video as background of current row.
    Recommended to use video background in "Background" tab.
  • Parallax - parallax type background for row. You set image and parallax speed. Note: If no image is specified, parallax will use background image from Design Options.
    Recommended to use parallax in "Background" tab.
  • CSS Animation - set type of animation for element to be animated when it "enters" the browsers viewport.
  • Row ID - set ID of current row. Note: make sure it is unique and valid according to w3c specification.
  • Disable row - if checked the row won't be visible on the public side of your website. You can switch it back any time.
  • Extra class name - add a class name and refer to it in custom CSS.
Main

Design Options

  • In this tab you can use design box and options for styling current row.
Main

Background

  • Background Style - select the kind of background would you like to set for this row. See Video Tutorials.
  • Background Override - by default, the background will be given to the Visual Composer row. However, in some cases depending on your theme's CSS - it may not fit well to the container you are wishing it would. In that case you will have to select the appropriate value here that gets you desired output.

Effect

  • Here you can set effect for row background. In order for Effects below to work, you must select something except "default" in background tab.
Main

3. Column settings

Back to top

Column settings have three tabs:

  • General
  • Design Options
  • Responsive Options
Main

General

  • CSS Animation - set type of animation for element to be animated when it "enters" the browsers viewport.
  • Extra class name - add a class name and refer to it in custom CSS.
Main

Design Options

  • In this tab you can use design box and options for styling current row.
Main

Responsive Options

In this tab you can set up responsive options for current column.
For best responsiveness of page, it is highly recommended to set column width for every resolution separately.
Also, you can set offset of current column or hide it for certain device width.

SlimTemplate