When it comes to building lists from your website users, there are various methods for achieving this goal. We like to use Bloom because it comes with our Elegant Themes membership and it is an awesome plugin. Frequently, we encounter clients who does not want to use a popup subscribe opt-in to invite subscribers and instead want a soft invitation such as a click trigger. We decided to create a child theme that featured the trigger modal method for email subscribe opt-in using Bloom.
When we released the Madeline Child Theme, we were asked by a few people how we setup the click trigger email subscriber optin. Although we know there are a few tutorials covering this, we did it for our customers. Here is a short tutorial on how to setup the click trigger opt-in using Bloom.
What you will need before doing this tutorial is:
- A Divi powered website
- Bloom Installed
- A Bloom slide-in or popup Opt-in created
Setup the Link in the Menu
Step 2: Add the CSS Class: “optin-cta” to the CSS Class Field in your custom link settings.
From your Menu editor, scroll to the top of your page to click the “Screen Options”.
A drop down of options will appear. Find the CSS box and click it to enable it.
Now, you can go to your custom link and add the CSS Class “optin-cta” to the CSS Class field. The URL should be: “#1 “.
Change the Settings In Bloom
Step 3: Add CSS Class to Bloom Settings
From the Dashboard, open Bloom and select edit for the opt-in you want to use with your trigger link. Once your Optin is open, select the “Display Settings”.
With the “Display Setttings” open, select the “Trigger On Click” to enable it. Add the following to the “CSS Selector (string)” field: *.optin-cta
Press Save and exit Bloom.
Create a Click Trigger Using the Button Module
You can also use this same class in a button module or Call to Action Module. In the Madeline Child Theme we also used a click trigger in a button module in the custom footer.
Step 4: Add the CSS Class to the Button Module
The url setting is: “#1“.
Add the CSS Class to the CSS Class field in the Custom CSS tab in the Button module. The CSS Class is: “optin-cta“.
I hope you enjoyed this tutorial. Have fun with it and try with a Call to Action module.