Age Gate (Divi)

A full-screen age check for Divi 5 on a native dialog: focus stays in it and Escape does not close it. You saw one when this page opened — it is in Test Mode, so it asks on every visit. The rest are drawn inline (Display: Inline box, Test Mode on), so you can try them here; none of them remembers an answer. Each is labelled with its settings. Add ?mdly-age-gate=reset to a URL to clear a remembered answer.

1. Three ways to ask

One confirm button · yes or no, with a refusal message after “No” · a date of birth checked against the minimum age (try a recent year).

Enter the date of birth (menus)

2. Date of birth options

Left: minimum age 21, the browser’s date picker, stacked full-width button, left aligned, custom missing-date and refusal messages. Right: the day / month / year menus with yes-style small print and an icon before the text.

3. Side image and logo

Side image on the right or the left with an image focus, a round logo, a wider box (820 px) and a 40% image. On phones the image moves above the content.

4. Refusal and remembering

Left: When Refused → go to another page (a redirect, skipped in Test Mode, so the message shows here) and Remember a Refusal. Right: remembered for 0 days (this browser session only), a separate Gate Name so it asks again, the zoom opening effect.

5. Styled from the Design tab, on a dark background

Overlay colour and inline stage padding · box background, border and radius · title, text and small-print fonts · confirm and “No” button colours, hover colours, fonts, radius and border · refusal message colours · buttons stacked and 20 px stage padding on phones. Press “Not yet” to see the refusal message.