{"id":7384,"date":"2022-02-06T16:00:00","date_gmt":"2022-02-06T16:00:00","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=7384"},"modified":"2023-02-21T09:42:09","modified_gmt":"2023-02-21T09:42:09","slug":"how-to-create-an-age-gate-popup-advanced-pro","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/","title":{"rendered":"How to Create an Age Gate Popup [Advanced PRO]"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7384\" class=\"elementor elementor-7384\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4bdfe9df thesinglevideo elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"4bdfe9df\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-649a3c09\" data-id=\"649a3c09\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4b9d1363 elementor-widget elementor-widget-video\" data-id=\"4b9d1363\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/j0S_NqewddU&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2b4a2201 thesinglevideoOver elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2b4a2201\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-49a4155a\" data-id=\"49a4155a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-60516261 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"60516261\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1611\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1611\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1612\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1612\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1611\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1611\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1611\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial we learn how to create an Age Gate Popup. We\u2019ll explore three different methods to achieve this. The first will make use of the buttons widget. In the second method we\u2019ll use the acceptance field on a form. And in the third and final solution, we\u2019ll utilize some custom Javascript to allow the user to enter their date of birth.<\/p><p>The tutorial will cover:<br \/>\u2714\ufe0e How to create a popup<br \/>\u2714\ufe0e How to create an age gate using buttons<br \/>\u2714\ufe0e How to create an age gate using the acceptance field on a form<br \/>\u2714\ufe0e How to create an age gate using the date field on a form<br \/>\u2714\ufe0e And much more!<\/p><p>Custom Javascript:<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1612\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1612\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1612\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Ash from Elementor.<\/p><p>In today\u2019s tutorial we\u2019re going to learn how to create an age gate for a website. This incredibly useful feature can be utilized when you need to restrict your website&#8217;s content for a particular age category. Some use cases could be a bar, brewery, or in our case, a wine merchant.<\/p><p>We\u2019ll explore three different methods to accomplish this task, all of which will make good use of the Elementor popup feature.<\/p><p>The first will be created using two buttons. If the user is old enough they can select so and they are granted access to the website. If they\u2019re not old enough, an error message is displayed and they will be unable to navigate any further.<\/p><p>Our second method will utilize the acceptance box on a form. If left unchecked, the user will not be able to navigate past the popup. When checked and submitted however, the popup will disappear and allow them to view the website.<\/p><p>Our final and most advanced method will make use of the date field in a form, which will allow the user to enter their date of birth. We\u2019ll then add in some custom Javascript to work out whether or not the visitor is old enough to view the website.<\/p><p>Feel free to jump to any of these methods using the timestamps below. Now, without further ado, let\u2019s get started.<\/p><p>The first step in creating our age gate feature is to create the \u2018Entry Denied\u2019 popup. This will show if the user selects \u2018no\u2019 via our button method , or if they enter a date of birth which doesn\u2019t fit within our parameters.<\/p><p>We\u2019ll configure this popup so that the user is unable to navigate past it, therefore restricting access to underage visitors.<\/p><p>Let\u2019s head over to \u2018templates &gt; popups\u2019 to create this.<\/p><p>We\u2019ll add a new popup\u2026give it a name\u2026create the template\u2026and dismiss the library.<\/p><p>Select the gear icon first and let\u2019s configure some basic settings.<\/p><p>We\u2019ll set our width to 100vw and the height to \u2018fit to screen\u2019.<\/p><p>Leave \u2018Overlay\u2019 as hidden, as our design already fills the users screen. Hide the \u2018Close Button\u2019 to eliminate this way of a user bypassing the \u2018Entry Denied\u2019 screen.<\/p><p>And then we\u2019ll set some subtle animations for the popup.<\/p><p>Now in the style tab, we\u2019ll set a gradient background. The primary color\u2026the secondary color\u2026and the type.<\/p><p>Switch over the advanced tab now and let\u2019s further strengthen our popup to restrict a user being to close it.<\/p><p>We can leave \u2018Prevent Closing on Overlay\u2019 as it is, as our design doesn\u2019t use this function. If yours does however, you will want to enable this to stop your visitors being able to close the popup.<\/p><p>\u2018Prevent Closing on Escape Key\u2019 we will enable to stop the user being able to close the popup using the escape key. This combined with the lack of a close button will make it difficult for a user to bypass the \u2018Entry Denied\u2019 screen.<\/p><p>Finally we\u2019ll disable the page scrolling when the popup is displayed.<\/p><p>Let\u2019s now add in a new single column section and build our \u2018Entry Denied\u2019 message.<\/p><p>Set the height to \u2018Fit to Screen\u2019, and the column position to \u2018Stretch\u2019.<\/p><p>Select the column handle and then set the vertical align to \u2018middle\u2019, and the horizontal align to \u2018center\u2019.<\/p><p>If we now open the widgets menu, you\u2019ll see we\u2019ve already added several widgets to our favourites for easy access.<\/p><p>Drop in the logo widget first of all\u2026then drop in the heading widget. Here we\u2019ll amend the text like so\u2026alignment\u2026then in the style tab, the size, and the line height. In the advanced tab next, we\u2019ll unlink the margin values and add 60px to the top.<\/p><p>Now add in the text editor widget.<\/p><p>We\u2019ll add in our \u2018Entry Denied\u2019 message\u2026set the alignment\u2026font size\u2026line height\u2026and add some margin.<\/p><p>OK, this is looking great so far and will provide a clear message to our visitors if they happen to be underage.<\/p><p>We\u2019re going to save this as a template first of all, as it will provide us with a good base for creating our Age Gate popups, saving us lots of time.<\/p><p>Select the arrow next to the publish button, and choose \u2018Save as Template\u2019.<\/p><p>Give the template a name\u2026and save. Dismiss the window and now publish the \u2018Entry Denied\u2019 popup.<\/p><p>We\u2019ll add a condition so that the popup can be loaded on any page of our website.<\/p><p>Once finished, save and close.<\/p><p>With our \u2018Entry Denied\u2019 popup created, and saved as a template, we\u2019re now ready to create our first \u2018Age Gate\u2019.<\/p><p>Using your keyboard, bring up the Elementor Finder, but typing CMD or CTRL + E\u2026typing popups and select.<\/p><p>Add a new popup\u2026give your popup a name like so\u2026and create template.<\/p><p>Select \u2018My Templates\u2019 and insert the template we\u2019ve just created.<\/p><p>Let\u2019s now make some adjustments. We\u2019ll delete the heading first\u2026and then amend the text like so.<\/p><p>Choose the widgets menu next and add in the inner section widget.<\/p><p>Now drop in the button widget.<\/p><p>We\u2019ll set the text to \u2018No\u2019 and then select the dynamic tags icon where we\u2019ll choose popup from the dropdown.<\/p><p>Selecting the wrench icon allows us to choose an action\u2026and then we can search for a previously created popup.<\/p><p>When selected, this button will now launch the \u2018Entry Denied\u2019 popup.<\/p><p>With our \u2018Entry Denied\u2019 popup created, and saved as a template, we\u2019re now ready to create our first \u2018Age Gate\u2019.<\/p><p>Using your keyboard, bring up the Elementor Finder, but typing CMD or CTRL + E\u2026typing popups and select.<\/p><p>Add a new popup\u2026give your popup a name like so\u2026and create template.<\/p><p>Select \u2018My Templates\u2019 and insert the template we\u2019ve just created.<\/p><p>Let\u2019s now make some adjustments. We\u2019ll delete the heading first\u2026and then amend the text like so.<\/p><p>Choose the widgets menu next and add in the inner section widget.<\/p><p>Now drop in the button widget.<\/p><p>We\u2019ll set the text to \u2018No\u2019 and then select the dynamic tags icon where we\u2019ll choose popup from the dropdown.<\/p><p>Selecting the wrench icon allows us to choose an action\u2026and then we can search for a previously created popup.<\/p><p>When selected, this button will now launch the \u2018Entry Denied\u2019 popup.<\/p><p>Adjust the alignment next\u2026and then in the style tab we\u2019ll set our background color.<\/p><p>Right click the button next and copy it.<\/p><p>Now in the empty column, let\u2019s paste the button.<\/p><p>We\u2019ll amend the text this time to \u2018Yes\u2019&#8230;and under the link options, choose the wrench icon and this time choose \u2018Close Popup\u2019 under actions.<\/p><p>We\u2019ll enable the \u2018Don\u2019t Show Again\u2019 option, to ensure our users do not see this message again whilst browsing our website.<\/p><p>And then we\u2019ll set the alignment.<\/p><p>Let\u2019s now publish and set our display conditions.<\/p><p>We\u2019ll first set this to show on our entire website, this way it doesn\u2019t matter which page a user lands on they, they will see the popup regardless.<\/p><p>Under triggers we\u2019ll toggle \u2018On Page Load\u2019 to \u2018Yes\u2019 and then save and close.<\/p><p>Let\u2019s now test this out.<\/p><p>Be sure to open up an incognito window to ensure you\u2019re testing is effective.<\/p><p>We\u2019ll visit the website, and as you can see the Age Gate popup appears straight away. If we select \u2018No\u2019, the \u2018Entry Denied\u2019 message appears and stops us from accessing the website&#8217;s content.<\/p><p>Let\u2019s do a hard reload now and this time we\u2019ll select yes. The popup now disappears and allows us to continue viewing the website&#8217;s content.<\/p><p>OK, we\u2019ve made great process so far and learnt how to create one method of an \u2018Age Gate\u2019.<\/p><p>Let\u2019s now move onto the acceptance method.<br \/>Let\u2019s add a new popup\u2026give it name\u2026and create.<\/p><p>Add in our pre-created template next.<\/p><p>Delete the heading\u2026and amend the text.<\/p><p>In the widgets menu let drop in the forms widget.<\/p><p>Delete the first two fields, as these aren\u2019t needed, and now amend the third field.<\/p><p>We\u2019ll change the type to acceptance\u2026delete the label\u2026set this as a required field\u2026and then add in our acceptance text.<\/p><p>Expand the buttons tab now\u2026enter the button text\u2026and configure the alignment.<\/p><p>In the additional options area we\u2019ll enable custom messages, and then remove the success message. We\u2019ve removed this because we\u2019re not using the form to actually submit any information, and not require any messages to appear via the form widget.<\/p><p>Expand the \u2018Actions After Submit\u2019 tab next, and remove all of the default selections.<\/p><p>Now add a new selection and choose popup.<\/p><p>Open the new popup tab and select \u2018Close Popup\u2019 under actions\u2026and set \u2018Don\u2019t Show Again\u2019 as \u2018Yes\u2019.<\/p><p>With the functionality of our acceptance box created, let\u2019s now apply some styling.<\/p><p>We\u2019ll set our typography first\u2026font size\u2026weight\u2026and line height.<\/p><p>Now the buttons\u2026the font size\u2026background color\u2026text color\u2026followed by the hover text color.<\/p><p>Now in the advanced tab, we\u2019ll set the positioning to a custom width like so.<\/p><p>Let\u2019s now publish and test this Age Gate method out.<\/p><p>Select publish\u2026followed by adding a condition to load this popup across our entire website.<\/p><p>Under triggers we\u2019ll set this to load on page.<\/p><p>If we now save and close, then open up a fresh incognito window you\u2019ll see the Acceptance Box message appears\u2026and if we try to enter without checking the box we are not granted access to the website, but if we do check the box, the popup disappears and allows us in.<\/p><p>The third and final method will teach you how to create an age gate popup where the user has to enter their date of birth. If they are old enough to view the website\u2019s content, the popup disappears and doesn\u2019t show for them again. If they\u2019re not old enough, they are presented with the \u2018Entry Denied\u2019 popup which they cannot bypass.<\/p><p>Let\u2019s find out how to do this.<\/p><p>Add a new popup\u2026and give it a name\u2026then create.<\/p><p>Insert the pre-created popup from earlier on\u2026delete the heading\u2026and amend the text.<\/p><p>From the widgets menu, drop in the form widget.<\/p><p>Delete the first two fields and then expand the third field and change it to the date field. Delete the label\u2026delete the placeholder\u2026set it as required\u2026toggle the native HTML to \u2018yes\u2019 and in the advanced tab enter dateofbirth all lowercase with no spaces in the ID field.<\/p><p>Now expand the buttons tab.<\/p><p>Set the alignment\u2026the button text\u2026and in the button ID enter dateofbirthsubmit, again all lowercase with no spaces.<\/p><p>Expand the actions after submit tab next, then delete the collect submissions and email options. Now add in a popup option.<\/p><p>Open the newly added popup tab\u2026under action select \u2018Close Popup\u2019 and \u2018Don\u2019t show again\u2019 we\u2019ll set to \u2018Yes\u2019.<\/p><p>Finally, in the additional options area, switch on custom messages and leave the success message blank.<\/p><p>We\u2019ve kept open the previous popup so let\u2019s copy the styles from that form widget and paste them onto ours to save some time.<\/p><p>OK, great stuff, we\u2019re making great progress here.<\/p><p>Let\u2019s just double check our popup settings before we add our custom Javascript to enable the functionality.<\/p><p>The close button is hidden\u2026and our advanced settings are configured.<\/p><p>Open the widget menu now and drop in the HTML widget.<\/p><p>Within the HTML widget paste in the Javascript code which you copy from the video description. Just be sure to add the opening and closing \u2018Script\u2019 tags to ensure this works correctly.<\/p><p>Before we amend and test this code, let\u2019s learn exactly what this Javascript does.<\/p><p>First, you\u2019ll notice that our Javascript is enclosed within script tags. This is important, as it tells the browser what type of code this is. Please note you will need to add these yourself when copying the code from this video description.<\/p><p>Next, we have targeted the ID of the button in our form using an event listener. This tells the browser to perform an action when this button is clicked.<\/p><p>Now we must target the date field within the form and apply some actions to test whether or not the user is old enough to enter our website.<\/p><p>The Javascript works by taking today\u2019s date and subtracting the user\u2019s date of birth.<\/p><p>If the user is 18 or younger, the access denied popup will launch. We\u2019ve also included a fail safe configuration here, so that the form is not submitted if a user is underage. Without this, the user could simply refresh their page and access the website\u2019s content.<\/p><p>If the user is old enough, the popup simply disappears and is not shown to the user again.<\/p><p>We\u2019ve also included another fail safe which displays an error message, in case the user tries to submit the form with no date of birth.<\/p><p>We have just one amendment to make to this code which is to add the ID of our \u2018Entry Denied\u2019 popup.<\/p><p>Type CMD or CTRL + E to open the Elementor Finder. Type popups and open this in a new tab.<\/p><p>We\u2019ll locate the \u2018Entry Denied\u2019 popup which we previously created and copy the ID which we can find in the shortcode field.<\/p><p>Now head back to the Age Gate popup and paste this ID directly into the Javascript code.<\/p><p>OK, our popup is now created and ready to be published and tested.<\/p><p>Select the publish button\u2026set the popup to display across the entire website\u2026.then under triggers set \u2018On Page Load\u2019 to \u2018Yes\u2019.<\/p><p>Once finished, save and close.<br \/>Open up a new incognito window and visit your website.<\/p><p>OK, let\u2019s test out all of the potential scenarios.<\/p><p>If you try to enter the website without entering a date of birth, you can see an error message appears.<\/p><p>If we enter an underage date of birth you can see we\u2019re presented with the \u2018Denied Access\u2019 message.<\/p><p>Refresh now and let\u2019s enter a valid date of birth.<\/p><p>Awesome! As you can see, the popup now disappears and we\u2019re allowed to access the website.<\/p><p>And there we have it, three extremely effective methods of creating an age gate for your website.<\/p><p>Don\u2019t forget to subscribe to our channel and comment below with what you\u2019d like to see us create in our next tips and tricks tutorial.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f59e232 elementor-widget elementor-widget-code-highlight\" data-id=\"f59e232\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\ndocument.getElementById(\"dateofbirthsubmit\").addEventListener('click',function ()\n{\nvar dateString = document.getElementById('form-field-dateofbirth').value;\nif(dateString !=='')\n{\nvar today = new Date();\nvar birthDate = new Date(dateString);\nvar age = today.getFullYear() - birthDate.getFullYear();\n\nif(age &lt; 18 || age &gt; Infinity)\n{\nelementorProFrontend.modules.popup.showPopup( {id:50}, event);\nevent.preventDefault();\n}\n}\nelse\n{\nalert(\"You must provide your date of birth!\");\n}\n} );\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial we learn how to create an Age Gate Popup. We\u2019ll explore three different methods to achieve this. The first will make use of the buttons widget. In the second method we\u2019ll use the acceptance field on a form. And in the third and final solution, we\u2019ll utilize some custom [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":8886,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,14],"tags":[41],"class_list":["post-7384","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-pop-up","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Create an Age Gate Popup [Advanced PRO] - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an Age Gate Popup [Advanced PRO] - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial we learn how to create an Age Gate Popup. We\u2019ll explore three different methods to achieve this. The first will make use of the buttons widget. In the second method we\u2019ll use the acceptance field on a form. And in the third and final solution, we\u2019ll utilize some custom [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-06T16:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T09:42:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Age-Gate-Popup-v05-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ashley Whitehair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ashley Whitehair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create an Age Gate Popup [Advanced PRO] - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/","og_locale":"en_US","og_type":"article","og_title":"How to Create an Age Gate Popup [Advanced PRO] - Academy","og_description":"Overview Transcript Overview In this tutorial we learn how to create an Age Gate Popup. We\u2019ll explore three different methods to achieve this. The first will make use of the buttons widget. In the second method we\u2019ll use the acceptance field on a form. And in the third and final solution, we\u2019ll utilize some custom [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/","og_site_name":"Academy","article_published_time":"2022-02-06T16:00:00+00:00","article_modified_time":"2023-02-21T09:42:09+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Age-Gate-Popup-v05-1.png","type":"image\/png"}],"author":"Ashley Whitehair","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Ashley Whitehair","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/"},"author":{"name":"Ashley Whitehair","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8"},"headline":"How to Create an Age Gate Popup [Advanced PRO]","datePublished":"2022-02-06T16:00:00+00:00","dateModified":"2023-02-21T09:42:09+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/"},"wordCount":2618,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Age-Gate-Popup-v05-1.png","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","Pop Up"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/","url":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/","name":"How to Create an Age Gate Popup [Advanced PRO] - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Age-Gate-Popup-v05-1.png","datePublished":"2022-02-06T16:00:00+00:00","dateModified":"2023-02-21T09:42:09+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Age-Gate-Popup-v05-1.png","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/02\/Age-Gate-Popup-v05-1.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-create-an-age-gate-popup-advanced-pro\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to Create an Age Gate Popup [Advanced PRO]"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/a83ee0af0700704f04acf44839f06bd8","name":"Ashley Whitehair","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/49062696ae45a42e9206626097d74b7bfc6a8e6c413f53449a154f67c73ab82b?s=96&d=mm&r=g","caption":"Ashley Whitehair"},"description":"Ashley is an Elementor Specialist with a keen eye for design and a passion for creating user-friendly and effective websites. When he is not creating websites and educational material, he enjoys CrossFit, mountain biking, reading, and exploring the world.","url":"https:\/\/elementor.com\/academy\/author\/user-60190f8d0e66e\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=7384"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7384\/revisions"}],"predecessor-version":[{"id":8885,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/7384\/revisions\/8885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/8886"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=7384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=7384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=7384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}