How To Use The Age Gate Widget By Atomic Addons

The Age Gate widget by Atomic Addons opens a popup over the page as soon as it loads and asks visitors to confirm their age: they type it in, or answer Yes or No. Visitors who pass close the popup and see the page; the others see a message or are sent to another address. This guide covers adding the widget, choosing the question and setting up the popup.

Enable the Age Gate Widget

Age Gate is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Age Gate. You can also open the Content category.

4. 4

   Turn the Age Gate widget on.

5. 5

   Click Save Settings.

Add the Age Gate Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Age Gate. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The widget takes up no space on the page: it opens as a popup over the whole page when the page loads, so it does not matter where you drop it. Add it to each page that needs the check. In the editor the popup opens every time you change a setting; click outside it to close it while you work.

Modal Form

Open the widget and go to Content → Modal Form:

1. 1

   Layout Type: Input Age, the default, shows a number field and a button: the visitor types their age. Yes/No Buttons shows two buttons instead.

2. 2

   Required Minimum Age: With Input Age: the lowest age that passes, 18 by default.

3. 3

   Alignment: Left, center (the default) or right alignment of the field and buttons.

4. 4

   Form Placeholder: With Input Age: the hint inside the field, “Your Age” by default.

5. 5

   Button Text: With Input Age: the button's text, “Submit” by default. Pressing Enter in the field works too.

6. 6

   Button Text (Yes): With Yes/No Buttons: the text of the button that lets the visitor in, “Yes, I'm 18+ older” by default.

7. 7

   Button Text (No): With Yes/No Buttons: the text of the button that turns the visitor away. Leave it empty to show only the Yes button.

8. 8

   Redirect URL: Where to send visitors who do not pass. Leave it empty to keep them on the page with the message below.

9. 9

   Age Invalid Message: The message shown under the form when a visitor is too young or clicks No, “Sorry, your entered age is not suitable for our condition.” by default.

A visitor passes when the age they type is at least the Required Minimum Age, or when they click Yes. The popup closes and their browser remembers the answer, so it does not open again for that widget. A visitor who does not pass sees the Age Invalid Message and, with a Redirect URL, is sent there at once.

Clicking outside the popup never closes it. If a visitor closes it with the close button or the Esc key without passing, they are sent to the Redirect URL, or, without one, the popup opens again after a moment.

Layout

Content → Layout:

1. 1

   Modal Width: The popup's width, from 320 to 1200px, per screen size.

2. 2

   Show Modal Header: A title bar at the top of the popup. On by default.

3. 3

   Show Modal Footer: A line of text at the bottom of the popup. On by default.

Modal Header, Content and Footer

• Modal Header — with Show Modal Header on: the Header Text (“This is your modal header title” by default), shown as a level-three heading, and its Alignment (left by default).
• Modal Content — the text above the form, in a text editor: “You can view this webpage only if you are at least 18 years old.” by default. Its Alignment (center by default) also applies to the invalid message.
• Modal Footer — with Show Modal Footer on: the Footer Text and its Alignment (left by default). Use it for a short legal note.

The header, content and footer text accept dynamic tags.

Additional

Content → Additional:

1. 1

   Modal Close Button: Default puts a close button inside the popup's corner, Outside puts it just outside the popup, and No Close Button removes it and also stops the Esc key from closing the popup, so visitors have to answer. Do not use Outside with a full-screen popup.

2. 2

   Close Button Delay Show: Fades the close button in slowly after the popup opens, over the Close Button Delay Time(sec) (2 seconds by default).

3. 3

   Center Position: Centers the popup vertically on the screen. Off, it sits near the top.

Style the Age Gate

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Modal Close Button — the close button's color, background, border, radius, padding and margin in Normal and Hover states, and a hover animation.
• Modal Header, Modal Content and Modal Footer — backgrounds, padding, borders and text styles of each part of the popup.
• Fields — with Input Age: the age field's width, spacing, text and placeholder colors, background, border, radius, shadow, padding and typography, with a Focus state.
• Submit Button, Button (Yes) and Button (No) — each button's colors, background, border, radius, padding and typography in Normal and Hover states, and a hover animation.
• Invalid Message — the message's color, margin and typography.
• Additional — the overlay behind the popup: its Overlay Background color, Opacity and a Background Blur that blurs the page underneath.