Divi Child Theme Setup Tips

Over 56 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!!!

Divi Child Theme Setup

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

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

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!
  2. How to Put a Divi Builder/Theme Module inside another Module (eg a Divi Map module inside a Divi Tab module)
  3. TYPING TEXT EFFECT USING DIVI CODE MODULES
  4. Plugin Divi Timeline Module $11 on Elegant Marketplace 

  5. Ever wanted to be able to schedule when a module appears? Or schedule when a module on a page should disappear? Check out the Tao Scheduler – free on repository
  6. Advanced Custom Fields and Divi Theme or Extra Theme $12 Plugin at Elegant MarketPlace
  7. Using WPML (translate to foreign language) with Divi Theme – Guide from WPML to use License start at $29 at wpml.org
  8. Translate WordPress with GTranslate also provides a great plugin
    Translate WordPress with GTranslate
  9. How to remove a ‘jumping’ header effect as a Divi page loads

Gravity Forms in Divi Builder Tips

Essential Tutorials to Style or work with Gravity Forms in Divi Theme

First, if you do not already use Gravity Forms. I highly recommend it and have for years. To get Gravity Forms, you can buy your own license (renews yearly) or you can hire us as your Developer to install Gravity Forms (even if that is the only job we do for you) Flat fee of $45.

If you have Gravity Forms …. continue… 🙂

Make your life easy and now install this plugin (free in WordPress repository and well maintained) ->

Surbma – Divi & Gravity Forms

or get it on Github

Want to code and style things yourself? Here’s more guides and tutorials to do things manually.

  1. How to Style Gravity Forms to Look Like Divi (+ Bonus Looks!)

Speeding Up Divi Themes Tips, Best Practices and Notes

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.

We recommend WP Engine or Pressable 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.

Here are some other resources that might help too!

  1. We use the DiviBooster 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.
  2. Divi and Elegant Themes are working on new things all the time, including speeding up Divi Theme out of the box. see Divi Performance Enhancement! Introducing Static CSS File Generation For Divi
  3. 5 Plugins for Using Lazy Load tools for images, javascript, youtube and more on Divi (blog article)

Divi Logo Customization tips

  1. DiviBooster offers a number of Logo customizations (we mentioned it in the speedup section as well)
  2. Ultimate Control over your logos
    1. With Divi Logo Manager you can:
      • Set logos to display for different devices/screen sizes
      • Set different logos to display when scrolling
      • Override device/screen size & scroll logos to display on an individual page basis
      • Control the overhang of your logos via a simple control
      • Compatible with WooCommerce product pages

Divi Overlays Tips and Plugins

  1. Add a Whole New Layer to Your Website With Divi Overlays – from Divi Life

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

Comments

Responses...