Divi Module Hooks

Divi Module Hooks

Divi Module Hooks
Learn about the hooks that are available in Divi』s module files.

Contact Form
et_pb_contact_form_submit
Fires after contact form is submitted. This action can be used to trigger follow up actions after the contact form is submitted. Use $et_contact_error variable to check whether there is an error on the form entry submit process or not.
Type: Action
Since: 4.13.1

Param
Type
Description

$processed_fields_values
array
Processed fields values

$et_contact_error
array
Whether there is an error on the form entry submit process or not

$contact_form_info
array
Additional contact form info

Divi Development Environment Setup

Divi Development Environment Setup

Divi Development Environment Setup
Learn how to get a local development environment up and running.

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
Before you can create Divi Extensions you need to ensure that you have the proper environment setup on your local system. The requirements are:

A fully functional installation of WordPress
The latest LTS version of NodeJS
The latest version of Yarn (optional, but preferred)
The latest version of gettext (needed to process translations when creating releases)
The latest version of Divi

There are several different options you can use to get a local development environment up and running. A few examples are:

Docker
Vagrant
Local by Flywheel
XAMPP

In this tutorial we』ll be using Docker with the official docker image for Divi Development.
Install Docker
The most complicated part of installing docker is figuring out which version you need to install. Use the following tables to locate the correct version for your operating system and then download and run the installer for that version.
Mac

OS Version
Installer
Detailed Instructions
Complete Documentation

OS X 10.11+
Docker for Mac
Instructions
Documentation

OS X 10.8-10.10
Docker Toolbox
Instructions
Documentation

Windows

OS Version
Installer
Detailed Instructions
Complete Documentation

10 Pro+
Docker for Windows
Instructions
Documentation

10 Home
Docker Toolbox
Instructions
Documentation

Linux

OS Version
Detailed Instructions

Ubuntu 16.04+
Instructions

Fedora 25+
Instructions

Using Linux? Follow the instructions linked in the table as there is no Docker installer for Linux.
Start Docker Containers
The Divi Development Environment consists of two docker containers, one for the database and one for everything else. Starting/Stopping multiple containers for a single environment can be tedious. Luckily, we won』t have to worry about that because we』re going to use the docker-compose command.
Docker Compose is a tool for defining and running multi-container Docker applications.
Go ahead and create a new directory for your development workspace. The directory should be located somewhere below one of the following paths (depending on your OS):
Default Shared Directories
Mac: /Users, /Volumes, /private, & /tmp
Windows: C:Users
Linux: /home
Now, create a file named docker-compose.yml inside your workspace directory as shown below:

version: '3.3'

services:

mariadb:

image: 'mariadb:10.2.14'

environment:

MYSQL_ROOT_PASSWORD: password

MYSQL_DATABASE: wordpress

DATADIR: /data

restart: on-failure

volumes:

- 'database:/data'

network_mode: 'service:wordpress'

wordpress:

image: 'elegantthemes/divi-dev'

hostname: divi-dev

volumes:

- '${PWD}:/workspace/wordpress'

ports:

- '80:80' # nginx

- '3306:3306' # mariadb

- '3000:3000' # webpack hmr

volumes:

database: {}

view raw

docker-compose.yml

hosted with by GitHub

Using Windows? You need to replace ${PWD} in the compose file with the full path to the directory where the compose file is located.
Run WordPress Container Setup Script
Open a terminal window in your workspace directory and run the following commands:
docker-compose up -d
docker-compose exec -u 1000 wordpress divi-dev setup
This could take a few minutes (or more) depending on your internet connection speed. When it』s done you should see the following:
Creating network "divi-dev_default" with the default driver
Creating divi-dev_wordpress_1 ... done
Creating divi-dev_mariadb_1 ... done
Downloading WordPress 4.9.5 (en_US)...
md5 hash verified: f009061b9d24854bfdc999c7fbeb7579
Success: WordPress downloaded.
Initializing database... ████████████████████| 100%
Success: Generated 'wp-config.php' file.
Success: WordPress installed successfully.
Success: Rewrite rules flushed.
Success: Rewrite structure set.

Setup Complete! Here's how you can access WordPress:

URL: http://local.divi-dev.site
Username: divi-dev
Password: password

Final Step: Access WordPress Dashboard And Install Divi
Divi isn』t included in the container. The final step is to install it via the WordPress Dashboard.
Commands Quick Reference
You can use the following commands to manage your containers. Be sure to run them from inside your workspace directory:
Enter Container (get command prompt inside container)
docker-compose exec -u 1000 wordpress /bin/bash
Exit Container (return to your system』s command prompt)
exit
Stop Running Containers
docker-compose stop
Start Stopped Containers
docker-compose start
Remove Containers (WordPress database will be deleted!)
docker-compose down
Start New Containers
docker-compose up -d
docker-compose exec -u 1000 wordpress divi-dev setup

Divi Builder Hooks

Divi Builder Hooks

Divi Builder Hooks
Learn about the hooks that are available in Divi Builder features.

Conditional Display
et_module_process_display_conditions
Filters every rendered module output for processing 「Display Conditions」 option group.
Type: Filter
Since: 4.13.1

Param
Type
Description

$output
string
HTML output of the rendered module.

$render_method
string
The render method used to render the module.

$this
ET_Builder_Element
The current instance of ET_Builder_Element.

et_is_display_conditions_option_visible
Filters 「Display Conditions」 option visibility to determine whether to add its field to the Visual Builder or not. Useful for displaying/hiding the option on the Visual Builder.
Type: Filter
Since: 4.13.1

Param
Type
Description

$default_status
boolean
True to make the option visible on VB, False to make it hidden.

et_is_display_conditions_functionality_enabled
Filters 「Display Conditions」 functionality to determine whether to enable or disable the functionality or not. Useful for disabling/enabling 「Display Condition」 feature site-wide.
Type: Filter
Since: 4.13.1

Param
Type
Description

$default_status
boolean
True to enable the functionality, False to disable it.

How To Create A Divi Extension

How To Create A Divi Extension

How To Create A Divi Extension
Learn how to develop extensions for Divi

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
What』s A Divi Extension?
A Divi Extension is essentially a WordPress plugin that customizes Divi in some way. For example, an extension can add custom modules to the Divi Builder or add new options to the theme — the possibilities are almost endless! All Divi Extensions consist of some PHP code. Depending on their purpose, they can also consist of some JavaScript, HTML, and CSS. In this tutorial you』ll learn how to get started on a new Divi Extension.
Development Environment
Before you can create a Divi Extension you need to ensure that you have the proper environment setup on your local system. The requirements are:

A fully functional installation of WordPress
The latest LTS version of NodeJS
The latest version of Yarn (optional, but preferred)
The latest version of Divi

If you don』t have a development environment setup, there』s a tutorial for that!
Create Divi Extension
Create Divi Extension is a command line utility that streamlines the process of creating and maintaining Divi Extensions. Let』s create a new Divi Extension inside our WordPress plugins directory. First, you need to open a terminal and change to your WordPress plugins directory. If you followed our tutorial to setup your development environment you should already have a command prompt inside your docker container. If so, you can change to the plugins directory using the following command:
cd wp-content/plugins

Now, run the this command to create your extension:
npx create-divi-extension my-extension

You』ll be prompted to provide some details about your extension and then you』ll be able to find it inside your WordPress plugins directory!

Inside your new extension』s directory you』ll find an initial project structure that provides a minimal, fully functional Divi Extension waiting for you to make it your own

What』s Next?
Now that you』ve created your Divi Extension, you』ll probably want to learn How To Create A Divi Builder Module.

Divi Builder JavaScript API

Divi Builder JavaScript API

Divi Builder JavaScript API
The builder』s JavaScript API definition.

window : Window
Global window object.
Kind: global typedef
Emits: event:et_builder_api_ready
ETBuilderModule : React.Component | object
Custom module for the Divi Builder.
Kind: global typedef
Static Properties (Required)

