The Shape Divider Background widget for Elementor enhances your website’s design by adding customizable and stylish shape dividers between sections. This powerful tool allows you to add stylish and dynamic shape dividers to your sections, creating smooth transitions and eye-catching visuals. With a variety of designs and customization options, it creates smooth transitions that elevate your site’s visual appeal.
Let’s look at each of the options in the Shape Divider Background Widget for Elementor below.
Add a Free Shape Divider Background to Elementor
Navigate to Unlimited Elements >> Background Widgets >> Shape Divider Background
Hover over the widget and click install.
Add a Free Shape Divider Background to a Container in Elementor
Select edit page container in Elementor>>>Go to Style tab>>>Go to Unlimited Background option>>>Select the background type as “Shape Divider Background”
Elementor Shape Divider Background Settings
Show Top Divider
Enable or disable the top shape divider.
Divider Type Top
Choose a shape for the top divider from various options.
- Alligator Bite
- Artist Brush
- Book
- Clouds
- Curly
- Ellipse
- Pyramids
- Quarter Circle
- Rip
- Rounded
- Shpiz
- Side Triangle
- Side Triangle With Opacity
- Single Wave
- Spikes
- Triangle
- Triangle With Opacity
- Waves
- Waves With Opacity
Color Top
Set the color of the top shape divider.
Horizontal Flip Top
Flip the top divider shape horizontally.
Vertical Flip Top
Flip the top divider shape vertically.
Width Top
Adjust the width of the top divider.
Height Top
Adjust the height of the top divider.
Show Bottom Divider
Enable or disable the bottom shape divider.
Background Location in Elementor Shape Divider Background
Set the background location.
- In Background – Places the background behind all other content within the section or element.
- In Foreground – Places the background in front of other content, making it more visually prominent.
- Site Body Background – Applies the background to the entire website’s body, affecting all pages.
- Site Body Foreground – Places the background in the foreground of the entire site’s body.
- Layout Background – Applies the background specifically to the layout container.
- Layout Foreground – Places the background in the foreground of the layout container.
Shape Divider Background Design Examples For Elementor
Here are some live use cases for the Shape Divider Background Widget.
Free Elementor Shape Divider Background with Rip divider type.
Free Elementor Shape Divider Background with Curly effect.
We hope this guide helped you explore the powerful features of the Shape Divider Background widget. With its customizable shape dividers and seamless design options, you can create visually striking transitions effortlessly. If you have any questions or need further assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
