How to Create Gradient Dividers with Divi’s Divider Module

by DS | Jun 6, 2023 | Etcetera | 0 comments

divi-creating-gradient-dividers-ft-img-3-min

Divi’s Divider Module supplies a number of how one can create attention-grabbing dividers. Probably the most attention-grabbing and distinctive is the power to create gradient dividers. On this submit, we’ll speak about the way to create gradient dividers with the Divi Divider Module. We’ll take a look at how the gradient dividers paintings and spot 3 examples that will help you create your personal.

Let’s get began!

Table of Contents

Preview

Desktop Gradient Divider Instance One

Desktop Gradient Divider Example One

Telephone Gradient Divider Instance One

Phone Gradient Divider Example One

Desktop Gradient Divider Instance Two

Desktop Gradient Divider Example Two

Telephone Gradient Divider Instance Two

Phone Gradient Divider Example Two

Desktop Gradient Divider Instance 3

Desktop Gradient Divider Example Three

Telephone Gradient Divider Instance 3

Phone Gradient Divider Example Three

The best way to Create Gradient Dividers with Divi’s Divider Module

There are a number of tactics to create a divider with Divi’s Divider Module. Via 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 taste with the module’s Background choices. This contains colours, gradients, photographs, and so forth. Relatively than appearing the divider, we’ll taste the divider’s container and create a styled divider.

Cover Divider

The method is understated. First, upload a Divider Module for your format after which conceal the divider within the content material tab.

How to Create Gradient Dividers with Divi’s Divider Module

Divider Background

Subsequent, make a selection the kind of background you’d love to show within the Background settings within the Content material tab. For this submit, we’ll focal point at the Background Gradient settings.

How to Create Gradient Dividers with Divi’s Divider Module

Upload Sizing and Spacing

Use the Sizing and Spacing choices within the Design tab to keep watch over the peak and width of the divider’s container to create a styled divider in with regards to any dimension or form. Make the most of width and top, max width and max top, module alignment, and best and backside padding to create the scale you need.

How to Create Gradient Dividers with Divi’s Divider Module

Upload Border Radius

Upload Border choices, comparable to Border Radius, to additional taste the form. You’ll regulate the corners in combination or independently to create attention-grabbing shapes. You’ll additionally upload Border Width, Kinds, and so forth., to create a singular design.

How to Create Gradient Dividers with Divi’s Divider Module

Gradient Divider Examples

Now, let’s create 3 gradient dividers the usage of the ideas we simply mentioned.

Gradient Divider Instance One

For our first gradient divider, we’ll use the touchdown web page from the free Home Baker Layout Pack that’s to be had inside Divi. The paintings on this format pack has robust darkish outlines with sharp gradients, all in sun shades of brown. We’ll mimic this with our gradient the usage of colours from the format pack.

For our first instance, we’ll use the Divider Module this is already in position within the hero segment. This one is understated, but it surely provides so much visually.

For reference, right here’s the format prior to we upload the Divider Module.

Gradient Divider Example One

Visibility

Within the Divider Module’s Visibility settings, make a selection No for Display Divider.

Display Divider: No

Gradient Divider Example One

Gradient

Scroll all the way down to Background and make a selection the Background Gradient tab. For this one, we’ll upload 5 Gradient Stops. We’ll go away the remainder of the gradient settings at their defaults. Listed below are the settings for each and every Gradient Forestall.

Set the primary Gradient Forestall to 0px and its Colour to #dcc087.

First Gradient Forestall: 0px, #dcc087

Gradient Divider Example One

Position the second one Gradient Forestall at 16px and its Colour to #e6b060.

2nd Gradient Forestall: 16px, #e6b060

Gradient Divider Example One

Position the 3rd Gradient Forestall at 22px and its Colour to #f19d33.

3rd Gradient Forestall: 22px, #f19d33

Gradient Divider Example One

The fourth Gradient Forestall virtually sits on best of the 3rd Gradient Forestall. Position it at 31px and set its Colour to #f49826.

Fourth Gradient Forestall: 31px, #f49826

Gradient Divider Example One

Set the remaining Gradient Forestall at 48px and its Colour to #3b261e.

5th Gradient Forestall: 48px, #3b261e

Gradient Divider Example One

Trade the Gradient Unit to Pixels. We have the colours we’re in search of. Now, we simply want to optimize the scale.

Gradient Unit: Pixels

Gradient Divider Example One

Sizing

Subsequent, move to the Design tab. Below Sizing, set the Width to 100%. Set the Peak to 40px for all 3 software sizes. Shut the module and save your settings.

Width: 100%
Peak: 40px

Gradient Divider Example One

Gradient Divider Instance Two

For our 2d gradient divider, we’ll use the touchdown web page from the free Online Course Layout Pack that’s to be had inside Divi. This one contains loads of rounded edges or even has a circle with a gradient that overlaps a picture.

We’ll use this as our place to begin for the design and create a brand new gradient divider. We’ll upload a brand new Divider Module to the Bankruptcy 1 segment simply so as to add a graphic.

For reference, right here’s the format prior to we upload the Divider Module.

Gradient Divider Example Two

Proper Column Spacing

First, open the Column settings that include an outline of the primary bankruptcy. That is the Proper Column within the Row. Pass to the Design settings and scroll all the way down to Spacing. Trade the Most sensible Padding from 100px to 50px.

Most sensible Padding: 50px

Gradient Divider Example Two

Upload a Divider Module

Subsequent, upload a brand new Divider Module below the Button Module for the bankruptcy description.

Gradient Divider Example Two

Visibility

Open the Divider Module’s Visibility settings and make a selection No for Display Divider.

Display Divider: No

Gradient Divider Example Two

Gradient

Subsequent, scroll all the way down to Background and make a selection the Background Gradient tab. This one has two Gradient Stops. Trade the Gradient Route to 145deg.

First Gradient Forestall: 0px, #26ff5c
2nd Gradient Forestall: 100px, #2981b6
Gradient Route: 145deg

Gradient Divider Example Two

Sizing

Subsequent, make a selection the Design tab. Below Sizing, exchange the Width for desktops to 45%. Trade pills to 24vw and telephones to 40vw. Trade Module Alignment to Middle. Set Peak to 200px for all units.

Width: 45% desktop, 24vw pill, 40vw telephone
Module Alignment: Middle
Peak: 200px

Gradient Divider Example Two

Border

Subsequent, scroll all the way down to Border. We’ll create an arched form that mimics the pictures within the format. Trade the Rounded Corners to 400px for the Left and Proper Most sensible and 0px for the Left and Proper Backside. Shut the module and save your settings.

Rounded Corners best left, best proper: 400px
Rounded Corners backside left, backside proper: 0px

Gradient Divider Example Two

Gradient Divider Instance 3

For our 3rd gradient divider, we’ll use the touchdown web page from the free Podcaster Layout Pack that’s to be had inside Divi. This one has loads of gradient shapes all through the format which might be made with photographs and dividers.

We’ll create a gradient divider with the design cues from the ones photographs and different components. It’s going to mix more than one gradients into one. Our divider will separate the featured episodes from the new episodes.

For reference, right here’s the format prior to we upload the Divider Module.