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

Step 1: Create a custom link in your menu to use as the trigger link for your optin.

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.

Save

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.

Save

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“.

Setup Completed.

I hope you enjoyed this tutorial. Have fun with it and try with a Call to Action module.

6 Comments

Ambroise on September 12, 2017 at 8:05 pm

Hey,

I followed your instructions but it doesn’t work for me… Any idea?
- Sunflower Child Themes on September 12, 2017 at 8:18 pm
  
  Hi Ambroise, I would love to assist you. I will need a lot more information to pinpoint the problem.
Kevin on November 2, 2017 at 10:21 pm

I went through and also it doesn’t work. Where does the “#1” refer to?
Jake on April 7, 2019 at 12:54 am

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.
Steven on June 7, 2019 at 12:07 am

THANK YOU!!! The only source on the internet on how to do this!
Mia on August 14, 2019 at 9:52 pm

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!