This author's response time can be up to 1 business day.
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.
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 kristos747,
About the Custom SVG, looks like the contents itself doesn’t fill the 1600 width.
We tested your SVG in our sandbox, it looks nice but the contents doesn’t fill the whole separator.
As an advice, you’ll need to make it at least 1600px width (all the contents) or higher.
As for inserting your Custom separator, here is a guide for you:
1. First off, Here is a sample of how your Custom SVG should look like from your file: http://pastebin.com/bvrj3zna We pretty much just removed the SVG tags for this one.
2. Make 2 rows. On your first row is the ‘actual’ content of your row. The second row is where you will add the Custom SVG as Row Separator. Use it as Top Separator so that the SVG doesn’t flip vertically.
3. Use Full-Width for best results (this depends on your site). If you see any white lines between the content and your separator, you’ll need to adjust your Margins using Design Options.
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 ?
Hi! Do you mean separators on sides of your page? This sounds cool.
Yeah, when you do grid design using visual composer columns and inner columns, it would be useful (left and right arrows and such..). I’ve been seeking for a solution.
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.
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.
Yes, you can add a Custom SVG in the Row Separators. The guidelines are also posted on the Custom Separator tab.
Can you point me to a place to where there are step by step instructions from how and where to upload the SVG to what should be done in the custom separator tab?
Upon installation of the plugin, you can add a Row Separator using Add Element in Visual Composer.
When you add it, you’ll see a tab named ‘Custom Separator’. Its also at the same tab where you can see the instructions and dimensions to use for your custom separator.
Thanks. But since I am very new to this ‘svg’ related stuff, I was looking at more as to how after creating an SVG, should we upload (because WP does not allow SVG upload) and how to call it in the custom tab. I figured out that you don’t actually upload an SVG but first open that in Notepad++. Copy the piece of code between the <svg> tags and paste that in the custom tab. Then I should add other things like stroke and fill. Is there a way I can add ‘varying’ stroke thickness – meaning it starts of say 10px on the left and when it ends on the right is actually 0 – meaning it merges with the background?
Also I was wanting to know how does it work if successive rows have background images? Meaning how to make the background images shape as per the custom svg in successive rows. If it is plain background color then it looks easy, but if there are images in successive rows, how to cut it as per the shape of the svg?
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?
Can you send us a sample page please? We’ll check your site and see what might be the cause. Thanks!
Also, have you tried viewing them in other browsers? Does it work fine?
Other browsers work fine. This is the link: bit.ly/1NmK5ao
Hello there, we just saw the problem. And looks like this also exists in our demo site.
I’ll forward this to our developers for further investigation. We’ll let you know when the fixes are up.
Thank you for the heads up!
Hi, thanks for the quick reply. Do you know when this will be fixed, for example by the end of this week? I have a new website release very soon. Thanks!
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?
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?
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.
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..
Do you mean adding the Separator in front of the Slider? If this is what you meant: The Slider is treated as a different item. By default, the separator will only just on top or below of the slider. But this behavior can be modified if you add Custom CSS to manually move the separator in such way it overlaps the part of Slider.
You can give our demo a try by doing this in a single image.
How will your rev slider work with our Row Separators will be pretty much same as how other elements should.
Yes, if I can add some custom css to make the separator overlap the slider, then that will be great. Thanks for getting back to me so quickly.
All the best,
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.
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 ?
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!
Hi there! We just replied on your ticket. Please do help us to determine the problem by elaborating the details of what you encountered. Thank you!
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.
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.
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Get it now and save up to $4.50
Deliver better projects faster. Photos, templates & courses
Unlimited downloads. Only $29/month
Learn almost anything with
Envato Tuts+ for free
25,000+ tutorials and 1,000+ courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work