I came across this tip while visiting another site and thought i’d share it here. Basically it uses two Divi modules to create the look you see below. By combining the Blurb module and Divider module in the right stacking order and minimal CSS you can easily create this horizontal line background effect.

We’re concentrating on the Divi module method for this but there are other methods involving icon images and also Font Awesome icons as well.

STEPS:

1. Create a new page (or post) and select the Divi builder
2. Insert a standard section with a single column row
3. Insert the blurb module and do the following:
   • Use Icon: Yes
   • Select the Icon you wish to use
   • Icon Color: Select a contrasting color
   • Circle Icon: Yes
   • Circle Color: #ffffff; /* this needs to be same color as page background
   • Show Circle Border: Yes
   • Circle Border Color: #ffffff; /* this needs to be the same color as circle
   • Icon Placement: Top
   • Animiation: No Animation /* so there’s no delay in the icon displaying
4. Add a new Divider module below the Blurb module in the same row
5. Set the Divider to ‘Show Divider’
6. Set the Divider color to whatever color you wish as long as it’s dark enough to see against the page background.

CUSTOM CSS:

This needs to be applied to the ‘Main Element’ in the Custom CSS tab of the Blurb module.


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

You may have to adjust the top: 85px to fit your needs so the icon is centered over the divider. This look can also be done in 1/4, 1/3 and 1/2 columns as well.