Add Some Fun Design Style To Divi Headlines
In today’s tutorial, I want to share a fun way to add some unique design style to your Divi heading text. I’m going to show you how to add decorative lines beside your heading text. This can be on the right side of a headline, or on both. You can adjust the color and thickness of the lines however you want. These snippets work make the line width beside the text “auto-adjustable” which is pretty cool. I recommend watching the video on this one to get the full benefit of this fun Divi tutorial!
▶️ Please watch the video above to get all the exciting details! 👆
Add A Decorative Line On Both Sides of A Divi Heading
First, add the CSS class “pa-heading-line-both” to any module where you want the lines to appear on the heading.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*center the heading and lines*/
.pa-heading-line-both h2 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
/*add and adjust the lines*/
.pa-heading-line-both h2:before,
.pa-heading-line-both h2:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #666666;
}
/*add spacing between heading and lines*/
.pa-heading-line-both h2:after {
margin: 0 0 0 20px;
}Notice that we are targeting an H2 heading, which is what we used in the video example. You can change this to H1, H3, etc.
Add A Decorative Line On The Right Side of A Divi Heading
If your text is left aligned, you may want to add a line to the right side of your Divi heading text. I like to do this one, and it works really well. The line will extend to the right as far as the column width. As always, feel free to change the thickness and color of the line, or change the h2 to h1, etc.
First, add the CSS class “pa-heading-line-right” to any module where you want the lines to appear on the heading.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*align the heading and lines*/
.pa-heading-line-right h2 {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
/*add and adjust the lines*/
.pa-heading-line-right h2:after {
content: '';
border-top: 2px solid;
margin: 0 20px 0 0;
flex: 1 0 20px;
color: #666666;
}
/*add spacing between heading and line*/
.pa-heading-line-right h2:after {
margin: 0 0 0 20px;
}How To Customize The CSS Heading Lines
There are several ways you can use and customize these snippets to better fit your website. For example, you can change the color, thickness, and width of the lines. We cover these scenarios much better on video, so be sure to watch the video embedded above.
Change the Line Color
You can can easily change the color of the line by replacing the hex color “#666666” with anything you want.
Change The Line Thickness
You can can easily change the thickness of the line by replacing the border-top “2px” value with something else, like “1px,” or maybe “20px.”
You could even make the thickness the same value as the font size!
Thanks for this. Works great on Desktop. However, when I’ve checked on my iPad/iPhone the headings aren’t appearing at all?
I’m not sure Andy, sounds weird and unrelated. I can’t test it, don’t own anything Apple as they have so many problems with their browsers.
Sorry, you can ignore me! I’m using your Divi Responsive helper plugin and had the responsive tabs open set to default.
I hadn’t realised with this option you’d need to enter the text for each view (so the content was missing in Tablet and Mobile). All working well, thanks!