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 */
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;
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.
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.
[mailpoet_form id="1"]