divi-theme-customization-resource-list update: February 4, 2017 

I’m working on a continuously updating this list of resources from the web that help with customizing Divi. If you know of any other great resources, please leave a comment below or send me a quick message.

And of course, remember that the support forum in Elegant Themes is a fantastic resource. The $69/year annual fee has paid for itself many times over.

How to add CSS customization to your Divi theme:

How to add CSS to a module

Creating a Child Theme before customizing

  1. http://wpsites.net/wordpress-themes/child-theme-for-divi-download/
  2. http://divi4u.com/divi-children-plugin/
  3. http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

Divi WordPress Theme

General Tutorials & Overview – How to use WordPress and Divi

  1. http://theabundantartist.com/divi-wordpress-theme-review-tutorial/
  2. http://www.jamescarterweb.com/tutorials/mchone/elegant-themes-divi-wordpress-theme-tutorials-video/
  3. http://www.eleganttweaks.com/elegant-themes-divi-breakdown/
  4. http://www.wpsolver.com/divi-by-elegant-themes-guide/
  5. http://viamaverick.com/the-ultimate-elegant-themes-review/
  6. http://www.csshero.org/themes/divi/
  7. Ecommerce: http://www.elegantthemes.com/gallery/divi/tutorial-ecommerce.html
  8. Using Global Settings (divi 2.4 and higher) http://www.elegantthemes.com/blog/


Collections of CSS Customizations

  1. Calcatraz.com  http://blog.calcatraz.com/customizing-the-divi-wordpress-theme-2020
  2. Elegant Themes CSS tricks http://www.elegantthemes.com/blog/resources/divi-css-tricks
  3. Eileen Lonergan.com http://www.eileenlonergan.com/tips-on-customizing-the-divi-layout-by-elegant-themes
  4. WordPress.org support forum:  https://wordpress.org/support/topic/woo-commerce-elegant-themes-divi-sidebar


Specific Customizations

  1. Add social Icon http://www.agentwp.com/add-social-icon-in-divi-wordpress-theme
  2. Change Footer http://www.eileenlonergan.com/how-to-change-the-footer-in-divi
  3. Spanish customization:  http://caribdisweb.com/project/divi-by-elegant-themes-documentation-in-spanish/
  4. English Spanish translation: https://github.com/jossemarGT/elegant-themes-spanish-translation
  5. Remove or Change Footer: http://grab.graphics/2014/05/29/remove-change-footer-elegant-themes-divi/
  6. Logo Size Customization:  http://nerdnomads.com/divi-logo-size-customisation
  7. Adjust logo size:  http://voodoopress.com/css-adjust-elegant-themes-divi-logo/
  8. Change wording in footer: http://www.eileenlonergan.com/how-to-change-the-footer-in-divi
  9. Create One Page websites: http://www.elegantthemes.com/gallery/divi/tutorial-one-page.html
  10. Transparent background contact form: http://www.nerdsusan.com/styling-contact-form-transparent-background/
  11. Style Social icons: http://www.nerdsusan.com/divi-by-elegant-themes-change-footer-links-style-social-icons/
  12. Customize Divi Layout: https://www.eileenlonergan.com/tips-on-customizing-the-divi-layout-by-elegant-themes
  13. Customize the Carousel Slider   http://youtu.be/MlIreFXYPik
  14. Project and Product thumbnails: http://www.elegantthemes.com/blog/tips-tricks/css-tricks-for-your-divi-theme-project-and-product-thumbnails
  15. Full width menu: http://www.elegantthemes.com/gallery/divi/tutorial-fullwidth-menu.html
  16. Blog Layout: http://wptechcentre.com/tutorial-how-to-customise-the-divi-theme-blog-layout/
  17. Add page builder to custom post types: http://laternastudio.com/blog/divi-page-builder-for-custom-post-types
  18. Update Copyright automatically: http://quiroz.co/customizing-your-copyright-line-taglines-in-divi/
  19. Expand logo and main menu fullscreen width: http://quiroz.co/expand-logo-main-menu-fullscreen-divi/
  20. Create a Skinny Opt In – or Horizontal Subscribehttp://quiroz.co/customizing-the-subscribe-module-in-divi/
  21. Editing the Footer using Footer Layouts  (divi 2.4 and higher) http://www.elegantthemes.com/blog/



Plugins & Tools

  1. Divi child theme plugin: http://wpsites.net/wordpress-themes/child-theme-for-divi-download/
  2. Divi child themes (free): http://www.divithemeexamples.com/divi-child-themes/
  3. Theme and Plugin detector:  http://www.wpthemedetector.com/
  4. Divi Children Plugin: http://divi4u.com/divi-children-plugin/
  5. Shortcodes: http://www.elegantthemes.com/features/shortcodes.html
  6. Add page builder to custom post types: http://laternastudio.com/blog/divi-page-builder-for-custom-post-types
  7. Bloom Redirect Plugin: (free) http://dimavolo.ca/wordpress-plugins/bloom-redirect-plugin/

Monarch Social Sharing Plugin


  1. Elegant Themes Support Forum: https://www.elegantthemes.com/forum/
  2. Facebook support group: https://www.facebook.com/groups/464947686941789/526904920746065/
  3. Consider placing an add on Job.Wordpress.org similar to this one: http://jobs.wordpress.net/job/wordpress-divi-theme-design-elegant-themes/
  4. WPCurve: http://wpcurve.com 

