Custom Section Separator

[bigdreams]

Hello,

does anyone have an idea or a solution to create such a section separator?
Would need it only for the desktop version.

My challenge are the 2 grey bars at the edges.

Page: https://www.davideldib.com/strategy/
X Theme PRO

Thank you a lot!

[alexander]

Hi @bigdreams,

Thanks for reaching out. We don’t have a way to do it with the existing separators but I could see that effect being achieved with some custom CSS and background layers.

• Enable Advanced Background on the section
• Use the lower layer to add your transparent color overlay
• Set the upper layer to custom and add this code:

<div class="bg-box-left"></div>
<div class="bg-box-right"></div>

• Go to the Section’s Element CSS and add this:

$el .bg-box-left,
$el .bg-box-right {
  position: absolute;
  bottom: 0;
  background: #444;
  width: 100px;
  height: 100px;  
}

$el .bg-box-right {
  right: 0;
}

That should place the two boxes at the bottom corners of the Section. Then you just need to make sure the following Section shares the same color. This technique could work anywhere advanced backgrounds are available.

[bigdreams]

Thank you!!

Now I remember why I only buy your theme for my projects

Thanks that worked out great. I had to adjust only very minimally so that it is always as wide as the containers.

THANKS!

[bigdreams]

I have one more question about that.

Can I add the layer that is set over the image also in css?

And would it also be possible to place a border like on the image.
I tried it with the theme border settings + css for bg-bog-left & right - but it doesn’t look good, the borders are overlapping.

With the pattern I assume that it is not possible to continue it. (see picture).

https://www.davideldib.com/laetitude/

Thanks a lot!

[alexander]

Hi @bigdreams,

Anything in the BG layers gets aria-hidden="true" which tells the browser that should be removed from the document tree for accessibility purposes (like screen readers). So it’s best to keep that purely aesthetic instead of placing real content inside.

There’s a Div element you can use to add additional content and it gives plenty of options in terms of customization.

To do a border like that you’ll probably want to restructure things to have a center div. Try playing around with this:

<div class="bg-custom-container">
  <div class="bg-box-side is-left">
  <div class="bg-box-middle">
  <div class="bg-box-side is-right">
</div>

.bg-box-container {
  display: flex;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.bg-box-middle {
  flex-grow: 1;
  border-bottom: 1px solid #fff;
}

.bg-box-side {
  background: #000;
  border-top: 1px solid #fff;
  flex-basis: 100px;
}

.bg-box-side.is-left {
  border-right: 1px solid #fff;
}

.bg-box-side.is-right {
  border-left: 1px solid #fff;
}

What we’re doing here is creating a flex layout with three items. The left/right are 100px wide and have a background. The middle item grows to fill the space and is transparent except for a bottom border. Then there’s a container to position this custom background at the bottom.

At this point we’re somewhat getting into custom development which is outside the scope of support we can offer, so I’ll have to leave it to you to make any fine tune adjustments, but hopefully this gives you plenty of context and ideas.

[bigdreams]

don’t all divs have to be closed again?

thank you, yes I know and I really appreciate that!

I will try out — but this helps already a lot!

Have a great day… thank you!

[nabeel]

Hey @bigdreams,

Yes you need to close all the opening divs so that you’ll have the following code:

<div class="bg-custom-container">
  <div class="bg-box-side is-left"></div>
  <div class="bg-box-middle"></div>
  <div class="bg-box-side is-right"></div>
</div>

We’re glad that we could help. Cheers!