Divi Module development from start to finish

Make a living by developing modules for the worlds most popular premium WordPress theme

Created byJan Thielemann

Last updated 1/2021

English

What you'll learn

Build custom modules for the Divi theme
Earn money online from anywhere on the planet (semi-passive income)

Course content

6 sections • 84 lectures • 10h 48m total length

About this chapter0:16
What you will learn in this chapter.
Find help when developing for Divi0:44
Where to find help if your question is not answered in this course or in our Facebook group.
Get a IDE0:29
Which IDE I can recommend you to use for developing Divi modules, plugins and themes.
Setup a webserver and install WordPress2:49
How to setup a webserver to run WordPress locally on your computer.
Setup Divi0:47
How to install Divi on your local WordPress installation.
Setup node, yarn and gettext1:27
How to setup node, yarn and gettext. These are mandatory tools to create Divi extensions.
How to deal with white screen / empty wp-config.php1:40
Learn what to do when you find your WordPress installation showing a empty white screen.
Create your first Divi extension5:40
Learn how to create your first Divi extension using the create-divi-extension script and how to use yarn to make your new Divi module available in the Visual Builder.
Prepare your plugin for distribution7:14
Learn how to prepare your module using the yarn build command and zip it so you can distribute it.

Tiny MCE Field3:08
Learn how to use the tinymce field and what its limits are.
Text Field1:59
Learn how to use text fields.
Number Field8:20
Learn how to use the number field and for what to keep an eye out.
Range Field6:33
Learn how to use the range field.
Yes No Field2:11
Learn how to use the yes-no switch field.
Textarea Field6:54
Learn how to use the textarea field
Color Field2:46
Learn how to use the color field.
Select Field1:24
Learn how to use the select field.
Date Picker Field1:34
Learn how to use the date picker field.
Upload Field3:09
Learn how to use the upload field.
Upload Gallery Field2:42
Learn how to use the upload gallery field.
Multiple Buttons Field5:17
Learn how to use the multiple buttons field.
Multiple Checkboxes Field2:27
Learn how to use the multiple checkboxes field.
Categories Field5:51
Learn how to use the categories field.
Select Icon Field4:06
Learn how to use the select icon field.
Options List Field2:49
Learn how to use the options list field.
In the more recent Divi versions, instead of "options_list", use "sortable_list" as the type.
Text Align Field3:57
Learn how to use the text align field.
Warning Field2:28
Learn how to use the warning field.
Custom Margin Field9:09
Learn how to use the custom margin field.
Composite Field4:44
Learn how to use the composite field to group multiple fields into different tabs. The look you will get is similar to having subtoggles in your toggle but you can even have composite fields in a subtoggle, which gives you even more control over how to present settings to your users.
Border Radius Field8:58
Learn how to use the border radius fields
Select Animation Field2:17
Learn how to use the select_animation field.
Computed Field17:17
Learn how to use the computed field.

Introduction to Advanced Fields0:22
Learn what chapter 3 is about.
Background Field7:45
Learn how to use and tweak the advanced background field.
Font Field19:08
Lear how to use the advanced font fields.
Text Field11:02
Learn how to use the advanced text field.
Text Shadow Field4:31
Learn how to use the advanced text shadow field.
Margin and Padding Fields9:03
Learn how to use and tweak the advanced margin and padding fields.
Max Width Fields7:01
Learn how to use and tweak the advanced max width and module alignment fields
Button Fields14:07
Learn how to use the advanced buttons fields
Box Shadow Fields8:52
Learn how to use the advanced box shadow fields.
Border Fields6:15
Learn how to use the advanced border fields
Filters Fields8:45
Learn how to use the advanced filters fields
Animation Fields3:38
Learn how to use the advanced animation fields
Link Options5:01
Learn how to use the link options

Conditional Display Logic9:40
Conditional Display Logic in Parent Child Module2:29
Learn how to conditionally display settings in a child module based on settings in the parent module.
Tabs and Toggles11:45
Learn how to add your own tabs and toggles to the module settings pannel.
Parent-Child Modules36:49
Learn how to create parent-child relationships between two modules.
Parent-Child Modules (Part 2)3:50
Learn about the latest techniques used in parent-child modules.
Add CSS to your Modules10:30
Learn how to add CSS to your modules.
The %%order_class%% Selector6:42
Learn how to improve your inline CSS by targeting selectors in the current module using the %%order_class%% selector.
Generate responsive CSS15:29
Enable Mobile Options on any Field10:32
Learn how to enable responsive options on various fields.
Custom CSS Fields7:09
Making Ajax Calls from the React component31:17
Create a Ajax Base Component10:35
What is a option_category5:58
In this video you will learn why you should set the option_category option on your settings fields, how option categories are used in Divi and which one you can use in your own modules.
Providing Help for your Module1:20
The Accent Color7:22
Learn how to use Divis accent color in your own modules.
ePanel Options31:33
Learn how to add settings to the ePanel
Fullwidth Modules1:16
Learn how to create modules which can be used inside fullwidth sections.
Visual Builder Defaults6:11
Learn how to set defaults when adding new modules in the Visual Builder. Take for example Divis Blurb module. Adding a new module in the VB will set a default image, title and content. These defaults can overwrite the defaults set in PHP and are only set when adding a new module. They are ideal for giving your users an idea of how your module can look.
Pass Values From PHP To JS And Translate VB Defaults12:40
Learn how to pass values from PHP to JS and to translate your VB defaults
React Component Lifecycle8:19
Get to know the lifecycle React Components undergo in Divi.
Using 3rd Party jQuery Libraries in React20:25
Learn how to utilize third party jQuery (or JavaScript) libraries in your React Component.
Hover Option16:50
Learn how to add hover options to your settings.

Where to sell?5:22
In this lecture you will learn about the different options where you can sell your plugins.
Elegant Marketplace
Divi Cake
Codecanyon
Your own website
WordPress Plugin Directory
Elegant Marketplace Vendor Account13:47
Elegant Marketplace License and Update mechanism15:19
Divi Cake Vendor Account7:23
Plugin Update Checker1:49
WP Update Server1:43
Use the Plugin Update Checker8:17
Freemius15:41
Final Words0:33

Requirements

You should have a basic understanding of PHP, JavaScript or any other programming language
You should have a basic understanding of HTML or another markup language
You should have a basic understanding of CSS

Description

In this course you will learn every secret of how to become a successful Divi Module developer. In simple lessons you will explore every detail to become a professional. Starting with the simplest project of all, a hello world module, the course will go over all the possibilities you have to create great Modules for the Divi Builder. I share all my knowledge and all the secrets which I taught myself over the last few month.

But not only that, you will also learn how to successfully sell the modules you create to earn real money. Whether if you are a student who just wants to make some additional money in your free time, if you want to improve your own Divi installation, if you are a web developer whose clients use Divi and needs customisations or if you want to become a full-time developer, making a living from selling your extension - this course is for everyone who wants to start improving the worlds most popular premium WordPress theme.

Who this course is for:

Divi enthusiasts
People who want to earning money online
Programmers on the beginner and advanced level who want to start earning money with their skills
Programmers who want to build new income streams

Divi Module development from start to finish

What you'll learn

Explore related topics

Course content

Introduction9 lectures • 21min

UI Elements23 lectures • 1hr 50min

Advanced Settings13 lectures • 1hr 46min

General Divi related Funtions and Techniques22 lectures • 4hr 29min

Case Study: Create a module from start to finish8 lectures • 1hr 13min

Selling9 lectures • 1hr 10min

Requirements

Description

Who this course is for: