Learn how to use the Visual Composer Row Element – including: Slider & Video background, Parallax, Color Overlays and more.
Getting Started with Rows
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
Let’s add a Row Element to the page:
- Click + Add Element
- Goto the search bar and search Row
- Click the Row Element
Once the Row has been added to the page, we’ll need to edit it to access the settings.
- Hover over the Row and click the “Pencil” icon to access the Row Settings
- Click the General tab
- 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
- 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
- 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
- Anchor Link Name – use this option for One Page setups, it will allow you to link the menu to this Row
- Font Color – set the default Font Color for this Row
- Extra class name – only use this option if you’re familar with using CSS to customize the Theme
The Design Options tab allows you to set Background Images, Colors, Borders, Background Position and more.
- Click the Design options tab
- Border Color – set a Border color for the Row
- Border style – set a Border style
- Border radius – use this option to add curved edges to a Row
- Background Color – add a Background Color to a Row
- Background Image – add a Background Image to a Row
- Background Image Control – set the image to Repeat or Cover to stretch the image across the Row background
- Background Horizontal Position – use this option to Position the Image Horizontally ( will not work with Cover )
- Background Vertical Position – use this option to Position the Image Vertically ( will not work with Cover )
- 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 )
The Background Extras tab allows you to add a Slider background, set a Color Overlay, add Video background & add Parallax Effect
- Click Background Extras tab
- Parallax – enable the Parallax Effect on the Row ( Ensure you have an image set in the Design Options tab )
- Slider Images – add images to create a Slider background on the Row ( Parallax will not work with this option )
- Slider Effect – choose a transition Effect for the Slider
- Slider Timeout – set the timeout between each image change in seconds
- Video URL – add a Video Background to the Row, you can use self-hosted .mp4 formats or YouTube and Vimeo Videos
- Overlay Color – add a Color Overlay to your background image or video