How to Trigger a ThriveLeads Popup with a Divi Button Element

[et_pb_section fb_built=”1″ _builder_version=”3.22.3″ custom_margin=”-5px|||||” custom_padding=”3px||4px|||”][et_pb_row _builder_version=”3.29.3″][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”4.0.6″ custom_margin=”||-1px|||” custom_padding=”||0px|||”]

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.

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”-6px|auto||auto||” custom_padding=”1px||11px|||”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.6″ custom_margin=”||-1px|||” custom_padding=”5px||0px||false|false” z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]

Results

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

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_4,3_4″ make_equal=”on” _builder_version=”3.25″ custom_margin=”||30px|” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”0px|0px|0px|0px” border_width_all=”1px” border_color_all=”#2ecc71″][et_pb_column type=”1_4″ _builder_version=”3.25″ background_color=”#2ecc71″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_blurb use_icon=”on” font_icon=”%%49%%” icon_color=”#ffffff” _builder_version=”3.0.91″ custom_margin=”30px||5px|” custom_padding=”|||” custom_css_blurb_image=”margin:0;”][/et_pb_blurb][/et_pb_column][et_pb_column type=”3_4″ _builder_version=”3.25″ custom_padding=”30px|20px|20px|0px” custom_padding_tablet=”” custom_padding_phone=”0px||30px|20px” custom_padding_last_edited=”on|phone” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.6″ text_font=”||||||||” text_line_height=”1.6em”]

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.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]