Using The Kadence Pro Modal Block

[@nickdixon3536]

This guy teaches indepth! Breaks it all down very well

[@DavidMcCan]

Thank you!

[@beckymelton1046]

Thanks for pointing that out... I missed that there was a modal in Kadence Blocks. Kadence is the BEST! More Kadence tutorials!

[@HaifengZhu-pn3uq]

This is very useful, please make more tutorial on how to create static content carousel.

[@kilianmoser4449]

Very clear and informative - I really like your videos, thank you for that!

[@DavidMcCan]

Thank you for taking the time to leave this nice feedback.

[@lawrencebeard4473]

Thank You very much. Learned something new today!

[@withmikes]

sometimes I feel like you're stalking me 😆 your videos seem to magically address what I'm trying to do

[@DavidMcCan]

😂

[@OlexDesign]

Great Kadence tutorials. Thank you!

[@DavidMcCan]

Thank you.

[@danielo8097]

amazing tutorial. thanks.

[@DavidMcCan]

Thank you for letting me know you liked it.

[@HaifengZhu-pn3uq]

Can you make tutorial on Kadence Portfolio Grid/Carousel block?

[@DavidMcCan]

Thank you for the good suggestion.

[@Naziruddinhimel]

Hi David, Thank you for the amazing tutorial. Very nice and easy! Just wondering, is it possible to trigger this modal on scroll %?

[@DavidMcCan]

Not as far as I've seen.

[@Naziruddinhimel]

Understood. Thanks!

[@mattwithahat3857]

Can you have a trigger on exit or trigger after x seconds for this?

[@DavidMcCan]

I don't think so.

[@jamesmarsh4047]

thaanks for the help, adding a modal to my site. one question was the first page you showed just three columns ?

[@DavidMcCan]

The archive on the test site? Yes, that was 3 columns. I think it was the Kadence theme layout.

[@jamesmarsh4047]

@@DavidMcCan crap. I have kadence pro but no pro blocks. Oh well

[@DavidMcCan]

@@jamesmarsh4047 - That's too bad. And they have raised the prices quite a bit.

[@jamesmarsh4047]

@@DavidMcCan 420 dollars even for old members. Any other modal options? Thanks !

[@DavidMcCan]

@@jamesmarsh4047 - Maybe they will have another sale. Stackable is my next choice, but it doesn't look like they have a modal block yet and neither does Ultimate Addons for Gutenberg. There are none that I've used. Sorry.

[@szymonpyrdek8516]

What to do if I want modal to be open right away after opening the specific URL? Custom js needed?

[@DavidMcCan]

Yeah, I didn't see a timer option, so probably need custom JS.

[@stevechong65]

Thanks for the video David, now, how do you call a popup from another page? I want to create a popup that could be reused over and over again. Thank you.

[@DavidMcCan]

You might experiment to see if you could use Kadence Pro elements to create the modal content. It allows you to include the content using a shortcode.

[@stevechong65]

@@DavidMcCan Thanks for the reply. The thing is, how to call/trigger the shortcode.

[@DavidMcCan]

@@stevechong65 - You do it through a button or link, which you can include in the element if you want.

[@stevechong65]

@@DavidMcCan Thanks for the reply. Problem is when I call the shortcode it load in entire page ...

[@BrianShim]

I verified that if you put the modal into a Kadence Pro Content Element and set the Element to appear on every page (say, after the content), you can trigger the popup from any page. Works great.

[@kishanjithB4U]

How to disable multiple entries on the form ?

[@DavidMcCan]

As far as I know, that is not possible. It seems like it should be if you are using Pro and saving entries to the database. I'd check with support and see if they can add this feature.

[@sbfotome]

Can the modal be loaded automatically on a page or post load? I know you can design a modal as an element. But can it be set to auto load?

[@DavidMcCan]

By design it opens on a button or link click / press. I imagine that you could add some JavaScript to open it on page load.

[@bradallenfisher]

can modals be triggered without a link? like in elementor?

[@DavidMcCan]

Like on exit intent or percent of page scrolled? No. You can use the link option that comes with the block or add a link with the Advanced Button block somewhere else on the page.

[@bradallenfisher]

@@DavidMcCan yeah I was thinking on page load etc... thanks

[@birdbrainsolutions6112]

Great video, would have subscribed if I wasn't already :)

[@DavidMcCan]

Thanks.

[@debiamo]

Hello. When opening the modal window, the site moves to the right and removes the browser scroll bar. Can this be fixed?

[@DavidMcCan]

I don't have that issue. Perhaps the content inside the modal is larger than the screen size? There is a panel on the right for Modal Box Size. It has some settings and you can also set those by device size there by clicking on the desktop, tablet, and mobile phone icons. If you are adding images or other content inside the modal then they may need settings adjustments also.

[@debiamo]

@@DavidMcCan Unfortunately, you don't understand what I'm talking about. The problem I'm talking about is always there for everyone. I'll write later.

[@debiamo]

@@DavidMcCan Open your website, open a modal window and follow the browser scroll bar. By the way, the video popup does not have such a problem.

[@DavidMcCan]

@@debiamo - Video share removed

[@debiamo]

@@DavidMcCan I sent you screenshots on Facebook

[@alexunder649]

ok, but how to put it inside the button in header ? Give a class to it is not available.

[@DavidMcCan]

The button has the class "header-button". I'm not sure if it will work, if the JS and CSS will be loaded, but it is worth a try.

[@alexunder649]

@@DavidMcCan it doesn’t work at default. How to give a class to it ?

[@DavidMcCan]

@@alexunder649 - You could do some custom JavaScript programming to add a class, but even then I don't know that it would work. If you have access to Kadence support then I'd ask them how to trigger a modal from the header button. If it is possible, then you would get all of the steps necessary.

[@alexunder649]

@@DavidMcCan it would be nice . Thanks

[@alexunder649]

@@DavidMcCan cause IDK how to do any js . Just want to start teaching it , but don't know from what exactly and how to write it ? In css or somewhere else ? Or in js files ??