Divi Snippets: 52 Essential Divi CSS

Snippets For Any Website

By: Michael Brady

Introduction

I beg an sharing my knowledg e with the Divi community f or f un. The Divi community is one
of the f astest g rowing WordPress communities aroundand f or g ood reason. The f olks at
Elegant Themes continue to push out new versions of Divi that keep it at the f oref ront of
WordPress themes. At this point, Divi can truly be used to build just about any site you can
imag ine.

I have built interactive sites, membership sites, ecommerce stores, personal sites, blog s,
and of course business sites with Divi.

I will be happy if you f ind even one of these snippets usef ulbut I think you will f ind many. If
you have any questions while using any of these snippets please reach out to me
(mike@divig uide.com).

To stay up to date with new snippets, g uides, and Divi resources make sure to join the Divi
Guide email list.

Divi Snippets: 52 Essential Divi CSS Snippets For Any Website

Introduction

Custom CSS
Customizing The Bottom Bar
The Shortcut
Changing the Text Links
Altering the Appearance of the Text
Adding Social Icons
Add Hover Ef f ects

Customizing The Social Media Module

Centering The Social Media Module Icons
Enlarging the Social Media Icons
Add Spacing Between Icons
Change The Color Of The Icons
Altering the Shape Behind the Icons
Remove The Icon Background Altog ether
Alter the Icon Hover Ef f ect
Final Pieces of Advice

The Perf ect Divi Blog Post

Implementing The Perf ect Post
Using Dropcaps

Customizing The Countdown Timer Module

Hiding The Timer Labels
Adjusting the Separators
The Timer Values
Styling Individual Timer Values
 Customized Timer Examples
Inset Timer Values
Stitched Timer Backg round
Final Tips

Customizing Bloom Optin Forms

The Optin Title And Messag e
The Optin Fields
The Footer Text

Common Divi Snippets

Remove The Line Below The Menu
Change The Text In The Secondary Header Menu
Make The Log o Link To Somewhere Besides The Homepage
Add Font Awesome To Divi
Make Links In Header Tags (h1) Visible
Adjusting The indentation Of Bullet Lists
Removing Fields From The Subscribe Module
Styling The Contact Form 7 Plugin Fields To Match Divis Style
Remove The Vertical Line From Divis Sidebar

Custom Section Dividers

Add A Down Arrow In Between Sections
The Rounded Split Separator
The Double Diag onal Separator
The Double Curved Corners Separator
The Slit With Shadow Separator
Rounded Corners
The Inverted Corners Separator
The Simple Diagonal Separator
The Full-Width Down Arrow Separator
Down Arrow With Shadow Separator
The Stamp Separator
The Clouds Separator
The Upwards Arrow
The Multi Arrow (Upwards)
The Multi Arrow (Downwards)
The Folded Corner
Three Dots
Two Lines Divider
The Cross Divider
The Castle Divider
The Zig Zag
The Half Circle
 The Top Curve
The Bottom Curve
Alternating Squares
3D Triang le Spikes

Conclusion

Custom CSS

There are two options f or adding custom css to a website using the Divi theme.
[Recommended] Option 1: Create A Child Theme

Creating a child theme is the best way to add custom CSS to your website. Please watch
this 4 5 second video that shows you how simple the process is:

Option 2: Use The Built-In Custom CSS Box

If you would pref er not to create a child theme. Then you can simply add CSS code to the
Custom CSS box f ound in the Divi Theme Options tab. Ref er to the picture below:

Customizing The Bottom Bar

Divis bottom bar is f rustrating .

Its the only piece of Divi that shows up on every page but is not easily customizable. Worst
of all (and best of all f or Elegant Themes), the bottom bar contains links to Eleg ant Themes
and WordPress. At best leaving these links on a website is g enerous at worst its lazy and
destroys a sites credibility.

In this section Im g oing to show you how to f ully customize the bottom bar. You will learn
how to make the bar disappear, change the social icons, alter the text, and how to add
hover ef f ects.

The Shortcut

Of course, the easiest way to deal with the bottom bar is to just make it disappear. If thats
all you want to do then just paste this snippet into the Epanel Custom CSS box or your Child
Themes stylesheet:

#footer-bottom {
display:none;
 }

Technically, you can stop reading now if thats all you wanted to dobut I think you may be
inspired to keep the bottom barif you keep reading.

Changing the Text Links

Altering the text of the bottom bar requires us to deal with code. UGH!

Step 1. Open the f ooter.php f ile which can be f ound in Appearance>Editor>Footer.php.

Step 2. Find this line:

