How to Use - Row Separators for WPBakery Page Builder

How to Use the Row Separators for WPBakery Page Builder

This is a simple guide for beginner users of Row separators for WPBakery Page Builder.

Basic Usage

Please do note that before we proceed on this guide, the user also needs basic knowledge on how to use WPBakery Page Builder and how to add Rows and Elements in a page or post. If you're not sure on how to do the following steps, it will be best to refer on the WPBakery Page Builder Basic Tutorial first:

Step 1. Add New Page or Edit your existing page

Step 2.
Go to Backend Editor

Step 3. In your Backend Editor, proceed with adding and editing the contents. Then Add the Row Separator in row where you prefer it to. The Row Separator will be applied in the immediate row.

Step 4. In the Row Separator Settings, you can choose in the Drop Down if you prefer a Top or Bottom Separator, Styles, Colors and other options. The settings include a description of what each setting does.

Please do note that Top Separators are separators that are facing upwards. While Bottom Separators will be facing downwards to prevent confusion.

Step 5. The main separator fill will depend on your Row Background color. Or if you're using a modified version of WPBakery Page Builder (or if Row Background color doesn't work), you can also use the Main Separator Fill Color. The width of the Row Separator will depend on the Row's width unless you change the Row Stretch to Full-Width via Row Settings.

Step 6. Preview or Publish your Page to view the changes.

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 WPBakery Page Builder rows do not have background colors, you can change this in the Row's settings in the Design Options tab).

Row Separators can only blend with solid colors only. Background images cannot be used as a fill for Row Separators since masking isn't supported in a lot of browsers yet.

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.