If your business is selling an age-restricted product, age verification on your website is essential. Adding this additional security layer not only informs users about the age requirement for sensitive products, but also ensures they confirm eligibility to access your content.
It’s similar to the cookies consent popup. You also have the ability to make the confirm message full-screen to hide your content, which forces users to take action before seeing it.
But WordPress doesn’t include any built-in age verification functions to help you handle that. If you’re an Elementor user looking for this functionality, you’ll need the help of some plugins – either the Pro version of Elementor, or an alternative.
In this article, we’ll go through how you can add age verification with Elementor – there’s actually 2 methods you can use to add age verification using Elementor.
- Add Age Verification to Your WordPress Site With Elementor Pro
- Add Age Verification With Elementor Free and Elfsight
Add Age Verification to Your WordPress Site With Elementor Pro
You’ll need Elementor Pro to create slide-in popups for an age-restriction purpose. Here is a step-by-step guide:
Step 1: Create a Popup
Navigate to Dashboard > Templates > Popups > Add New.
A new screen displays. Name your template here and click Create Template.
Then, choose a template from the Library or create your own design.
Step 2: Edit Popup Settings
When it comes to Popup settings, there are 3 tabs that you should focus on, i.e., Settings, Content, Style. Each tab provides a different customization option to make your own popup.
First, in the Settings tab:
-
-
-
- Set the Horizontal and Vertical position to Center
- Show Overlay
- Hide Close Button
-
-
Set Entrance Animation to Slide In Left
Secondly, in the Style tab:
Set Overlay to either a solid color or gradient, with no transparency.
Third, in the Content tab:
Change content as needed. You can use YES and NO buttons to either close the popup or redirect the user to another site.
For the YES button, you can use the link field to set a Dynamic Popup Action to Close Popup.
For the NO button, you can use a link to Google, so the user will be sent away from your site.
Once done, click Next to move to the following step.
Step 3: Adjust Publish Settings
Now, you are able to determine where, when, and how your age verification pops up on your sites. Elementor Pro provides 3 tabs for you to customize these kinds of information.
Conditions are how you can control where the popup shows.
Typical conditions might be to the only pop up on the front page, or to pop up on every page of the entire site, or to the only pop up on a specific category or tag, etc.
Triggers controls when to display based on user-specific actions. This tab used to define specific actions users take that will automatically generate a popup, for example on opening a new page or scrolling down the page.
Other triggers include when a user intends to exit the page, or when their interaction with the page turns idle for a period of time.
Finally, Advanced rules is used to control a popup based on non-user-specific actions, using other requirements that must be met to generate a popup.
Examples of advanced rules include popping up after a certain number of visits, when arriving from a particular URL, or only on specific devices.
Once you’re done, click the Save & Close button to apply your settings. As a result, the age verification popup has been added to your website.
Now, let’s move on to the next method, which is totally free for basic age verification purposes.
Add Age Verification With Elementor Free and Elfsight
In this section, we’ll guide you on how to create a customized age verification without paying any fee. To do that, you’ll need the Elementor Free version and Elfsight.
The process of adding age verification with Elementor Free and Elfsight can be done in 2 steps.
Step 1: Create Widget with Elfsight
First, access the Elfsight website, and in the top right corner, choose Create widget.
A new screen with a widget demo will show to you.
Choose your desired template and click Continue with this template. A new screen displays. Here, you can customize your age verification message.
#1 In the Settings tab:
-
-
- The minimum age: users of this age can access your content.
- Verification method: Date of Birth, Year of Birth, or Yes/No Buttons.
- Date format
- Remember visitor: stores user verification in cookies
- Underage action: you can key in the message that will show to your users when they’re underage or redirect them to a page.
- Where to display: choose to display the age verification on all pages, or specific pages.
-
#2 In the Content tab: adjust the content which will be presented in your age verification pop-up.
This tab enables you to edit the message, the caption, the submit button text, the additional info, and change the logo.
#3 In the Style tab, you can customize:
-
-
- The background image
- Align
- Shape
- Color
- Fonts
- Custom CSS
-
Once you’re done, click the Join To Install button. A new window will display asking you to sign up for the Elfsight. When successfully signed up, you will be redirected back to the widget setting page.
In the top right corner, click Save.
After that, you’ll be redirected to the page with a list of your available widgets. In the widget line that you intend to use, click Add to website and your popup will appear.
You can then copy the code snippets in the code field.
Step 2: Add Age Verification Widget to Elementor
After logging into your WordPress dashboard, navigate to any pages or posts – for example, Homepage > Edit with Elementor.
In the Elementor editing page, search for HTML.
Drag and drop the HTML icon to anywhere on the page where you want to implement the age verification. Once you’re done, insert the copied code into the HTML Code.
The age verification on your homepage will look like this:
Remember to press Update to save your settings. Then you can move to the front end and see how the plugin works.
Utilizing Age Verification with Elementor
Adding age verification is imperative if your site offers adult content or cover topics like alcohol or gambling, allowing you to control exactly who can see your content. If you have Elementor Pro, you can set this up using pop-ups quite easily. As a free alternative, you can also create age verification messages with the free version of Elementor and Elfsight.
