Discussion on Row Separators for WPBakery Page Builder (formerly Visual Composer)


GambitTech supports this item


This author's response time can be up to 1 business day.

79 comments found.

I’m using the X theme, and it is not compatible with its inbuilt website creator named “cornerstone” and i’ve never liked Visual Composer because it lacks style.

Is there any way that I can put your row separators on this website using Cornerstone?


The Row Separators requires Visual Composer in order to work.

Does this work with the Salient theme?

As long as you have Visual Composer, yes. :)

I think we can you this plugin only on pages. Can we use on post?

This plugin can also be used on posts. If you feel like giving it a try, you can go to our Live Preview and click on Launch Demo. :)

thank you. I bought. Is there any Turkish translate?

Our plugin is only in English. :P

I purchased and am just learning to use the product and I have a gentle suggestion. There are so many great variations, too many to simply try and see what they look like one at a time until I finally find what I want. And I have trouble trying to simply duplicate the ones you DO have on your demo page. Do you think you could take the time to do a single page that showed and Labeled each one along with a line that said what settings you did to make it look that way? It would be an awesome sales tool !

Thank you for your suggestion. I’ll let our developers know about this one. :)

Hi there, I needed a flames separator so I made an svg export from adobe. the actual svg is beautiful and simple. it viewable at http://doctrinesofdemons.com/flame1-1600x200.svg http://doctrinesofdemons.com/Flame1-svg-code.txt but the SVG code you give example to insert in “Custom Border” is very very different from what adobe called svg. can you help? Can you make the right code out of my code? thanks… I’ve already told two other people to purchase your plugin

WOW, Color me IMPRESSED! IT worked!!!

Good to know. In case you have more questions, feel free to tell us. :)

Hi, i try your plugin, but i still can’t change color in separators. For example gear – they they are still white on my site, on your demo they have other color, but how to change it?

The ones that stays white in the separators without any option of changing are the ones will be based on the Row’s background color (color only).

By default, it will be colored as white, but the color will change as soon as you assigned a color from Design Options. This is to blend the separator in your row’s color.

do you think you will have a separator add on for columns ?

This thing is currently impossible due to fact that it will give too unpredictable results especially if you switch between desktop and mobile. But if we ever find a way on this one, we’ll give this idea a try. :)

Actually, I have two different VC grid designs (2 rows basically, one for mobile only, the other for desktop only) in the same page, I just toggle them on and off with @mediascreen (certain width for example) by setting a class name to the desktop row and the mobile row. Larger than 768px then the “desktop layout” is set to display:none and vice versa, performance wise, the desktop grid doesn’t load so no one has to worry about the extra requests.

This way, you can do left and right separators for desktop grid, top and bottom for mobile.

Thank you for your suggestions. The another possible case scenario is how can we add this column separator if you have an existing row separator as well. Not to mention the mobile behavior of the column separator. Since we also need to shrink down the separator.

For the meantime, we’ll do a research on how we can pull this off. :superbashfulcute:

Hello, I bought your plugin. I need you to tell me what dimensions it needs to make my own svg rows and what export options I should have so it would work?

Hi there, we specified in the Custom Separator tab about SVG dimension to be at 1600×200. You may also read it there some of the guidelines needed for the Custom SVGs to work. :)

A pre-sales question. Can I add custom separator – meaning is it easy to just upload an SVG and call it in the composer? It might be something like the zig zag but more random.

The varying stroke thickness depends on you you will create the SVG itself.

And background images will only stay as is (background images cannot mask or blend with the row separator). This idea can only be applied with background colors so far.

Ok. Thank you. Figured out that either the top or bottom (depending on whether it is top or bottom separator) should be filled in a straight line and the design can happen only on one end.

Yes. This will mean that you will also have to create top and bottom separators individually.

I would definitely recommend a preview or guide of all the variations, which would make it much easier when selecting which separator to use. Your website demo only provides a few, but in this case – less is not more. Thanks!

We’ll be working on this one. :)

Is there a way to adjust the angle of the slant separator?

Nope. The separators are pretty much fixed on their angles. The only similar thing that can be done for this one is by creating a custom separator.

Hi, it doesn’t show on IE11. Do you know what the problem is?

The fixes should be up within this week. But we can give you a workaround. Can you try adding this Custom CSS in your site by any chance?

.gambit_separator { display: block !important; }

this works, thanks!

Good to know. We’ll apply this fix to our next update. :)

hello thanks for this neat plugin – your demo shows it going over a photo in the background and a large gap of separator in between how to get the settings to have ours over a photo? when the documentation says

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.

i need this seperator to go up over an image like your demo shows, and i need it to be thick and allow for spacing, and i dont see the spacing options. like for example 400px high.

itd be really nice to have a demo copy installed

it turns out its not compatible with the7 theme

Hello there hollysnails,

