These are a collection of my notes on how to use Divi to build websites.

General

• DIVI Changelog
  • Easy To Read Divi Changelog - Free Resource Pee-Aye Creative - On this page, you can view an easy-to-read version of the Divi Theme changelog!
  • Divi Changelog | Divi Notes - Full changelogs
  • Divi Changelog - Divi Changelogs & Updates - A comprehensive and easy-to-understand list of all Divi theme update changelogs.
• Fonts
  
  • How to add a Custom Font to your Divi website - Optimus Divi Modules - Divi now has now made it really easy to use custom fonts on your website – no code required! So make sure you’ve updated the to latest theme version and follow these instructions.
  • How to Globally Change the Website Font in Divi - Optimus Divi Modules - Globally change the body font, heading font, header navigation font and button font in Divi. Use the Divi Theme Customizer - no code needed!
  • How to add a Google Font to your Divi website - Optimus Divi Modules - Divi now has Google Fonts built in and you can choose from Google Fonts in your Theme Customizer. However this tutorial shows you the manual method that you needed to do in the past and might be useful if you want to add your own custom fonts.
• Anchor Links
  
  • 3 ways to use anchor links in Divi - Brand & Build - Anchor links are used to navigate to specific content on a page rather than simply between pages themselves, and mastering anchor links in Divi is actually very simple. In this tutorial, I'm going to show you three ways to use anchor links.
• Section Dividers
  • How to Recreate Elegant Theme's Section Divider Examples with Divi - YouTube
    • Section dividers are part of a long-awaited Divi update that changes the entire look and feel of any website. Within the Divi update announcement blog post, a ton of design examples we’re included and they simply blew us away.
    • To help you get started with these new section dividers, we’re going to show you how to recreate each one of these examples. Not only can you use them for your own website or next project, but they will also help you understand how section dividers within Divi work.
• Blogging and Blog Layouts
  
  • Divi Blog Post Template - Design your own Divi Blog Post Template - YouTube - In this tutorial, I am going to show you how to create a Divi Blog Post Template. This Blog Post Template is for videos blog posts, however, the principle can be applied to any post layout.
  • Create a Blog with the WordPress Divi Theme - YouTube - In this step-by-step video tutorial, I walk you through the process of using the basic blogging features included with WordPress and the Divi theme. You will need to own the Divi theme and have a basic understanding of how it works to be able to follow along with everything in this tutorial.
• Style or disable Bullet Points
  • Elegant Tweaks | Replacing bullet list squares and circles with arrows and symbols - This tutorial shows how to easily replace boring bullet list symbols with unique arrows, shapes and other symbols using ASCII character codes in your CSS.
  • How to How To Change Bullet Lists Into Checkmarks Or Other Icons In Divi | PEE-AYE - Here is a quick Divi tutorial showing you how to easily change bullet lists into checklists and other icons with a few simple CSS snippets.
• Remove grey line and sidebar
  • How To Remove Sidebars From Divi - Removing the sidebar from Divi’s default page template can easily be done when you are using the Divi Builder. However, since Divi’s default page templates (with the sidebar) still show on pages like 404’s and archives, you may want to take out the sidebar from your template altogether.
  • Removing the Divi Theme Dividing Line - Divi Booster - By default the Divi Theme displays a dividing line between the main content and the sidebar. It's possible to remove this dividing line using CSS, like so:
• Text
  • How to Wrap Text Around Images in Divi (3 ways) - Wrapping text around images is a common design technique most commonly found in print media like magazines and newspapers. But you can also find this being used on the web, especially for blog posts.
  • How to style specific sections of text - Tutorial for Divi | Divi Soup - There are a number of ways to style specific sections of text, today I am going to show you my preferred way using the 'mark' tag.
  • How to apply custom style to text links in Divi - Optimus Divi Modules - You can edit the colour of your text links in the Divi Theme Customizer. But what if you want more? The default link colour that you set might be generally great, but not work for every link. In addition, you may want to control more about the link style, but not have to touch any CSS. (Perhaps you want the old school look of the underlined text links.)
