Adjusting separator

Support
#1

Hi,

Is it possible to adjust the curve in/out separator? I’d like to adjust it like the angle in/out where you can set the ‘top angle point’. So for the curve I would want to be able to have the curve to the left or right instead of the default center.

#2

Hi there,

I’m sorry, regretfully this isn’t possible with the section separators. We don’t have a way to customize that.

#3

Thanks. Too bad, would be very nice to have that option when new elements are introduced. Perhaps in the future…

#4

Hi There,

You could try playing with border-radius-left-top or border-radius-right-top to create some creative effects.

You can add the css to the style box of the sections.

Hope it helps

#5

What class should I use for that? Just adding ‘border-radius-left-top: 50%’ does nothing. I tried with ‘x-separator-top’ and ‘x-separator-curve-in’ but to no avail.

#6

Hi There,

Existing section separator is made of svg path file. Something like this:

<div class="x-section-separator x-section-separator-bottom x-section-separator-curve-out" style="height: 50px;"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 50" preserveAspectRatio="none" class="curve-bottom-out" style="fill: hsl(0, 78%, 29%);"><path d="M0,0c0,0,22.4,50,50,50s50-50,50-50"></path></svg></div>

You to create custom separator and not throught CSS only.
This guide will help you:

#7

Hi, thanks for the link.

I have used this one:
`/* Half Circle */
.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
left: 50%;
z-index: 10;
width: 100px;
height: 100px;
border-radius: 50%;
background: inherit;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

.ss-style-halfcircle::before {
top: -50px;
}

.ss-style-halfcircle::after {
bottom: -50px;
}`

but it delivers a strange effect which I can’t solve. I want the half circles on top of and at the bottom of the section. See attached image.

#8

Hello There,

Thanks for updating in! Your code is not working because it is missing something. Please have it updated and make use of this code:

/* Half Circle */
.ss-style-halfcircle {
    position: relative;
}

.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
    position: absolute;
    content: '';
    pointer-events: none;

    left: 50%;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: inherit;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ss-style-halfcircle::before {
    top: -50px;
}

.ss-style-halfcircle::after {
     bottom: -50px;
}

Please let us know how it goes.

#9

Thank you, works like a charm. One little question to top it off :wink: How can I get a small icon image in those half circles?

#10

Hey There,

It’s good to know that it works perfectly for you. Adding an icon maybe possible with further custom css. Regretfully this request is already outside the scope of our support. Maybe the author of tympanus.net tutorial has more information about the separators with icons in it.

Thank you for your understanding.

#11

For anyone who’d like to accomplish this (see attached image).

For a regular divider: create a section (no background), add a text element to it and in the text element add an image of your choosing (center the image). Then add ‘logo-spacer’ to the ID box of the text element.

For a divider under the header (a little bit larger): create a section (no background), add a text element to it and in the text element add an image of your choosing (center the image). Then add ‘logo-under-header’ to the ID box of the text element.

Then add this code to the pages CSS:

------------------------------------------------/
/-------[Float and Image Between Sections]-------/
/------------------------------------------------/

/* remove all padding in section */

.logo-spacer-section {
padding:0px; margin:0 0 -87px 0!important;
}
.logo-spacer-section .et_pb_row, .logo-spacer-section .et_pb_section {
padding: 0px;}

/* logo under header */
#logo-under-header {padding: 0px; margin: 0px;}
#logo-under-header img {margin-top:-106px; width: 150px; z-index: 1; position: relative;}

/* logo under standard sections */
#logo-spacer {padding: 0px; margin: 0px;}
#logo-spacer img {margin-top: -45px;width : 90px; z-index: 1; position: relative;}

1 Like
#12

Hello @yingfuli,

Thank you for sharing this information. This is very helpful to other users who wants to have a unique section seprators for their site.

All the best.