Name
Type
Description

slug
string
The module』s slug as defined in it』s PHP class

 
Methods (Required)

Name
Type
Description

render
function

API
Divi Builder API object passed to registered callbacks of the event:et_builder_api_ready event.
Kind: global constant

API

.Modules

.register(modules)

.Utils

._()
.classnames() ⇒ string
.decodeOptionListValue(encoded_value) ⇒ object
.fontnameToClass(font_name) ⇒ string
.linkRel(saved_value) ⇒ string
.maybeLoadFont(font_name)
.processFontIcon(icon, is_down_icon) ⇒ string
.setElementFont(font_data, use_important, default_values) ⇒ string

.isRegistered(slug) ⇒ boolean
.registerModules(modules)

 
API.Modules
Manage custom modules.
Kind: static property of API
Since: 3.1
Modules.register(modules)
Register one or more custom modules.
Kind: static method of Modules
Since: 3.1

Param
Type
Description

modules
Array.
Modules to register.

 
API.Utils
Useful functions
Kind: static property of API
Since: 3.1

.Utils

._()
.classnames() ⇒ string
.decodeOptionListValue(encoded_value) ⇒ object
.fontnameToClass(font_name) ⇒ string
.linkRel(saved_value) ⇒ string
.maybeLoadFont(font_name)
.processFontIcon(icon, is_down_icon) ⇒ string
.setElementFont(font_data, use_important, default_values) ⇒ string

 
Utils._()
Lodash – A modern JavaScript utility library delivering modularity, performance & extras.
Kind: static method of Utils
Link: https://github.com/lodash/lodash
License: MIT
Copyright: JS Foundation and other contributors https://js.foundation/
Utils.classnames() ⇒ string
Generates className value based on the args provided. Takes any number of args which can be a string or an object. The argument foo is short for { foo: true }. If the value associated with a given key is falsy, the key won』t be included in the output.
Kind: static method of Utils
Link: https://github.com/JedWatson/classnames
License: MIT
Copyright: 2017 Jed Watson

Type

string | Object.

Examples:
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
 
Utils.decodeOptionListValue(encoded_value) ⇒ object
Decode string value of option_list module setting field type.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

encoded_value
string
Value to be decoded

 
Utils.fontnameToClass(font_name) ⇒ string
Returns CSS class for a google font.
Kind: static method of Utils
Since??:

Param
Type
Description

font_name
string
Font name for which to return a CSS class

 
Utils.linkRel(saved_value) ⇒ string
Generate link rel HTML attribute value based on a value saved in a module』s settings.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

saved_value
string
Value saved in module settings

 
Utils.maybeLoadFont(font_name)
Loads a Google Font if it hasn』t already been loaded.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

font_name
string
The name of the font to load

 
Utils.processFontIcon(icon, is_down_icon) ⇒ string
Generates HTML for a saved font-based icon value.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

icon
string
The saved icon value

is_down_icon
boolean
Whether or not the icon is one of the down arrow icons

 
Utils.setElementFont(font_data, use_important, default_values) ⇒ string
Generates font related CSS style properties from font data saved in a module』s settings.
Kind: static method of Utils
Since: 3.1

Param
Type
Description

font_data
string
Font data saved in module settings

use_important
boolean
Whether or not to use !important

default_values
object
Mapping of default values for the font settings

 
API.isRegistered(slug) ⇒ boolean
Whether or not a component is registered.
Kind: static method of API
Since: 3.1

Param
Type
Description

slug
string
The component』s slug

 
API.registerModules(modules)
Convenience wrapper for register
Kind: static method of API
Since: 3.1

Param
Type
Description

modules
Array.
Modules to register.

Using The Bloom Widget Opt-In

Using The Bloom Widget Opt-In

Using The Bloom Widget Opt-In
Widgets allow you to easily place an opt-in form in your website』s sidebar or footer area.