<p id="footer-info"><?php printf( __( 'Designed by % 1$s | Powered

by % 2$s', 'Divi' ), '<a href="http://www.elegantthemes.com"
title="Premium WordPress Themes">Elegant Themes</a>', '<a
href="http://www.wordpress.org">WordPress</a>' ); ?></p>

This is the line that we want to change to ref lect our sites needs.

Step 3. In order to do so replace the line we just f ound with the f ollowing snippet:

<p id="footer-info">Created By: <a href="http://www.m-

brady.com">Michael Brady</a> | <a href="#">Copyright 2015</a> | <a
href="#">Privacy Policy</a></p>

I have replaced the PHP with basic html links. To customize the above snippet swap in your
own URL and link text.

Step 4. Save the f ooter.php f ile and ref resh your website.

Altering the Appearance of the Text

In previous versions of Divi changing the appearance of the text required CSS. In 2.4 , we
simply have to open the Divi Customizer. To open the bottom bar options panel, starting at
the WordPress Dashboard navigate to: Divi>Theme Customizer>Footer>Bottom Bar.
With these options we can chang e the color, size, and style of the text.

I made the f ollowing chang es:

Backg round-color: #dd9933

Text Color: #000
Font Size: 16
Social Icon Size: 24
Social Icon Color: #000

Adding Social Icons

By def ault, Divi allows us to use f our social icons: Facebook, Twitter, Goog le+, and RSS. Of
course, f or many sites it would be better to have a dif f erent set of social icons.

I am g oing to show you how to add an Instagram and YouTube icononce you are able to
add one icon you can easily add dif f erent ones in the f uture.

The f irst step to add an icon, is to open Divis Social-Icons.php f ile. I recommend you copy
this f ile to your child theme bef ore you beg in editing it.

The Social-Icons f ile is just a f ancy unordered list. Meaning that we just need to add our
icons to the list.

To add the instag ram icon paste the f ollowing block of code somewhere right af ter the
f irst UL tag :

<li class="et-social-icon et-social-instagram">

<a target="_blank" href="https://www.instagram.com/">
<span><!--?php esc_html_e( 'instagram', 'Divi' ); ?--></span>
</a>
</li>

I want the youtube icon to be placed between Twitter and Google+. Theref ore, I am g oing
to paste the f ollowing code just af ter the Twitter code block and right bef ore the Google+
Code block.

<li class="et-social-icon et-social-youtube">

<a target="_blank" href="https://www.youtube.com/">
<span><!--?php esc_html_e( 'youtube', 'Divi' ); ?--></span>
</a>
 </li>

Now when we ref resh our website, the bottom bar will ref lect our chang es.

If you would like to add dif f erent social icons to your bottom bar, you can utilize Divis built
in social icon set. Simply substitute the class name of each icon into the code blocks we
pasted above.

Here is a f ull list of the social icons Divi supports:

.et-social-facebook a:before { content: '\e093'; }

.et-social-twitter a:before { content: '\e094'; }
.et-social-google-plus a:before { content: '\e096'; }
.et-social-pinterest a:before { content: '\e095'; }
.et-social-linkedin a:before { content: '\e09d'; }
.et-social-tumblr a:before { content: '\e097'; }
.et-social-instagram a:before { content: '\e09a'; }
.et-social-skype a:before { content: '\e0a2'; }
.et-social-flikr a:before { content: '\e0a6'; }
.et-social-myspace a:before { content: '\e0a1'; }
.et-social-dribbble a:before { content: '\e09b'; }
.et-social-youtube a:before { content: '\e0a3'; }
.et-social-vimeo a:before { content: '\e09c'; }
.et-social-rss a:before { content: '\e09e'; }

Add Hover Effects

We could stop here, but if we want a truly prof essional website we should include hover
ef f ects when a users cursor is above one of our links.

To add hover ef f ects to the text on the lef t side of the bottom bar add the f ollowing CSS
to your stylesheet:

#footer-info a:hover {
color: blue;
text-decoration:underline;
}

With the social icons we have two options.

Option 1: Give all the icons the same hover ef f ect.

To do this paste the f ollowing code into your stylesheet:

#footer-bottom .et-social-icons a:hover {

color:#fff;
}

Option 2: Style each icon separately to give icon specif ic hover ef f ects.

To style each icon separately we need to add the f ollowing CSS to our stylesheet. You will
need to chang e this code if you added dif f erent icons than me.

#footer-bottom .et-social-icons .et-social-instagram a:hover {

color:#517fa4 !important;
}

#footer-bottom .et-social-icons .et-social-facebook a:hover {

color:#3b5998 !important;

#footer-bottom .et-social-icons .et-social-twitter a:hover {

color:#00aced !important;
}

#footer-bottom .et-social-icons .et-social-youtube a:hover {

color:#bb0000 !important;

#footer-bottom .et-social-icons .et-social-google-plus a:hover {

color:#dd4b39 !important;
}

#footer-bottom .et-social-icons .et-social-rss a:hover {

color:#ff6600 !important;
}

The icons will now chang e color when a user moves their cursor over them.

Customizing The Social Media

Module

Whats the f astest g rowing source of traf f ic on the internet?

Social.

Whats the number one way to g row a blog quickly?

Social.

In this g uide Im going to deep dive into the social media module that is available to us in the
Divi Builder.

Bef ore we dive in, I want to say that the standard social media module is one of the least
customizable and most unappealing modules.

Lets chang e that.

Bef ore we beg in, lets quickly review what the standard social media module looks like:

The image above displays the f our ways the social media module can be conf ig ured. You
will notice that there is no option to change the alig nment of the module. Also there is not
an option to chang e the size of the icons, alter the hover ef f ects, hide the backg rounds,
and much more.

The f irst step when we beg in customizing a module is always to assig n the module a
custom class. Throughout, this guide, I will be using the class: .dg-social

You can use any class you like, simply swap in your class f or mine in the snippets.

Centering The Social Media Module Icons

One of the most common modif ications I make to the social icons is to center them
horizontally within their row. To accomplish this, add the f ollowing CSS to your site:

ul.dg-social {
width:100% ;
text-align:center;
margin: 0 0 0 0 ;
}
.dg-social li {
float:none;
display:inline-block;
}

Enlarging the Social Media Icons

Its g reat to be able to f inally control the alignment of the social icons but if we cannot
chang e the size of the icons, its really not that helpf ul.

The def ault icons are amazing ly tiny and dont make you want to click on them. To
sig nif icantly enlarge the icons, add this snippet to your site:

.dg-social li a.icon {
height: 60px;
width: 60px;
padding: 0;
}

.dg-social li a.icon::before {
font-size:36px;
margin-left:12px;
line-height:60px;
}

When you ref resh your page, the icons will now appear signif icantly larger:

If you want to f urther adjust the size of the icons, there are a number of attributes you
must adjust proportionately. Meaning you must decrease or increase the values in relation
to each other. These attributes are: height, width, line-height and f ont-size. Heig ht, width
and line-heig ht should all be equal to each other whereas f ont-size should be roug hly half as
much.

Add Spacing Between Icons

As you enlarg e the icons, you may f ind that you want to adjust the spacing . I f ind this
especially necessary when using the rectangle shape instead of the circle.

Add this CSS to your site:

.dg-social li a {
margin-right: 24px;
}

Change The Color Of The Icons

