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.
1 – ThriveLeads optin plugin for WordPress
2 – Divi theme or Divi Builder plugin for WordPress
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.
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
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.
I am a Web Developer with a B.Sc in Computer Science and Engineering with 5 years of software development experience, specially in web development with WordPress. I spent my free time taking pictures, I consider myself a professional photographer. 🙂 If you like this article, leave a comment and let me know what you think!