Find Essential Divi Theme Resources

by | Divi Theme Tips

Divi Theme Tips and Tutorials

Divi Child Theme Setup Tips

Over 70 Essential Divi tips, tutorials, gotta have plugins, video tutorials and more. Most of these I have used myself in a number of different client projects.  This list is constantly evolving and growing. To be honest, I created this after my browser started crashing from having too many tabs open at the same time. It will grow even more!!!

Quicklinks to sections on this Post
Divi Child Theme Setup Video
Divi Design and Layout Plugins
WooCommerce for Divi Notes & Plugins
Divi Testimonials
Divi Theme Menu Tips
Divi Header Layout & Design Tips
Divi + Custom Post Types w PODS
Gravity Forms in Divi
Speeding Up Divi
Divi Overlays Tips
Divi Audio Module
Divi Logo Customization
Divi Feed & Excerpts
Divi Login Module Customization
Divi + Real Estate Plugins
Divi Theme Super User Tips
Divi Child Themes & Divi Templates
Setting up the Blog on Divi

Divi Child Theme Setup

Divi 4+ Header Layout & Design tips

Before Divi 4.0 came out, Divi’s header and menu design options were limited.

That all changed with the new Divi Theme Builder. Here’s a list of a few resources that provide specific customization tutorials we have used or saved for later.

  • Tutorial 1: How to Make Your Entire Divi Header Fixed
  • Tutorial 2: How to Make Only Part of Your Divi Header Sticky
  • Need the Divi Design codes?
    • Here’s a full list presented in classes, unicode and in css. Super useful if you need to call up an icon without using the blurb module.

Divi Design and Layout Plugins – Easy and Essential

WooChild Theme Setup Notes with Divi

Read: WooCommerce Child Theme Setup Guide from WooCommerce

If you see Deprecation errors or notices on a site running WooCommerce, especially if you see deprecation notices on a staging or test or development site, odds are you simply need to Disable errors in wp-config.  More Details here (they read like looking through a muddy swamp)

Woo Layout Injector (for Divi Themes)

This Woo Commerce plugin for Divi Themes gives me one of the better all around impressions in general. It’s available in the Elegant Themes Marketplace for $22 US.

It allows you to edit the layout and styling of the WooCommerce single product pages, the shop page and product category pages either centrally or on a per product basis..

The ideal Divi Commerce solution, Woo Layout Injector works on Divi and Extra, neither of which allow any configuration at all unless you are able to code in PHP and CSS. Even a seasoned developer will spend a while getting their WooCommerce layouts just right and to look ‘non-stock’. This plugin facilitates that.

In literally minutes you can create both a shop layout and product page layout and assign them to your site. You can set the layouts centrally via the settings page meaning if you want to change your store at any time then you need only edit one layout. You can also override the layouts by product category or even on a per product basic making this plugin ideal for any type of store.

It follows the Divi Injector method of enabling users to create Divi Library Templates which can then be ‘injected’ into categories, product pages and other areas easily.

Modules

  • Title. Adds the name of the product
  • Info Tab. Adds the contents of the ‘additional information’ tab. Only relevant if your products have attributes or are variable.
  • Reviews. The WooCommerce reviews system. Also part of the tabs module but this is an alternative
  • Meta. lists SKU, category etc.. summary info.
  • Content. This can show the short or long product description based on a setting
  • Add to Cart. Does what it says on the tin!
  • Gallery/Product Image. Shows the featured image for the product with the gallery below. Optionally the latter can be disabled so you can display the thumbnails elsewhere.. surprisingly useful!
  • Thumbnails. Shows the gallery images which would normally appear below the product image but this is a separate module to allow them to show in different areas of your page
  • Tabs. The standard WooCommerce tabs
  • Related. Self explanatory
  • Upsell. Self explanatory
  • Cross Sell. Self explanatory
  • Attributes. For showing attributes in a list on your Woo pages
  • Breadcrumb. Self explanatory
  • Loop Archive. Archive layout module used to configure the look/feel and the child layout to make the shop/product categories work
  • Shop/Category Title: Used for the archive template to show the category title or the shop title accordingly

