Native Popup

A free Carrd plugin template for native popup modal. Works with existing native elements in Carrd, no embed code. Works even on the free Basic plan! Tutorial here →

• Popup 01
• Popup 02

• See more Carrd plugins
• Download plugin now

Related popup plugins: Text Popup Modal | Scroll To PopupMade by @jasonleowsg | Jason's Plugins For Carrd.

• Cancel

Popup 01

This is a 'popup', but not really. It's just a Section that's designed to look like a wide popup.Tutorial here on how to set it up →

• Back

• Cancel

Popup 02

This is a 'popup', but not really. It's just a Section that's designed to look like a small popup alert.

• Back
• OK

• Cancel

Tutorial

Here's how to set up a popup using just native Carrd elements:1 - Add a Section Break element (say, named #popup01).2 - On whichever the Button/Icon element you want to redirect to the popup, add #popup01 to the URL field of the Button/Icon element.3 - Add a Container just below the #popup01 Section element. Set a Border color, and Background to #FFFFFF or any base color to stand out from the background. Set the Container to be aligned to to center of page. Make it look like it's floating in the middle of the page, like a popup.4 - Add an Icon element at top of Container.5 - Set "Alignment" of Icon to right. Select the "X Cancel" icon. Set "Shape" to Circle. Add # to the URL field of the X icon, so that on click, it redirects back to home page (or anywhere you want).6 - Add text below the Icon for your popup message.7 - Add a Button labelled "Back". Set the URL to just # - it will redirect back to the home page. Or change it to any URL you need.8 - Go to the Page element → Animation tab → On Section Change, set to Fade In. This gives a fade in animation to your Section, making it look like your popup popup and fades in.9 - Publish and done! Now you got a native 'popup'!

• Back