mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

How to Trigger a ThriveLeads Popup with a Divi Button Element

divi-button-thrive-leads

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)

 

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.

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
Tutorial on how to allow DAP members to update card details in Stripe using a nice modal popup.
How to automatically check for and cancel duplicate Stripe subscriptions using Zapier.
Subscribe
Notify of
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sophie Janotta
January 30, 2020 4:15 pm

Thanks so much. I searched for a solution for a long time now! And thats a real good idea.

Vic Dorfman
Admin
Reply to  Sophie Janotta
January 31, 2020 7:28 am

Glad to be of service, Sophie! Thanks for dropping by. 🙂

Dennis
February 20, 2020 4:45 pm

Well, good idea and because of Sophies comment i thought this is goona be my solution..BUT.

Did everthing as in the text/video. Shortcode is in there etc. but if i click it, nothing happens. tried with different boxes and several browsers.
Any idea?
Dennis

Vic Dorfman
Admin
Reply to  Dennis
February 21, 2020 6:49 am

Hi Dennis, I’m not sure why it didn’t work for you. Did you follow the instructions exactly as written? And are you on the latest version of Divi, Thrive, and WordPress?

Tanguy Hubner
May 10, 2020 10:12 pm

Thank you, it was useful.
I did not think about it… I was struggling trying to build it manually through the code element. lol 🙂

Ardian Lumi
Ardian Lumi
Reply to  Tanguy Hubner
May 11, 2020 10:43 am

Hi Tanguy,

I am glad to hear that you found the article helpful!

Cheers,

Gabor
Gabor
February 5, 2021 8:13 am

Thanks a lot! It works just fine!

Katarina
Katarina
January 10, 2023 7:49 pm

Wow, thank you. The first one, who mixes up Thrive and Divi… perfect! I was looking so long for that