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

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

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

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

Border settings

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

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

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
5 (1 vote)

 

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