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 the way it is used on the Madeline Demo Site.
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
In the Madeline Child Theme, we use the the secondary menu and the link “Subscribe to Newsletter”. We also used font-awesome for the icon in front of our link.
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
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.
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“.
Setup Completed.
I hope you enjoyed this tutorial. Have fun with it and try with a Call to Action module.
Hey,
I followed your instructions but it doesn’t work for me… Any idea?
Hi Ambroise, I would love to assist you. I will need a lot more information to pinpoint the problem.
I went through and also it doesn’t work. Where does the “#1” refer to?
The mistake is in the Screen Options. Follow these directions but click the Link Relationship (XFN) checkbox and put in optin-cta, that is how I made it work.
THANK YOU!!! The only source on the internet on how to do this!
Thank you! Worked perfectly! Also realized that with this, I can add a video to the Bloom Popup option (using text code) and now by clicking on menu button, I get video popup with CTA on bottom. Awesome…Thanks so much!