How to Use Row Separators for VC

How to Use the Row Separators for VC

This is a simple guide for beginner users of Row separators for VC.

Edit any page (or post if enabled in Visual Composer), then create a new row. Afterwards, create an element and put in a Row Separator element in it.
Row Separator elements will put in a row separator to its immediate parent.
Once added, choose whether it's a top or bottom separator, then select your separator design. Preview your page then you should see your row separator.
Row separators span the width of your row, if you want to make them full-width, Visual Composer has a row setting called Row Stretch where you can turn the row full-width. The separator will follow suit.

How Row Separators Work

A Row Separator can either be a top or bottom separator.

Row Separators will take the background color of the row it's placed into. If it cannot find a background color, white will be chosen as the separator's color (by default Visual Composer rows do not have background colors, you can change this in the Row's settings in the Design Options tab).

Row Separators cannot have a background image, this means that you should only place row separators in rows that have solid colored backgrounds. Why? Because we cannot make background images transition seamlessly to the separator, and image masking is not widely supported in browsers.

Each row separator has 1-2 decorative layers. For example, in the clouds separator, the clouds behind the main clouds are the decorative layers. You can change those colors in the separator's settings.

You can also remove the decorative layers by setting their opacity to 0, or by emptying the color setting.

Row Separator Demo

You can access our Demo Setup and see samples and how to do them at

Clicking on the Launch Demo will take you to the backend setup.