Using Rows

Learn how to use the Visual Composer Row Element – including: Slider & Video background, Parallax, Color Overlays and more.

Using Rows Video Tutorial

Watch the video tutorial for how to Using Rows here.

Getting Started with Rows

Getting_Started_with_Rows.png

Ensure that the Visual Composer plugin is installed and active, then Edit or Create a new Page.

Once the page has loaded, if it hasn’t got a title, enter one and then click the Frontend Editor button.

Adding a Row

Adding_a_Row.png

Let’s add a Row Element to the page:

  1. Click + Add Element
  2. Goto the search bar and search Row
  3. Click the Row Element

General Settings

General_Settings.png

Once the Row has been added to the page, we’ll need to edit it to access the settings.

  1. Hover over the Row and click the “Pencil” icon to access the Row Settings
  2. Click the General tab
  3. Row Stretch – this option Stretches the Row background or Row Background & Content. Set to Row Stretch to make a background color / image that spans the width of the site
  4. Row Height – this option sets the minimum height of the row. Use the 100% option combined with the Row Stretch option above to create a full screen effect
  5. Content Position – this works in combination with the Row Height option, position your content within the Row. The Row Height has to be set to 25% or more
  6. Anchor Link Name – use this option for One Page setups, it will allow you to link the menu to this Row
  7. Font Color – set the default Font Color for this Row
  8. Extra class name – only use this option if you’re familar with using CSS to customize the Theme

Design Options

Design_Options.png

The Design Options tab allows you to set Background Images, Colors, Borders, Background Position and more.

  1. Click the Design options tab
  2. Border Color – set a Border color for the Row
  3. Border style – set a Border style
  4. Border radius – use this option to add curved edges to a Row
  5. Background Color – add a Background Color to a Row
  6. Background Image – add a Background Image to a Row
  7. Background Image Control – set the image to Repeat or Cover to stretch the image across the Row background
  8. Background Horizontal Position – use this option to Position the Image Horizontally ( will not work with Cover )
  9. Background Vertical Position – use this option to Position the Image Vertically ( will not work with Cover )
  10. CSS – use these fields to control the Row Margins, Row Padding & Row Border ( be sure to check your site on Mobile device if using Margin values )

Background Extras

Background_Extras.png

The Background Extras tab allows you to add a Slider background, set a Color Overlay, add Video background & add Parallax Effect

  1. Click Background Extras tab
  2. Parallax – enable the Parallax Effect on the Row ( Ensure you have an image set in the Design Options tab )
  3. Slider Images – add images to create a Slider background on the Row ( Parallax will not work with this option )
  4. Slider Effect – choose a transition Effect for the Slider
  5. Slider Timeout – set the timeout between each image change in seconds
  6. Video URL – add a Video Background to the Row, you can use self-hosted .mp4 formats or YouTube and Vimeo Videos
  7. Overlay Color – add a Color Overlay to your background image or video