The standard Divi options allow us to change the color of the backg round shape f or each
network. However, at times, it is necessary to chang e the color of the actual icon. For
example, a recent f ooter layout that I published in the Divi layout club f eatured a g reen
backg round that I wanted the icons to mirror.

To achieve this look, I added the f ollowing CSS:

.dg-social li a.icon::before {
color:#353535;
}

Altering the Shape Behind the Icons

Both of the styles in the standard social media f ollow module have sof t corners. Meaning
that if your desig n f eatures sharp corners then the social media module will look odd. To
remove the sof t corners f rom the Rounded Rectangle, add this snippet to your site:

.dg-social li a.icon.rounded_rectangle {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}

Remove The Icon Background Altogether

Sometimes, I just want the icons and not the backg round. To achieve this, I use a simple
trick; I just adjust the backg round color of each icon to match the background of my page.
For example, in the image below, I adjusted each icon to match the backgrounds color of
#1e73be.

Alter the Icon Hover Effect

As you dig f urther into customizing the social media icons, you will eventually f ind that you
want to change the def ault hover ef f ect.

To do so, we simply need to add the f ollowing snippet:

.dg-social li a.icon:hover::before {
color: orange;
}

Final Pieces of Advice

Hopef ully, your head is now swimming with possible designs f or the social media module.
By combining these customizations with the social media f ollow module, you can create
some truly stunning desig ns.
The Perfect Divi Blog Post

By def ault Divis blog posts are T ERRIBLE.

This is what the f irst post f rom my authority site article looked like:

I think we can all ag ree that layout is underwhelming.

But, what constitutes the perf ect post?

If you search the internet (like I did) you will f ind a lot of conf licting styles. Some sites have
minimalist posts, some have inline advertisements, some have images every other
sentence, and some have 10,000 words with no images.

The inf ormation I ended up using comes f orm a variety of what I consider to be industry
experts. Af ter reading a bunch of these articles:

Font Size: 16-22px

Line Heig ht: 154 0-170%
Font Color: #000;
Line Width: ~70 Characters
Start With A Dropcap
Start With A Rig ht Aligned Image
One Image Every 350 Words

Heres a nif ty graphic I created that illustrates these concepts f or the visually inclined:
Implementing The Perfect Post

Of course, its easy to make a g raphic. What we need to do now is g et Divi to cooperate
with our vision.

Almost all of our required chang es can be done in the Divi Customizer.

1. Under the Divi Customizer choose General Settings>Layout Settings and check
Use Custom Sidebar Width. Increase the width to 30. This adjustment will reduce
our line leng th to approximately 70 characters.
2. Under General Settings>Typog raphy make the f ollowing adjustments:
Set Body Line Height to 2
Switch Text Size to 20
Increase Header Text Size to 38
Adjust the Header line height until it is 1.3
Under Header Font Style togg le Bold on
Adjust Body Text color to #000

Finally, you should adjust the meta f ont size to be 18. This option is f ound under the blog
panel in the Divi Customizer.

Using Dropcaps

Dropcaps are a breeze to implement with the Divi Theme. Just add the shortcode around
the letter you wish to style. For example to achieve the dropcap in this paragraph I used the
f ollowing shortcode:
 [dropcap style="font-size: 60px;"]D[/dropcap]ropcaps

Customizing The Countdown Timer

Module

The f irst step when beginning to customize the countdown timer is to add a custom class.
Throug hout this article I will be using the class: dg-timer

Hiding The Timer Labels

Frequently, I f ind the labels that appear below the timer values (the numbers) to be
unnecessary. In addition, its challenging to make the labels display nicely on mobile.
Theref ore I of ten use the f ollowing snippets to hide the labels:

.dg-timer .section p.label { display:none; }

If you wish to just hide the labels on mobile than use this
snippet:
@media only screen and ( max-width: 767px ) {
.dg-timer .section p.label { display:none; }
}

Adjusting the Separators

Its possible to adjust the number separators (the :) in a number of ways. Of course we
can hide them with this Divi snippet:

.dg-timer .sep { display:none; }

We can also adjust the vertical alig nment of the separators. This is necessary, if we increase
the size of the numbers, remove the labels, or make other modif ications. To raise the
separators use this CSS:

.dg-timer .sep { top: -38px; }

You can increase or decrease this value to adjust the vertical alignment. The def ault value is
-28px.

The Timer Values

Customizing the actual timer values is when the real f un beg ins.

First, lets apply styling to all the values at once. A desig n chang e I of ten make is to add a
backg round behind each value. I use this snippet:

.dg-timer .section.values { background-color: #000; }

I f ind the backg round looks best if you give it a semi-transparent background. When you
add a backg round to the values you may f ind that you need to adjust the spacing between
each value. Simply increase the width value in this snippet:

.dg-timer .section.values { width: 10% ; }

Styling Individual Timer Values

Of course, you may want to apply styles only to one values such as just days. To do this use
the f ollowing snippet.

.dg-timer .section.days { }

To targ et the other values simply swap .section.days f or any of the f ollowing:

.section.hours
.section.minutes
 .section.seconds

By targ eting the values individually you have more control over the countdown timer
module. Of course, you can hide any of the values using :

.dg-timer .section.days { }

But you also have an opportunity to add or remove emphasis f rom certain values. For
example, you may want to f ocus visitors attention on just the hour and minute values. To
do this consider make days and seconds semi-transparent.

.dg-timer .section.days, .dg-timer .section.seconds { opacity:.4;

}

That leads us to the next snippet which is involves styling numbers when their value reaches
zero. By def ault, Divi will make the numbers semi-transparent.

That may not be what you want though. For example, if you want visitors to have a sense
of urg ency wouldnt you pref er them to notice that time is running out?

To control what happens when values reach zero make use of this CSS:

.et_pb_countdown_timer .section.zero { }

To make the value not become transparent use:

.et_pb_countdown_timer .section.zero { opacity:1; }

To make the value disappear use:

.et_pb_countdown_timer .section.zero { display:none; }

Customized Timer Examples

Now that we have all these snippets, it would be nice to have a f ew examples. The f ollowing
examples are customizations I came up with, Im sure you can imagine many more possible
looks.
For the f ollowing examples, f eel f ree to copy and paste the CSS, just be sure to set the
custom class value to .dg-timer.

Inset Timer Values

This looks was achieved with the f ollowing CSS:

.dg-timer .sep {
display:none;
}
.dg-timer .section p.label {
display:none;
}
.dg-timer .section.days, .dg-timer .section.hours, .dg-timer
.section.minutes, .dg-timer .section.seconds {
color: rgba(10,60,150, 0.8) !important;
text-shadow: 1px 4px 6px #eded8e, 0 0 0 #000, 1px 4px 6px
#eded8e !important;
}

In order to create this style the two color values f or text-shadow that are currently set to
#eded8e must be adjusted to match your backg rounds color. Further, be caref ul to either
set the color value with custom css (like in the above example) or in the countdown
timers advanced setting s panel. Your backg round color must be slig htly transparent.

Stitched Timer Background

This snippet inspired by CSS-Tricks, adds a nice stitched border to each value.

The stitched look is created with this CSS:

.dg-timer .section {
display: inline-block;
padding:15px 0px;
width:10% ;
background: steelblue;
color: #fff;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px steelblue, 2px 1px 6px 4px rgba(10, 10, 0,
0.5);
text-shadow: -1px -1px #aa3030;
margin-right:1% ;
}

