Divi Module development from start to finish

Course Curriculum

Chapter 1: Introduction

Lecture 1: About this chapter

Lecture 2: Find help when developing for Divi

Lecture 3: Get a IDE

Lecture 4: Setup a webserver and install WordPress

Lecture 5: Setup Divi

Lecture 6: Setup node, yarn and gettext

Lecture 7: How to deal with white screen / empty wp-config.php

Lecture 8: Create your first Divi extension

Lecture 9: Prepare your plugin for distribution

Chapter 2: UI Elements

Lecture 1: Tiny MCE Field

Lecture 2: Text Field

Lecture 3: Number Field

Lecture 4: Range Field

Lecture 5: Yes No Field

Lecture 6: Textarea Field

Lecture 7: Color Field

Lecture 8: Select Field

Lecture 9: Date Picker Field

Lecture 10: Upload Field

Lecture 11: Upload Gallery Field

Lecture 12: Multiple Buttons Field

Lecture 13: Multiple Checkboxes Field

Lecture 14: Categories Field

Lecture 15: Select Icon Field

Lecture 16: Options List Field

Lecture 17: Text Align Field

Lecture 18: Warning Field

Lecture 19: Custom Margin Field

Lecture 20: Composite Field

Lecture 21: Border Radius Field

Lecture 22: Select Animation Field

Lecture 23: Computed Field

Chapter 3: Advanced Settings

Lecture 1: Introduction to Advanced Fields

Lecture 2: Background Field

Lecture 3: Font Field

Lecture 4: Text Field

Lecture 5: Text Shadow Field

Lecture 6: Margin and Padding Fields

Lecture 7: Max Width Fields

Lecture 8: Button Fields

Lecture 9: Box Shadow Fields

Lecture 10: Border Fields

Lecture 11: Filters Fields

Lecture 12: Animation Fields

Lecture 13: Link Options

Chapter 4: General Divi related Funtions and Techniques

Lecture 1: Conditional Display Logic

Lecture 2: Conditional Display Logic in Parent Child Module

Lecture 3: Tabs and Toggles

Lecture 4: Parent-Child Modules

Lecture 5: Parent-Child Modules (Part 2)

Lecture 6: Add CSS to your Modules

Lecture 7: The %%order_class%% Selector

Lecture 8: Generate responsive CSS

Lecture 9: Enable Mobile Options on any Field

Lecture 10: Custom CSS Fields

Lecture 11: Making Ajax Calls from the React component

Lecture 12: Create a Ajax Base Component

Lecture 13: What is a option_category

Lecture 14: Providing Help for your Module

Lecture 15: The Accent Color

Lecture 16: ePanel Options

Lecture 17: Fullwidth Modules

Lecture 18: Visual Builder Defaults

Lecture 19: Pass Values From PHP To JS And Translate VB Defaults

Lecture 20: React Component Lifecycle

Lecture 21: Using 3rd Party jQuery Libraries in React

Lecture 22: Hover Option

Chapter 5: Case Study: Create a module from start to finish

Lecture 1: Introduction to the case study

Lecture 2: Planning the module

Lecture 3: Create a new module

Lecture 4: Add the settings fields

Lecture 5: Render the React module

Lecture 6: JavaScript in the React module

Lecture 7: Render the PHP module

Lecture 8: JavaScript in the PHP module

Chapter 6: Selling

Lecture 1: Where to sell?

Lecture 2: Elegant Marketplace Vendor Account

Lecture 3: Elegant Marketplace License and Update mechanism

Lecture 4: Divi Cake Vendor Account

Lecture 5: Plugin Update Checker

Lecture 6: WP Update Server

Lecture 7: Use the Plugin Update Checker

Lecture 8: Freemius

Lecture 9: Final Words