On many of my projects and child themes I like to use these fancy lines to accent my header text

001

002

003

You can see them in action on my demo here: http://montereydev.com/demos/topheadmenu/

009

Lets Get Started

1. Start with a blank text module and insert a horizontal line using the default editor.

004

 

2. Now open the Text tab and add this class to the html between hr and /: class=”line-blue-left”

005

 

3. Now save and update page.

 

 

The Magic of CSS

Now lets start to dazzle things up a bit with some 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>ePanel>Custom CSS (which is located at the bottom of the ePanel)


/*------------------------------------------------*/
/*-------------[GQ - FANCY LINE 1]----------------*/
/*------------------------------------------------*/

	hr.line-blue-left {
	    border: 0;
	    height: 5px;
	    background-color: #41a9c6;
	    width: 66px;
	    margin-left: 0px;}		

 

This bit of code makes the standard line on the left look like the line on the right.
 
006  007

 

To make the line thicker you can increase the height.

To make the line wider you can increase the width

To align to the left just change margin-left:0 to margin-right:0

To make the line centered remove the margin all together.

You can also add padding if you want to give it a little breathing room.

And here is a cheat sheet you can use for various fancy lines. You can actually just copy and paste the html into text modules and copy and paste the appropriate css into your stylesheet.

 

These are various html lines you could add to your text module in the text editor.

<hr class="line-orange-center">
<hr class="line-green-right">
<hr class="line-blue-left">

And here is the corresponding html for each one.


/*------------------------------------------------*/
/*--------------[GQ - FANCY LINES]----------------*/
/*------------------------------------------------*/

	hr.line-blue-left {
	    border: 0;
	    height: 5px;
	    background-color: #41a9c6;
	    width: 66px;
	    margin-left: 0px;}


	hr.line-orange-center {
    		border: 0;
    		height: 3px;
    		background-color: #f57e3a;
    		width: 166px;}
    

	hr.line-green-right {
    		border: 0;
    		height: 5px;
    		background-color: #2cba6c;
    		width: 66px;
    		margin-right: 0px;}


 

009

 

And with a few minor adjustments you can have long lines,fat lines, short lines and more.

 

Here is a Divi Quick Tip. Save each one as a Global Module and add lines anywhere throughout your build in seconds.

 

010

 

And that’s it! Have fun!


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


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!