What Is The Widget Opt-In?
When you create a widget opt-in, Bloom will turn your newly created opt-in form into a widget that can be placed inside any widget-ready area on your website, such as your footer or sidebar. Simply place the 「Bloom」 widget into your widget area and select the opt-in widget that you would like to display from the dropdown menu.

Creating The Widget
To create an opt-in form, click on the Bloom > Email Optins link in your WordPress Dashboard, or click on the 「Home」 icon within the Bloom settings page to open up the main settings tab. Here you can manage the opt-ins that you have created in the past, as well as create new opt-ins. To create your first opt-in form, click the 「New Optin」 button. This will reveal the 6 opt-in types that Bloom supports.

Click on the 「Widget」 icon to begin building your new opt-in. Once you select your opt-in type, you will be taken to the opt-in creation screen where you can adjust the various opt-in settings. Building your opt-in is broken into three steps. During these three steps you can 1) Assign an email account to your opt-in, 2) customize the design of your opt-in, and 3) add the widget to your website.

Setup
Within the Setup tab of the opt-in creation process, you can give your opt-in a name (for future reference) and assign an email account to the opt-in form. Before you can start collecting email addresses, you first need to connect Bloom to your email marketing service, such as MailChimp or Constant Contact. If you have not already added an account to Bloom, you can do so here. If you have already added an account to Bloom, then you can select the account and the associate email list from within the Form Integration settings on this page. For detailed information about how to add accounts to bloom, as well as a comprehensive list of all account types support by Bloom, please refer to our in-depth accounts tutorial.
Design
Within the Design tab, you can customize the appearance of your opt-in form. Bloom comes with tons of design settings, such as background color, font color, button color, form color, image and form location, border styles and much more. Within this tab you can adjust all of these settings, as well as preview your form by clicking the Preview button. For an comprehensive look at the Bloom design settings, please refer to our in-depth design tutorial.
Using these settings you can create a wide range of opt-in boxes, and have them appear on different areas of your website (or your entire website if you so choose).

Adding Your New Widget To Your Website
Once you have created and saved your new widget opt-in from within the Bloom settings panel, it』s time to add that widget to your website. You can manage your widgets from within the Appearances > Widget menu in the WordPress Dashboard. Once you navigate to this page, you will notice a list of your widget-ready areas on the right, and a list of your available widgets on the left. These widgets can be dragged into any of the available areas on the right.

Look for the 「Bloom」 widget on the left, and drag it over to the widget area that you would like it to appear in. Once added, select your newly-created opt-in from the dropdown menu. You』re done! The opt-in form has now been added to your sidebar.

How To Update Your Bloom Plugin

How To Update Your Bloom Plugin

How To Update Your Bloom Plugin
Using our Elegant Updater Plugin, you can update Bloom right from your dashboard.

Updating Your Themes & Plugins
Elegant Themes products can be updated normally through the WordPress update system. When new versions of our themes or plugins become available, update notifications will appear in the Dashboard > Updates page of your WordPress Dashboard, as well as within the Themes & Plugins manager. It is important to always keep your themes and plugins updated to ensure compatibility with the latest version of WordPress, to keep your website secure, and to take advantage of the latest and greatest features!
Before you can update, you must first authenticate your Elegant Themes subscription by inputting your Username and API Key into the Updates tab of your theme or plugin settings. Only members with active Elegant Themes accounts have access to the latest versions of our products. Your Username is the username you use when logging in to ElegantThemes.com, and your API Key can be found by logging into your Elegant Themes account and clicking on the Account > Your API Key link. Once you have authenticated your account, you can click the update link when you receive an update notification to automatically update your theme or plugin
Update Notifications
When new updates become available for any of our themes or plugins, a notification will appear in the Dashboard > Updates page of your website』s WordPress Dashboard.

Authenticating Your Membership
Before you can update your theme or plugin, you must first authenticate your Elegant Themes subscription. Only members with active accounts have access to product updates. To authenticate your account, you will be asked to input two pieces of information into your theme or plugin settings panel: 1) Your Username and 2) Your API Key. Your username is the same username you use when logging in to your ElegantThemes.com account, and your API Key is a unique identifier used to authenticate your account that is only available to you when logging in. To locate your API Key, log in to the Elegant Themes members area and click on the Account > Your API Key link. Copy the API Key displayed on the page. You will by pasting this key into your Theme or Plugin options page.

Once you have copied your API Key, you will need to use it to authenticate your account by pasting it into your theme or plugin options page. Log in to your website』s WordPress Dashboard and navigate to your theme or plugin options page. For Divi, this can be found by clicking the Bloom link and then clicking the Lock Icon at the top of the settings interface.

Once you have loaded your theme or plugin options page, look for the Updates tab. Click the Updates tab to reveal the Username and API Key fields. Type your username into the Username field and paste the API Key you copied earlier into the API Key field. You should confirm that you have not copied any extra white spaces by mistake. Click save to complete the account authorization.

Once you have entered your credentials, you are now ready to update your theme. Click on the Dashboard > Updates tab and update your theme or plugin normally using the WordPress update interface. If you do not see any update notifications, or you receive an authentication error when updating, try waiting a bit and then check back later. Sometimes WordPress will cache update notifications and it can take some time for them to appear correctly.

How To Use Triggers In Bloom

How To Use Triggers In Bloom

How To Use Triggers In Bloom
Triggers can be used to greatly increase the effectiveness of your pop-up and fly-in opt-ins.

Triggers Control How And Where Pop-Ups & Fly-Ins Appear
Triggers give you control over how your pop-ups and fly-ins are displayed. Namely, they control when they are triggered based on various user interactions. These triggers can be used by themselves, or in combination with other triggers, to yield different results. These triggers can thus be tailored to your specific content, or your specific social sharing goals. Certain triggers are more general and heavy handed, while other triggers are more subtle and target a specific subset of users. Be sure to watch the video for a detailed explanation of how these triggers can be used.
Trigger Settings
Trigger After Time Delay
If Automatic PopUps are enabled, this setting will appear, allowing you to specify the timed delay (in seconds) of your social po-pup.
Trigger After Inactivity
This will cause the pop-up to appear once the user has been inactive for a certain period of time. If the user has left their computer, or left the tab after reading your post, try reminding them to subscribe when they get back!
Trigger at Bottom of Post
Just as a reader reaches the end of your page or post content is a perfect time to offer them a way to subscribe to your content. Enabling this pop-up trigger will auto detect the end of your content and do just that.
Trigger After Scrolling
This will trigger the pop-up after the visitor has scrolled a certain percentage down the page. Depending on the size of your page, and the content within it, you can have the pop-up trigger at specific points within the reading. Depending on the situation, having the pop-up or fly-in trigger at certain percentages may be much more effective than a timing delay.
Trigger After Commenting
This is a great way to target your most engaged visitors. When this is enabled, your visitor will be greeted with a pop-up or fly-in after they have posted a comment on your website.
Trigger After Purchasing
This is another great way to target your most engaged visitors. When this is enabled, your customers will be asked to subscribe to your website after they have successfully purchased a product using WooCommerce.
Triggers NOTE
No matter how many triggers you have selected above, Bloom will only use whichever trigger occurs first so that your users are not overwhelmed with pop-ups if you have multiple triggers enabled.

How To Perform Split Testing

How To Perform Split Testing

How To Perform Split Testing
Split tests are the key to optimizing your forms, making it easy to see which variation is most effective.

What Is Split Testing (Also Known As A/B Testing)
Split testing is an amazing feature that can help you greatly improve the effectiveness of your opt-in forms. Split tests can be created for any of the opt-in forms that you have built with Bloom. So what is a Split Test? Split testing is a way to compare the performance of multiple variations of the same opt-in form to help you figure out which one is the most effective. Using the Bloom Split Testing system, you can create different variations of an opt-in to test different headlines, colors, and offers. These different variations will be shown to different visitors, and their conversion rate will be compared to each other. Over time you can see which one is resulting in the most sign-ups, and you can pick the highest performing variation to be your main version.

Creating Your First Split Test
After you have created an opt-in, you can begin running split tests. Navigate to the Bloom > Email Optins tab in the WordPress Dashboard to display a list of your current opt-ins. You will notice that each of your active opt-ins have several icons to the right of the opt-in name. The first one is the 「split testing」 icon. Click this icon to initiate a split test.

Click the split testing icon shown above to initiate a split test.
Create New Variations
You can create as many variations as you like for your split test. Each of these variations will be split up equally between all of your visitors. To add your first variant, click the 「Add Variant」 button.

This will bring you to through the standard opt-in creation process. You will notice that the 「Display」 tab has been removed, since you are only modifying the appearance of the opt-in (not where the opt-in appears). Design your new opt-in with the changes you want to test (such as creating a new headline, or adjusting the colors of the button). Once you click 「Save & Exit,」 your new variation will be added to your opt-in list.
Beginning Your Split Test
As you create new variants for a given opt-in, you will notice that these variations appear below the main opt-in in your list of active opt-ins in the Bloom settings panel. Once you have created all of the variations that you want to test, it』s time to begin the test. Press the 「start test」 button to activate the split test. Once the test has been started, you can also pause the test at any time by clicking the 「pause test」 button.

Observing The Results & Ending Your Test
As your test runs, you can observe the conversion rate of each opt-in. The conversion rate is displayed right in the list of opt-ins, as well as in the Bloom stats page. Once you are satisfied with the results, it』s time to end the test and pick your favorite (the highest performing variation). To end the test, click the 「End Test And Pick Winner」 button.

This button will initiate a pop-up window with a list of all your variations, ranked by performance. Simply click on the one you would like to use to end the test and select this variant to use as the main version of your opt-in. This will delete the rest of your unused variations.

Creating And Using Shortcodes In Bloom

Creating And Using Shortcodes In Bloom

Creating And Using Shortcodes In Bloom
Certain opt-ins have shortcodes that you can use to place the opt-in form anywhere on your site.

Shortcodes Can Be Used To Place Opt-Ins Within Posts & Pages
Bloom creates shortcodes for two opt-in types: Locked Content and Inline. Whenever you create a Locked Content or Inline opt-in, you can use the shortcode to place this newly-created form anywhere on your website. You can access these shortcodes from within the Bloom settings panel, or from within the Bloom Shortcodes button in the WordPress post editor.
What Is A Shortcode?
A shortcode is a piece of code that has been simplified for convenience, and can be used to create an advanced element (in this case, a Bloom opt-in). A shortcode will look something like this: [et_bloom_inline optin_id=」optin_4″] Copying and pasting this code into the WordPress post editor will display the associated opt-in on the post or page you are editing.

Generating A Shortcode During Opt-In Creation
Shortcodes are only created for Locked Content and Inline opt-in forms. After you create either of these opt-in types, you will notice a 「Generate Shortcode」 button on the final tab of the settings page. Pressing this button will display the shortcode that you can copy and paste into your post or page.

Generation A Shortcode From The Opt-In List
You can also generate a shortcode for an Inline or Locked Content form from within the Bloom Settings page by clicking the shortcode icon for the desired opt-in in your opt-in list.

Generating A Shortcode From Within The Post Editor
All of your active opt-ins with associated shortcodes are also easily accessible right from the WordPress Post Editor. At any time while writing your post, you can use the Bloom button within the post editor to add a shortcode to your post. Simply click the button to get a list of available opt-ins and select the one that you would like to add.

Using The Locked Content Shortcode
The locked content shortcode is unique in that it must be 「wrapped around」 the content that you would like to lock. When you generate the shortcode you will notice that it has two parts: [et_bloom_locked optin_id=」optin_5″] and [/et_bloom_locked]. Whatever content is placed in between these two parts will be locked and only revealed with the visitor subscribes to your list.