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.

80 comments found.

Hi Gambit,

I have set up the separators in my builder. I have some things that are not clear:

1) You are using a svg attribute data-height! What is that? Is it the viewbox max-height value ?

2) each svg has a CSS height of calc(0.125 * 100vw). Why doesn’t it use the svg attribute data-height value ?

I need to add an option for the height on the separators but I am confused on what type of value.

Thank you!

Hi Mediacreed,

About your questions:

1.data-height is the native SVG height that is affected by the scaling settings set in the row separator settings. The scaling is multipled by the specified height.

The formula for that is as follows: $height = (int) $svgs[ $atts[‘separator’] ][‘height’] * (float) $atts[‘scale’]

2. The calc value is a formula that ensures the separator is always proportional to the width constrained therein. The formula for that is as follows:

SVG height from data-height / Separator Width * 100vw

If you want to alter the height of the separator outright, you can change the $svgs[ $atts[‘separator’] ][‘height’] into something else. :)

Hi Gambit,

Don’t know if you had a question like in the comments but here it goes:

How can I use the separators Vertically. Are they build only for horizontal sections ?

If I can what do i need to change in order to convert them to be used vertically ?

Thank you!

Yes, they are built specifically as horizontal separators. If you wish to use them vertically, you will need a combination of CSS and Javascript to make them work vertically. Transform parameters rotate and translate will properly skew them, while a javascript will be needed to properly adapt the separators to the intended height.

A little note though, it might take more work than necessary to get it done right, as it wasn’t designed that way. :P

Hello. There is an issue I’m encountering where the separator cannot be hidden in a VC column when the column settings—> responsive options are set so that the column will not be visible on certain devices. E.g. if I don’t want a row to display on mobile devices, I can hide the column using the responsive options under VC, but the row separator remains visible regardless of whether it’s on its own in a column or if there is other content in the column.

Hello! We received a similar ticket earlier and we are working on it. We’ll be releasing our next version soon. We just need to do some testing as well.

But if you need a workaround, this can be also be fixed by applying a media query CSS with display: none attribute for smaller screens. :)


can you tell me how to get rid of a faint border on the arrow? it is almost like there is a stroke but I have that turned off.

Hello! :) I believe that we have resolved a ticket with this similar behavior.

We advice you to file a ticket to our support Site, so we can send you a dev copy with the fixes. :)

Hi there! I have trouble with this plugin. When i click on back button in my browser the settings fly off and when i reload the page all is good. How to solve this problem?

Hello there, can you tell us what you meant about “the settings fly off”? Is there a way for us to reproduce this? Also, it will be best if you file this issue to our Support Site so we can assist you better. If you can provide us a sample page with the issue, that will be very helpful as well. :)

I set row separator style at Homepage. When i follow to another page and after i click on “back browser button” (to follow back at home) all separator setting are lost, but when i reload Homepage – all is good. What is the problem, maybe you know?

Hi! Do you mean that accessing your Homepage using your site links doesn’t load the separators? Then it only loads when you refresh them? By any chance, are you using an AJAX Transition in your site?

With problems like this one, it will be best to file a ticket in our support site. Providing us your page will be very helpful as well, so we’ll know what may be possibly wrong.

Alternatively, you can do a quick check in your site and see if you have an AJAX Transition. If there is one, you can temporarily disable it and see if the Row Separator shows up again. If it does, then it will also mean that you need to add our JS Callback code in your theme/AJAX settings. By then, please let us know how it goes.

Hi, I have submitted a ticket yesterday and also just now, but i have not received a confirmation yet. Could you please check and follow up? Thanks! :)

Hello there, just letting you know that we just sent a response to your ticket. :)

Thank you! I have just sent another ticket. Could you please check that too? Thanks.

Hello! We just sent you a reply in your ticket. Just letting you know as well that we usually answer tickets within the day. :)


N3RDS Purchased

i had a question, but saw you have a ticket system, so i moved my question over to there.

