Introduction

In this article you’re going to learn how to trigger a ThriveLeads Popup with a Divi Button Element.

The Problem: Can’t trigger ThriveLeads Popup with a Divi Button element >_<

Unfortunately, there doesn’t seem to be a way to trigger a ThriveLeads lightbox popup using the standard Divi button element. 

This element doesn’t accept shortcodes, and all of the workarounds we tried failed. 

However, isn’t a Divi button element technically just a styled text module with a particular background color, borders, and hover animation…? 

Yes, it is!

So why not just create the button you want using a text module—which DOES accept shortcodes? 🙂

It turns out that this method works like a charm, and it’s what you’ll learn in this brief tutorial. 

Requirements

1 – ThriveLeads optin plugin for WordPress

2 – Divi theme or Divi Builder plugin for WordPress

Video Tutorial

This video tutorial shows you how to trigger a ThriveLeads lightbox popup with a Divi Text element (fashioned into a button).

The text version is below. 🙂

Setting up your ThriveBoxes

1 – Create and save the template of the lightbox into the ThriveLeads library in the ThriveBoxes section.

*Note: you can save a template for one type of Thrive Lead and import it in another type of Thrive Lead, e.g. from a Lead Shortcode to a ThriveBox

2 – Copy the Shortcode of the ThriveBox.

Thrivebox - How to Trigger a ThriveLeads Popup with a Divi Button Element

3 – Open the page where you want to trigger this ThriveBox in the Divi Visual Editor.

4 – Add a Divi Text element in the page.

5 – Paste the thrivebox shortcode inside the text element and add the text you text in the button.

On this particular example we have used “Join The Class”.

divi text shortcode button - How to Trigger a ThriveLeads Popup with a Divi Button Element

Changing the design of the Text Element

1 – Click Content > Background > pick a color of your choice to add a background color of the button.

Background - How to Trigger a ThriveLeads Popup with a Divi Button Element

2 – Click Design > Sizing > Change the Max Width to 28% and center the element on Module Alignment.

Additionally, change the Minimum Height to 65px.

Sizing 1 - How to Trigger a ThriveLeads Popup with a Divi Button Element

3 – Click Design > Border > Change the Rounded Corners to 10px and change the Border Width to 2px

Border settings - How to Trigger a ThriveLeads Popup with a Divi Button Element

4 – Click Design > Text > Change the Text Color to White.

5 – Change the Text Size to 33px

6 – Change the Text Line Height to 1.8em

7 – Change the Text Alignment to Center.


Text Design - How to Trigger a ThriveLeads Popup with a Divi Button Element

Changing the design of the Text Element for Mobile

1 – Click Design > Sizing > and click the little phone icon near the Max Width setting.

For Phone change this to 79%, or whatever looks good for your use case.

Sizing Phone - How to Trigger a ThriveLeads Popup with a Divi Button Element

2 – Repeat this process for the Tablet view.

 

Results

Voila! Your ThriveLead Popup works now by using a Divi button element.

What do you think of this tutorial?

Article Title: How to Trigger a ThriveLeads Popup with a Divi Button Element

Short Description: How to Trigger a ThriveLeads Popup with a Divi Button Element

Author: Ardian Lumi

Publisher - Orgnization: MemberFix

Publisher Logo: mermberfix logo x200 1 - How to Trigger a ThriveLeads Popup with a Divi Button Element

User Review
0 (0 votes)

 

R

Now let’s hear from you!

Are you using ThriveLead Popup with Divi?

Is this article helpful for you?

Tell us in the comments section below.

Share This