Thanks to Michelle Nunan in KadenceWP Support Group.

We use popups judiciously but we DO use them! For instance, we use modals for login boxes and a few subscription buttons. If you’re using Kadence Blocks, they make it really easy to use the built-in “modal” block to create any type of popup.

FAQ

Modal is just another word for popup.

By default, the modal block will input a button on the page that opens up a window. You add your content into the popup window, you style the button. And voila!

This tutorial is for those that wish to use something other than a button to link to your popup window.

Step by Step Instructions to Use Modal Block in Kadence WP without a Button

Time needed: 2 minutes

How to use the Modal Block in Kadence WP

  1. Add the Kadence modal block to the page

  2. Add your popup content into the modal window.

    The modal window is the white box within the dark grey border.

  3. Turn off the “Show Link” And give your modal a Custom ID.

    We’re being super clever and adding “OPENSESAME” as our custom ID. Remember this- it is case sensitive.

  4. Add a Clickable Block.

    We’re using a photo to open the modal.

  5. In the Clickable Block, add link to the modal.

    We need to link our clickable block to the modal window we created in step 1. In Step 3 we named the modal window. The link will be # + [YOUR MODAL NAME] so in our case, it is #OPENSESAME (it is case sensitive). Add that link to the clickable block.

  6. Lastly, trigger the popup.

    The link now works. But it does not open in a modal window. It just links to the modal. The last step is to trigger the popup! Open the Clickable Block (from step 4).
    Go to Block Settings > Advanced Tab.
    In “Additional CSS Class(es)” field, add: “modal-trigger” without the quotations.

  7. Save the Draft.

    Test the popup in the front of your website. It will not work in the dashboard, and post editing screens.

See the Kadence Modal In Action Here

Beginner Checklist

If you’re starting out, you’ll love our comprehensive 52 point checklist for your website! Read through once, and then work on items one at a time as it comes up!

52 Edits Checklist – beginners categories

Cathy Mitchell

Single Mom, Lifelong Learner, Jesus Follower, Founder and CEO at WPBarista.