First off, apologies for the late reply due to national holidays. As for your concern, what we did on the one with ‘photo in between separators’, we pretty much added them in 3 separated rows. Here is how it looks in the backend: http://i.imgur.com/itRC5RK.png

And unfortunately, masking is still not supported. Which means, Row Separators don’t have it yet.

If you want to add a height on your separator, you can add Top/Bottom Padding or Empty space to do so. :)

Also, we tried to view your site. But looks like the page is already deleted.

Hello and Happy Holidays!

Its been some months w/o updates – so let me ask:

1. is it working with WP 4.4 & VC 4.9?

2. is it going to be updated?


Hi there!

About your questions:

1. This is working with the latest version of Wordpress and Visual Composer.

2. Updates come whenever we get some feature requests or reports. :)

For the life of me I am not able to figure when to use ‘Top’ and ‘Bottom’ option. When I use bottom in the current row, it comes inverted. If I put the same thing as top in the next row it still comes inverted. If I invert vertically and repeat it comes the same. Can you please tell me where to put the separators. Top and bottom in the same row I want – does it extend the height by the height of the separators? Or do I put in preceeding and succeeeding rows as bottom for the top of the next row and top as the bottom for the preceding row?

For one, the separator’s setup depends on the design and color of your preference. Using the same separator for top and bottom will make the separator inverted.

If you want the same design as top/bottom on both top and bottom of the same row, you’ll need to create two of the same top separator and drag the other ‘top separator’ on the next row instead.

I think you misunderstood. I am not using the same custom svg on top and bottom. Imagine a wave on top. It is created using AI and the svg code taken with the help of notepad ++. So the way it is drawn in AI is the way it appear on the site. No problems with that. Now if we invert it AI so that the row looks like a wave, I get another SVG code. This I take and put it as bottom separator in the same row. But it appears reflected vertically inspite of a) having redone the code and b) changed the ID’s (since you everytime create an svg the id’s start from 0). So now if I imagine something for the bottom row, I first need to create it upside down, take the SVG code and put in the ‘top’ separator in the next row. It works. But then the top separator for the previous row also should behave that way right? But it comes proper (WYSIWIG). So the question is how to know when to draw the separator exactly the way you see it and when to invert it vertically?

The one mentioned earlier is also applicable on Custom SVGs. To put it simply, using your Custom SVG as Top Separator will add the design “as it is”. While adding it as Bottom Separator will invert the SVG vertically.

But the way I understand what you said, you might want to have your bottom separator looked like your top separator? (correct me if I’m wrong.) If you want an output like this, you’ll need to create (or just copy) the same Top Separator you have and put it on the next row.

Nevermind. Was answered in comments.

If you have any more question, feel free to ask. :)

Hello, Just a quick question – will the separators work over a slide too? The slide is made using revolution slider and sits in a Visual Composer row..

Many Thanks, Gareth

Adding the Custom CSS for it is possible. You can also add an extra class in the row to add along if you only want a separator from one row to move specifically.

That’s great thanks.

You’re welcome! :)

Hi, This Plugin is really really awesome ! Got a few questions for You :

1. So this Plugin will work with any theme that comes with Visual Composer ? All I need is a Full Width Page for this to work right ? I ask so because I’m going to Purchase this one theme on ThemeForest that uses Visual Composer, but I don’t know if its going to work with that theme.

2. In the Demo You’ve written “You can Customize the decorative colors in separators”. I want to know if its possible to also put My own Background Colour in the Row ?

Kindly Revert, RebelHustler.

Regarding your questions:

1. Yes. This plugin works with any theme as long as you have Visual Composer.

2. Background in row is possible in sense of adding it as a background, not as a design for separator. Separators can only change colors.

I purchased this plugin hoping to use it today but it does not appear to work with my Uncode theme, which does in fact use visual composer and one of your admins confirmed that it would work with Salient which uses a similar custom visual composer! Please help as I have just spent money on a now unusable plugin.

I attempted submitting a ticket on your support site but it doesn’t appear to have gone through!

I fixed the issue!

Solution: I logged out, cleared cache and logged back in and voila it was there in the add elements section.

Thank you Alyssa!

One last question. Is it possible to have a custom svg larger than 200px in height?

This is possible. However, we do advice to use the recommended size to make sure that the separator will fit seamlessly.

In the live preview It appears a photo with a top separator and separator below, ¿What is the procedure of technical ? I see in the video tutorial is not explained thank you very much

The location of separators are literally at the top or bottom as mentioned. It just happened that there are some separators like the grasses separator that needs to be flipped vertically. Thus, being used as a Top Separator of the next row.

Hello Thank you. I mean a picture of a river a separator clouds on top and waves separator bottom ..

Regarding our demo’s setup, you can check on them using the Live Preview. Click on the Launch Demo, this will direct you to a WordPress backend containing with the setup of the demo page.