Plugin Developer Sean Barton Tortoise IT

Smart Variations Plugin for WooCommerce

Allows users to add images into WooCommerce variations (as opposed to default text or drop down boxes)

Demo available at – http://svi.rosendo.pt/free

FEATURES

  • WooCommerce 3.0+ Ready
  • Multiple Images for Variation
  • Magnifier Lens
  • Ligthbox
  • Main Image/thumbnails swap on choose variation
  • Custom Thumbnail Columns
  • Hidden Thumbnails
  • WPML Compatible
  • Responsive

This is a Freemium model plugin.  (Free version linked here)

Pro Version available here

PRO VERSION

  • Main Image/thumbnails swap on choose variation
  • Multiple Images for Variation
  • Multiple Images Upload for Variation (Bulk)
  • Ability to assign images to a Combination of Variations.
  • Ability to use same image across multiple variations.
  • Allow same image to be shared across different products with diferent variations
  • Show Variation as Cart Image
  • Ligthbox prettyPhoto & photoswipe
  • Advanced Slider (Navigation Arrows & Color + Thumbnail Positions) – Fully Responsive
  • Advanced Magnifier Lens (Lens Style & Size + Lens Border Color + Zoom Type & Effects)
  • Extra Thumbnail Options (Disabled Thumbnails + Select Swap + Thumbnail Click Swap + Keep Thumbnails Visible)
  • Extra Layout Fixes (Add Custom CSS Classes + Remove Image Class)
  • WPML Compatible
  • Responsive
  • Priority Support

Awesome Woo(Commerce) Products for Divi Plugin

Cost – $24
Awesome Woo Products video overview (by the maker of the plugin)

Plugin Developer – Indikator Design

Notes – Very responsive to comments on YouTube in my experience.
Professional first impressions – Plugin looks solid. Find their demo designs a bit basic, but suspect this could be a powerful plugin. Videos have voice overs or just music at times.

Divi Commerce Plugin (WooCommerce for Divi Themes)

COST $20 – $10 ON SALE

Looks solid, we have not had the opportunity to experiment or test this one yet! (on our list to try)

Plugin Developer

BoltThemes

WP All Import with WooCommerce Addon

The WP All Import add on for WooCommerce when used with Divi, Divi’s WooCommerce Builder, Divi’s new theme builder and (most importantly) Divi’s Dynamic Content options can provide some amazing potential to manage lots of products and pages.

Here’s a quick demo of just the WP All Import Woo Add on (its not inexpensive but for the right project can save hundreds of hours of labor costs).
This will cost either $139 for Woocommerce pro add on with WP All Import or you might go with the Elite Bundle that also includes Advanced Custom Fields too!

If you are interested in hiring us to do this for you, we have had a license we develop with since 2015.

Divi Theme Menu Tips

Easy Tutorials for Divi Theme Menu Customization Awesomeness

  1. Divi Plugin Highlight – Mobile Menu Customizer – “look at Mobile Menu Customizer from Divicio.us and see what it can do and the effect it would have on your website’s loading time.”

  2. HOW TO USE THE TABS MODULE FOR CONTENT NAVIGATION – 3 Layouts in this tutorial “using the tabs as a kind of menu to switch between content within each tab. You can add anything you like within the content area of each tab“

  3. Using anchor links to open accordions and tabs in Divi

    1. Using Anchor links to open tabs demo
  4. Creating Mega Menus in Divi (AWESOME AWESOME AWESOME EASY EASY EASY!)
  5. Adding Images to Your Divi Mega Menu
  6. How to bleed a background image behind the menu

Bottom Aligned Menu that sticks after scroll up

Free Tutorial

Divi Theme Super User Tips