• Child Themes
  • How to Create a Divi Child Theme [Free Download] - Creating a Divi child theme is a great way to customize your website. This free download will show you how it's done!
  • Ultimate Guide to Creating a Divi Child Theme - Creating a Divi child theme allows you to add advanced customization to Divi without it being broken on future updates. Learn how here.
  • The Ultimate Divi Child Theme Guide for 2023 | Divi Life - This in-depth post is all about the Divi Child Theme! The Ultimate Guide for 2020 on what Divi Child Themes are, why and when to create them (and when not to create one), as well as how to create them, and where to find them. Plus download a free gorgeous child theme in the post!
• Coding
  • Adding PHP code to the Divi Theme - Divi Booster - Some of my fixes for the Divi theme require PHP code to be added to make the required change to the theme. This post briefly covers the various options and their various advantages.
  • Template Hooks
    • Divi Template Hooks | Elegant Themes Documentation - Learn about the hooks that are available in Divi's template files.
    • How to Use Divi’s Hooks - Helping you advance your Divi development career, read our latest post where we explain what Divi's hooks are and share how you can use them.
    • Using Divi Hooks with Conditional Logic ~ Divi Lover - Learn how to display different Divi layouts as your blog categories headers by editing your functions.php file!
    • Using Divi Template Hooks to Add Custom Footer Layout ~ Divi Lover - Learn how to use the new Divi 3.2 template hooks in your functions.php file to display any layout saved in the library before the standard Divi footer.
• Global Modules and Sections
  • The Power Of Divi's Global Modules And How To Use Them - The Divi team have added something even more special to the Divi Library called Global Library Items, and that’s where this story really begins. When an item is made “Global” within the library, it is mirrored across all of the pages you add it to. Whenever this global element is updated, the updates are automatically pushed to each instance of the global module! If you have a repeated module or section on your site, simply make it global.
  • Divi Global Modules, Rows & Sections | Elegant Themes Documentation - Create a library item that syncs between all of the pages you use it on.
  • Creating Global Sections in Divi - Optimus Divi Modules - You can create a global section in Divi by: A) Building it on a page – for the advantage of being able to preview as you go – and saving it to the Divi Library as a global section; OR B) Create it directly in the Divi Library.
• Custom Footer
  • How to create a custom Divi footer | Markhendriksen.com - In this tutorial, we are going to build a custom Divi footer. You can fully customize this footer in the visual builder.
  • Divi Builder Footer - How to create a footer in Divi visual builder - YouTube - how to create a footer in Divi visual builder. Divi Builder Footer. In this video, I will show you step by step how to design the Divi Builder Footer.
• Colour Schemes / Colour Replacement / Global Color System
  • How to Use Divi to Create Different Color Scheme Mockups of your Pages
    • Creating color scheme mockups for your clients is an important step in the web design process. Sometimes, the client may have a company brand colour palette already in place that you can use for the site. But a lot of times, you will need to offer a few suggested color schemes that you think will […]
    • Includes using 'Find and Replace' to update your page colours
  • Manage Your Entire Website's Color Scheme From Inside The Visual Builder - Today we are excited to release Global Colors for Divi, a new dynamic color system that allows you to create and control colors across your entire website. Now you can build your own dynamic color palette of global colors. When you change a global color, all elements using that color are updated. That means you can control your entire website’s color scheme from a single location while using the builder; adding and managing colors as you see fit.
  • Find & Replace color schemes in Divi layout packs • Divi Theme Layouts - speed up your development time building Divi websites with the Find & replace feature that will search for any options and replace in 1 click.
  • How to Use Divi to Create Different Color Scheme Mockups of your Pages - YouTube
    • Creating color scheme mockups for your clients is an important step in the web design process. With Divi, you can easily change the color scheme of any given page layout using design features like Find & Replace and Color suggestions within the visual builder. And you can also create multiple versions of a page (with different color schemes) for your client.
    • In this tutorial, I’m going to walk you through the process of using Divi to create new color scheme mockups for a home page. Hopefully, you will learn a few tricks along the way.
  • How To Quickly And Easily Change The Color Scheme In Divi - Tutorial by Pee-Aye Creative - In this tutorial, I'm going to  show you some of the built-in ways to quickly and easily change the color scheme of any Divi website!
  • Divi Feature Sneak Peek: Find & Replace - Find & Replace:A New Way to Make Page-Wide Changes–Instantly! Today we are excited to announce a new game-changing feature for Divi that we’re hard at work on. It’s called “Find & Replace” and it will allow you to make edits across your entire page, row, or section by finding and replacing one design setting with another.
  • Design Dozens Of Elements At Once And Transform Entire Pages In Seconds Using Find And Replace - Adjust Values Across Your Entire Page And Across All Modules Instantly! Find and replace is a really unique feature that allows you to quickly adjust the design of your entire page with a single click.
