Divi’s Divider Module provides a variety of learn to create interesting dividers. Some of the interesting and unique is the facility to create gradient dividers. In this post, we’ll discuss the way to create gradient dividers with the Divi Divider Module. We’ll check out how the gradient dividers art work and see 3 examples to help you create your individual.
Let’s get started!
Preview
Desktop Gradient Divider Example One
Phone Gradient Divider Example One
Desktop Gradient Divider Example Two
Phone Gradient Divider Example Two
Desktop Gradient Divider Example 3
Phone Gradient Divider Example 3
Create Gradient Dividers with Divi’s Divider Module
There are a selection of techniques to create a divider with Divi’s Divider Module. By the use of default, the module presentations a divider line. We will disable this and use the module’s Background settings to create a divider that we will style with the module’s Background possible choices. This comprises colors, gradients, footage, and plenty of others. Slightly than showing the divider, we’ll style the divider’s container and create a styled divider.
Conceal Divider
The process is understated. First, add a Divider Module on your construction and then disguise the divider throughout the content material subject matter tab.
Divider Background
Next, make a selection the type of background you’d love to turn throughout the Background settings throughout the Content material subject matter tab. For this post, we’ll point of interest on the Background Gradient settings.
Add Sizing and Spacing
Use the Sizing and Spacing possible choices throughout the Design tab to control the height and width of the divider’s container to create a styled divider in on the subject of any size or shape. Benefit from width and height, max width and max height, module alignment, and top and bottom padding to create the dimensions you wish to have.
Add Border Radius
Add Border possible choices, paying homage to Border Radius, to further style the shape. You’ll adjust the corners together or independently to create interesting shapes. You’ll moreover add Border Width, Varieties, and plenty of others., to create a novel design.
Gradient Divider Examples
Now, let’s create 3 gradient dividers using the guidelines we merely discussed.
Gradient Divider Example One
For our first gradient divider, we’ll use the landing internet web page from the unfastened House Baker Format Pack that’s available inside Divi. The art work in this construction pack has robust dark outlines with sharp gradients, all in shades of brown. We’ll mimic this with our gradient using colors from the construction pack.
For our first example, we’ll use the Divider Module that is already in place throughout the hero section. This one is understated, on the other hand it supplies such a lot visually.
For reference, proper right here’s the construction faster than we add the Divider Module.
Visibility
Inside the Divider Module’s Visibility settings, make a selection No for Show Divider.
- Show Divider: No
Gradient
Scroll all of the approach all the way down to Background and make a selection the Background Gradient tab. For this one, we’ll add 5 Gradient Stops. We’ll cross away the rest of the gradient settings at their defaults. Listed below are the settings for each and every Gradient Stop.
Set the main Gradient Stop to 0px and its Color to #dcc087.
- First Gradient Stop: 0px, #dcc087
Place the second Gradient Stop at 16px and its Color to #e6b060.
- second Gradient Stop: 16px, #e6b060
Place the third Gradient Stop at 22px and its Color to #f19d33.
- third Gradient Stop: 22px, #f19d33
The fourth Gradient Stop just about sits on top of the third Gradient Stop. Place it at 31px and set its Color to #f49826.
- Fourth Gradient Stop: 31px, #f49826
Set the rest Gradient Stop at 48px and its Color to #3b261e.
- fifth Gradient Stop: 48px, #3b261e
Change the Gradient Unit to Pixels. We have now now the colors we’re searching for. Now, we merely wish to optimize the dimensions.
- Gradient Unit: Pixels
Sizing
Next, transfer to the Design tab. Beneath Sizing, set the Width to 100%. Set the Most sensible to 40px for all 3 device sizes. Close the module and save your settings.
- Width: 100%
- Most sensible: 40px
Gradient Divider Example Two
For our second gradient divider, we’ll use the landing internet web page from the unfastened On-line Route Format Pack that’s available inside Divi. This one comprises a variety of rounded edges and even has a circle with a gradient that overlaps an image.
We’ll use this as our position to start out for the design and create a brand spanking new gradient divider. We’ll add a brand spanking new Divider Module to the Chapter 1 section merely with the intention to upload a graphic.
For reference, proper right here’s the construction faster than we add the Divider Module.
Correct Column Spacing
First, open the Column settings that come with an overview of the main chapter. That’s the Correct Column throughout the Row. Pass to the Design settings and scroll all of the approach all the way down to Spacing. Change the Best Padding from 100px to 50px.
- Best Padding: 50px
Add a Divider Module
Next, add a brand spanking new Divider Module under the Button Module for the chapter description.
Visibility
Open the Divider Module’s Visibility settings and make a selection No for Show Divider.
- Show Divider: No
Gradient
Next, scroll all of the approach all the way down to Background and make a selection the Background Gradient tab. This one has two Gradient Stops. Change the Gradient Route to 145deg.
- First Gradient Stop: 0px, #26ff5c
- second Gradient Stop: 100px, #2981b6
- Gradient Route: 145deg
Sizing
Next, make a selection the Design tab. Beneath Sizing, trade the Width for desktops to 45%. Change medication to 24vw and phones to 40vw. Change Module Alignment to Heart. Set Most sensible to 200px for all units.
- Width: 45% desktop, 24vw tablet, 40vw phone
- Module Alignment: Heart
- Most sensible: 200px
Border
Next, scroll all of the approach all the way down to Border. We’ll create an arched shape that mimics the images throughout the construction. Change the Rounded Corners to 400px for the Left and Correct Best and 0px for the Left and Correct Bottom. Close the module and save your settings.
- Rounded Corners top left, top right kind: 400px
- Rounded Corners bottom left, bottom right kind: 0px
Gradient Divider Example 3
For our third gradient divider, we’ll use the landing internet web page from the unfastened Podcaster Format Pack that’s available inside Divi. This one has a variety of gradient shapes during the construction that are made with footage and dividers.
We’ll create a gradient divider with the design cues from those footage and other parts. It’ll combine multiple gradients into one. Our divider will separate the featured episodes from the new episodes.
For reference, proper right here’s the construction faster than we add the Divider Module.
New Row
First, add a new Row above the establish. That’s the position we’ll add the Divider Module.
Add Divider Module
Next, add a Divider Module to the Row.
Visibility
Inside the Visibility settings, make a selection No for Show Divider.
- Show Divider: No
Gradient
Scroll all of the approach all the way down to Background and make a selection the Background Gradient tab. For this one, we’ll use 4 Gradient Stops. Set the Route to 90deg.
- First Gradient Stop: 0px, #f52791
- second Gradient Stop: 38px, #3742fb
- third Gradient Stop: 70px, f7d043
- Fourth Gradient Stop: 100px, #fe386f
- Route: 90deg
Sizing
Next, transfer to the Design tab. Beneath Sizing, set the Most sensible to 60px for desktops, 50px for medication, and 40px for phones.
- Most sensible: 60px desktop, 50px tablet, 40px phone
Border
Next, scroll all of the approach all the way down to Border. Set the Rounded Corners to 0px Best Left, 30px Best Correct, 30px Bottom Left, and 0px Best Correct. This creates a method that matches the email optin section. Close the module and save your settings.
- Best Left: 0px
- Best Correct: 40px
- Bottom Left: 40px
- Bottom Correct: 0px
Results
Desktop Gradient Divider Example One
Phone Gradient Divider Example One
Desktop Gradient Divider Example Two
Phone Gradient Divider Example Two
Desktop Gradient Divider Example 3
Phone Gradient Divider Example 3
Completing Concepts
That’s our check out the way to create gradient dividers with Divi’s Divider Module. The gradient selection throughout the Divider Module works great for creating unique gradient dividers. The use of the sizing, spacing, and border corner possible choices provides us with the apparatus to create gradient dividers in loads of dimensions and shapes. With just a few simple settings, we will create unique gradient dividers that are certain to stick out from the crowd.
We want to listen from you. Do you create gradient dividers with Divi’s Divider Module? Let us know about your enjoy throughout the comments.
The post Create Gradient Dividers with Divi’s Divider Module gave the impression first on Chic Issues Weblog.
0 Comments