Tutorials for Divi Theme Super Users to go Beyond with Divi Builder

  1. AC Shortcodes video tutorial Turn Divi Modules into Shortcodes (note there are other generic WP plugins that will turn pages or posts into short codes too if you want the entire page!<a class="vglnk" href="https://www.youtube.com/watch?v=uI1yPWV82pE[/embed" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>youtube</span><span>.</span><span>com</span><span>/</span><span>watch</span><span>?</span><span>v</span><span>=</span><span>uI1yPWV82pE</span><span>[/</span><span>embed</span></a>]</li>
    <li>How to add Divi Buttons with Shortcode in any module <a href="http://www.elegantenthusiast.com/button-module-shortcode/">Button Module Shortcode from Divi Enthusiast</a></li>
    <li><a href="https://www.creaweb2b.com/en/divi-module-inside-module-v2/">How to Put a Divi Builder/Theme Module inside another Module</a> (eg a Divi Map module inside a Divi Tab module)</li>
    <li><a href="https://divinotes.com/typing-text-effect-using-divi-code-modules/">TYPING TEXT EFFECT USING DIVI CODE MODULES</a></li>
    <li>
    <p class="edd_title page_title entry-title"><a href="https://elegantmarketplace.com/downloads/divi-timeline-module/">Plugin Divi Timeline Module $11 on Elegant Marketplace </a></p>
    </li>
    <li>Ever wanted to be able to schedule when a module appears? Or schedule when a module on a page should disappear? Check out the <a href="https://wordpress.org/plugins/tao-schedule-update/">Tao Scheduler</a> – free on repository</li>
    <li>Advanced Custom Fields and Divi Theme or Extra Theme <a href="https://elegantmarketplace.com/downloads/advanced-custom-fields-module/">$12 Plugin at Elegant MarketPlace</a><br /> <a class="vglnk" href="https://www.youtube.com/watch?v=gJHUUUKXp34[/embed" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>youtube</span><span>.</span><span>com</span><span>/</span><span>watch</span><span>?</span><span>v</span><span>=</span><span>gJHUUUKXp34</span><span>[/</span><span>embed</span></a>]</li>
    <li>Using WPML (translate to foreign language) with Divi Theme – <a href="https://wpml.org/documentation/theme-compatibility/divi-builder/">Guide from WPML</a> to use <a href="https://wpml.org/purchase/">License start at $29 at wpml.org</a><br /> <a class="vglnk" href="https://www.youtube.com/watch?v=HLquvOp3KeU[/embed" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>youtube</span><span>.</span><span>com</span><span>/</span><span>watch</span><span>?</span><span>v</span><span>=</span><span>HLquvOp3KeU</span><span>[/</span><span>embed</span></a>]</li>
    <li>Translate WordPress with GTranslate also <a href="https://wordpress.org/plugins/gtranslate/">provides a great plugin</a><br /> <a class="vglnk" href="https://wordpress.org/plugins/gtranslate/[/embed" rel="nofollow"><span>https</span><span>://</span><span>wordpress</span><span>.</span><span>org</span><span>/</span><span>plugins</span><span>/</span><span>gtranslate</span><span>/[/</span><span>embed</span></a>]</li>
    <li>How to remove a 'jumping' header effect as a Divi page loads<br /> <a class="vglnk" href="https://www.youtube.com/watch?v=mu2BqwIjt7w[/embed" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>youtube</span><span>.</span><span>com</span><span>/</span><span>watch</span><span>?</span><span>v</span><span>=</span><span>mu2BqwIjt7w</span><span>[/</span><span>embed</span></a>]</li>
    </ol>
<h2>Gravity Forms in Divi Builder Tips</h2>
<h3>Essential Tutorials to Style or work with Gravity Forms in Divi Theme</h3>
<p>First, if you do not already use Gravity Forms. I highly recommend it and <a href="https://softduit.com/gravity-forms-over-40-plugins-and-add-ons-to-put-gravity-forms-on-steroids/">have for years</a>. To <a href="https://rocketgenius.pxf.io/c/35811/445235/7938">get Gravity Forms</a>, you can buy your own license (renews yearly) or you can hire us as your Developer to install Gravity Forms and/or setup forms or teach you how.</p>
<p>If you have <a href="http://redirect.viglink.com/?key=cc070f11c9513040621fe24bca09ba7d&u=http%3A%2F%2Fwww.gravityforms.com">Gravity Forms</a> …. continue… :)</p>
<p>Make your life easy and now install this plugin (free in WordPress repository and well maintained) -></p>
<h3 class="plugin-title"><a href="https://wordpress.org/plugins/surbma-divi-gravity-forms/">Surbma – Divi & Gravity Forms</a></h3>
<p>or get it on <a href="https://github.com/Surbma/surbma-divi-gravity-forms">Github</a></p>
<p>Want to code and style things yourself? Here's more guides and tutorials to do things manually.</p>
<ol>
<li>
<p class="et_large_header"><a href="https://www.elegantthemes.com/blog/divi-resources/how-to-style-gravity-forms-to-look-like-divi-bonus-looks">How to Style Gravity Forms to Look Like Divi (+ Bonus Looks!)</a></p>
</li>
</ol>
<h2>Speeding Up Divi Themes Tips, Best Practices and Notes</h2>
<p>First and foremost, the most important Divi Speedup Tip ever.  If your web hosting is not top of the line and top of the line for WordPress, then you will have to work ten times as hard to get good results.</p>
<p>We recommend <a href="http://wpthemespeed.com/wpts/wp-engine">WP Engine</a> or <a href="http://wpthemespeed.com/wpts/pressable">Pressable</a> for the best results with Divi Themes. And we recommend them in that order.  We can help you save money getting them if you need help. We also recommend using a free Cloudflare (domain level setup) with any host.</p>
<p>Here are some other resources that might help too!</p>
<ol>
<li>We use the <a href="https://redirect.viglink.com/?format=go&jsonp=vglnk_150505710968012&key=cc070f11c9513040621fe24bca09ba7d&libId=j7ew4wdp01011ko7000DAb1rh64gh&loc=https%3A%2F%2Fsoftduit.com%2Fadd-gtranslate-to-divi-theme-header-2-quick-ways%2F&v=1&out=https%3A%2F%2Fdivibooster.com%2F%3Fref%3D133&ref=https%3A%2F%2Fwww.google.com%2F&title=2%20Easy%20ways%20add%20GTranslate%20to%20Divi%20Theme%20%7C%20Softduit%20Media&txt=Booster">DiviBooster</a> on all Divi Theme setups. It's not as completely necessary as it used to be in the early days of Divi, but it still is super helpful for those things that just seem to be out of reach. Among other things they have a number of options to compress, cache and speed up or reverse these options in Divi. We can also install Divi Theme and Divi booster on a single site for a flat fee of $50.</li>
<li>Divi and Elegant Themes are working on new things all the time, including speeding up Divi Theme out of the box. see <a href="https://www.elegantthemes.com/blog/theme-releases/divi-performance-enhancement-introducing-static-css-file-generation-for-divi">Divi Performance Enhancement! Introducing Static CSS File Generation For Divi</a></li>
<li><a href="https://www.elegantthemes.com/blog/tips-tricks/how-to-add-lazy-loading-to-wordpress">5 Plugins for Using Lazy Load tools for images, javascript, youtube and more on Divi (blog article)</a></li>
</ol>
<h2>Divi Logo Customization tips</h2>
<ol>
<li><a href="https://redirect.viglink.com/?format=go&jsonp=vglnk_150505710968012&key=cc070f11c9513040621fe24bca09ba7d&libId=j7ew4wdp01011ko7000DAb1rh64gh&loc=https%3A%2F%2Fsoftduit.com%2Fadd-gtranslate-to-divi-theme-header-2-quick-ways%2F&v=1&out=https%3A%2F%2Fdivibooster.com%2F%3Fref%3D133&ref=https%3A%2F%2Fwww.google.com%2F&title=2%20Easy%20ways%20add%20GTranslate%20to%20Divi%20Theme%20%7C%20Softduit%20Media&txt=Booster">DiviBooster</a> offers a number of Logo customizations (we mentioned it in the speedup section as well)</li>
<li><a href="https://elegantmarketplace.com/downloads/divi-logo-manager/">Ultimate Control over your logos</a>
<ol>
<li>With Divi Logo Manager you can:
<ul>
<li>Set logos to display for different devices/screen sizes</li>
<li>Set different logos to display when scrolling</li>
<li>Override device/screen size & scroll logos to display on an individual page basis</li>
<li>Control the overhang of your logos via a simple control</li>
<li>Compatible with WooCommerce product pages</li>
</ul>
</li>
</ol>
</li>
</ol>
<h2>Divi Overlays Tips and Plugins</h2>
<ol>
<li>Add a Whole New Layer to Your Website With Divi Overlays – f<a href="https://divilife.com/divi-overlays/">rom Divi Life</a></li>
</ol>
<h2>Divi Child Themes & Divi Templates</h2>
<ol>
<li><a href="https://elegantmarketplace.com/downloads/category/divi-child-themes/">Elegant Market Place Child Themes</a></li>
<li>Create your own <a href="https://elegantmarketplace.com/child-theme-maker/">Child Theme</a> (quick few steps and you can download a free divi child theme for free)</li>
<li><a href="https://elegantmarketplace.com/downloads/category/layouts/">Elegant Market Place Templates</a></li>
<li><a href="https://divimonk.com/templates/">DiviMonk Templates and Conversion Pages for Divi Themes</a></li>
<li>Elegant Market Place – <a href="https://diviunited.com/">CLOUD – Save and pull Divi Library items to and from the cloud</a>
<ol>
<li>One time pricing <a href="https://diviunited.com/checkout/?add-to-cart=211302">$30 for just the plugin</a></li>
<li>Freelancer Monthly – <a href="https://diviunited.com/checkout/?add-to-cart=211745&variation_id=211749&attribute_membership-level=Freelancer%20Monthly">$10 – 10 new layouts per month </a></li>
<li>Agency Monthly – <a href="https://diviunited.com/checkout/?add-to-cart=211745&variation_id=211748&attribute_membership-level=Agency%20Monthly">$20 – 20 new layouts per month</a></li>
</ol>
</li>
<li><a href="https://www.diviguide.com"> DiviGuide Landing Page – $69 buy direct</a> or on  <a href="https://elegantmarketplace.com/downloads/divi-landing-a-bundle-of-26-layouts/">Elegant Marketplace</a></li>
<li><a href="https://creativechildthemes.com/converter-sales-page-divi/">Divi Converter Sales Page optimization $37</a></li>
<li>5 Examples of high converting landing pages built for Divi – <a href="https://www.elegantthemes.com/blog/divi-resources/high-conversion-landing-pages-built-using-divi">ET Blog</a></li>
<li><a href="https://divisqueeze.com">40 Conversion Optimized Landing Pages For Divi</a></li>
</ol>

Customizing Divi Audio Module or WordPress Playlist

Divi Custom Post Type Tools – Pods Injection for Divi

  • How to inject Divi Layouts using the popular custom Post Type PODS tool for WordPress – $10 Plugin

Tools for the Divi Feed and Excerpts

Divi working with Real Estate IDX plugins

iHomeFinder’s IDX plugin for Divi

https://www.ihomefinder.com/idx-plugin-for-wordpress/

Installing iHomeFinder – Optima Express IDX Plugin

 https://www.youtube.com/watch?v=A6HTora-M5I

IHomeFinder Plugin webinar

Pin It on Pinterest

Share This