** Code Updated on 9-4-2018 **
Bloom is a brilliantly designed and well coded email opt-in plugin from the smart folks over at Elegant Themes. Chances are if you are a Divi or Extra Theme user, you have either utilized this plugin, or have at least heard quite a bit about it. So revolutionary and unique is the design in-fact, that the landing page behemoth, LeadPages, took it upon themselves to fork the plugin, causing quite a bit of controversy amongst the WordPress community.
So what does Bloom do exactly?
According to Elegant Themes, “Bloom is the ultimate email opt-in plugin for WordPress. With Bloom, you can easily add opt-in forms to your website and harness complete control over the design and location of each.” So, in a nutshell, Bloom allows you to create custom email opt-in forms on your website, so people can subscribe to your newsletter. The Bloom opt-in form can be implemented into your website using several methods including: Time (in seconds), percentage of scroll down the page, inline (static) and… You guessed it, with a Click Trigger.
What is a Click Trigger?
The Click Trigger method of using Bloom entails creating a button, link or some other form of call to action (CTA). When the CTA is clicked the opt-in form will then appear and the user can enter their email address and other requested information. This helps keep your web page nice and tidy and is generally considered less invasive to people viewing your site.
Step 1. Build The Subscription Section
There are a number of ways to create the section users will click to subscribe to your email. In this tutorial I have opted to use the combination of a Text Module and Button Module. I will not cover every aspect of how I designed the section, as there are many different methods to do so, but instead detail out the necessary steps to enable the Bloom click trigger.
Create a 2/3, 1/3rd column and insert a text module and a button module as seen below:
Setup the Button Module
I am not going to dive into the design specifics, but most importantly here is that you give your button a URL/ID as seen below. In this example we have used the URL/ID ‘a#clicktrigger‘. We will use this same CSS ID in a few other locations as well. Also give your button some text so it appears… we have added ‘Subscribe Now‘, but use whatever fits your needs.
Give the Button Module a CSS ID
Within the same Button Module, navigate to the Custom CSS tab. In the field marked CSS ID, add ‘clicktrigger‘ and then Save and Exit.
Step 2. Setup The Bloom Plugin
By this stage I am assuming that you have already installed and styled your Bloom Opt-In plugin to look all nice and pretty. I will now go over the necessary steps for the click trigger…
After you have gone through the initial steps of Setup and Design, you will then end up in the Display Settings. From there you want to make sure you tick the box marked ‘Trigger On Click‘. After that, head down to the the field marked, ‘CSS Selector (string)‘. Here you will add the same CSS ID used in the button module URL and Custom ID field, but make sure you precede it with an ‘a‘, so that it looks like this: a#click-trigger. Make sure that your settings look like the screenshot below and then press Save & Exit.