Hey there, we just received your ticket. Same with the login details. We’ll reply to you again as soon as possible. :)

im using the Xstore theme at work, and sadly this plugin is not working with full width rows, only default ones will visualize it

Hi tobal, when you mentioned that it is not working with full-width rows, does the separator still appear partly and missing a feature, or it doesn’t appear at all? We advise you to file a ticket in our Support Site at http://support.gambit.ph/ so we can help you better. :) And if possible, send us a sample of your page as well so we can check on it. Thanks!

Using Basel Theme, the separator is set to display:none. Means, it does not appear in frontend unless I manually set CSS-value for separator to display:block … which is pretty much annoying. Any idea what the matter is?

One more thing: Color of separator remains black, whatever bg-color the parent-row is set to.

Edit II: To fix I need to override CSS like: svg.gambit_separator {display:block!important;fill:#ccc;}

Plus: I cannot flip horizontally also … oh man

Hello Venone, we’re sorry about the problem you’ve encountered. Most of the time, the stylings should work including the row color. But it happens that the styles are not being applied if the version of WPBakery Page Builder (formerly Visual Composer) has been modified by the theme. There are also some cases where themes may also override the row’s styling, which may affect how the plugin works.

With this, most of them can be fixed by manually applying the CSS (similar to adding the fill and display).

As for the Row Separator that can’t be flipped horizontally, please let us know what separator you’re using so we can check on it further. If you have any other questions or concerns, we highly recommend you to file a ticket to our Support Site at http://support.gambit.ph/



Possible to create a diagonal separator to create the two columns here How to make 2 columns so a in diagonal column As on the example here https://img4.hostingpics.net/pics/950661201711151137.png I’m talking about putting a picture diagonally as in the picture

Thank you

Hi there! The current version of Row Separators can only support rows. This looks like a good idea though! I’ll let our developers know about this brilliant design idea and see what we can do. In the meantime, this will be in the list of suggested future features. Thank you for bringing this idea up! :)

hello the custom svg option is causing google chrome to freeze so i can’t work on the page …try putting a large svg custom separator in chrome or try a couple on same page you’ll see what i mean …can you please fix? i can’t even work on my site this way

Hi! We’re sorry about that, Joseph, but it is not recommended to use a large custom SVG for the separators. Not only because it will cause slow downs and possibly freezing in the backend, but it will also affect the frontend where the actual page is viewed. SVG codes will also add to the size of your page which will affect the loading time.

In case of our default SVGs, we came up with clean, simple designs and scaled them to a reasonable size possible. If you want to optimize your SVG, there are alot of guides available and here’s a couple of them: http://jaydenseric.com/blog/how-to-optimize-svg

Hope you understand that SVG size will also make an impact to the page loading. If you have any other questions or concerns, please let us know. We’ll be very glad to help! :)

Hello, you say we can add custom css to make it work with revolution slider. can you give code example and how to please ?

Hi there! Depending on the results you want to achieve and/or the problem, we can give you a Custom CSS to fix it. Please provide us a sample page with Revolution Slider and Row Separator in it, then kindly tell us more about the results you want to achieve, :) You can also file a ticket to the Support Site: http://support.gambit.ph/ if you have any more questions.

Hi! I’m tried to find examples of every divider without having to manually go in to your sandbox to look at each one. Do you have documentation somewhere that shoes every divider? Thanks!

Hi there! Sorry, but we don’t have a catalogue for Row Separators yet. But we’ll suggest this matter to our developers and see if we could add something like this in our demos or docs. Thanks! :)

Hello there, i ve just bought your add on today… i need to use a triangle divider shape between a full height video from revolution slider in my first row and the next one which has a image background…it seems that the svg shape is not like a mask which could show background of the next row if i use a negative margin for the row…is there possible ? thx for help

Hi there! This depends on how your row adds the background color and add the padding. Normally, adding padding and margin will close the gap between the separator and the row. But if this doesn’t work, then adding the padding to the separator itself might be a better idea.

