Lesson 5:
Simple CSS Tips For Divi

How To Transform Your Divi Website With Simple CSS

Grab Your Free Divi Layouts

What is CSS?

CSS (Cascading Style Sheet) code is used to customize your theme further than what is offered in the Divi Theme Options + Theme Customizer. Below are a few basic CSS properties + values to help get you started. You can add Custom CSS within your Divi Theme Options.

Where do I add my Custom CSS?

Go to Divi > Theme Options > General tab > Copy + paste your code in the Custom CSS panel.

Font Styling

Property + Value examples

font-family: Open Sans | Montserrat | Lato | Raleway;
font-weight: normal | bold | bolder | lighter | 100 – 900;
font-size: 12px | 0.8em;
text-transform: capitalize | lowercase | uppercase;
letter-spacing: normal | 4px;
line-height: normal | 3em; 
text-align: left | right | center | justify;
text-decoration: none | underline | line-through;

Header One

h1 {
property: value;
}

Header Two

h2 {
property: value;
}

Header Three

h3 {
property: value;
}

This is paragraph text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Lorem ipsum dolor sit amet this is a link. nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

p {
property: value;
}

a {
property: value;
}

Margin

Property + Value Examples:

margin-top: 2px;
margin-right: 4px;
margin-bottom: 6px;
margin-left: 8px;
margin: 2px 4px 6px 8px;

Border

Property + Value Examples:

border-color: #2AA9E0;
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-width: 10px

Padding

Property + Value Examples:

padding-top: 2px
padding-right: 4px
padding-bottom: 6px
padding-left: 8px
padding: 2px 4px 6px 8px

Position

Property + Value examples

position: relative | absolute | fixed | sticky;
float: left | right | none;
z-index: 0-999;

Background

Property + Value examples

background-image: url(insert media url here);
background-repeat: repeat-x | repeat-y | repeat | no-repeat;
background-attachment: scroll | fixed | initial | inherit;
background-color: #2AA9E0;
background-position: top | right | bottom | left | center;

Useful Divi Snippets

Copy & Paste The CSS Code Into Your Divi Child Theme

Divi Snippets are useful code snippets that are used regularly to customize your theme. Feel free to copy + paste these in your Custom CSS area, and adjust the values to match your own branding.

Remove Border Below Top Header

Style The Read More Link

Style The Back To Top Button

To enable, Go to your Theme Options > Back To Top Button > Switch Toggle To Enabled.

Style The Search Bar

Style Your Contact Form Submit Button

Style Your Reply To Comments Button

Free Download:
The Simple Starter Divi Layout Pack
Download Now

Pin It on Pinterest

Share this free online guide!

Show your friends how simple it is to build a WordPress website with Divi.

Shares