Как сделать всплывающее окно подтверждения возраста в Elementor

Rifat Элементор Jul 13, 2022

Конструктор страниц Elementor имеет встроенный метод добавления всплывающего окна проверки возраста. Добавление всплывающего окна для проверки возраста на ваш веб-сайт — это простой и эффективный способ предотвратить доступ несовершеннолетних к контенту или продуктам, которые вы предлагаете.

Elementor упрощает включение всплывающего окна проверки возраста. Однако Elementor Pro — единственный, у которого есть всплывающее окно. Следовательно, вы должны обновить свой Elementor до версии Pro .

Сделать всплывающее окно подтверждения возраста в Elementor

Перейдите к опции «Шаблоны > Popup» и нажмите кнопку «Добавить новый», чтобы создать новое всплывающее окно. Добавьте имя, а затем выберите параметр «Создать шаблон», чтобы создать новое всплывающее окно.

Чтобы создать новое всплывающее окно, просто нажмите кнопку «Вставить» на шаблоне, который вы хотите использовать. В качестве альтернативы, если вы не хотите использовать готовый шаблон, вы можете просто щелкнуть значок «X» и начать создавать собственное всплывающее окно.

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

На панели редактирования Elementor выберите значок настроек всплывающего окна и внесите необходимые изменения во всплывающее окно на вкладке макета. Здесь вы можете изменить размер, расположение, наложение и кнопку закрытия. Анимации входа и выхода вашего всплывающего окна также можно настраивать.

Следующим шагом является выбор типа фона, типа границы, радиуса границы и тени блока на вкладке стиля. Пришло время заполнить всплывающее окно информацией. Вы можете показать свои собственные вещи. Для начала перетащите виджет «Заголовок» в раздел и заполните его текстом. Используйте вкладку стиля, чтобы применить стиль к тексту.

Чтобы добавить больше текста, просто перетащите & в редактор. Первая кнопка во всплывающем окне появится после того, как вы закончите писать свой контент. Виджет кнопки можно перетащить в текст заголовка. Добавьте значок галочки, установите выравнивание по центру и выберите тип кнопки в конфигурации кнопки.

На вкладке стиля теперь вы можете изменить шрифт, эффект наведения тени текста и многое другое. Следующим шагом является добавление второй кнопки. Добавьте текст «Нет» на вторую кнопку, перетащив ее поверх первой. Добавьте связанный значок и поместите его после других, установив ориентацию по центру.

Значок — это то место, куда вам нужно прицелиться. Чтобы использовать YES, просто щелкните по нему, и всплывающее окно закроется, позволяя пользователю продолжить поиск в Интернете. Выберите всплывающее окно в поле ссылки, щелкнув первый значок, а затем щелкнув параметр динамических тегов в поле ссылки.

Чтобы закрыть всплывающее окно, выберите Действие > Закрыть всплывающее окно после выбора окна.

Добавьте к кнопке «Нет» соединительную ссылку, чтобы при нажатии на нее пользователи могли перейти по предложенной вами ссылке. Вернитесь на панель параметров всплывающего окна и включите функции, которые не позволяют нажимать на оверлей и ESC.

Когда все будет в порядке, нажмите «Опубликовать».

Применить всплывающее окно на странице

Теперь, когда вы закончили создание всплывающего окна, вам нужно применить его на своем веб-сайте. Вы можете настроить всплывающее окно на кнопку «Купить сейчас», если хотите добавить ее перед покупкой предмета. Для этого нажмите кнопку, а затем ссылку, чтобы перейти на страницу динамических тегов, где вы можете выбрать всплывающее окно в качестве режима отображения. Чтобы открыть только что созданное всплывающее окно, нажмите кнопку «Действие» и выберите «Открыть всплывающее окно».

Когда кто-то нажмет кнопку «Купить сейчас», появится всплывающее окно. Продукт будет загружен, если клиент выберет Да в меню Да.

Последние мысли

Используя конструктор страниц Elementor , вы можете создать всплывающее окно проверки возраста на своем сайте WordPress. Вы можете использовать Elementor для создания адаптивного веб-сайта. Ознакомьтесь с другими руководствами по elementor и поделитесь этим, если считаете, что оно того стоит!

Divi WordPress Theme