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. 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/
  22. Add Web Font using @font-face methodhttp://divicreative.com/resource/easily-add-web-font-divi-using-font-face-method/

 

Inspiration



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

Support

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

Customize the Carousel Slider

Remove full width slider
Add classes to panels
Bloom click on popup

MARKDOWN_HASHdb23c11ef93e3ef9ad48080e2775ad93MARKDOWN_HASH

  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

MARKDOWN_HASHfa490d99b06823ed60e7ee0c2641c8c1MARKDOWN_HASH

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!

28 Comments

  1. 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

  2. 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.

  3. 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

  4. 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

  5. Susan Ramos

    Thanks for including my blog with some Divi theme CSS…

  6. 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.

  7. craig

    thanks for adding the divithemeexamples site in there 🙂

  8. 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.

  9. 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 🙂

  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…:-(
    <3

  11. 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.

  12. 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 .

  13. 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 !

  14. 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.

  15. 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?

    Thanks
    Alex

  16. Howard

    Loralee,

    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

    Thanks

  17. 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

  18. soundbars4u

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

  19. Bican

    Wonderfull ressources list.

Trackbacks/Pingbacks

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

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

Advertisement

inspired year planner 5 day reclaiming your time ecourse free work at home bundle

Read My Books

advertisement advertisement

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 the "Just the Tools" section of my book, including:

• the complete list of tools I use to run my business for less than $900/year

• a list of equipment I use

• 4 options for tool combos, starting from $225/year (for coaches, freelancers, and other online entrepreneurs)

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

Pin It on Pinterest

%d bloggers like this: