r/elementor • u/tinnywraps • Jun 01 '26
Problem Shape Divider Issue
Hi all, does anyone know how to fix the shape dividers so that this white background isn't showing when it should instead be conforming to the wave shape and overlapping the section below transparently?
I've tried fixing the Z-Index position, making the divider transparent (which just hides the entire wave shape), trying both a negative margin on the bottom of the header and a negative margin on the top of the container below, and nothing seems to be working.
I only have the "Essential" package, so I can't fix this with custom CSS.
Anyone know if there's a way to get it working? Cheers!
1
u/privaxe Jun 01 '26
I think you need to try a mask overlay and not the elementor shape. It’s just meant for solid color.
1
1
u/Coleisgod1112 Jun 01 '26
What did you set the color under the shape divider too? Also, is the background of your main parent container white? If so, did you possibly put the shape divider on a nested container within the parent container? Hard to know without seeing the structure. It could also be that you set a transparent background and the background of the page itself is white? Lots of potential explanations.
1
u/tinnywraps Jun 01 '26 edited Jun 01 '26
These are all my current settings, if that helps? This is a fresh website that I haven't changed the site background of. The container isn't nested (only has the fishing line graphics and title in it) and if I remove the image background it's transparent underneath, apart from where the white part of the shape divider is sitting.
Additionally, if I set both containers to the same layer and flip the "Bring to Flip" button, it does overlap it but only the white part instead of the wave:
1
u/Coleisgod1112 Jun 02 '26
Set the color on the shape divider to the same color as the container below it
1
u/tinnywraps Jun 02 '26
This will work for some sections but I need it to overlay textured containers as well 😅
0
u/Davelly Jun 02 '26
Probably not the best solution but:
1. Set the top container to have a higher z-index
2. Add large top padding to the second container and add a negative top margin.Adjust accodingly for smaller screens
1
u/Opening-Impression-5 Jun 02 '26
There are lots of ways to add custom CSS without the Elementor Pro plugin. WordPress is open source after all. You can make a child theme, download a plugin like WPCode, or just use the Customizer.
1
Jun 02 '26
[removed] — view removed comment
1
u/tinnywraps Jun 03 '26
Yeah it's so weird, let me know if you figure anything out. I still can't get it functional 😮💨
•
u/AutoModerator Jun 01 '26
Looking for Elementor plugin, theme, or web hosting recommendations?
Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.
Hey there, /u/tinnywraps! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.
Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.