The Age Gate widget lets you place user restrictions by age on your website to prevent or authorize who could access your content. Provided by BdThemes and a part of the Element Pack Pro widgets collection, let’s see how the widget works.

Inserting widget

Find the Age Gate widget from the widget menu inside the Elementor page editor and drag it inside the page.

Customize widget layout using the Content tab

The content tab is where all the layout options reside for the widget to help you customize the output interface according to your needs.

Layout customization and setup

Go to Content> Layout

The Age Gate widget appears as a popup window on the target page. The popup asks users to confirm their age before proceeding to access the content inside the page.

After inserting the widget, you will find some controls in the layout section. First, you can change the popup or modal width using the scrollbar. Then comes an expiry timer that triggers the popup once the timer is up to confirm the user’s age again.

The two switchers at the bottom show or hide the modal header and footer.

Customize Modal Header text

Go to Content> Modal Header

Here, you can change the header text of the modal along with text alignment.

Change modal content

Go to Content> Modal Content

As for the content for the modal, you can put text or other media files into the description field provided in this section for the age gate widget.

Customize Modal Form for layout

Go to Content> Modal Form

This is where you need to define the age of the user to apply the age restriction on your page. Let’s say we want users above 18 years of age to access the site, so we put 18 in the “Required Minimum Age” field.

Then comes the alignment option, placeholder text, button text, and a redirect URL field that you can use to redirect users to another page when he/she fails to fulfill the age restriction.

Age Gate widget Modal Footer

Go to Content> Modal Footer

In this part, you get the same options as the widget header.

Don’t forget the Additional settings

Go to Content> Additional

Here, you can see a close button customization option to make it appear inside of the modal or outside. Then you can delay the appearance of the close button on the modal or make the modal center positioned using the switchers at the bottom.

Customize the widget interface using the Style tab

The style tab is where you can customize the layout appearance by color, border, padding, typography, etc. Let’s see how to do it for the Age Gate widget.

Customize Modal Close Button

Go to Style> Modal Close Button

Here, you can change the background color and icon color of the close button. Let’s pick a color that goes well. Then add some border radius to make them round.

Customize the Modal Header

Go to Style> Modal Header

Let’s make the age gate widget header stand out by applying a bright color on the background, no border, then changing the font by typography and adding box shadow.

Change the Modal Content Layout

Go to Style> Modal Content

This section lets you customize the text color, background, border radius, and padding of the modal body.

Customize the age gate field

Go to Style> Fields

Let’s increase the field width and spacing first. Then you can change the text and background colors. There are more options like padding, box shadow, typography here.

Customize the submit button

Go to Style> Submit Button

In this section, you can customize the submit button by changing the background and text color. Leaving border and padding as they are.

Customize the Modal Footer

Go to Style> Modal Footer

Here, you can change the modal footer using similar options as the modal header. We are changing the color of text, white for the background and border on top of the text.

Use the Additional section

Go to Style> Additional

With this section, you can place an overlay color over the web page as a part of the user restriction to further enhance data protection. The color option comes with opacity control. Once the user submitted his age, the color restriction will lift, revealing the main content.

Video Assist

Watch this quick video to learn more about the age gate widget and visit the demo page for examples.