.dg-timer .sep {
display:none;
}
.dg-timer .section p.label {
display:none;
}

Be sure to maintain the same order when you paste this code! To adjust the color replace
steeleblue with your desired hex value.

To create this look add this code:

.dg-timer .section.days p.value, .dg-timer .section.hours p.value,

.dg-timer .section.minutes p.value, .dg-timer .section.seconds
p.value, .dg-timer .section.zero p
{
background-color: #313131; border-radius:10px;
padding:10px;
 }
.dg-timer .section.days {
width:13% ;
}
.dg-timer .sep {
display:none;
position:relative;
}

Final Tips

Those are the snippets that I have developed f or the countdown timer module. Hopef ully,
you have lots of ideas and inspiration f or your projects.

Customizing Bloom Optin Forms

Bloom is a very powerf ul email optin plug in. If customized in the rig ht way, you can actually
replicate f unctionality that normally costs $600+ dollars a year (Im talking about
LeadPag es rig ht now).
Althoug h Bloom comes with many pre-built templates, customizing those templates can
be a little tricky. In this article, I will show you how to customize your optin to stand out
f rom the crowd of Bloom users. Most interenet marketers regard LeadPages popup box to
be one of the hig hest converting popups available. Theref ore, in this tutorial I am g oing to
strive to replicate that desig n (see below).
To g et started, Ive created a pop up optin with the f ollowing style:
Af ter customizing the basic values on the design settings tab I have the f ollowing popup:

Now, Im g oing to begin adding custom css to this plugin. To do so, on the display
setting s tab scroll down to the box at the bottom.

The Optin Title And Message

The f irst thing Im g oing to do is customize the Optin Title with the f ollowing CSS snippet:

.et_bloom .et_bloom_form_header h2 {
font-size: 42px !important;
}

Now f or the optin messag e:

.et_bloom .et_bloom_form_header p {
font-size: 28px;
color: #444444;
}
The Optin Fields

The real customization beg ins with the email address f ield and submit button. In order to
optimize the popup, I want to make both f ields much larg er. Im going to use the f ollowing
snippet to do so:

.et_bloom .et_bloom_popup_input.et_bloom_subscribe_email input {

font-size: 30px;
color: 444444;
width: 154.5% ;
}

.et_bloom button.et_bloom_submit_subscription {
width: 100% ;
font-size:30px;
margin-top: 20px;
}

The Footer Text

Finally, I also want to customize the f ooter text that appears below the submit button:

.et_bloom .et_bloom_form_footer p {
font-size: 16px !important;
font-family: Lato;
text-align: center;
color: #F8F8F8 !important;
}

That is it! In terms of custom CSS, my optin now looks like this:
Of course, I have extensively chang ed a number of this popups design setting s. If youd
like to replicate this opt-in precisely, you can download it.

Its pretty easy to import opt-ins into Bloom, simply unzip the zip f ile and then navigate to
the Import/Export tab inside of Bloom. Just be sure to import the .json f ile.

Common Divi Snippets

Remove The Line Below The Menu

 #main-header {
box-shadow: 0 0px 0;
-moz-box-shadow: 0 0px 0;
-webkit-box-shadow: 0 0px 0;
}

Change The Text In The Secondary Header

Menu

For a lot of my sites, I want to utilize the secondary navigation bar but I need something
more than just the email and phone options.

The example, Im about to present utilizes, Font Awesome to incorporate icons into a
custom nav bar.
To customize the secondary nav bar I f ound the f ollowing code in the header.php f ile (which
I added to my child theme):

<!--?php if ( '' !== ( $et_phone_number = et_get_option(

'phone_number' ) ) ) : ?-->
<span id="et-info-phone"><!--?php echo esc_html( $et_phone_number
); ?--></span>
<!--?php endif; ?-->

<!--?php if ( '' !== ( $et_email = et_get_option( 'header_email' )

) ) : ?-->
<a href="<?php echo esc_attr( 'mailto:' . $et_email ); ?>"><span
id="et-info-email"><!--?php echo esc_html( $et_email ); ?-->
</span></a>
<!--?php endif; ?-->

And replaced it with the f ollowing HTML:

<span style="font-size:14px"><i class="fa fa-phone"></i> <a

href="tel:774-262-8597">774-262-8597</a>
<i class="fa fa-clock-o"></i> Sun -
Thurs 10-10 Fri- Sat 10-12</span>

This snippet allows you to insert any content you want into the secondary navig ation bar.
Make The Logo Link To Somewhere Besides
The Homepage

Sometimes you dont want the log o to link back to your homepage. If thats the case then
one way to accomplish this is to identif y the f ollowing line in your header.php f ile:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">