Other Resource Lists (similar to this one)

  1. Divi Files: (updated regularly) https://www.evernote.com/pub/alicatonhigh/divithedivifiles
  2. WP Theme Faqs: http://www.wpthemefaqs.com/themes/elegant-themes/divi/
  3. Nerd Susan blog:  http://www.nerdsusan.com/blog/
  4. Divi Theme Examples: http://www.divithemeexamples.com/divi-theme-resources/
  5. The Entrepreneurs Blog: http://quiroz.co/blog/divi-blog/
  6. Divi Chat (Podcast)http://divi.chat/

(Click to expand for css tips and tricks below)

Creating a horizontal opt in

view the original question here (you’ll probably need to log in):


Adding this to the CSS in the epanel will make all of your opt ins horizontal

.et_pb_newsletter_form { width: 100%; }
.et_pb_newsletter_form p { float: left; margin: 0 15px; }
.et_pb_newsletter_button { width: 100%; }

Adding this to the CSS in the epanel will change the opt in on a specific page:
(change the xx to the page number you want to change)
.page-id-xx .et_pb_newsletter_form { width: 100%; }
.page-id-xx .et_pb_newsletter_form p { float: left; margin: 0 15px; }
.page-id-xx .et_pb_newsletter_button { width: 100%; }

Remove header and or footer from a single page

for creating a sales/ landing page

view the original question here (you’ll probably need to log in):


Add the following code to custom css box in epanel (appearance > theme settings):

.home #main-header, .home #main-footer{
display: none;

To remove the header from the home page, and other pages on your site:
(change the xx to the page number you want to change)

.home #main-header, .home #main-footer, .page-id-xx #main-header, .page-id-xx #main-footer{
display: none;
body.home, body.page-id-xx {
padding-top: 0 !important;

CTA Button Color on Slider

This seems to work —
When it’s set to “light”:

a.et_pb_more_button {
background-color: #d35400;

When it’s set to “dark”:
a.et_pb_more_button {

background: #FF0000 !important;


Remove HTML tags in Commenting Forms

Remove the box that indicates the html tags that can be used for commenting “You may use these HTML tags and attributes:

Add the following code to custom css box in epanel (appearance > theme settings):

.form-allowed-tags { display: none; }

Change the size of the fixed header in Divi
  • Navigate to the Divi Theme Options under General Settings
  • Enable Fixed Navigation Bar
  • Insert this code into the Custom CSS Section at the bottom of the page
  • .et_fixed_nav #logo {
    margin-bottom: 0;
    max-height: 100px;
  • Change 100px to a size that suits your logo
Allow for visible hyperlinks in h1, h2, h3, h4 header tags

view the original question here (you’ll probably need to log in):


h1 a , h2 a , h3 a , h4 a , h5 a {
color: #0099FF !important;
a:hover {text-decoration: underline; }

Divi WordPress Theme
Good width for full width images on any theme

Try 1770px wide, which will accommodate most screen sizes.

1980px wide is the highest I recommend, but I’ve had the best luck with 1770px wide (Julia McPherson).

Change Footer Copyright without a child theme or plugin

Modify this code and add it to Divi Theme Options > Integrations > Add code to < body > section

/*change footer*/
<script type="text/javascript">// <![CDATA[
jQuery("#footer-info").text(' ');
jQuery('Copyright 2009-2015. Designed with the 
<a href="http://loraleerecommends.com/divi" 
target="_blank">Divi Theme</a>
});// ]]></script>

Customize the Carousel Slider

Remove full width slider

Add classes to panels

Bloom click on popup

Elegant themes released a new feature this past month (October 2015) that includes the on-click pop-up feature (similar to what happens with the popular Leadpages tool). But for the moment, there's not any documentation available. I've done a bit of digging and found this relatively simple solution.

  1. Set up your pop up like you normally would.
  2. When you get to the final step (Display Settings) uncheck everything except “Trigger on click”
  3. In the css selector put in any text you’d like, but preface it with *. (in my example I use *.ohlookwhat)
  4. Save and exit

bloom-divi-css-on-click-popup5. Go to the post or page where you want to add it. In this example I'm using a call to action 6. Include #1 (or any text or number will do - you just want something after the # to stop it from jumping back to the top of the page) bloom-divi-css-on-click-popup-27. In the css class, include the code you used in step 3, without the *.  (in my example I use ohlookwhat) bloom-divi-css-on-click-popup-3Example of the pop up on the front end. bloom-divi-on-click-pop-upIf you want it to pop up from a link within your text (like this link) use this code <a href="#1" class="your-pop-up-class">Your Text Here</a>

Missing a Fabulous Resource?

If you know of other great resources that should be added to this list, please let me know if the comments below, or by sending me a message. Thanks!

About Me

While creating my portable biz on an incredibly lean budget (less than $30/mo) wasn't easy, it's the foundation piece I love to share with other solopreneurs. Creating your own passive & leveraged income doesn't need to be hard, or expensive.

Follow Me


Coming Soon Work At Home Bundle worth 2000 advertisement

Read my books …

Info Product Complete.jpg

Get "Oh! Look What I've Just Found" in your inbox weekly

You'll receive a summary of the tools I share on "Oh! Look What I've Just Found!" with a commentary. Usually I'll have tested them by this stage, so you'll also get a short summary of the ones I tested this week that I probably won't bother using.

Success! You'll receive your first note this weekend.

Sneak Peak of my new book

Enter your best email to get email from me as soon as the book is ready for release.

You have successfully signed up. A confirmation email is on its way.

Pin It on Pinterest

%d bloggers like this: