Shape Divider between two images or gradients.

[jcmatoskx]

It would be great if we could create a shape divider between two backgrounds with images or gradients.
It seems shape dividers are only possible if one of the sections is a solid color, but it would be nice if we could select to continue the gradient from the other section, or the image.

[bainternet]

@jcmatoskx

Can you provide an example to what you mean?

[jcmatoskx]

I have an image from my website, it's not a great example because the gradient is very subtle and the image is a dark texture, but essentially the issue is that if the two sections are either a gradient or image, there is no way to blend their transition with a shape divider between them as the shape divider input is always a solid color. Or is there something I didn't understand?

[TomRaraAvis]

The shape divider being a solid color is also a problem for me. I want to push the image in the second section to show in the shape divider above, and it isn't possible because the shape divider is solid. The shape divider looks silly when images are juxtaposed. Wish it could be transparent & somehow punch a shape hole through the section on which it is applied & then I could negative margin-top the section below.

[jcmatoskx]

Yup that is exactly the issue I am talking about

[bainternet]

thanks for the clarification,

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

Thanks for the feedback.

[cobbman]

+1 for this feature!

[stijnvanouplines]

+1

[yeshansachithak]

+1
Having the same issue.

[black-eye]

+1

[toniodz]

+1

[nicolasteetz]

+1

[theol0403]

+1

[netbloger]

+1 for this feature also!!

[clondon]

+1

[nboaldin]

+1

[robertopib]

+1 Here, I ended up leaving a solid color in between, but it would be nice to have the two images blend.

[clondon]

Hi,
I have been using a workaround that might help.
You set a higher z-index on the following section and then using a negative margin to move the section up until the white area is covered.

have used this on my website and the effect is quite nice.
I hope this helps.

[robertopib]

Thanks @clondon The problem is when you have tow sections with image background. Your workaround works when you have a section with a BG image and then a solid color, actually you don't even need to set any z-index, just change the color of the shape divider to match the color of following section.

[Aroundme12]

Saw this done on a homepage looking to pull this off anyone have an idea.
https://dartingbasketball.com/

Thanks

[Aroundme12]

Thanks @clondon The problem is when you have tow sections with image background. Your workaround works when you have a section with a BG image and then a solid color, actually you don't even need to set any z-index, just change the color of the shape divider to match the color of following section.

Correct!

[robertopib]

Saw this done on a homepage looking to pull this off anyone have an idea.
https://dartingbasketball.com/

Thanks

That's exactly what we need to accomplish! Nice example!

[Aroundme12]

Working on it now i'll see if I can get it. Been at for 4 hours already.

[robertopib]

Me too, did you try the clip-path: polygon?

[Aroundme12]

I'm okay with code not that great self taught.

[Aroundme12]

trying it now

[robertopib]

I think I have it figured out, I inspected the example you post, and I think I have it, just a minute and I'll let you know what I did.

[emailjough]

Worked out a simple solution here. No need for clip path. If you skew a background overlay and give its section negative margin top+bottom you can have adjacent angled sections with bg images. Scales well on mobile too. One line of css. The rest is all elementor.

https://bit.ly/2wOA0lH

On my demo page you may see a part of the lower section on scroll but thats only because I set the bg image to position:fixed b/c I liked the effect.

[oooh-boi]

No need for shape dividers at all! You need a mask and a negative margin on columns/sections. I've made an add-on that can be used to mask Image widget and Background Overlays of either a column or the section. http://elementor.wpshow.me/ooohboi/ooohboi-image-mask/

[dietcheese]

No need for shape dividers at all! You need a mask and a negative margin on columns/sections. I've made an add-on that can be used to mask Image widget and Background Overlays of either a column or the section. http://elementor.wpshow.me/ooohboi/ooohboi-image-mask/

You’ve got some great add-ons here. Should package them and I’d buy em all.

[hungryjos]

No need for shape dividers at all! You need a mask and a negative margin on columns/sections. I've made an add-on that can be used to mask Image widget and Background Overlays of either a column or the section. http://elementor.wpshow.me/ooohboi/ooohboi-image-mask/

@oooh-boi , once again you rescued me. As @dietcheese says: a package with all elements would be great, but I bought them all for now. Thanks!

[bentalgad]

No need for shape dividers at all!

You right, let's add another plugin to the long list of plugins you have to load beside the Elementor plugin which adds enormous amount of DOM elements and scripts any ways and makes sites load amazingly slow. i guess that's the reason even Elementor didn't use Elementor for there new "experts" site (they used it only for header and footer so it won't be too ridiculous that they didn't use it at all :)

[oooh-boi]

You right, let's add another plugin to the long list of plugins you have to load beside the Elementor

Is there any other way of extending Elementor but to create a WordPress plugin?

[bentalgad]

Is there any other way of extending Elementor but to create a WordPress plugin?

To let Elementor add this basic stuff. and not write "there no need for that..." on the future request pull.

[oooh-boi]

To let Elementor add this basic stuff.

Are you being serious?!? I might get old or die before that happens. Elementor development team is not a jukebox, you can't make a wish, get the dollar and make them play for you... besides, they have made an awesome API, why not using it? Because you gonna have to install another plugin, right? Well, imagine the world without WordPress plugins or Elementor add-ons. They just wouldn't exist.

[nadworks]

+1
Geezuz, this should have been fixed from the stat, such an obvious oversight. I ran into the issue 10 mins after first using Elementor. C'mon, please.

And...

Dear @oooh-boi, with all due respect, nobody expects the devs to drop everything and fulfil our wishes. But Elementor is premium plugin and the internet is not standing still. The worst that can happen is for paying customers to stop caring to feed back and seize to request improvements. So please appreciate that a lively discussion on how to make an awesome piece of kit even better is a good thing.

[omartheman]

Might be easier to add a clip-path in CSS. Then you don't need to change all the colors if the background color changes.

[joexcm]

+1 for the feature please

[5jv]

Has anyone found a solution?

[emailjough]

Has anyone found a solution?

Yes. I posted a simple, responsive solution a year ago here (see above) that doesn't require adding another plugin or using a clip path or mask. I provided the simple css, a screenshot and link to the demo, but for some reason its been completely ignored. Is there something wrong with it? I'm just curious.

[5jv]

Has anyone found a solution?

Yes. I posted a simple, responsive solution a year ago here (see above) that doesn't require adding another plugin or using a clip path or mask. I provided the simple css, a screenshot and link to the demo, but for some reason its been completely ignored. Is there something wrong with it? I'm just curious.

I tried your solution but here is for example what I am trying to do and I cannot come up with this solution

[5jv]

The other problem with your solution is that this also skews the background image, ideally the background image should stay perfectly straight in the block, it should not be tilted with it.

[emailjough]

The other problem with your solution is that this also skews the background image, ideally the background image should stay perfectly straight in the block, it should not be tilted with it.

Gotcha. Thanks for pointing that out. I agree that is a flaw in my solution I hadn't noticed before.

[thorsolutions]

+1

[fxaviers]

+1

[mjflower]

+1 please elementor team

[kitsunecreativeco]

another +1

[zierbeek]

another ++

If anyone has a solution to fix this, thanks!

[Johnvrkmp]

another +1

[QuantGeekDev]

+1

[SolunaCG]

thanks for the clarification,

Currently, this feature is not supported, but we will look into it in the future if we see a large demand for it.

Thanks for the feedback.

I wonder if this will be implemented at some point 😕 . Judging by this thread and the amount of comments the demand seems to be large. Any updates here? Maybe we can open the thread again to make it "visible" again and to let everyone know that this is still a feature that many ppl would like to have and which is not implemented yet as it seems. At least I haven´t found a solution, even after writing with the support.

[khahina]

+1

[zzella]

+1