Divi Divider with Graphic Accents

April 30, 2016

Inspiration came from the Divi Theme Users group on Facebook. Note: this is a closed group dedicated specifically to Elegant Theme’s Divi theme. The question posted by Hitch Bo:

“What is the best way to achieve that? A small logo/icon/image inside a Divider line using Divi?”

Use an Image

Upload your image, then add it to the image module.

Divi Image Module Settings (Using default setting. Modifications are noted below)

Remove Space Below The Image: Yes
Image Alignment: Center

CSS (Main Element)

position: relative;
top: 40px; /* positions the icon over the line */
z-index: 2; /* positions the icon on top of the line */

Crest Icon

Use a Blurb Module

By using a Blurb Module, an icon can be used. In this example the blurb module settings are:

Use Icon: Yes
(Select Icon)
Icon Color: Select contrasting color
Circle Icon: Yes
Circle Color: #ffffff /* same as content background color */
Show Circle Border: Yes
Circle Border Color: #ffffff /* same as content background color */
Image/Icon Placement: Top

Custom CSS on the main element – adjust “top” value to fit your situation/needs:

position: relative;
top: 75px;
z-index: 2;

l

Use Font Awesome

Get your icons here »

In a Text Module or Code Module, add your Font Awesome code. I am using:

Custom CSS for the icon in this example as follows:

position: relative;
top: 50px; /* Adjust to center icon over the line */
background: #fff; /* covers the divider line */
width: 70px; /* extends the background wider than the icon */
z-index: 2; /* puts the icon on top of the line */

Divider in this example has added css to decrease the width, center it and change the color.

CSS

display: block !important;
width: 80%;
margin: 0 auto; /* centers the divider */

Note: Font Awesome must be referenced. Add the following code to your child theme style.css:

Use Text Titles

In a Text Module, edit two areas – Advanced Settings and Custom CSS.

Advanced Settings – In this example the font, text size and color were selected and set. I am using Bevan font, bolded and sized at 18px. Be creative :)> Depending upon what font and how large one selects, custom css will have to be added to control the display.

Custom CSS – In this example as follows:

position: relative;
top: 40px; /* Adjust to center text over the line */
background: #fff; /* covers the divider line */
width: 165px; /* extends the background wider than the text */
z-index: 2; /* puts the text on top of the line */

Divider Module – In this example, the divider has added css to decrease the width, center it and change the color.

CSS

display: block !important;
width: 80%;
margin: 0 auto; /* centers the divider */

Testimonials

Get Divi Now

Get the Divi theme for WordPress - the smartest, most flexible theme in the collection. With Divi, the sky’s the limit.

Tip Jar

Send a Gratuity

Your generosity is greatly appreciated 🙂


Credit Cards


Loading...

Give a Shout Out

11 + 2 =

mailbox email subscribe

Subscribe for Divi Freebies

Plugin update notifications :: stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused and I seriously doubt you'll see anything more than plugin/code update notifications when they are of the utmost importance.

Pin It on Pinterest

Signup For Access To Free WordPress Tips & Resources

Signup For Access To Free WordPress Tips & Resources

Signup for our very occasional newsletter and get access to free downloads, as well as WordPress tips, tricks and resources.

You have Successfully Subscribed!