Купить Корзина
  • Домены и сайты
  • Облако и IT-инфраструктура
  • Вход
  • Телефон в Москве

    +7 495 580-11-11
  • Бесплатный звонок по России

    8 800 555-34-78
  • Или обратитесь в наши офисы

    Региональные номера
    1. База знаний
    2. Создание сайтов
    3. Конструктор Рег.сайт
    4. Создание сайта с помощью Рег.сайт
    5. Как настроить всплывающие окна (pop-up) на сайте в Рег.сайте

    Как настроить всплывающие окна (pop-up) на сайте в Рег.сайте

    Всплывающее окно, или pop-up (попап), — это элемент интерфейса, который внезапно всплывает на экране пользователя или появляется при клике на определённую часть сайта. Раньше этот элемент использовали только как рекламный виджет, который часто раздражал пользователя, но сейчас его стали применять с пользой. В форме pop-up делают:

    • приветственное сообщение,
    • форму подписки,
    • форму обратной связи,
    • информирование об акциях и скидках.

    В Рег.сайте установлен плагин Divi Supreme Pro. Он позволяет быстро создавать всплывающие окна (pop-up) на сайте.

    Как сделать всплывающее окно в Рег.сайте

    Так как плагин Divi Supreme Pro установлен в Рег.сайте по умолчанию, можно сразу приступать к оформлению внешнего вида всплывающего окна. Настройка всплывающего окна состоит из двух этапов:

    • 1.
      Создание макета.
    • 2.
      Размещение макета на сайте.

    Для примера мы сделаем всплывающее окно с акцией. Однако Divi Supreme Pro позволяет добавить и форму обратной связи, и галереи картинок, и много другое. Всё зависит от конкретной задачи.

    Этап 1. Создайте макет

    • 1
      Перейдите в админку Рег.сайта.
    • 2
      Перейдите во вкладку Divi ― Библиотека Divi.
    • 3

      Нажмите на кнопку Добавить новый:

      Как сделать всплывающее окно

    • 4
      Введите имя всплывающего окна. Имя может быть любое.
    • 5

      В пункте «Тип макета» выберите Макет и нажмите Отправить:

      Как сделать всплывающее окно 2

    • 6

      Для того, чтобы начать редактировать макет, нажмите на плюс:

    • 7

      Выберите Новый модуль, чтобы создать страницу с нуля, или Из библиотеки, чтобы скопировать существующую страницу:

    • 8
      Теперь вы можете переходить к созданию макета всплывающего окна. Чтобы создать макет, вам нужно настроить разделы, строки и модули. Как это сделать, описано в статье Основные элементы редактирования.

    Например, наше всплывающее окно выглядит вот так:

    Как сделать всплывающее окно 4

    Этап 2. Разместите макет на сайте

    После того как макет всплывающего окна создан, можно разместить его на сайте. Для этого нужно отредактировать общий вид сайта и привязать pop-up к определённому элементу.

    Обратите внимание

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

    • 1
      Перейдите в режим редактирования сайта.
    • 2

      В качестве примера мы покажем, как привязать всплывающее окно к кнопке. Для этого перейдите в Настройки модуля:

      Как сделать всплывающее окно 5

    • 3

      Затем перейдите во вкладку Дополнительно ― Видимость:

      Как сделать всплывающее окно 6

    • 4

      Найдите строку «Использовать всплывающее окно» и переведите переключатель в положение ДА:

      Как сделать всплывающее окно 7

    • 5

      Перед вами появятся настройки pop-up. В строке «Всплывающее окно (библиотека Divi)» выберите имя макета, которое вы дали ему при создании внешнего вида pop-up. Затем установите остальные настройки: триггеры, способ закрытия окна, способ появления, положение на странице и т. д.

      Я хочу, чтобы всплывающее окно появлялось при входе на сайт

      Не всегда нужно, чтобы pop-up появлялся при нажатии на кнопку. Если вы хотите, чтобы он появлялся при входе на сайт или через некоторое время после входа, на шаге 5 в строке «Триггер» измените параметр, например на Загрузка страницы, а в строке «Задержка по времени» укажите количество секунд, через которое всплывающее окно должно появиться на экране пользователя.

      Как сделать всплывающее окно 8

      Как сделать всплывающее окно 9

    • 6

      Чтобы сохранить настройки, нажмите на галочку.

      Как сделать всплывающее окно 10

    Готово, в нашем примере всплывающее окно будет появляться при нажатии на кнопку «Хочу подарок»:

    Как сделать всплывающее окно 11

    Помогла ли вам статья?

    Спасибо за оценку. Рады помочь 😊

     👍
    Специальные предложения
    • Бесплатный хостинг для сайта
    • Дешевый хостинг
    • Бесплатный VPS-сервер
    • Дешёвые VPS
    Рассылка Рег.ру

    Лайфхаки, скидки и новости об IT

    Даю согласие на получение рекламных и информационных материалов

    Домены и сайты
    • Домены
    • Хостинг
    • Создание сайтов
    • SSL-сертификаты
    • VPS и VDS серверы
    • Whois
    • Магазин доменов
    Облако
    и IT-инфраструктура
    • Облачные серверы
    • Частное облако
    • Облачное хранилище
    • Kubernetes в облаке (K8S)
    • Облачные базы данных
    • Выделенные серверы
    Полезное
    • Стоимость услуг
    • Cпособы оплаты
    • База знаний
    • Документы
    • ЭДО
    • Партнерам
    • Сообщить о нарушении
    • РБК: новости России и мира сегодня
    • Новости компаний РФ
    • РБК Инвестиции: курсы валют
    Компания
    • О компании
    • Контакты
    • Офисы
    • Новости
    • Акции и скидки
    • Блог
    • Отзывы клиентов
    8 800 555-34-78 Бесплатный звонок по России
    +7 495 580-11-11 Телефон в Москве
    • vk
    • telegram
    • ok
    • moikrug
    • youtube
    • twitter
    • Облачная платформа Рег.ру включена в реестр российского ПО Запись №23682 от 29.08.2024
    • © ООО «РЕГ.РУ»
    • Политика конфиденциальности
      Политика обработки персональных данных
      Правила применения рекомендательных технологий
      Правила пользования
      и другие правила и политики
    • Нашли опечатку?
      Выделите и нажмите Ctrl+Enter
    • Мы используем cookie и рекомендательные технологии для персонализации сервисов и удобства пользователей. Вы можете запретить сохранение cookie в настройках своего браузера