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.

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.

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.