The Divi Accordion Module

The Divi Accordion Module

The Divi Accordion Module
How to add, configure and customize the Divi accordion module.

The accordion module is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. When a new item within the list is opened, the previously-opened item is closed and the new item』s content is displayed.

View A Live Demo Of This Module
How To Add An Accordion Module To Your Page
Before you can add a accordion module to your page, you will first need to jump into the Divi Builder. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder』s modules. Next, click the Use Visual Builder button to launch the builder in Visual Mode. You can also click the Use Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard.

Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. New modules can only be added inside of Rows. If you are starting a new page, don』t forget to add a row to your page first. We have some great tutorials about how to use Divi』s row and section elements.

Locate the accordion module within the list of modules and click it to add it to your page. The module list is searchable, which means you can also type the word 「accordion」 and then click enter to automatically find and add the accordion module! Once the module has been added, you will be greeted with the module』s list of options. These options are separated into three main groups: Content, Design and Advanced.
Use Case Example: Showcasing Product Features Using the Accordion Module
For this example, I』m going to show you how to add product features to a product page using the Accordion Module.

Here is the toggle module in action:

Let』s get started.
Use the visual builder to add a Regular Section with a 1/2 1/2 (2 column) row. Edit the section settings to change the background color to #d94b6a (pink).
On the left column, add your product image.

On the right column, add a Text Module to serve as a header above the Accordion Module.

Finally, add the Accordion Module directly under the Text Module on the right column.

Update the Accordion Settings as follows:
Content Options
Open Toggle Background Color: #ffffff
Closed Toggle Background Color: rgba(255,255,255,0.83)
Design Options
Icon Color: #d94b6a
Open Toggle Text Color: #333333
Closed Toggle Text Color: #333333
Toggle Font: Raleway
Toggle Font Size: 20px

Save Settings
Under the Content tab, click + Add New Item to add your first accordion to the module.
Update the Individual Accordion Settings as follows:
Content Options
Title: [enter title]
Content: [enter content]

Note: Since we already configured the design options for the Accordion Module Settings, there is no need to update the design of the individual accordion settings unless you want to override the Module settings.
Now duplicate the accordion item you just created twice and update the Title and Content for each of the duplicates as needed.

That』s it! The accordion looks great and keeps the content compact, fitting nicely in the section of the page.

Accordion Content Options
Within the content tab you will find all of the module』s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab.

Open Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of closed toggles. Select your desired color from the color picker to apply it to your module.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Admin Label
This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.
Accordion Design Options
Within the design tab you will find all of the module』s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Icon Color
Here you can adjust the color of the icon that appears inside of each toggle, to the inner right of the toggle rectangle. If you are adjusting the background color of your toggle, you may want to adjust the icon color to better compliment your custom color.
Open Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of closed toggles. Select your desired color from the color picker to apply it to your module.
Body Font
You can change the font of your body text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Body Font Size
Here you can adjust the size of your body text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your body text, choose your desired color from the color picker using this option.
Body Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your body text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Body Line Height
Line height affects the space between each line of your body text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Toggle Font
You can change the font of your toggle text by selecting your desired font from the dropdown menu. Divi comes with dozens of great fonts powered by Google Fonts. By default, Divi uses the Open Sans font for all text on your page. You can also customize the style of your text using the bold, italic, all-caps and underline options.
Toggle Font Size
Here you can adjust the size of your toggle text. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Toggle Text Color
By default, all text colors in Divi will appear as white or dark gray. If you would like to change the color of your toggle text, choose your desired color from the color picker using this option.
Toggle Letter Spacing
Letter spacing affects the space between each letter. If you would like to increase the space between each letter in your toggle text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Toggle Line Height
Line height affects the space between each line of your toggle text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. The input fields supports different units of measurement, which means you can input 「px」 or 「em」 following your size value to change its unit type.
Use Border
Enabling this option will place a border around your module. This border can be customized using the following conditional settings.
Border Color
This option affects the color of your border. Select a custom color from the color picker to apply it to your border.
Border Width
By default, borders have a width of 1 pixel. You can increase this value by dragging the range slider or by inputting a custom value into the input field to the right of the slider. Custom units of measurements of supported, which means you can change the default unit from 「px」 to something else, such as em, vh, vw etc.
Border Style
Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset. Select your desired style from the dropdown menu to apply it to your border.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Accordion Advanced Options
Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. Here you can apply custom CSS to any of the module』s many elements. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme』s style.css file.

