divi-theme-customization-resource-list update: December 9, 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. Elegant Themes CSS tricks http://www.elegantthemes.com/blog/resources/divi-css-tricks
  2. Eileen Lonergan.com http://www.eileenlonergan.com/tips-on-customizing-the-divi-layout-by-elegant-themes
  3. 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/
  22. Add Web Font using @font-face methodhttp://divicreative.com/resource/easily-add-web-font-divi-using-font-face-method/



Plugins & Tools

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

Free Child Themes & Layouts

  1. Free divi layouts http://elegantdivilayouts.com/
  2. Divi child themes (free): http://www.divithemeexamples.com/divi-child-themes/
  3. 8 Free child themeshttps://divicake.com/blog/8-free-divi-child-themes-to-download-today/
  4. Altitude and Amped child themes (free)http://lovedivi.com/free-divi-child-themes/
  5. Free Divi Layoutshttps://divicreative.com/free-divi-layout
  6. Restaurant Layout Packhttps://www.elegantthemes.com/free-divi-restaurant-layout-pack

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)

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!


  1. Bican

    Wonderfull ressources list.

  2. soundbars4u

    Awesome website .Nice informative post.Thanks a lot for adding the divithemeexamples site in there ….

  3. Aditya Wicaksono

    can i ask something…. how to full width image above header in box layout? i already try it and it’s work… but image above not same size with box layout… and when i using another computer the image change size….. how to make image same size with box layout? and the last is how to change text follow button at social media change to like.. : follow -> like.. thk, sorry too many ask question

  4. Howard


    Thanks for the Bloom On-Click Popup.
    I cannot seem to get it to work. Do you know if there is an issue with the latest DIVI upgrade 2.6.1


  5. Alex

    Hi There,

    I am trying to figure out how can I swap logo position on scroll. Logo starts on top of the top menu, then moves smoothly to the side of the menu on scroll.

    i would like to know if my questions is related to CCS or JS or Jquery or may be all of them.

    Any suggestion of where to start?


  6. Amy

    I’ve just started using the Divi theme and so thrilled to find this, Loralee! Thank you. Just so you know, it appears that mostawesometech.com is no longer active, so you might want to remove those links.

    I’m going crazy trying to figure out something that seems like it should be really easy. Do you know how to change the style of the h1, h2, etc.? For example, I want to make the h1 bigger than it is (either across the board or just on one page, either is fine with me). It seems there should be a place to easily change the font size, color, etc. of the different heading levels but I can’t find it anywhere. Help! 🙂

    • Loralee

      Thanks for catching the broken link Amy.

      I think ET was trying to help novice users by using the written version, vs h1, h2, etc but it makes it a tiny bit more confusing to find. Here’s where I go to customize the following:

      To customize body text size, line height, header text size, spacing and height and color

      Customize > General Settings > Typography

      To customize the meta text & header text size, height, spacing
      Customize > Blog > Post

      Happy New Year Amy!

      • Amy

        Thanks, and happy new year! It looks like that only has one option, “Header.” But what if, for example, the h1 is 30px and I want to make it 50px? Or I want to change the font or the color, but not on all the headings/headers, just the h1… It seems like that should be possible but it’s very elusive.

        • Loralee

          I agree – it is elusive.

          My understanding is that the fonts increase based on a percentage…but I could be completely wrong. I wonder if this would be a good question for the FB group? I’ll drop you a pm in FB too.

  7. gh2b

    Hi !
    Very interesting site !!
    I have question about the blank_page at Divi … is ti possible to change the target blank to go to the same window ? i tried to do that on section and modules (picture with link instead of classic nav) but it’s still “blank”…
    Thank you if you have any answer to help me…
    gilles !

  8. clipping-path

    Hi! Take a look for ( http://superclippingzone.com/clipping-path/ ) Best Photo editing service on superclipingzone . This will give you a free trail of work. Thanks for reading .

  9. Niki

    Thanks Loralee for sharing this list with us.

    I am a big fan of Divi theme and till now I have used it for many projects. Although I have already done most of them but still I found few new ideas for customizations.

    Divi4u is a great resource where you can find out a lot theme customization ideas.

  10. Ophélie

    Thanks Loralee, 🙂
    I found your article in a facebook group, I am thinking to make the switch from Thesis to Divi, so I am glad I have them all on one page. Thank you for putting all these ressources together!
    And wondering why I do not receive your newsletter anymore? It has been forever since I found you in my inbox…:-(

  11. Geno Quiroz

    Hi Loralee. Great resource. Found some great stuff here I did not know existed. Also honored to be included on your list. Thanks again for putting this together 🙂

  12. jose antonio

    Hi! Thanks for all the tips. I am trying to figure out if the map module can have a different height, with no luck so far. Can you please help? Thx in advance.

  13. craig

    thanks for adding the divithemeexamples site in there 🙂

  14. Tom Frearson

    Thanks for including my post on your blog, Loralee!

    I recently published an updated post (link below) with some additional code that enables you to customise all Divi thumbnail sizes, not just the blog module images.

    • Loralee

      thanks for the update Tom! Appreciate it.

  15. Susan Ramos

    Thanks for including my blog with some Divi theme CSS…

  16. Wordpress table plugin

    Thanks for this informative blog.Your Tutorials link have lots of useful information.We are also working on WordPress table plugin.It was so good and helpful for Create Table in WordPress.If you wants to know more about plugins So can visit us at wpdatatables.com

  17. Luis Alejandre

    Good list, Loralee!

    Thank you for including my Divi Children plugin and my Divi example sites showcase in it.

    • Loralee

      You’re very welcome. Glad you created it! Thank you

  18. Kathy

    Hey there! Which plugin did you use for the sharing bar at the bottom of this site? Many thanks for the stupendous blog post. It’s incredibly helpful.

    • Loralee

      It’s the Monarch plugin from Elegant Themes (there’s a link just above that will take you there). At least, I believe it’s where it’s from 🙂 I don’t have any other social media plugin installed.

  19. Eileen Lonergan

    Wow, this is a massively impressive list, thank you Loralee! And thank you for including my blog post, I am honored to have made the list.

    • Loralee

      Thanks Eileen! You did the heavy lifting creating the tutorial, so thank you! Pulling together lists like this is fun work for me 🙂

      ~ Loralee


  1. Divi : Des tonnes de ressources - […] LoraLeeHutton.com – More Divi theme customization resources […]

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.

Does your autoresponder series need some extra love?

Join me this month to take a deeper look at the autoresponders you already have set up.


Enter your best email to receive your email prompts, and:

• review your current lead magnet(s) and auto-responder series and evaluate what’s working and what isn’t

• review and revise any of your existing lead magnets

• review how well your existing autoresponders are benefiting your profit margin


Walk away with a list of tweaks and improvements you want to make to grow your list faster and attract higher quality leads. 

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

Pin It on Pinterest

%d bloggers like this: