All Collections
Creating Content with Candu
Modals
Overlay example: creating a paywall
Overlay example: creating a paywall

Step by step guide to building a paywall overlay.

Flora Sanders avatar
Written by Flora Sanders
Updated over a week ago

In this example, we'll create a non-dismissible paywall overlay prompting users to upgrade to use premium features by starting a free trial!

To begin with, you'll need to...

  1. Create your content as an Overlay:
    ​

  2. We want to make our overlay non-dismissible and we don't want to hide the backdrop
    ​


    ℹ️ Selecting Hide Backdrop allows users to keep the overlay open while interacting with the screen behind. The only way to dismiss an overlay with Hide Backdrop selected is via the dismissible 'X' or a button set to dismiss the overlay ✨
    ​

  3. Drag on your content as usual and customize the copy! Here, we'd want an image, a layout underneath for your typography, three layouts nested in that parent layout (set to row with an image and typography), and a layout underneath for your CTA buttons.
    ​

  4. Now, let's customize the overlay itself! We want to remove the padding around the overlay and we don't want there to be a radius or border on it:
    ​


    ✨ Top tip ✨ Click on the icon next to Padding to change all 4 at the same time! Click again if you want to make a change to any of them individually.


    There you have it! You've created your paywall overlay 🎉
    ​

Ready to launch your masterpiece? Here's our article on how to launch your overlay! 🚀

Did this answer your question?