update: October 24, 2015
divi-theme-customization-resource-listI’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

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/


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;



Note that if you use a video in a slider, it is NOT viewable on a mobile device. In that case, be sure there’s a background photo there, too, so that it’s not just a blank space on a mobile phone.


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; }



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">
jQuery("#footer-info").text(' ');
jQuery('<p>Copyright 2009-2015. Designed with the <a href="http://loraleerecommends.com/divi" target="_blank">Divi Theme</a></p>').insertAfter("#footer-info");

Customize the Carousel Slider

Remove full width slider:

Add classes to panels:


Divi WordPress Theme

Bloom Plugin – On Click Pop Up

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


5. 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)

7. In the css class, include the code you used in step 3, without the *.  (in my example I use ohlookwhat)

Example of the pop up on the front end.

If 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!

Pin It on Pinterest