The dividing line insideA simple divider of Godit's a great way to separate elements or add some visual flair to yoursDiviprovisions. The unit is easy to use and surprisingly flexible. In this post, we'll take an overview of the line styles in Divi's Divider Module and see how to configure them. We're going to create six examples to help you get your imagination going on how to style the Divi Divider Module.
Let's start.
Index
- 1 Screen
- 2 Splitter Unit Features
- 2.1 Divi Module Content Guide
- 3Divisor Module Design Tab
- 3.1 Split unit line style options
- 3.2 Split unit line size settings
- 4 Split unit line style examples
- 4.1 Example of a single line separator unit style
- 4.2 Example of a two separator units line style
- 4.3 Example of a three-separator unit line style
- 4.4 Example of a four-division unit line style
- 4.5 Example Five of the Splitter Unit Line Style
- 4.6 Divisor Unit Line Style Example Six
- 5 Results
- 6 final thoughts
visualization
Example of a desktop divider unit line style
Example of a phone splitter unit line style
Example of a desktop divider unit, row two
Example of a two-line telephone splitter unit
Example of a three-table divider unit line
Example of a three-line telephone splitter unit
Example of a series of fourth unit desktop divider
Example of a four phone splitter unit line
Example of a fifth Line of Desktop Divider unit
Example of a fifth row telephone splitter unit
Six desktop divider unit line example
Example of telephone splitter unit series six
Splitter Unit Features
To give the screenshots some color and reference, I added Text Sections and a colored background from his portfolio pageFree photo studio layout packwhich is available in Divi.
Divi Module Content Guide
The Divider Unit Contents tab includes the option to show or not the divider line and give the divider a background color.
Background options are the default options for other Divi modules. Includes background color, gradient, image, video, pattern or mask. In this example, I added a pink background color to make it easier to see the space that the divider is using. The separator is placed at the top of this space by default.
Splitter Unit Design Tab
Options on the Splitter Design tab include line color, which also includes line style options. Other options include scaling, distance, border, box shadow, filters, transform and animation.
line color
The Line Color setting includes the default color picker, allowing Divi users to fully customize the color of the divider line.
line style
The Line Style setting determines the shape of the line. It has 9 options.
line position
Line Position places the line at the top, middle, or bottom of the dividing space.
Separation unit line style options
The line style options work with size (weight, width, etc.) to create some interesting separators. Here's a look at each style weighted by 20px so they stand out in my images. After that, we will configure the divider with various combinations of colors, styles and sizes.
Solid
Solid displays the separator as a solid line.
punctuated
Dotted cuts the dividing line into small strokes.
Scattered
Dotted displays the dividing line as dots.
Good
Double displays two dividing lines side by side.
Streak
The groove cuts the top of the line and makes the top one shade darker than the color we chose.
Cume
Ridge cuts the bottom of the line and makes the bottom one shade darker than the color we chose.
Enter
The inset cuts off the top and bottom of the line, making the entire line one shade darker than the color we selected.
Principle
The Outset doesn't cut the line, giving it essentially the same look and feel as the Solid.
No one
None makes the divider invisible, showing only the background color.
Splitter unit line scaling settings
The size options determine the weight, height, width, and alignment of the divider. Here's a look at the main settings.
divisor weight
The divider thickness determines the thickness of the divider line.
Width
Width specifies the width of the dividing line. Can be used in conjunction with Module Alignment to position the line to the left, center, or right of its area.
Module Alignment
Unit alignment places the line to the left, center, or right of the unit area.
Height
Height specifies the height of the unit area. The line stays the same size, but the background fills to take up space.
Split Unit Line Style Examples
Now, let's look at some examples of these configurations working together. For our examples, I added the splitter module to various locations on the portfolio page and the homepage of the Free Photo Studio layout pack. I will use the colors from the layout pack and style the unit to match the area.
Example of a single line break unit style
For our first example, we'll place a solid divider below the page title of the portfolio page.Add separator unit to text unit.
change itline colorat #ff5a17 and let it goline stylein the default configuration (Solid). Put themdivisor weightto 4px for desktops and tablets and change to 2px for phones. Put themWidthto 30% and theModule AlignmentIn the center.
- Thread color: #ff5a17
- Line Style: Solid
- Separator weight: 4px desktop, 2px phone
- Width: 30%
- Module Alignment: Center
Example of a two separator unit line style
We will place the second separator between portfolio projectsunder selected tasks. This requires the addition of anew linefor the Splitter module. The separator will be shifted, just to make it look different.
change itline colorin #ff5a17 and theline styleat the Ridge. Put themdivisor weightat 24px for desktops and tablets and at 20px for phones. change itWidthat 76%.
- Thread color: #ff5a17
- Line Style: Ridge
- Separator weight: desktop and tablet 24px, phone 20px
- Width: 76%
Put themHeightto 40 pixels to add more space between the next line.
- Height: 40px
Example of a three-spaced unit line style
We'll place the third separator next to the call-to-action button for a section titled Let's Work Together. Thischange the row to three columnswith ½ column on the left and two ¼ columns on the right. THEThe separator module is placed between the text modules and the button module. The divider line connects to the button, following design cues from other parts of this layout.
This wears or solidline style. change itline colorto black and adjust itdivisor weightup to 2 pixels. Put themWidthto 128% for desktops, 112% for tablets and Auto for phones.
- Thread color: #000000
- Line Style: Solid
- Separator Weight: 2px
- Width: 128% desktop, 112% tablet, automatic phone
Example of a four-separator section line style
The next three examples use the Photo Studio Landing Page. The fourth example sets us aSeparator unit below button unitin a CTA called Transforming Moments into Art. This will use the module settings to add points to the area to draw attention.
change itline colorin #ff5a17 and select Dotted for itline style. Put themdivisor weightup to 30 pixels. change itWidthto 45% for desktops, 30% for tablets and 28% for phones.
- Thread color: #ff5a17
- Line style: dashed
- Divider Weight: 30px
- Width: 45% desktop, 30% tablet, 28% phone
Scroll down toSpaceand add 42 pixels of itLeft liningfor phones. Leave Fill for desktops and tablets as the default.
- Left padding: 42px phone
Example of a five separator unit line style
Our fifth example will add a dotted line to a section called Recent Work. AdditionSeparator unit for empty columnin the top row.
change the lineCorfor black and theline stylefor Dashed. Put themdivisor weightup to 24px.
- Thread color: #000000
- Line style: dashed
- Divider Weight: 24px
change itHeightup to 45px for tablets and phones. Alternatively, you can set the Height to 45px for all devices. Desktops will look the same anyway.
- Height: 45px
Example of a six-space unit line style
For our last example, we'll add oneSeparator unit with a double line below the descriptionin a section called Case Study.
change itline colorfor the white and theline styleto bend
- Thread color: #ffffff
- Line style: double
Put themdivisor weightup to 6 pixels. change itWidthto 48% for desktops, 22% for tablets and 36% for phones. change itModule AlignmentIn the center.
- Divider Weight: 6px
- Width: 48% desktop, 22% tablet, 36% phone
- Module Alignment: Center
Results
Example of a desktop divider unit line style
Example of a phone splitter unit line style
Example of a desktop divider unit, row two
Example of a two-line telephone splitter unit
Example of a three-table divider unit line
Example of a three-line telephone splitter unit
Example of a series of fourth unit desktop divider
Example of a four phone splitter unit line
Example of a fifth Line of Desktop Divider unit
Example of a fifth row telephone splitter unit
Six desktop divider unit line example
Example of telephone splitter unit series six
Final thoughts
This is an overview of the line styles in Divi's Divider Module and how to configure them. The various line styles and options offer many design possibilities. With just a few settings, Divi users can create small or large dividers, add shapes, and more. Divi's Divider Module is a great way to add visual flair to any Divi site.
We want to hear from you. Choosing the divider style in your Divi Divider Module? Let us know in the comments.
FAQs
How do I add a divider line in Divi? ›
Add The Divi Divider Module
Once the section, row, and columns are set up, click on the grey “+” icon inside the row. This brings up the Divi Module Library which contains all the modules included with the Divi theme. Scroll down to Divider and click on it to load the module.
Divi Module by Elegant Themes
The divider module is a simple way to add space anywhere on your page. If something needs some room to breath, then add a divider to give it some separation.
To access Divi's shape dividers, log in to your Divi website and enable the Visual Builder. Hover over the section and click the gear icon to bring up that section's settings. Then navigate to Design > Dividers. Dividers are available in all types of sections: Regular, Fullwidth, and Speciality.
How do I create a custom Divi module? ›- Step 1 - Create A Custom Divi Module plugin. ...
- Step 2 - Define Your Custom Divi Module Class. ...
- Step 3 - Retrieve Gallery Posts in Gallery CPT. ...
- Step 4 - Create and Enqueue CSS file for Gallery styling. ...
- React Part. ...
- Step 1 - Create A JavaScript File. ...
- Step 2 - Retrieve Gallery Posts from WordPress API.
To add a horizontal line using the WordPress block editor, click the (+) icon to add a new block wherever you want the line to be. Next, select the Separator block from the Layout Elements section or search for it using the search bar. Once added, you'll see your horizontal line divider in your content area.
How to keep the Divi menu module from overlapping to two lines? ›Change The Divi Menu Module Breakpoint. Perhaps the most obvious way to fix the Divi Menu from overlapping to two lines is to simply change the responsive breakpoint.
What is a divider page? ›A divider is a thin, lightweight rule that groups content in lists and page layouts. Dividers help organize page content and hierarchy into individual tiles. Full-bleed dividers emphasize separate content areas and sections that require more distinct visual separation.
How do I use Divi menu module? ›How To Use The Menu Module. This is a native module that comes with Divi for free. To add this module to your page, simply select the Menu module from Divi's module list. This module can then be fully customized using Divi's wide range of design settings.
How do I choose a layout in Divi theme? ›Click to use the Divi Builder and deploy the Visual Builder. Open the settings menu at the bottom of the page and click the “Load From Library” plus icon on the left. In the Load from Library modal that pops up, click the “Add From Library” tab and select the new layout from the list to load the new layout.
How do I edit Divi modules? ›The access the Module Customizer, click the Divi > Module Customizer link in your WordPress Dashboard. When you open the customizer, you will notice individual panels for each of the Divi Modules. To adjust the appearance of a module, open the panel to reveal the available settings.
What are the field types in Divi custom module? ›
Field Type (required) – the Field Type will determine what type of input the user sees. Current field types available are text box, text area, color picker, image selector, icon selector, Yes/No toggle, and select. * The select field option will let you add select options in a comma-separated list.
How do I add an attribute to Divi module? ›Go to any Section/Row/Column/Module settings -> Advanced tab -> Custom Attributes and enable "Use Custom Attributes". Then you can choose whether you'd like to add the Attribute to the Wrapper or a Button in that Wrapper. Then you can add a Title/Label to your Attribute and click the check-mark to enable the Attribute.
How do I create a section divider scroll effect in Divi? ›Creating New Divider Styles with Ease
To update the section divider style, deploy the layers box by clicking the layers icon in the Divi Builder Settings menu. Then click to open the settings of the middle section containing the divider styles.
Creating a divider
HTML <hr> element is used to add a divider a horizontal line on the webpage. We can style this element using CSS border property. We can add a dotted, dashed, or solid divider. The thickness and color of the divider can be changed accordingly.
Use three equal signs(===) and enter a button to add a double line. Use three underscores(___) and enter a key to form a divider with a medium thickness. Press three number signs (###) and enter a key to make a thicker line with a border. And to round it up, use three tildes (~~~) and enter to make a wavy divider line.