CSS ID
Enter an optional CSS ID to be used for this module. An ID can be used to create custom CSS styling, or to create links to particular sections of your page.
CSS Class
Enter optional CSS classes to be used for this module. A CSS class can be used to create custom CSS styling. You can add multiple classes, separated with a space. These classes can be used in your Divi Child Theme or within the Custom CSS that you add to your page or your website using the Divi Theme Options or Divi Builder Page Settings.
Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.
Visibility
This option lets you control which devices your module appears on. You can choose to disable your module on tablets, smart phones or desktop computers individually. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page.
Individual Accordion Content Options

Title
The title will be displayed when the item is closed within the accordion, as well as above the accordion content text when the item has been opened.
Content
The content is displayed within the item box when the accordion item has been opened, below the title.
Open Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Background Color
The background color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the background color of closed toggles. Select your desired color from the color picker to apply it to your module.
Background Image
If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field. Background images will appear above background colors, which means your background color will not be visible when a background image is applied.
Individual Accordion Design Options

Icon Color
Here you can adjust the color of the icon that appears inside of each toggle, to the inner right of the toggle rectangle. If you are adjusting the background color of your toggle, you may want to adjust the icon color to better compliment your custom color.
Open Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of opened toggles. Select your desired color from the color picker to apply it to your module.
Closed Toggle Text Color
The text color of each accordion toggle is different when it is in its open and closed state. Here you can adjust the text color of closed toggles. Select your desired color from the color picker to apply it to your module.
Custom Padding
Padding is the space added inside of your module, between the edge of the module and its internal elements. You can add custom padding values to any of the module』s four sides. To remove custom margin, delete the added value from the input field. By default these values are measured in pixels, but you can input custom units of measurement into the input fields.
Individual Accordion Advanced Options

Custom CSS
Custom CSS can also be applied to the module and any of the module』s internal elements. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons.

Module Settings Groups

Module Settings Groups

Module Settings Groups
Learn how to configure the toggle groups in the module settings modal.

Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
When editing modules inside the Divi Builder, their settings appear in collapsable groups . You can assign a setting to a specific group using the toggle_slug parameter in the setting definition. You can use one of the builder』s predefined settings groups or you can use a custom group.
Predefined Settings Groups
The following groups are predefined and can be used by simply including one of their slugs as the toggle_slug parameter in a setting definition.

Display Name
Slug

Admin Label
admin_label

Alignment
alignment

Animation
animation

Arrows Color
arrows_color

Attributes
attributes

Audio
audio

Background
background

Bar Counter
bar

Body Text
body

Border
border

Box Shadow
box_shadow

Bullet
bullet

Button One
button_one

Button Two
button_two

Button
button

CSS ID & Classes
classes

Caption Text
caption

Categories
categories

Circle
circle

Color
color

Conditional Logic
conditional_logic

Content Text
content

Controls Colors
colors

Controls
controls

Currency & Frequency Text
currency_frequency

Custom CSS
custom_css

Dividers
dividers

Dropdown Menu
dropdown

Elements
elements

Email Account
provider

Email
email

Exceptions
exceptions

Excluded Item
excluded

Featured Image
featured_image

Field Options
field_options

Field Text
form_field

Fields
fields

Filter Criteria Text
filter

Filters
filters

Icon
icon

Image & Icon
icon_settings

Image & Video
image_video

Images
images

Image
image

Input Text
input

Label Text
label

Layout
layout

Links
links

Link
link

Map
child_filters

Map
map

Menu Text
menu

Meta Text
meta

Module Text
module

Navigation
navigation

Number Text
number

Numbers Text
numbers

Overlay
overlay

Pagination Text
pagination

Percentage Text
percent

Play Icon
play_icon

Player Pause
player_pause

Portfolio Title Text
portfolio_header

Price Text
price

Redirect
redirect

Result Message Text
result_message

Rotation
rotation

Sale Badge
badge

Scroll Down Icon
scroll_down

Search Field
field

Sizing
width

Spacing
margin_padding

State
state

Styles
styles

Subhead Text
subhead

Subheader Text
subheader

Success Action
success_action

Tab Text
tab

Text
main_content

Text
text

Title Text
header

Title Text
title

Toggle Text
toggle

Visibility
visibility

Custom Settings Groups
Settings can be assigned to a custom group in the same way that you would assign them to predefined groups. However, you must also define all custom groups in the get_settings_modal_toggles() method of your module』s PHP class.
Settings Group Definition

tab_slug (array)

toggles (array) — All settings group definitions for the tab

toggle_slug (array) — Settings group definition

priority (int) — Groups are sorted based on this number (from lowest to highest)
sub_toggles (array) — Sub groups for this group (optional)

sub_toggle_slug (array) — Sub group definition

icon (string) — The slug of a predefined icon (optional)
icon_svg (string) — Raw SVG icon (optional)
name (string) — Display Name (only shown when no icon is defined)

tabbed_subtoggles (bool) — Whether or not to display sub groups as tabs
title (string) — Display name (localized)

Custom Settings Groups Example

array(

'label' => esc_html__('Add Mushroom?', 'simp-simple-extension'),

'type' => 'yes_no_button',

'option_category' => 'basic_option',

'description' => esc_html__('Toggle whether mushroom will be added to the pizza.', 'simp-simple-extension'),

'toggle_slug' => 'pizza',

'options' => array(

'on' => esc_html__( 'Yes', 'simp-simple-extension'),

'off' => esc_html__( 'No', 'simp-simple-extension'),

),

'sub_toggle' => 'pizza_toppings_mushroom',

),

'quantity_toppings_mushroom' => array(

'label' => esc_html__('How Much Mushroom?', 'simp-simple-extension'),

'type' => 'range',

'option_category' => 'basic_option',

'description' => esc_html__('Dropdown menu with various options.', 'simp-simple-extension'),

'toggle_slug' => 'pizza',

'range_settings' => array(

'min' => '1',

'max' => '5',

'step' => '1',

),

'show_if' => array(

'toggle_toppings_mushroom' => 'on',

),

'sub_toggle' => 'pizza_toppings_mushroom',

),

'toggle_toppings_anchovy' => array(

'label' => esc_html__('Add Anchovies?', 'simp-simple-extension'),

'type' => 'yes_no_button',

'option_category' => 'basic_option',

'description' => esc_html__('Toggle whether anchovies will be added to the pizza.', 'simp-simple-extension'),

'toggle_slug' => 'pizza',

'options' => array(

'on' => esc_html__( 'Yes', 'simp-simple-extension'),

'off' => esc_html__( 'No', 'simp-simple-extension'),

),

'sub_toggle' => 'pizza_toppings_anchovy',

),

'quantity_toppings_anchovy' => array(

'label' => esc_html__('How Many Anchovies?', 'simp-simple-extension'),

'type' => 'range',

'option_category' => 'basic_option',

'description' => esc_html__('Dropdown menu with various options.', 'simp-simple-extension'),

'toggle_slug' => 'pizza',

'range_settings' => array(

'min' => '1',

'max' => '30',

'step' => '1',

),

'show_if' => array(

'toggle_toppings_anchovy' => 'on',

),

'sub_toggle' => 'pizza_toppings_anchovy',

),

'toggle_toppings_pineapple' => array(

'label' => esc_html__('Add Pineapple?', 'simp-simple-extension'),

'type' => 'yes_no_button',

'option_category' => 'basic_option',

'description' => esc_html__('Toggle whether pineapple will be added to the pizza.', 'simp-simple-extension'),

'toggle_slug' => 'pizza',

'options' => array(

'on' => esc_html__( 'Yes', 'simp-simple-extension'),

'off' => esc_html__( 'No', 'simp-simple-extension'),

),

'default' => 'on',

'sub_toggle' => 'pizza_toppings_pineapple',

),

'quantity_toppings_pineapple' => array(

'label' => esc_html__('How Much Pineapple?', 'simp-simple-extension'),

'type' => 'range',

'option_category' => 'basic_option',

'description' => esc_html__('Dropdown menu with various options.', 'simp-simple-extension'),

'toggle_slug' => 'pizza',

'range_settings' => array(

'min' => '1',

'max' => '9001',

'step' => '1',

),

'default' => '9001',

'show_if' => array(

'toggle_toppings_pineapple' => 'on',

),

'sub_toggle' => 'pizza_toppings_pineapple',

),

'toppings_other' => array(

'label' => esc_html__('Content', 'simp-simple-extension'),

'type' => 'text',

'option_category' => 'basic_option',

'description' => esc_html__('Add any special requests for toppings not in the list.', 'simp-simple-extension'),

'toggle_slug' => 'pizza',

'sub_toggle' => 'pizza_toppings_other',

),

);

}

public function get_settings_modal_toggles() {

return array(

'advanced' => array(

'toggles' => array(

'pizza' => array(

'priority' => 24,

'sub_toggles' => array(

'pizza_toppings_mushroom' => array(

'name' => 'Mushroom',

'icon_svg' => '',

),

'pizza_toppings_anchovy' => array(

'name' => 'Anchovies',

'icon_svg' => '',

),

'pizza_toppings_pineapple' => array(

'name' => 'Pineapple',

'icon_svg' => '',

),

'pizza_toppings_other' => array(

'name' => 'Other',

'icon' => 'text-quote',

),

),

'tabbed_subtoggles' => true,

'title' => 'Special Toppings',

),

),

),

);

}

...

view raw

settings-groups--custom-settings-groups.php

hosted with by GitHub

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

Using The Bloom Display Settings

Using The Bloom Display Settings

Using The Bloom Display Settings
Bloom gives you complete control over where each of your opt-in forms appear on your website.

Display Settings Control Where & When Your Opt-Ins Are Displayed
Whenever you create a new Pop-Up, Fly-In or Below Post opt-in, you will be presented with a set of 「Display」 settings. These settings are used to control where on your website your opt-in will appear, and well as when it will appear. You can choose to display your opt-in on your entire site, or you can choose to display you opt-in on individual posts or post types. If you are building a Pop-Up of Fly-In, you can also adjust a set of 「trigger」 that affect when your opt-in is displayed. For example, you could create a Pop-Up that exists on all pages, but is only triggered when a visitor reaches the bottom of your post. Or you could create a fly-in to exists only on a certain category of posts, and is only displayed after a visitor comments.

By targeting specific opt-ins to specific parts of your site, you can optimize them to be more relevant to your visitors. For example, you would might not want to offer a special discount to someone who is ready your blog post about 「web design,」 but you might want to offer them a free ebook where they can learn even more. You might not want to offer a potential customer who is browser your WooCommerce storefront a free eBook, but you might want to offer then a 20% discount in exchange for joining your list. These are just two example of how building specific opt-ins for specific locations on your website can be highly effective.
Load In 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.
Display On Post Types

Everything
When selection, the optin will be displayed on every part of your website.
Homepage
When selection, the optin will be displayed on the homepage of your website.
Archives
When selection, the optin will be displayed on archive pages.
Categories
When selection, the optin will be displayed on category pages.
Tags
When selection, the optin will be displayed on tag pages.
Posts
When selection, the optin will be displayed on single post pages.
Pages
When selection, the optin will be displayed on all individual pages.
Other Post Types
Other post types registered by your plugins may also appear here, and selecting those post types will display the optin on all posts with that post type.
Display On Categories

Individual Category Selection
Here can you choose to display your optin on individual categories that you choose.
Automatically check categories created in future
If this option is selected, your optin will be automatically displayed on any new category you create.
Individual Post & Page Targeting

Display On These Pages
Here you choose individual pages that display your optin on.
Do Not Display On These Pages
Here you can choose which pages you do not want your optin to appear on.
Display On These Posts
Here you choose individual posts that you would like your optin to display on.

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.

Adding Custom Fields To Bloom Optin Forms

Adding Custom Fields To Bloom Optin Forms

Adding Custom Fields To Bloom Optin Forms
Adding custom fields to a Bloom optin allows you to create custom subscribe forms and collecting additional information from your subscribers.

Bloom supports various email providers. Within each email provider, you can create custom data fields that can store different pieces of information about your email subscribers. This data can then be used to segment your email lists or create email autoresponders. By default, all email providers support the following fields: Name & Email. If you want to collect additional information, you will need to configure new custom fields.
Once a custom column of information has been created for your list within your email provider, a custom field can be added to your email optin module. When a visitor fills out that custom field, the data they input will be saved to your list in the subscriber』s user profile within your email provider』s system.
Adding Custom Fields In Your Email Provider
Each email provider works differently. Before you can add custom fields to your optin form, you will first need to log in to your email provider account and create the custom fields that you would like to use. Please refer to the following directions for your email provider to learn how to create custom fields. After that, continue down the page for more instructions on how to add those fields to your Bloom optin.
ActiveCampaign
ActiveCampaign has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
Aweber
Aweber has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
CampaignMonitor
CampaignMonitor has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
ConstantContact
Unfortunately ConstantContact does not support custom fields. If you need to use custom fields for your list, we suggest using a different provider that is more capable.
Convertkit
Convertkit has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
Emma
Emma has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
Feedblitz
Feedblitz doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
GetResponse
GetResponse has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
HubSpot
HubSpot has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
iContact
iContact has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
Infusionsoft
Infusionsoft has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
MadMimi
MadMimi has a great tutorial about how to add custom fields to your account. You can learn more here.
MadMimi doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
MailChimp
MailChimp has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
MailerLite
MailerLite has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
MailPoet
MailPoet has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
Mailster
Mailster has a great tutorial about how to add custom fields to your account. You can learn more here.
Mailster doesn』t require you to add custom fields within their platform. Once they receive data from a custom field that you add to your email optin module, they will automatically save that data within their system. Continue on to learn how to add custom fields to your email optin module.
Ontraport
Ontraport has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
SalesForce
has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
SendinBlue
SendinBlue has a great tutorial about how to add custom fields to your account. You can learn more here. Once you have added custom fields in their system, they will show up automatically in Bloom when you add new custom fields. To learn more, continue to step two.
Adding Pre-Defined Custom Fields
Most email providers will send Bloom all of your custom field data, and the optin options interface will be populated with a list of your available custom fields. Once you have added custom fields as described above, they will become available within the Design tab when you create or edit your optin form.
To add a new custom field, click the plus button and then choose your desired field from the Content > Field > Field dropdown menu.

You can then continue on to the Field Options to configure additional settings for your field. Here you can do things like add links to your input labels and re-organize field items.

Adding Manual Custom Fields
Some email providers do not send Divi your custom field data. For these providers, you must configure your fields manually. These providers include: Aweber, Mailster and MadMimi.
For these providers, you will need to choose which field type you would like to use to collect this specific piece of information. You can pick a field type after selecting your custom field.

Adding Links To Your Checkboxes
A common use of checkbox custom fields is to record consent for data privacy regulations like the GDPR. In these cases, you may wish to link to your privacy policy or terms of service from a checkbox field item. All checkboxes and radio buttons support custom links. To add a link to a given field item, simply click the link icon and add your link text and link URL:

Using The Bloom Fly-In Opt-In

Using The Bloom Fly-In Opt-In

Using The Bloom Fly-In Opt-In
Flyings are a great way to encourage sharing when visitors are most engaged with your post.

What Is The Fly-In Opt-In?
The fly-in is very similar to the pop-up opt-in, except it is a bit more subtle, Instead of taking up the entire screen, the fly-in presents a smaller opt-in box that slides up from the bottom corner of the screen. Fly-ins can be highly effective without getting too aggressive. These fly-ins can be placed anywhere on your website, and they can also be triggered based on unique user interactions. When combining fly-ins with triggers, you can make your opt-in form even more effective by asking visitors to subscribe at the optimum moment (such as when they have finished reading a post, after they have posted a comment, or after they have purchased a product).

Creating The Fly-In
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 「Fly-In」 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. These settings are broken into three categories: Setup, Design and Display Settings.

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.
Display
The Display tab is where you adjust how, where and when your opt-in form appears on your website. You can choose to display your form on specific posts, pages or categories, or exclude specific posts or pages. You can also adjust the triggers that control when your pop-up and fly-in opt-ins appear. These opt-ins can be triggered based on different user interactions. For a detailed look at triggers and how to use them effectively, please refer to our in-depth triggers tutorial. For a comprehensive look at all of Bloom』s display settings, please refer to our in-depth locations 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).

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.

A Basic Overview Of The Bloom Plugin

A Basic Overview Of The Bloom Plugin

A Basic Overview Of The Bloom Plugin
Learn the basics of the plugin in this complete video overview. Newcomers, start here!

Getting Started
Bloom is an email opt-in plugin that was built to help you grow your email list. Bloom works by adding email opt-in forms to your website, each of which can connect to your email marketing or email newsletter software. When someone signs up using the Bloom opt-in form, they get added to your email list. Bloom works with tons of different email marketing software, and allowing you to create different types of opt-in forms that appear on different areas of your website and in different forms (such as pop-ups, fly-ins, or normal inline forms).
Add New Accounts
Before you can create a functioning opt-in form on your website using Bloom, you first need to connect Bloom to your email marketing software. Bloom works with several different systems, such as MailChimp, Constant Contact, MadMinim, iContact, InfusioSoft, Feedblitz, Aweber, Campaign Monitor, GetResponse, SendInBlue, MailPoet and Ontraport.

The first thing you want to do when using Bloom is connect one of these accounts. Click on the Tools > Bloom Settings link in your WordPress Dashboard to access the Bloom settings, and then click the accounts icon to open up the accounts tab. To add a new account, click the 「Add Account」 button. Here you can choose between the various different account types that Bloom supports. After an account is selected, you will be prompted to verify the account so that Bloom can connect with the system』s API. Each account may have a different method for verification, but in most cases you will be prompted to add your unique API key or AppID, which can be located within your email marketing software』s online account. For a complete step by step instructions on how to set up each different account type, please refer to our accounts tutorial. Our accounts tutorial explains exactly how to connect Bloom to each of the different systems that it supports.
Once you have added an account, it』s time to create your first op-tin form.
Creating An Opt-In Form
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.

Bloom allows you to create 6 different kinds of opt-in forms. There is not limit to how many forms you can create, and these forms can be displayed on unique areas of your website.
Pop-Up
The pop-up opt-in creates a lightbox pop-up on your page that contains your opt-in form. These pop-ups can be triggered using different Bloom triggers, giving you additional control over when users are presented with the pop-up. For more information about the pop-up optin, be sure to read our in-depth pop-up tutorial.
Fly-In
The fly-in is similar to the pop-up, but is a bit smaller and more subtle. Instead of creating a full-screen lightbox pop-up, the fly-in creates a smaller form that slides up from the bottom corner of the page. Just like the pop-up, these fly-ins can be triggered based on different user interactions using the Bloom triggers. For more information about how to use triggers effectively, but sure to check out our triggers tutorial. For a complete in-depth look at the fly-in optin, be sure to read our fly-in tutorial.
Below Post
This is perhaps the most common opt-in type. This creates an opt-in form that is automatically added to the bottom of your posts or pages. When a visitor finishes reading your post, they are presented with an opt-in form that allows them to subscribe to your blog updates. For more information about the below post opt-in, be sure to read our in-depth below post tutorial.
Inline
The inline opt-in allows you to add an opt-in form anywhere inside your posts and pages. The opt-in form automatically generates a shortcode that can be pasted inside your posts and pages to display the form anywhere on your website. For more information about using this opt-in, be sure to check out our in-depth inline tutorial.
Locked Content
Locked content is a great way to build your email list by requiring visitors to sign up before they get access to content on your website. You can lock content within a post, such as a link to download free resources. Once the visitor subscribes, they are granted access to the content hidden behind the form. Locked content opt-ins automatically generated a shortcode that you can place within your posts, wrapped around the content that you would like 「lock.」 Fore more information about this opt-in type, be sure to check out our in-depth locked content tutorial
Widget
The widget opt-in automatically generates an opt-in in the form of a widget. Once generated, the widget will appear in your Widgets tab in the WordPress Dashboard, allowing you to add the form to any widgetzed area on your website (such as your website』s sidebar or footer). For more information about this opt-in type, be sure to read our in-depth widget tutorial.

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. These settings are broken into three categories: Setup, Design and Display Settings/

Opt-In Setup

The first page of the opt-in creation form is the Setup tab. Here you can adjust the name of your opt-in form, which is simply a way for you to remember the form by. It will be reference on the homepage tab and in your stats. You can also add a new opt-in account on this page if you have not already done so via the Accounts tab. If you have already created an account, then you can select that account here. Once you have selected an account, you will be given a lists associated email lists for that account. Select the list from the dropdown menu that you would like to use, and then proceed to the next page. Once your opt-in form goes live, subscribers will be added to the list/account that you selected here.
Opt-In Design

The next step is to design your opt-in form. Once you proceed to the design tab, you will first be presented with a list of pre-made templates. Think of these as starting points. We have put a lot of work into creating over 100 design variations that we think look great. Browse through the thumbnails and select a variation that looks good to you. Don』t worry, you will still get to customize everything on the next page. Once you have selected a template starting point, click the next button to bring up the design customization settings.

These settings allow you to adjust every aspect of your opt-in form』s appearance. You can do simple things like change the title and description and image, or more advanced things like adjust the form』s background color, text color, orientation, image, border style, edge style and more. Using these different design settings in combination, you can build just about anything. You can also preview your customized form at any time by clicking the 「Preview」 button on the right hand side of the page. For more information about each design setting, as well as how to use these design settings effectively, be sure to read our in-depth design settings tutorial. Once you have finished designing your opt-in, click the 「Next」 button to proceed to the display settings.
Opt-In Display

The opt-in display settings control how, where, and when your opt-in forms appear. You can choose to display your opt-in form on specific post types or categories. You can also target individual posts and pages, or exclude individual posts and pages. (Note: These settings do not exist for the Inline or Locked Content opt-in forms. These forms are displayed using shortcodes, and therefore these settings do not apply. If you are created an Inline or Locked Content form, you will be presented with a 「Generate Shortcode」 button. Simply copy and paste that shortcode into any post or page to display the opt-in form.)
For example, if you would like your opt-in form to to be displayed an all of your posts, but not any of your pages, you would select 「Display On: Posts,」 leaving the rest of the sections unchecked. If you would like your opt-in form to only appear on a single page, leave all areas under 「Display On」 unchecked, and then use the 「Display On These Pages」 section to target a specific page. If you would like you opt-in form to be displayed on your entire website, except for a single post or page, then you can select Display On: Everything,」 and then exclude a single page using the 「Do Not Display On These Posts」 setting. Using these different settings, you can choose exactly where your opt-in form is displayed.
If you are creating a fly-in or pop-up opt-in, you will also be presented with various triggers. These triggers control not where your opt-in is displayed, but rather how and when your opt-in is displayed. For example, you can choose to trigger your opt-in form only after a visitor has finished reading your post, or only after a visitor has purchased one of your products. For more information about triggers, be sure to check out our in-depth triggers tutorial. For a complete look at all of the opt-in display settings, but sure to read our in-depth display settings tutorial.
After you have finished creating your opt-in, click the 「Save and Exit」 button. This will bring you back to the home page of the Bloom settings panel. You will see your newly-created opt-in has been added to the page. You can modify, delete, de-activate or create split tests for this opt-in using the various settings icons.
Managing Your Opt-Ins
Once you have created opt-in forms, you will notice that each form appears on the home page of the Bloom settings panel. Each of these opt-ins can be easily managed from this page. You can do various things with each opt-in using the setting icons that appear to the right of the opt-in name.

Generate Shortcode
The shortcode icons will appear for all locked content and inline opt-ins. Clicking this icon will display the shortcode needed for that specific form. Copy and past the shortcode into and post or page to display the opt-in.
Split Test – Split testing is a great way to optimize your opt-is. Initiating a split test allows you to create multiple variations of the same opt-in form, and then test those variations against each other to figure out which one has the highest conversion rate. Each variation that you create will be displayed to different visitors, and their stats will be kept separate. You can try creating different headlines, adjusting different colors, changing the images and so on to see how the changes affect user engagement. Each variation will show its conversion rate, making it easy to see which one is most effective. After you are satisfied with the results, you can end the split test and pick the most effective variation. For detained information about creating split tests, be sure to read our in-depth split testing tutorial.
Disable
You can disable an opt-in form at any time without deleting it. Once displayed the form will not be displayed on your website, and will be moved down the page into the inactive opt-ins list. You can save this form for later and re-activate it at a later time.
Duplicate
You can duplicate a form at any time. If you have spent a lot of time designing a form, and you would like to create a new variation based off that design, or if you would like to create a different opt-in type using the same design settings, you can simply duplicate the opt-in. When you first click the duplicate icon, you will be given the choice between which type of opt-in you would like to create. Even when duplicating, you can change the opt-in type while retaining your design settings.
Delete – If you no longer want to use an opt-in, it can be permanently deleted.
Modify – You can adjust the settings of an opt-in at any time. Clicking the modify icon will bring you back to the opt-in creation screen where you can adjust the opt-in settings using the Setup, Design and Display tabs.
Bloom Statistics
Once you have created your opt-ins, the next step is to understand their effectiveness. Using the Bloom stats page, you can get a great idea about how well each of your opt-in forms are performing, as well as how fast your email list is growing as a whole.

The Bloom stats page has a lot of great information, such as overall growth stats, a detailed overview of each opt-in form』s performance, a historical graph about your list growth, as well as information about your highest performing pages.
This has been a basic overview of Bloom, and we have only touched on the general concept behind creating opt-in forms. For each section above, we have deatiled tutorials that go in-depth into each setting and how they work. Be sure to browser though the rest of our tutorials found within the Bloom Documentation page.

How To Import And Export Bloom Opt-Ins

How To Import And Export Bloom Opt-Ins

How To Import And Export Bloom Opt-Ins
Building a new website? Import your settings from a previous install and skip the setup!

You Can Easily Export Your Opt-Ins and Import Them To Other Websites
If you have spent a lot of time creating your opt-ins, and you would like to start a new website without having to start the process all over again, then you can simply export them from within the Bloom settings panel and import them into your new website.

Exporting and Importing
To export your Bloom opt-ins, you will first need to open up the Bloom settings panel and click on the Import/Export icon as shown below, or simply click the Bloom > Import & Export link in your WordPress Dashboard.
Once you have opened the tab, you will notice two buttons labeled 「Export」 and 「Import.」 To export opt-ins from your current website, click the 「Export」 button to innate a download. You will automatically download the export file. This file can then be imported to your new website using the 「Import」 button.

To import opt-ins to your new website, log in to the WordPress Dashboard and go to the Import/Export page once again. Click the 「Choose File」 button and locate/select the export file you just downloaded. Once selected, click the 「Import」 button to begin the import. Once completed, your opt-ins will appear within the Bloom settings panel.