Divi, the popular WordPress theme, is known for its versatile modules that empower website designers and developers to create stunning layouts effortlessly. Among its impressive arsenal of modules, the Divi Divider Module stands out as a unique tool that allows users to craft captivating dividers. In this blog post, we'll delve into the captivating world of gradient dividers and explore how you can leverage the Divi Divider Module to enhance your designs. We'll take a closer look at how gradient dividers work and provide you with inspiring examples to ignite your creativity.
Preview
Here is a preview of how our gradient design will look at the end.
How to Create Gradient Dividers with Divi’s Divider Module
There exist multiple methods for constructing a divider using Divi's Divider Module. By default, the module exhibits a line as the divider. However, it is possible to deactivate this line and utilize the Background settings of the module to generate a divider that can be customized using various Background options such as colors, gradients, images, and more. Instead of displaying the actual divider, we will concentrate on styling the container of the divider to produce a uniquely styled divider.
Hide Divider
The procedure is easy. Add a Divider Module to your layout first, and then under the content tab, conceal the divider.
Create Amazing Websites
With the best free page builder Elementor
Start Now
Divider Background
Next, choose the background type you want to use from the Background settings menu on the Content tab. We'll concentrate on the Background Gradient options in this post.
Add Sizing and Spacing
To build a stylish divider in just about any size or shape, use the Sizing and Spacing options on the Design tab to adjust the height and width of the divider's container. To generate the desired size, use width and height, maximum width and maximum height, module alignment, and top and bottom padding.
Add Border Radius
To further style the shape, add border options like Border Radius. Corners can be adjusted jointly or separately to produce fascinating shapes. For a special design, you can additionally add Border Width, Styles, etc.
Gradient Divider
We'll utilize the landing page from the free Home Baker Layout Pack included in Divi for our first gradient divider. This layout pack's artwork features brown-colored gradients and powerful, dark outlines. We'll replicate this with our gradient by using the layout pack's color palette. We'll use the Divider Module that is already present in the hero section for our first illustration. This one is straightforward, yet it makes a big visual impact. Here is the layout before we added the Divider Module for reference.
Visibility
Choose No for Show Divider under Visibility options for the Divider Module.
- Show Divider: No
Gradient
Select the Background Gradient tab by scrolling down to Background. We'll add five Gradient Stops for this one. The default values for the other gradient parameters will be used. The parameters for each Gradient Stop are listed below.
- First Gradient Stop: 0px, #dcc087
- Second Gradient Stop: 16px, #e6b060
- Third Gradient Stop: 22px, #f19d33
- Fourth Gradient Stop: 31px, #f49826
- Fifth Gradient Stop: 48px, #3b261e
Pixels should be used as the gradient unit. The hues we were seeking for are now available. All that is left to do is optimize the size.
- Gradient Unit: Pixels
Sizing
Afterwards choose the Design tab. Put 100% for the Width under Sizing. All three device sizes should have the Height set to 40px. Modular closure will save your settings.
- Width: 100%
- Height: 40px
Final Preview
Now here we have a final preview of our gradient design in action.
Ending Thoughts
That wraps up our discussion on using Divi's Divider Module to make gradient dividers. To make custom gradient dividers, use the gradient option in the Divider Module. We can make gradient dividers in a variety of sizes and shapes by utilizing the border corner, spacing, and sizing options. We can design distinctive gradient dividers that will stand out from the crowd with just a few basic choices.
