How to Create Age Verification Popup in Elementor

Updated: April 14, 2022

If your website distributes goods or digital content that are not meant for minors, you’ll need a measure of protection used to restrict access to your shop or your digital content for those who haven’t reached a certain age. The age verification popup can solve that problem. That can also avoid problems with the law and keep your website’s reputation.

This tutorial will show you how to create an age verification popup in Elementor Pro. Because the feature of creating a popup template is only accessible on Elementor Pro, make sure that you already have one.

How to Create an Age Verification Popup in Elementor Pro

On your WordPress dashboard, go to Templates -> Popups. Click the Add New button to create a new popup template.

Enter a template name and click the CREATE TEMPLATE button. It will bring you to the template library, which contains many premade popup templates. You can pick one of them or create from scratch, which is what we will do. Click the (X) button, bringing you to the Elementor editor.

Go to Popup Settings by clicking on the (⚙️) button, and then we’re going to apply some changes. You can see as below:

Settings tab -> Layout

  • Width: 550
  • Height: Custom
  • Custom Height: 1000 PX
  • Content Position: Top
  • Close Button: HIDE
  • Entrance Animation: Fade In
  • Exit Animation: Fade Out

Style tab -> Popup

  • Background Type: Classic
  • Color: #02010100 (Transparent)
  • Image: Insert Media

Next, create a new section with a single column. Select the Heading widget on the widget panel, then drag and drop it into the canvas area.

Compose the text and start to design with your creativity. As your preference, you can check our settings below:

Content tab -> Title

  • Title: Are You Over 21?
  • HTML Tag: H1
  • Alignment: Center

Style tab-> Title

  • Text Color: #FFFFFF
  • Typography -> Size: 50 PX
  • Text Stroke: 5 PX, Stroke Color: #252A2F

Now it’s time to add the buttons. We want to design the first button. Select the Button widget from the widget panel, then drag and drop it into the canvas area (under the Heading widget).

Let’s start to design the button. As your preference, you can check our settings below:

Content tab -> Button

  • Text: YES
  • Alignment: Center
  • Size: Medium
  • Icon: Pick the Check (☑️) icon from the Icon Library
  • Icon Position: After

Style tab -> Button

  • Typography -> Size: 20 PX
  • NORMAL:
    • Text Color: #FFFFFF
    • Background Type: Classic
    • Color: #3D5040
  • HOVER:
    • Text Color: #000000
    • Background Type: Classic
    • Color: #E00808
    • Hover Animation: Shrink
  • Border Radius: 30 PX (Iink values together)

Advanced tab -> Layout

  • Margin: Unlink the values; on the TOP field, set it to 20 PX

Next, we’re going to add the second button. Please select the Button widget from the widget panel, then drag and drop it into the canvas area (under the first button). There are some changes that we’re applied, as below:

Content tab -> Button

  • Text: NO, I HAVE A CANDY
  • Alignment: Center
  • Size: Medium
  • Icon: Pick the Candy Cane from the Icon Library
  • Icon Position: After

Style tab -> Button

  • NORMAL
    • Text Color: #FFFFFF
    • Background Type: Classic
    • Color: #20121200 (Transparant)
  • HOVER
    • Text Color: #FFEDEDBa
    • Background Type: Classic
    • Color: #B7149A
  • Border Type: Solid
  • Width: Unlink the values; on the BOTTOM field, set it to 3 PX
  • Color: #0D20A1
  • Border Radius: Unlink the values; on the BOTTOM field, set it to 3 PX
  • Padding: Unlink the values; on the BOTTOM field, set it to 3 PX

Advanced tab -> Layout

  • Margin: Unlink the values; on the TOP field, set it to 15 PX

Once you have finished designing the buttons, we move to the section setting. Click the section handle to edit the section, then you can play around with the settings. As your reference, you can check some changes that we applied here, as below:

Layout tab -> Container

  • Height: Min Height
  • Minimum Height: 350 PX

Style tab -> Background

  • Background Type: Classic
  • Color: #0360D766

Style tab-> Border

  • Border Type: Solid
  • Width: 25 PX (link values together)
  • Color: #2F004AA8
  • Border Radius: 45 PX (link values together)

Advanced tab -> Layout

  • Margin: Unlink the values; on the TOP field, set it to 60 PX

Next, we’re going to aim the buttons. We start with the YES button; we want to trigger this button to close the popup. Go to the Link option, then click the Dynamic Tags icon. Under that, select the Popup option and then click the wrench icon to see some settings. On the Action option, set it to Close Popup. After that, on the Don’t Show Again option, set it to YES by sliding the toggle to the right.

We will set the NO button as navigation to an age-appropriate site. Go to the Link field and add any link you want.

We need to make sure that your visitors will respond to your popup. Please go back to the Popup Settings, then click the Advanced tab. There are many options here, but we only two options that we need to change. On the Prevent Clicking on Overlay and Prevent Clicking on ESC key options, please set those options to YES by sliding the toggle to the right.

Because this popup is displayed by clicking the button, you can publish it without setting any conditions, triggers, or advanced rules — Click PUBLISH and then SAVE & CLOSE button.

How to Apply the Age Verification Popup to the Page

Edit your existing page or new page with Elementor. Once you enter the Elementor editor, add the button widget from the widget panel to the canvas area. If you already have the button before, you can directly go to the button settings. On the Link option, click the Dynamic Tags icon then select the Popup. After that, click the Popup field to find some settings. Set the Action to Open Popup, and then write the name of the popup that you’ve just created above.

Voilà. Let’s see it in action.

The Bottom Line

Age verification is a must if you operate in an age-sensitive. It makes your website compliant with laws and regulations issued by the legal institution in your country—an age verification popup is used to restrict underage users from accessing your website. With Elementor Pro, you can easily create an age verification popup and provide you to design with your creativity.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general