Curved section separator

[cvdw]

I like to have curved separators like the image attached. So not both sides the same. With the Angle in and out you have the option point align to accomplice something like that but that option is not in the Curved ones. Is There a way to get separators like I mentioned?

Second question: Is there an option to get a gradient in a background color?

Best regards, Carel

[tristup]

Hi Carel,

Thanks for reaching out.
What you are expecting can’t be achieved using the separator options, I would suggest you use the background image instead.

Thanks

[cvdw]

Okay, thanx! What do you advice as format? png, gif, svg? And what about the gradient in a background…?

Regards, Carel

[tristup]

Hi Carel,

I would suggest png format with the gradient color.

Thanks

[cvdw]

Hi,

I try to use a SVG seperator and followed the instructions in the video on Themeco YouTube Channel " Section Dividers (Part 3)" https://youtu.be/boz_uIMKWpM

I picked an cuve from this site, like they use in the video https://www.wysiwygwebbuilder.com/support/wb15tryouts/dividers-demo.html

I choose this curve:

And copied the svg code like in the video from the inspector:

So I copied this code in a new Section > Row > Column > Text

And in the Customize of the Text element this css:

$el svg {
fill:rgb(0, 163, 255);
transform: rotate(180deg);

Then I get the Curve seperator like this:
https://cresult.nl/wp/home-2/

As you can see, in full height. I can’t figure out how to get this in a height of 50px like the demo site.

I tried to give the column a height of 50px but that’s not working.

Can you help me to get the curve like the demo on https://www.wysiwygwebbuilder.com/support/wb15tryouts/dividers-demo.html

Best regards,

Carel

[ruenel]

Hello Carel,

Thank you for the updates. You can add a section in between the first and second sections that have contents in it. You can simply overlap the added section containing the text element with your SVG code and then set a negative top margin.

Please be aware that custom coding is beyond the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Perhaps these video series may help you achieve what you are aiming for:

Best Regards.

[cvdw]

Hi,

Yes I now about background images and overlapping but this is different. I followed the video how to make a svg divider but I can’t finf out how to make this section 50px height and have the svg background as the example site mentioned in your video. You can access my site: https://cresult.nl/wp/ and it’s on this page: https://cresult.nl/wp/home-2/ And the svg is in the second section.

[christian]

Hey @cvdw,

The Section and Row elements don’t have a Height option. You can set the height in the Column level. Once you’ve set that, you might wonder why your curve will be clipped like the screenshot below.

If that happens, set the Section’s Z Index to 3 or higher.

You can learn how Z Index works here https://www.w3schools.com/cssref/pr_pos_z-index.asp

Hope that helps.

[cvdw]

Hi Chistian,

I see that but that is not what I mean. I want the the seperator curve look like this in the example:

So very small curves, and yes this is exact the same svg file. so there must be a way to show this svg file in a column of 50px height without cropping the image but srinck it vertically like the example.

Regards, Carel

[ruenel]

Hello Carel,

Please take note that the SVG is not responsive. You will need custom coding to make it responsive. Perhaps this article will help explain it:

• http://thenewcode.com/744/Make-SVG-Responsive
• https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

Regretfully custom coding is beyond the scope of our support. You may need to contact a 3rd party developer for further assistance in wanting to use the SVG element as your section separator.

Thank you for your understanding.

[cvdw]

I figured out! THX

/* Svg container wave */
.svg-container {
overflow: hidden;
position: absolute;
line-height: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}

.svg-container svg {
display: block;
width: 100%;
height: 100%;
position: relative;
left: 50%;
transform: translateX(-50%) scale(1, -1);
}

.divider-fill {
fill: rgb(0, 163, 255);
transform-origin: center;
transform: rotateY(180deg);
}

[ruenel]

Hey @cvdw,

We are glad that you have figured out a solution to your issue. Thanks for letting us know.

Cheers.