Another way to make your Divi Blurbs stand out is to add a horizontal line behind the title. I know there are some tutorials already out there but I was inspired to create some tutorials exclusive to Divi Modules.

In this case I am choosing to start with the Divi Blurb Module. In this tutorial I will show you how to add a horizontal line behind the Divi Blurb title using a little custom CSS.

View The Live Demo

Let’s Get Started Adding the Horizontal Line Behind the Divi Blurb Title.

 

Adding The Blurb Modules

1. Create a row and give it 3 columns.

divi blurb classy underline

 

2. Add a Blurb Module to the first column.

 

3. Under Content: give it a title & text. I chose not to use an icon so that it is not too busy but feel free to do so if you want.

 

4. In the Advanced Tab: assign the module the following CSS Class: gq_b_horizontal_line

 

5. Now duplicate the blurb module and move it into the second and third column.

006 divi blurb classy underline

 

6. Save your page and move on to the magic of adding a little CSS.

 

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

Add this CSS.

/*------------------------------------------------*/
/*----[GQ BLURB HORIZONTAL LINE BEHIND TITLE]-----*/
/*------------------------------------------------*/

		.gq_b_horizontal_line h4 {
			font-size: 17px;
			letter-spacing: 2px;
			font-weight: 900;
			text-transform: uppercase;
			padding-bottom: 0px;
			margin-bottom: 8px;
			color: #000000;
			position: relative;
			z-index: 1;}

		.gq_b_horizontal_line a {
			display: inline;
			background: #fff;
			padding-right: 11px;}

		.gq_b_horizontal_line h4:before {
			border-top: 2px solid #26abe6;
			content: "";
			margin: 0 auto;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			bottom: 0;
			width: 95%;
			z-index: -1;}

 

Centered Blurbs

If you want to use a centered blurb title, start by adjusting the Blurb Module Settings

1. In the Design tab, change the text and title orientation to centered.

 

2. And use this CSS instead. The only difference is an adjustment to the Title left and right padding.

/*------------------------------------------------*/
/*----[GQ BLURB HORIZONTAL LINE BEHIND TITLE]-----*/
/*------------------------------------------------*/

		.gq_b_horizontal_line h4 {
			font-size: 17px;
			letter-spacing: 2px;
			font-weight: 900;
			text-transform: uppercase;
			padding-bottom: 0px;
			margin-bottom: 8px;
			color: #000000;
			position: relative;
			z-index: 1;}

		.gq_b_horizontal_line a {
			display: inline;
			background: #fff;
			padding-left: 8px;
			padding-right: 8px;}

		.gq_b_horizontal_line h4:before {
			border-top: 2px solid #26abe6;
			content: "";
			margin: 0 auto;
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			bottom: 0;
			width: 95%;
			z-index: -1;}

 

 

Making Adjustments

As with all my tutorials, my goal is not to teach you how to use Divi Settings as much as it is to teach you how to customize your website learning a little CSS along the way. So with that being said, here are a few CSS tips to help you learn a little more about CSS.

To adjust the title’s font weight, size, color, letter-spacing and more, you can do so here:

 

The Blurb Title has a little padding and a background color to hide the divider directly behind it. If your blurb or page background is a different color, you will want to change this to match your background color. If you are using centered text, you will want to add “padding-left” to match the padding right. You can do so here:

 

And lastly, if you want to change the color, thickness, or width of the horizontal line, you can do so here.

 

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well, that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest