This tutorial is now outdated. It will still work but there is now a simple and free alternative. Try using Popups for Divi.
Overview:
- Getting started by installing the plugin
- Form Integration Settings
- Design & style the form
- Hiding the Optin Email area
- Configure Pop-Up Display Settings
- Summary
Introduction
In this post, we’re going to show you how easy it is to create a pop-up notification in WordPress using Bloom (Email Opt-In plugin) created by Elegant Themes. We recently used this method to add a pop-up notification to our own Marketing Labs site (built using Divi) to alert our clients to the measures we have taken regarding Coronavirus – here you can read more about how you can keep your site updated during these tricky times.
Getting started by installing the plugin
First off, you’ll need to install and activate ‘Bloom Email Opt-In’ plugin, after that, head over to ‘Optin Forms’ in Bloom’s dropdown menu in the WordPress admin area.
We’ll start by creating a new ‘Optin Form’ using the green button in the top right labelled ‘NEW OPTIN’.
You’ll be presented with a few options to choose from – select ‘POP UP’ type.
Form Integration Settings
Next, give your ‘Optin Form’ a unique name and configure the ‘FORM INTEGRATION’ settings.
Unfortunately, even though we won’t be using them, a Bloom Optin Form (or pop-up in the case of this tutorial) will only work if you have configured the form integration settings to a live account. To ensure you can still create your Bloom pop-up notification, we’d recommend setting up a free email marketing account with Mailchimp (if you don’t already have an email marketing platform account that is compatible with Bloom).
At the time of writing this post, Bloom currently integrates with 18 other email marketing platforms including Mailer Lite and MailPoet.
Design & style the form
Once you have completed the configuration, we can begin styling and designing the form. Head over to the ‘DESIGN’ tab in the ‘OPTIN CONFIGURATION’ menu.
Something that makes Bloom great is the huge selection of premade templates that you can use when designing the perfect opt-in form (or pop-up). For this tutorial, we are going to use the template highlighted in the screenshot below (4th premade design). This design is stacked vertically and will allow us room for content and an image above an email opt-in box (that we will hide with CSS later).
Once you have chosen the template (or picked another design to work with during this tutorial), head to the bottom of the page and click the button for ‘NEXT: CUSTOMIZE’.
Now you can add a TITLE and a MESSAGE to your opt-in form. This form will later become a pop-up without an email box showing for signups.
Further down this styling page, you can set an image to be displayed as well as setting fonts styles/sizes and colours. Note: avoid using bright colours that could be interpreted as ‘danger’ or ‘warning’ signs. Instead, opt for brand matching colours that work with the look and feel of your site. You don’t want a user to panic when they see your notification!
Hiding the Optin Email area
Once you’re happy with the design choices you have made, go to the top of the page and click the ‘PREVIEW’ button. A pop-up should appear on your screen.
Now, we are going to use ‘Inspect Element’ to find the CSS class for the ‘Optin Form’ so we can add some code to hide this element from view.
To do this, view your preview optin form on your screen and right-click on the bottom of the form near the ‘Email signup textbox’ and click ‘Inspect’. The element that you have ‘right clicked’ on will be highlighted in the window of code that appears on your screen. If you hover over this highlighted line you will see that the form area of your email optin preview popup will be highlighted. Next, we are going to copy the CSS class of this element so we can add some new code to hide this from showing.
To do this, double click the code that comes within the brackets of class=””, highlight the first ‘et_class‘ and copy it to your clipboard (ctrl/cmd + C). The main class for this element in our case is “et_bloom_form_content”. Once you have that copied, close the inspect window.
Finally, head to the bottom of the design settings page within your Optin Form settings and add the following code to the ‘Custom CSS’ box:
.et_bloom_form_content {
display:none !important;
}
Or, if your copied CSS class was different:
.your_class_name {
display:none !important;
}
After you have added your CSS code to the hide the optin email box, click the ‘PREVIEW‘ button again. This time (hopefully) you will see that your optin form pops up but there is no email sign up form visible. Congratulations, you have just hacked Bloom to create a beautifully designed pop-up notification!
Configure Pop-Up Display Settings
To complete your pop-up notification, you’ll need to configure your display settings – these are settings that allow you to edit viewings triggers and displays per session, for example.
For this tutorial, we have chosen our pop-up notification to ‘Fade In’ into view after a 5-second time delay. We have also set the pop-up to display a maximum of once per session. In addition, we have set the pop-up to display on every page, that way, no matter how a user finds our website, they will see our message and when they close the notification, it will stay hidden until their next session (which resets every 1 day).
Remember to choose a time delay that is neither too quick nor too long – this gives your pop-up notification the highest chance of being seen and digested by your website visitors.
All you have to do is to save and exit the Bloom opt-in form settings and make sure your form is set to active within the plugin main dashboard.
Summary
Congratulations! You’ve officially created your first pop-up notification using Bloom.
We hope you have enjoyed this WordPress plugin tutorial hack that takes an email opt-in form builder and repurposes into a pop-up notification builder that helps you keep your site up to date and website visitors informed of what’s going on.
Thanks for reading! If you have any questions or need help with this tutorial, please feel free to leave a comment!