<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo

esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
</a>

And replace the top line with a simple html link:

<a href="http://www.yoursite.com/blog">

<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo

esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />

Add Font Awesome To Divi

Are you using an icon f ont?

Icon f onts allow you to easily integrate icons throughout your websites. One of the most
popular icon f onts is FontAwesome. FontAwesome is totally f ree and contains over 4 00
icons you can choose f rom.

Elegant Themes also of f ers an icon f ont known as Elegant Icon but f rankly its hard to
install, has f ewer icons, and has less support.

Font Awesome is incredibly simple to install and use.

To install add this to the header.php which can be accessed under Appearance>Editor:

<link href=//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css rel=stylesheet>
Cong ratulations you have now installed Font Awesome! To beg in using Font Awesome all
you need to do is include the f ollowing line of code wherever you wish an icon to appear:

<i class=fa fa-calendar></i>

You can insert icons anywhere you can type text. Meaning that icons can be inserted into
menus, posts, pages, and widg ets.

Font Awesome comes other f eatures which you can learn about on their website.

If you need to chang e the def ault styling of the icons you can use the f ollowing selector:

i.fa.fa-calendar {
font-size: 40px;
dsiplay: inline-block;
color: #fff;
}

Make Links In Header Tags (h1) Visible

You want links to be obviously visible to your visitors, by def ault header tag s (h1, h2, h3, h4 ,
etc.) do chang e their appearance if they are clickable. Ideally, a header tag that is also a link
should be a dif f erent color and when a user hovers over it should become underlined.

In order to implement these chang es add the f ollowing code to your child theme:

h1 a, h2 a, h3 a, h4 a, h5 a {
color: #00bfff;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
text-decoration: underline;
}

Adjusting The indentation Of Bullet Lists

Divis def ault styling f or unordered bullet lists is relatively ugly. The bullets dont have any
indentation and directly touch the lef t side of their container.
To g ive bullets some indentation add this CSS snippet to your site:

#left-area ul, .entry-content ul, .comment-content ul {

margin-left: 30px;
list-style-position: outside;
}

You can increase or decrease the margin-lef t value until you are happy with the indentation.

Removing Fields From The Subscribe

Module

Many experts have f ound that the highest converting optins ask only f or a visitors email
address.
By def ault Divis call to action module includes a name f ield. To remove the name f ield
simply add the f ollowing code to your stylesheet:

.et_pb_newsletter_form p:nth-child(2) {
display: none !important;
}

If a last name f ield is appearing as well increment the number inside the parentheses by 1.
So that your stylesheet contains the f ollowing code:

.et_pb_newsletter_form p:nth-child(2) {
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

Styling The Contact Form 7 Plugin Fields To

Match Divis Style
The Divi builder comes with a built in contact f orm but the f orm is extremely limited. Its not
easily possible to add new f ields to the f orm.

For this reason I use the Contact Form 7 plug in on almost all of my clients sites. The only
problem is that by def ault Contact Form 7s CSS styling is extremely ugly. Especially
compared to the beautif ul f orm f ields that the Divi contact f orm provides.

Fortunately, the f olks over at Ag entWP created CSS styling that allows us to combine Divis
beauty with Contact Form 7s f unctionality.

The f ull code is available below:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {

background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #f0853b!important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
 .wpcf7-submit:hover {
background-color: yellow;
border-color:yellow;
padding: 6px 20px !important;
}

This code comes f rom Ag entWP and all credit g oes to him.

If you observe this code closely you can easily see how to customize contact f orm 7 with
your own styling . The selectors to style contact f orm 7 with are as f ollows:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar { }

.wpcf7-submit { }
.wpcf7-submit:hover { }

Remove The Vertical Line From Divis

Sidebar

By def ault Divi has a vertical line dividing the sidebar f rom the main content of a pag e or
post. Of ten, this line does not f it with a websites desig n or gets in the way. To remove this
line simply add the f ollowing CSS code to your child theme:

.et_pb_widget_area_left, .et_pb_widget_area_right {
border-color: transparent;
}

Semi-Transparent backg rounds are a popular method to give a website depth. I use semi-
transparent backg rounds in the titles of my guides:

To achieve these backg rounds I use rg ba color codes. RGB is an alternative to hex whereby
you set colors in the f ollowing f ormat:

rgb(255,255,255) /*Each value represents the amount of red,

green, and blue that will be used to
create the color*/

To add transparency I use rg ba in the f ollowing f ormat:

 rgba(255,255,255,0.5) /*The final value determines how
transparent the color will be.
0 is completely transparent,
1 is a solid color*/

We can implement RGBA colors whenever Divi allows us to set a color. Simply type your rg ba
code into Divis color selector.

Custom Section Dividers

Add A Down Arrow In Between Sections

A g reat way to create continuity between the Divi Builders sections is to create dividers. In
addition, to continuity arrows can also help g uide a visitors eyes down Divis pag es.
To implement a large section arrow add this code to the Af ter area in the custom css
container area of the section options in the Divi Page Builder:

#footer-bottom {
display: block;
position: absolute;
content: '';
width: 100px;
height: 100px;
bottom: -50px;
left: 50% ;
margin-left: -50px;
background-color: #dddddd;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;
}

This code is derived f rom a blog post by Elegant Themes. To modif y the color attribute
chang e the Backg round-color value.

In order to chang e the size of the arrow you need to adjust the width, heig ht, bottom, and
marg in-lef t values proportionately. Meaning if you wish to shrink the size of the arrow by
50% chang e the values to this:

width: 50px;
height: 50px;
bottom: -25px;
left: 50% ;
margin-left: -25px;

You may have to add some padding to the top of your elements in the section below your
arrow.

The Rounded Split Separator

This divider is relatively simple to implement and f ollows a similar pattern to a lot of the
dividers we have discussed.

First paste the f ollowing into the bef ore panel of the section you wish the divider to appear
at the top of :

display:block;
position:absolute;
content:'';
padding-top: 7em;
border-radius: 0 0 80px 80px;
top: -70px;
left: 0;
z-index: 10;
width: 50% ;
height: 0px;
background: inherit;
border-radius: 0 80px 0 0;

Now paste the f ollowing into the af ter panel:

display:block;
position:absolute;
content:'';
padding-top: 7em;
border-radius: 0 0 80px 80px;
 top: -70px;
left: 0;
z-index: 10;
width: 50% ;
height: 0px;
background: inherit;
left: 50% ;
border-radius: 80px 0 0 0;

The Double Diagonal Separator

This is one of my f avorite separators. The double diagonal is subtle but still noticeable
creating a truly prof essional f eel. To add this to a Divi section f ollow these instructions:

Add this to the bef ore section of the custom css window:

display: block;
position: absolute;
content: '';
top: 0;
left: -25% ;
z-index: -1;
width: 150% ;
height: 75% ;
background: inherit;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
height: 50% ;
background: #116094;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;

Add this code to the main element panel:

z-index: 1;
padding-top: 6em;
Finally paste this CSS in the af ter panel:

display: block;
position: absolute;
content: '';
top: 0;
left: -25% ;
z-index: -1;
width: 150% ;
height: 75% ;
background: inherit;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

The Double Curved Corners Separator

Add this to the Bef ore:

display: block;
position: absolute;
content: '';
width: 200px;
height: 200px;
border-radius: 50% ;
background: #2072a7;
top: -100px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: -100px;

Add this to the main element:

padding-bottom: 16em;
Add this to the After:
display: block;
position: absolute;
content: '';
width: 200px;
 height: 200px;
border-radius: 50% ;
background: #2072a7;
top: -100px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -100px;

The Slit With Shadow Separator

Add This to the Bef ore:

display:block;
position:absolute;
content:'';
width: 50.5% ;
width: -webkit-calc(50% + 10px);
width: -moz-calc(50% + 10px);
width: calc(50% + 10px);
height: 160px;
background: #1e73be;
top: -160px;
left: -20px;
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
box-shadow: -10px -20px #3192d3;

This to the Main Element:

padding-top: 5em;
border-radius: 0 0 80px 80px;

And This to The Af ter element:

display:block;
position:absolute;
content:'';
width: 50.5% ;
width: -webkit-calc(50% + 10px);
 width: -moz-calc(50% + 10px);
width: calc(50% + 10px);
height: 160px;
background: #1e73be;
top: -160px;
right: -20px;
-webkit-transform: skewX(-10deg);
transform: skewX(-10deg);
box-shadow: 10px -20px #3192d3;

Rounded Corners

To achieve the rounded corners look, add this snippet to the main element panel of the
section above.

The rounded corners will appear at the bottom of whatever section this snippet is added to.

border-radius: 0 0 80px 80px;

The Inverted Corners Separator

You should add the f ollowing CSS to the section you wish the separator to appear below.

Add this code to the bef ore panel:

display:block;
position:absolute;
content:'';
left: 0;
z-index: -1;
height: 90px;
background: #3498db;
top: 100% ;
width: 100% ;
border-radius: 0 90px 0 0;
 Paste this into the main element panel:
margin-bottom: 90px;
border-radius: 0 0 0 90px;

Finally add this to the af ter panel:

display:block;
position:absolute;
content:'';
left: 0;
z-index: -1;
height: 90px;
background: #3498db;
bottom: 0;
z-index: -1;
width: 50% ;

The Simple Diagonal Separator

Bef ore implementing the diagonal divider be aware of the space requirements. As you can
see the way I implemented the divider leaves a signif icant g ap between the divider and the
content in the section.

Add this to the bef ore section:

display: block;
position: absolute;
content: '';
top: 0;
left: -25% ;
z-index: -1;
width: 150% ;
height: 75% ;
background: inherit;
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
Add this to the main element:
z-index: 1;
 padding-top: 6em;

The Full-Width Down Arrow Separator

This separator is actually an inline SVG. In order to use SVGs with Divi we need to take a f ew
extra steps than normal.

First, create a text module below the section you wish to add the separator to.
Then paste the f ollowing into the Text Editor Box. Its important not to switch to the
visual editor af ter you paste into the separator.

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg"

version="1.1" style="position:absolute; padding-bottom:o; margin-
bottom:0;fill: #dd9933; stroke: #dd9933; bottom:0px;" width="100% "
height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>

To alter the color of the separator simply chang e the hex values f or stroke and f ill.
You will also want to adjust the rows settings to be: f ullwidth with a top padding of 0. Also,
switch keep custom padding on mobile on.

Finally, adjust the section to have a top padding of zero, the section above should have a
padding -bottom of zero. Make both sections are set to keep custom padding on mobile.

Down Arrow With Shadow Separator

This separator is actually an inline SVG. To use an inline SVG please ref er to the steps listed
under the Full Width Down Arrow Separator below. Just paste the code below instead of
the code used in that section.

<svg id="bigTriangleShadow" xmlns="http://www.w3.org/2000/svg"

version="1.1" width="100% " height="100" viewBox="0 0 100 100"
preserveAspectRatio="none">
 <path style="position:absolute; padding-bottom:o;
margin-bottom:0;fill: #dd9933; stroke: #dd9933; bottom:0px;" d="M0
0 L50 100 L100 0 Z" />
<path style="position:absolute; padding-bottom:o;
margin-bottom:0;fill: #dd9933; stroke: #dd9933; bottom:0px;"
d="M50 100 L100 40 L100 0 Z" />
</svg>

To alter the color of the separator simply chang e the hex values f or stroke and f ill.

The Stamp Separator

This separator is actually an inline SVG. To use an inline SVG please ref er to the steps listed
under the Full Width Down Arrow Separator below. Just paste the code below instead of
the code used in that section.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100% "

height="30" style="position:absolute; padding-bottom:o; margin-
bottom:0; fill: #dd9933; stroke: #dd9933; bottom:0px;" viewBox="0 0
100 100" preserveAspectRatio="none">
<path d="M0 0 Q 2.5 40 5 0
Q 7.5 40 10 0
Q 12.5 40 15 0
Q 17.5 40 20 0
Q 22.5 40 25 0
Q 27.5 40 30 0
Q 32.5 40 35 0
Q 37.5 40 40 0
Q 42.5 40 45 0
Q 47.5 40 50 0
Q 52.5 40 55 0
Q 57.5 40 60 0
Q 62.5 40 65 0
Q 67.5 40 70 0
Q 72.5 40 75 0
Q 77.5 40 80 0
Q 82.5 40 85 0
Q 87.5 40 90 0
Q 92.5 40 95 0
Q 97.5 40 100 0 Z">
 </path>
</svg>

To alter the color of the separator simply chang e the hex values f or stroke and f ill.

The Clouds Separator

This separator is actually an inline SVG. To use an inline SVG please ref er to the steps listed
under the Full Width Down Arrow Separator below. Just paste the code below instead of
the code used in that section.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100% "

height="100" style="position:absolute; padding-bottom:o; margin-
bottom:0;fill: #fff; stroke: #fff; bottom:0px;" viewBox="0 0 100
100" preserveAspectRatio="none">
<path d="M-5 100 Q 0 20 5 100 Z
M0 100 Q 5 0 10 100
M5 100 Q 10 30 15 100
M10 100 Q 15 10 20 100
M15 100 Q 20 30 25 100
M20 100 Q 25 -10 30 100
M25 100 Q 30 10 35 100
M30 100 Q 35 30 40 100
M35 100 Q 40 10 45 100
M40 100 Q 45 50 50 100
M45 100 Q 50 20 55 100
M50 100 Q 55 40 60 100
M55 100 Q 60 60 65 100
M60 100 Q 65 50 70 100
M65 100 Q 70 20 75 100
M70 100 Q 75 45 80 100
M75 100 Q 80 30 85 100
M80 100 Q 85 20 90 100
M85 100 Q 90 50 95 100
M90 100 Q 95 25 100 100
M95 100 Q 100 15 105 100 Z">
</path>
</svg>

To alter the color of the separator simply chang e the hex values f or stroke and f ill.
The Upwards Arrow

Within Divis pag e builder open the custom css tab in the section window preceding the
section you wish to add the arrow to. Paste the f ollowing code in the af ter section:

display: block;
position: absolute;
content: '';
width: 100px;
height: 100px;
bottom: -50px;
left: 50% ;
margin-left: -50px;
background-color: #dddddd; /** Change This Value ***/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

The Multi Arrow (Upwards)

Within Divis pag e builder open the custom css tab in the section window you wish to add
the arrow to.

Paste the f ollowing code in the bef ore section:

display:block;
position:absolute;
content:'';
top: -25px;
background: inherit;
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db; /*
Change The Hex Values */
left: 50% ;
width: 50px;
height: 50px;
-webkit-transform: translateX(-50% ) rotate(45deg);
transform: translateX(-50% ) rotate(45deg);
The Multi Arrow (Downwards)

Within Divis pag e builder open the custom css tab in the section window you wish to add
the arrow to.

Paste the f ollowing code in the af ter section:

display:block;
position:absolute;
content:'';
left: 50% ;
width: 50px;
height: 50px;
-webkit-transform: translateX(-50% ) rotate(45deg);
transform: translateX(-50% ) rotate(45deg);
bottom: -25px;
z-index: 10;
background: inherit;
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db; /*
Change The Hex Values */

The Folded Corner

The f olded corner is one of the more complicated section dividers because creating the
ef f ect requires you to adjust multiple colors.

To add the divider, open Divis page builder then in the the custom css tab of a section
window.

Paste the f ollowing code in the bef ore section:

display:block;
position:absolute;
content:'';
bottom: 0;
width: 100px;
height: 100px;
right: 0;
 background-image: -webkit-linear-gradient(top left, #37a2ea
50% , #3498db 50% );
background-image: linear-gradient(315deg, #3498db 50% , #37a2ea
50% );

Then in the same section add this code to the af ter section:

display:block;
position:absolute;
content: '';
bottom: 0;
width: 100px;
height: 100px;
right: 100px;
background-image: -webkit-linear-gradient(top left, transparent
50% , #236fa1 50% );
background-image: linear-gradient(315deg, #236fa1 50% , transparent
50% );

Achieving as nice as ef f ect as the one f rom the Codrops article is quite challenging. You
have to adjust all three colors in tandem. All of the hex values should be shades of the same
color.

Three Dots

This type of divider is a great way to break up your content without chang ing the
backg round color. Implementing three dots is simple: open the custom css tab in the
section window you wish to add the dots to the bottom of .

Next, paste the f ollowing code in the bef ore section:

display:block;
position:absolute;
content:'';
bottom: 20px;
width: 14px;
height: 14px;
border-radius: 50% ;
left: 50% ;
-webkit-transform: translateX(-50% );
 transform: translateX(-50% );
background: #fff;
box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;

Two Lines Divider

Like the three dots divider, this type of divider is a great way to break up your content
without changing the background color. Implementing two lines is simple: open the custom
css tab in the section window you wish to add the dots to the bottom of .

Next, paste the f ollowing code in the bef ore section:

display:block;
position:absolute;
content:'';
bottom: 30px;
width: 140px;
height: 2px;
left: 50% ;
-webkit-transform: translateX(-50% );
transform: translateX(-50% );
background: #fff;
box-shadow: 0 30px 0 #fff;

The Cross Divider

The Cross Divider is very larg e but you can shrink it if you wish by decreasing the values. The
cross is easy to use: open the custom css tab in the section window you wish to add the
dots to the bottom of .

Next, paste the f ollowing code in the bef ore section:

display:block;
position:absolute;
content:'';
padding-bottom: 15em;
 background: #fff;
bottom: 50px;
width: 2px;
height: 20px;
left: 50% ;
-webkit-transform-origin: 50% 50% ;
transform-origin: 50% 50% ;
-webkit-transform: translateX(-50% ) rotate(45deg);
transform: translateX(-50% ) rotate(45deg);

In the same sections custom CSS panel paste the f ollowing code into the Af ter box:

display:block;
position:absolute;
content:'';
padding-bottom: 15em;
background: #2072a7;
bottom: 50px;
width: 2px;
height: 20px;
left: 50% ;
-webkit-transform-origin: 50% 50% ;
transform-origin: 50% 50% ;
-webkit-transform: translateX(-50% ) rotate(-45deg);
transform: translateX(-50% ) rotate(-45deg);

The Castle Divider

The Castle is one of my personal f avorites. The way the divider ties tog ether two dif f erent
sections impresses me.

The castle can be implemented by pasting the f ollowing code into the bef ore box of the
section you wish the castle to appear above.

display:block;
position:absolute;
content:'';
left: 0;
width: 100% ;
height: 50px;
 background-size: 200px 100% ;
top: 0;
background-image: -webkit-linear-gradient(40deg, #81d742 50% ,
#e74c3c 50% );
background-image: linear-gradient(40deg, #81d742 50% , #e74c3c
50% );

Integ rating the castle divider into your desig n requires you to change the two colors values
in each of the last two lines of the above code.

The Zig Zag

The Zig Zag divider is created in a very similar f ashion to the castle divider. Paste the
f ollowing code into the bef ore box of the section you wish the zig zag to appear above.

display:block;
position:absolute;
content:'';
left: 0;
width: 100% ;
height: 50px;
background-size: 100px 100% ;
top: 0;
background-image: -webkit-gradient(linear, 0 0, 10% 100% , color-
stop(0.5, #1e73be), color-stop(0.5, #81d742));
background-image: linear-gradient(15deg, #1e73be 50% , #81d742
50% );

You must chang e the hex values to your sites colors in order to achieve the ef f ect.

The Half Circle

By now you are probably starting to notice a pattern. To implement the half circle paste the
f ollowing code into the bef ore box of the section you wish the circle to appear above.

display:block;
position:absolute;
 content:'';
left: 50% ;
z-index: 10;
width: 100px;
height: 100px;
border-radius: 50% ;
background: #dd3333;
-webkit-transform: translateX(-50% );
transform: translateX(-50% );
top: -50px;

If you want to add the circle to the bottom of your layout move the code to the af ter
box.

The Top Curve

If you really want to take your site to the next level then this divider is f or you.

Implementing the curved divider is much more complicated than the other dividers. Dont be
intimidated though, you can always reach out to me if you get stuck.

Step 1: Create a blank section, above the section you wish to add the curve to.

Step 2: Make the row a sing le column and insert a text module into the row. Paste the
f ollowing into the module:

<svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg"

version="1.1" width="100% " height="100" style="position:absolute;
padding-bottom:o; margin-bottom:0; fill: #dd9933; stroke: #dd9933;
bottom:0px;" viewBox="0 0 100 100" preserveAspectRatio="none"><path
d="M0 100 C 20 0 50 0 100 100 Z"></path></svg>

Step 3: You need to change the Fill and Stroke hex values to the backg round color of
your targ et section.

Step 4: Make the row f ull-width, change the bottom-padding of the row, section, and
module to zero.

Step 5: Enable Keep Custom Padding on mobile

Step 6: Chang e the backg rond color of the section to be the same color as the section
directly above this one.

The Bottom Curve

Creating the bottom curve is very similar to the top curve but there are a f ew crucial
dif f erences.

For clarity, I will g o throug h the process again:

Step 1: Create a blank section, below the section you wish to add the curve to.

Step 2: Make the row a sing le column and insert a text module into the row. Paste the
f ollowing into the module:

<svg id="curveDownColor" xmlns="http://www.w3.org/2000/svg"

version="1.1" width="100% " height="100" style="position:absolute;
padding-top:0; margin-top:0;fill: #dd9933; stroke: #dd9933;
top:0px;" viewBox="0 0 100 100" preserveAspectRatio="none"><path
d="M0 0 C 50 100 80 100 100 0 Z"></path></svg>

Step 3: You need to change the Fill and Stroke hex values to the backg round color of
your targ et section.

Step 4: Make the row f ull-width, change the top-padding of the row, section, and module
to zero.

Step 5: Enable Keep Custom Padding on mobile

Step 6: Chang e the backg rond color of the section to be the same color as the section
directly below this one.

Alternating Squares

Creating the alternating square pattern is relatively easy. Simply past the f ollowing code
into the bef ore box of the section you wish to place the divider above.

display:block;
position:absolute;
 content:'';
left: 0;
width: 100% ;
height: 50px;
background-size: 100px 100% ;
top: 0;
background-image: -webkit-gradient(linear, 100% 0, 0 100% , color-
stop(0.5, #dd3333), color-stop(0.5, #fff));
background-image: linear-gradient(to right, #dd3333 50% , #fff
50% );
-webkit-background-size: 130px 100% ;
background-size: 130px 100% ;

You will have to adjust the hex values to achieve the pattern, but you already knew that,
didnt you?

3D Triangle Spikes

Implementing this divider is very similar to many of the preceding examples.

Paste the f ollowing code in the bef ore box of the section you wish the divider to appear
above.

display:block;
position:absolute;
content:'';
right: 0;
left: 0;
z-index: 10;
display: block;
height: 90px;
background-size: 50px 100% ;
top: -90px;
background-image: -webkit-gradient(linear, 0 0, 300% 100% , color-
stop(0.25, transparent), color-stop(0.25, #3498db));
background-image:
linear-gradient(315deg, #3093d5 25% , transparent 25% ),
linear-gradient( 45deg, #3498db 25% , transparent 25% );
background-position: 50% ;

You will have to adjust the hex values to achieve the correct pattern.
Conclusion

Thanks For Reading !

To stay up to date with the latest Divi Snippets be sure to join the Divi Guide email list.