• Main Element - Change Hyperlink Colour
  • How to Customize Links in Divi By Changing Color and Effects - Learn how to create custom colored links in Divi for different colored backgrounds.
  • Hyperlink Color and Hover Color Change in Divi Using CSS - After using the Wordpress theme DIVI on a few websites now, we've had to delve into some simple CSS to achieve certain tweaks to get things to look how we
• Misc
  • How to Put a Widget into Divi Module - Divi Booster - You can use the Divi Sidebar Module to add widgets to the Divi Builder. This lets you position them on the page as though they were Divi modules. here's how to do it.
  • How to Hide the Header and Footer in Divi | MarkHendriksen.com - In this tutorial I will teach you how you can hide the header and footer in Divi. This is very easy and simple to do we just need a little bit of CSS.

Modules (Native)

• Accordion
  • Remove Spacing Between Accordion Items - Divi Booster - A question I get from time to time is how to remove the space between toggles in the Divi Theme's accordion module. Here's how to do it.
  • Make Divi Accordions Closed by Default - Divi Booster - The default behaviour of the Divi Theme's accordion module is to show the first item of the accordion as open. If you'd like to have all accordion items to start in the closed state by default, you can do so by adding the following jQuery code to Divi.
• Menu
  • Change the Divi Header Menu Link Hover Color - Divi Booster - A common question I get is how to change the hover / mouse over color of the main menu links in the Divi header. This post covers some of the options.
  • Change the Divi Active Menu Item Colour - Tutorial for Divi | Divi Soup - You can change the Divi active menu item colour using the theme customiser settings, however this sometimes doesn't work so here's how to set it with CSS.
• Mobile Menu
  • Change the mobile menu border in DIVI under the hamburger icon - Easily change the color of the mobile menu top border in DIVI. By default a blue line top border is shown and can be changed using some quick CSS.
  • Hamburger
    • Changing Your Hamburger Menu Colour in Divi WordPress - MRKWP - How can you manually control your Hamburger Menu Label in Divi? Using this free and simple snippet. Works with or without a child theme.
    • Styling The Divi Mobile Menu - Two Blue Toucans - CSS code for styling the Divi mobile menu. Make the menu sticky, style the border, change the item and hamburger color and make the background transparent.

    • /* Hamburger Styling */
      span.mobile_menu_bar:before {
        color:#ffffff;
        font-size: 50px;  
      }

• Blurb
  • The Divi Blurb Module | Elegant Themes Documentation - How to add, configure and customize the Divi blurb module.
  • Move the Divi Blurb Header Above The Image | Quiroz.co - Are you looking for a quick and easy way to swap the Divi Blurb Header and Image?
• Pricing Table
  • The Divi Pricing Tables Module | Elegant Themes Documentation - How to add, configure and customize the Divi pricing table module.
  • Hide Bullet Points on Divi Pricing Tables - Divi Booster - One of the Divi Theme's many modules is the pricing table module, which makes it easy to display the various purchase options for a product. By default, the features you add for each pricing option are listed along with a round bullet point. If you'd prefer not to have bullet points in the pricing table, there are several ways to remove them.
  • How To Style Divi Theme Pricing Table Modules - Divi Den - This easy to follow and free to use tutorial on How to Style Divi Theme Pricing Table Modules is designed to save you time and money. Learn quickly.
  • Equalize Pricing Tables Height | Elegant Themes Help Center - How to make the pricing table height the same.
