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.
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”.
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.
2 – Click Design > Sizing > Change the Max Width to 28% and center the element on Module Alignment.
Additionally, change the Minimum Height to 65px.
3 – Click Design > Border > Change the Rounded Corners to 10px and change the Border Width to 2px
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.
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.
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:
User Review
( 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.
Thanks so much. I searched for a solution for a long time now! And thats a real good idea.
Hi Sophie,
I am glad to hear that you found the article helpful!
Kind Regards,
Glad to be of service, Sophie! Thanks for dropping by. 🙂
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
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?
Thank you, it was useful.
I did not think about it… I was struggling trying to build it manually through the code element. lol 🙂
Hi Tanguy,
I am glad to hear that you found the article helpful!
Cheers,
Thanks a lot! It works just fine!
Wow, thank you. The first one, who mixes up Thrive and Divi… perfect! I was looking so long for that