The divider line in Divi’s Divider Module is an effective way to split parts or upload some visible aptitude on your Divi layouts. The module is straightforward to make use of and strangely flexible. On this publish, we’ll see an outline of the road kinds in Divi’s Divider Module and spot taste them. We’ll create six examples to assist spark your creativeness to taste your Divi Divider Module.
Let’s get began.
Preview
Desktop Divider Module Line Taste Instance One
Telephone Divider Module Line Taste Instance One
Desktop Divider Module Line Instance Two
Telephone Divider Module Line Instance Two
Desktop Divider Module Line Instance 3
Telephone Divider Module Line Instance 3
Desktop Divider Module Line Instance 4
Telephone Divider Module Line Instance 4
Desktop Divider Module Line Instance 5
Telephone Divider Module Line Instance 5
Desktop Divider Module Line Instance Six
Telephone Divider Module Line Instance Six
Divider Module Options
To present the screenshots some colour and reference, I’ve added the Textual content Modules and a coloured background from the Portfolio web page of the free Photography Studio Layout Pack that’s to be had inside Divi.
Divi Module Content material Tab
The Divider Module’s Content material tab comprises the method to show the divider line or no longer and to offer the divider a background colour.
The Background choices are the usual choices for different Divi modules. It features a background colour, gradient, symbol, video, trend, or masks. For this situation, I’ve added a purple background colour to make it simple to look the gap the divider makes use of. The divider is positioned on the best of this house via default.
Divider Module Design Tab
The Divider Module Design tab choices come with Line Colour which additionally comprises the Line Taste choices. Different choices come with Sizing, Spacing, Border, Field Shadow, Filters, Grow to be, and Animation.
Line Colour
The Line Colour surroundings comprises the usual colour picker, permitting Divi customers to completely customise the colour of the divider line.
Line Taste
The Line Taste surroundings determines the form of the road. It has 9 choices.
Line Place
Line Place puts the road on the best, heart, or backside of the divider’s house.
Divider Module Line Taste Choices
The Line Taste choices paintings with Sizing (Weight, Width, and so on.) to create some fascinating dividers. Right here’s a take a look at each and every Taste with a Weight of 20px so that they stand out in my photographs. After this, we’ll taste the divider with quite a lot of Colour, Taste, and Measurement combos.
Forged
Forged shows the divider as a cast line.
Dashed
Dashed cuts the divider line into small dashes.
Dotted
Dotted shows the divider line as dots.
Double
Double shows two divider strains in parallel.
Groove
Groove cuts into the highest of the road and makes the highest a darker coloration of the colour we decided on.
Ridge
Ridge cuts into the ground of the road and makes the ground a darker coloration of the colour we decided on.
Inset
Inset cuts into the highest and backside of the road, making all the line a darker coloration of the colour we decided on.
Outset
Outset doesn’t lower into the road, necessarily giving the similar glance as Forged.
None
None makes the divider line invisible, appearing simplest its background colour.
Divider Module Line Sizing Settings
The Sizing choices decide the divider’s weight, top, width, and alignment. Right here’s a take a look at the principle settings.
Divider Weight
Divider Weight specifies the thickness of the divider line.
Width
Width specifies the width of the divider line. It may be utilized in mixture with Module Alignment to position the road at the left, middle, or proper of its house.
Module Alignment
Module Alignment puts the road at the left, within the middle, or at the proper of the module’s house.
Peak
Peak determines the peak of the module’s house. The road stays the similar dimension, however the background fills in to soak up the gap.
Divider Module Line Taste Examples
Now, let’s see some examples of those settings running in combination. For our examples, I’ve added the Divider Module to quite a lot of places throughout the Portfolio web page and the Touchdown web page of the loose Images Studio Format Pack. I’ll use the colours from the structure pack and magnificence the module to suit the world.
Divider Module Line Taste Instance One
For our first instance, we’ll position a cast divider line beneath the web page name of the portfolio web page. Upload the Divider Module beneath the Textual content Module.
Exchange the Line Colour to #ff5a17 and depart the Line Taste on the default surroundings (Forged). Set the Divider Weight to 4px for desktops and pills and alter it to 2px for telephones. Set the Width to 30% and the Module Alignment to Heart.
- Line Colour: #ff5a17
- Line Taste: Forged
- Divider Weight: 4px desktop, 2px telephone
- Width: 30%
- Module Alignment: Heart
Divider Module Line Taste Instance Two
We’ll position the second one divider between portfolio initiatives beneath Featured Paintings. This calls for including a new Row for the Divider Module. The divider will probably be offset, simply to make it glance other.
Exchange the Line Colour to #ff5a17 and the Line Taste to Ridge. Set the Divider Weight to 24px for desktops and pills and to 20px for telephones. Exchange the Width to 76%.
- Line Colour: #ff5a17
- Line Taste: Ridge
- Divider Weight: 24px desktop and pill, 20px telephone
- Width: 76%
Set the Peak to 40px so as to add more room between the following Row.
- Peak: 40px
Divider Module Line Taste Instance 3
We’ll position the 3rd divider line subsequent to the Name-to-Motion button for a piece categorised Let’s Paintings In combination. This one adjustments the Row to a few columns with a ½ column at the left and two ¼ columns at the proper. The Divider Module is positioned between the Textual content Modules and the Button Module. The divider line connects to the button, following design cues from different sections of this structure.
This one makes use of the Forged Line Taste. Exchange the Line Colour to black and set the Divider Weight to 2px. Set the Width to 128% for desktops, 112% for pills, and Auto for telephones.
- Line Colour: #000000
- Line Taste: Forged
- Divider Weight: 2px
- Width: 128% desktop, 112% pill, Auto telephone
Divider Module Line Taste Instance 4
The following 3 examples use the Images Studio Touchdown Web page. Our fourth instance puts a Divider Module beneath the Button Module in a CTA referred to as Turning Moments Into Artwork. This one will use the module’s settings so as to add dots to the world to attract consideration.
Exchange the Line Colour to #ff5a17 and make a choice Dotted for the Line Taste. Set the Divider Weight to 30px. Exchange the Width to 45% for desktops, 30% for pills, and 28% for telephones.
- Line Colour: #ff5a17
- Line Taste: Dotted
- Divider Weight: 30px
- Width: 45% desktop, 30% pill, 28% telephone
Scroll all the way down to Spacing and upload 42px of Left Padding for telephones. Depart the Padding for desktops and pills on the default.
- Left Padding: 42px telephone
Divider Module Line Taste Instance 5
Our 5th instance will upload a dashed line to a piece referred to as Contemporary Paintings. Upload the Divider Module to the empty column within the best Row.
Exchange the Line Colour to black and the Line Taste to Dashed. Set the Divider Weight to 24px.
- Line Colour: #000000
- Line Taste: Dashed
- Divider Weight: 24px
Exchange the Peak to 45px for pills and telephones. Then again, you’ll set the Peak to 45px for all units. Desktops will glance the similar both means.
- Peak: 45px
Divider Module Line Taste Instance Six
For our closing instance, we’ll upload a Divider Module with a double line beneath the outline in a piece referred to as Case Find out about.
Exchange the Line Colour to white and the Line Taste to Double.
- Line Colour: #ffffff
- Line Taste: Double
Set the Divider Weight to 6px. Exchange the Width to 48% for desktops, 22% for pills, and 36% for telephones. Exchange the Module Alignment to Heart.
- Divider Weight: 6px
- Width: 48% desktop, 22% pill, 36% telephone
- Module Alignment: Heart
Effects
Desktop Divider Module Line Taste Instance One
Telephone Divider Module Line Taste Instance One
Desktop Divider Module Line Instance Two
Telephone Divider Module Line Instance Two
Desktop Divider Module Line Instance 3
Telephone Divider Module Line Instance 3
Desktop Divider Module Line Instance 4
Telephone Divider Module Line Instance 4
Desktop Divider Module Line Instance 5
Telephone Divider Module Line Instance 5
Desktop Divider Module Line Instance Six
Telephone Divider Module Line Instance Six
Finishing Ideas
That’s our evaluate of line kinds in Divi’s Divider Module and taste them. The quite a lot of line kinds and choices supply a whole lot of design chances. With only some settings, Divi customers can create small or massive dividing strains, upload shapes, and quite a bit extra. Divi’s Divider Module is an effective way so as to add some visible aptitude to any Divi web page.
We need to listen from you. Do you taste the divider line on your Divi Divider Module? Tell us within the feedback.
The publish An Overview of Line Styles in Divi’s Divider Module & How to Style Them gave the impression first on Elegant Themes Blog.
0 Comments