In this case, please provide us a sample page so we can help you further by proving a suitable Custom CSS that you can use. :)

Hey there..;thx for reply… in fact i think my english is a little bit poor to explain what i’m trying to do…in the picture above the first capture is what i have online at tis time, the background is fill with dark grey, when i try with a transparent one with a positive offset the background image of the second row below is not masked with the triangle shape and cover the first row with youtube video in revolution slider

what i would like to do is the second capture on my image above i’ve modified on photoshop to show you what i’m trying to do…thx

Hello! Thanks for showing us the screenshot, it helped us to understand the question. We’re sorry though, but the Row Separator isn’t designed to mask Background Images as Main Separator Fill. The Main Separator fill can only blend when using solid colors. :)

Do glad to see you are actively improving this plugin again! I just bought it again!

Hi there! We do update our plugins whenever we need to add fixes or whenever we get cool suggestions that we can implement. If you have any suggestion or concerns about Row Separators, always feel free to let us know about it. :)

Have a great day!

Does your plugin support gradient fill color? Or İf İ buy it, can you help me to create gradient color fill? İ want that my circle seperator look like to box-shadow

Hi there! Currently, it is only possible to add them using Custom SVGs. :)

We have an indepth guide with Custom SVGs in our docs here: https://gambit.helpscoutdocs.com/article/192-custom-separators https://gambit.helpscoutdocs.com/article/270-adding-gradient-color-for-custom-separators

Given that you’re familiar working with SVG Codes, it will be quite easy to setup. We’re also willing to show you around in case you have any further questions with our plugin. :)


Already 6m ago I made the request, and I do not see it in the update? https://codecanyon.net/comments/18061701


Possible to create a diagonal separator to create the two columns here How to make 2 columns so a in diagonal column As on the example here https://img4.hostingpics.net/pics/950661201711151137.png I’m talking about putting a picture diagonally as in the picture

Thank you

Yes, we remember this request, and it’s still on our list of features to implement for Row Separators. :) Unfortunately, it still hasn’t been implemented yet. We’re really sorry about that.

However, we want to let you know that indeed, we’ve forwarded this request to our developers and they still think it’s a great idea. :) While we can’t give an exact date/version as to when the feature will be implemented, what we can do instead is message you personally once it’s been placed into effect. :) If you’d like us to do that, just let us know so we can hit you up once the feature’s out. You can file a support ticket at http://support.gambit.ph so that we can message you when the time comes.

Hope you understand, and thank you for supporting our plugin! We’ll get in touch again with you soon.

i tried it in your site and i cant find where is the option to change the cloud and other seperator from black color to white or change the color at all . i tried to make the background as a picture and still the same even in your demo site all the seperator are not full width and they are black .

Hi there! The option to change the separator color, aside from the designs in the Row Separator Settings will be coming from the row’s Background Color. This is what makes the Separator look as if it’s a part of your rows. :)

All you need to do is to assign the background color using Row Settings > Design Options. :)

Please let us know if you have any other questions.

Hi I just bought and installed this. I have added 3 slant decor 1 between different rows. however if i change the color of the top one it changes all the instances of the slants, I need each slant to be a different color but they all change to the color of the top slant (the first instance)

It doesnt matter what seperator style I use all the ‘gambit_sep_main’ get the same fill as the first one on the page

I have swapped to 2016 theme and tried updating the row colors and also changing the seperator designs. they all inherit the same main color as the first seperator

Hi there! We’ve recently fixed this issue with the plugin. We’ll update Row Separators as soon as we can.

If you want a new copy (with the fixes) in advance, you may send us a ticket at http://support.gambit.ph/ so we can e-mail it to you. :)

How can i change audio player background or transparent?

Hi there! Do you mind elaborating this one? Do you mean by changing the background for Row Separators? If this may be the case, you can change it via Row Settings > Design Options > Background Color. :)

i can change only player background in this way? i tried…nope.