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