10 Essential Divi Tips

June 28, 2018

It is no secret, Divi is my favorite theme to use when building client sites. I love Divi because it is so easy and flexible. You can design just about any style of site you can imagine.

However, sometimes there are certain things that just aren’t the easiest to change.

Here Are 10 Easy Things You Can Do With Divi That You May Not Know About

#1 How To Remove The Grey Line Under The Divi Menu

From the Divi menu on the left hand side navigation menu in the WordPress dashboard, click Divi Options.

Next scroll down until you see a box labeled “Custom CSS“. Inside that box place the following code.


#main-header,
#main-header.et-fixed-header {box-shadow: none !important;}

Click Save Changes and refresh your page and that grey line should be gone!

#2 How To Change The Mobile Menu Icon Color

Need to change the color of the mobile menu icon?

Insert the following css into the Custom CSS section within your Divi Options


span.mobile_menu_bar:before {
color: #3da1ca !important;
}

The only thing you will need to change is to change the hex code (#3da1ca) for the color to that of your desired color.

#3 How To Change The Active Page Color In The Divi Menu

While you can change the active page link color in the Divi customizer, it doesn’t always work 100% of the time. Here is how you can use some CSS to do it.

Insert the following css into the Custom CSS section within your Divi Options


#main-header #top-menu li.current-menu-item > a {
color:#3da1ca !important;
}

The only thing you will need to change is to change the hex code (#3da1ca) for the color to that of your desired color.

4. How To Remove The Divi Footer

Should you ever want to remove the Divi footer, here is how you do it.

Insert the following css into the Custom CSS section within your Divi Options

#footer-bottom {display: none;}

5. Embed Your Brand Colors

Add your brand colors to the color picker so you don’t have to remember the hex codes for future use.

Go to Divi > Theme Options > Color Pickers Default Palette > Enter your colors.

6. Rename Your Modules For Better Organization

When you have a lot of modules, it can become confusing as to what is what. Try renaming your modules so it becomes more clear exactly what is what.

Go to Module Settings > Admin Label > Change Name

7. Set Custom Default Settings For Animation On Image Modules

One thing I find a bit annoying is having to change the image animation style every time I add an image.

Here is how you can set the default image animation style that you want and save yourself some time when adding images.

Go to Divi > Module Customizer > Image > Set To No Animation (or whatever you prefer)

8. Add Custom CSS To A Single Post Or Page

Need to add some custom css to a post or page without it affecting other parts of your website? Here is how to do it.

Go to your Page or Post > Click the Settings icon in the Divi Builder Header > Add Custom CSS

9. Build Your Own Custom Divi Library of Reusable Templates

Do you find you are constantly re-building the same type of layout or section?

You can save time by saving it to your custom library and then simply re-using it when you need it. This applies to full layouts, sections, rows AND modules.

To save Full Layouts: Go to Save To Library in the Top Header > Add Layout Name > Click Save