• Sliders and Carousels (native)
  • The Divi Slider Module | Elegant Themes Documentation - How to add, configure and customize the Divi slider module.
  • Create a Fullwidth Image Slider using the Divi Slider Module | divi-sensei.com - Divi is a great theme, no doubt. But sometimes the standard modules are a little bit limited in the way how you can use them. In this tutorial, we will show you how to create a fullwidth image slider in Divi.
  • DIVI Slider TUTORIAL | How to style divi slider arrow - YouTube - DIVI Slider TUTORIAL :How to style divi slider arrow. If you looking for How to style divi slider arrow? Then This video tutorial for you.
  • Divi Quick Tip 11: How to Style Divi's Dot Navigation - YouTube - In this Divi Quick Tip we show you how to style the dot navigation on Divi pages and Divi sliders.
• Vertically align content
  • Vertically Center Any Content in Divi - Tutorial for Divi | Divi Soup - In this Divi Soup Quick Snack I'm going to show you how to vertically center any content without using padding, margin or media queries.
  • How to Vertically Align Content in Divi - The ability to vertically align content when building a site with Divi can be a convenient addition to your design tool belt. Sometimes a certain layout calls for content to be vertically aligned in different ways (centered, bottom, top). The most common need is to have your content vertically centered.
  • How to Vertically Align Content in Divi - JoshHall.co - In this tutorial, I show you How To Vertically Center Content in Divi. Ever tried "Equalize Column Heights" in Divi to no avail? Here's the solution!
  • Solved - Center text vertically | Divi.Help - This uses CSS Flex to solve the issue.
  • How to Vertically Align Content in Divi - JoshHall.co - In this tutorial, I show you How To Vertically Center Content in Divi. Ever tried "Equalize Column Heights" in Divi to no avail? Here's the solution!

Misc

Divi Plugins to look at

• Supreme Modules Lite – Divi Theme, Extra Theme and Divi Builder – WordPress plugin | WordPress.org - Divi Supreme lite plugin enhances the experience and features found on Divi and extend with custom creative modules to help you build amazing websites.
• A Surprising List of Free Divi Plugins and Their Features - Tutorial by Pee-Aye Creative - Here is a list of the best Divi plugins all found for FREE in the WordPress repository. Some of them may surprise you with their features!

Resource Sites

• Elegant Themes
  • Elegant Themes Blog | Best WordPress & Divi Resources - Find the best resources and tutorials for WordPress and Divi on the Elegant Themes blog.
  • Divi Resources Archives | Elegant Themes Blog
• Lists
  
  • GitHub - andyhqtran/divi-resources: A curated list of awesome Divi resources - A curated list of awesome Divi resources.
  • divi-resources/Divi 100 at master · andyhqtran/divi-resources · GitHub - Every single day, for 100 days in a row, we will be sharing a new and exciting free resource with the Divi community. These are links to all of the articles.
• Page Layouts
  • Best 124 Free Divi Layouts 2020 - Divi Theme Layouts - Best 121 Free Divi Layouts! Awesome list of divi layouts that have been designed and built to work with the Divi Theme. Great choice if you use one or all of these today. Responsive of course. Use as many times as you wish. Free training video included with support. Grab yours now.
• Footer Layouts
  • Free Divi Footer Layout Pack: 10 Unique Footer Designs to Give Your Site a Leg Up - Welcome to Day 28 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series! When it comes to designing websites, one of the most neglected aspects is the footer. […]
• Child Themes
  • 10 Best Free Divi Child Themes (Download Today) • Divi Cake - Many Divi designers provide free child themes that are great for just about any website. In this article we’ll take a look at 10 free child themes for Divi that you can download and start using today!
  • 7 Free Divi Child Themes to Kickstart Your Next Web Design Project - Save time and money on your next site build, use one of these free Divi child themes to kickstart your next Divi website design project.
• Tools
  • Divi and Extra Child Theme Generator Tool • Divi Cake - This free generator will create a custom child theme for your Divi or Extra website. Use This Free Tool to Create Your Own Divi or Extra Child Themes!
• Forums
  • Divi.Help - Free Divi Support Community Forum - Join us today for Free & get Free Divi support from our Divi community. If you wish to show us some support, check out our premium Divi child themes & plugins.