Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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: https://previewmysitelive.com/temp-tutorial-demos-for-multisite/

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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest