How to make impact text and button shortcode, use a modal type button?

[mhote]

Hi, anyway to make the impact text + button shortcode like below

[sf_modal header="Get in touch" btn_colour="gold" btn_type="sf-icon-stroke" btn_size="standard"icon=".ss-mail" btn_text="Start the Conversation"]
[contact-form-7 id="99901" title="Services Page"]
[/sf_modal]

popup as a modal window, versus having to link elsewhere? Thanks!

[mhote]

Forget the above, that works.

I’m talking about the ‘Impact Text + Button’ page element.

[Rui Guerreiro – SUPPORT]

Hi,

So you want to open a modal with the Impact text button? That’s it?
The Impact text button doesn’t have that feature as standard.

-Rui

[mhote]

That’s right Rui. It’s great for mentioning a contact us type call to action, then having the modal window pop up immediately verse redirecting the user. Any way to configure that? thanks!

[Kyle – SUPPORT]

Hi

Unfortunately not, it would require some additional code. Will see if we can add the option in a future update

– Kyle

[Kirsten]

Hi, I was also looking for a solution and I made up a custom one using the boxed content item in the pagebuilder and setting it on ‘white with stroke’.
Then in the content of the boxed content item I placed this:

[three_fourth][pullquote]HERES COMES THE CALL TO ACTION[/pullquote][/three_fourth][one_fourth_last][sf_modal header="" btn_colour="accent" btn_type="standard" btn_size="standard" btn_text="BUTTON CONTENT"]
ENTER THE MODAL BODY HERE
[/sf_modal][/one_fourth_last]

After publishing I made a few CSS changes to get the looks right:

blockquote.blockquote2, blockquote.blockquote1 p, blockquote.pullquote, blockquote.pullquote p {
    font-size: 22px;
    line-height: 50px;
}
blockquote, blockquote p {
 font-style: normal!important;
}

Thats it! Good luck everyone!

[Mohammad – SUPPORT]

Hi,
Great! thanks Kirsten for sharing solution.
Thanks
Mohammad