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
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
Click + Add Element
Goto the search bar and search Row
Click the Row Element
Let’s add a Row Element to the page:
General 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
Once the Row has been added to the page, we’ll need to edit it to access the settings.
Design Options
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 Design Options tab allows you to set Background Images, Colors, Borders, Background Position and more.
Background Extras
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
The Background Extras tab allows you to add a Slider background, set a Color Overlay, add Video background & add Parallax Effect