Popup Maker – плагин для создания всплывающих окон

Здравствуйте! Один плагин для создания всплывающих окон я уже описывала. Это был WP Contact Slider для вывода фиксированных форм обратной связи, несложный в настройках. Пользовалась Easy Modal, но он уже года три не обновлялся и не имел гибких настроек. Popup Maker на сегодня является плагином нового поколения. Недавно изменился интерфейс редактора всплывающих окон, и плагин переведен на русский язык. Поэтому решила сделать небольшой обзор актуальной версии.

Непосредственно на установке плагина останавливаться не буду, подразумевая, что Popup Maker — не первый даже на создаваемом сайте или блоге. Начну с того, что устанавливала Popup Maker взамен Easy Modal. Для таких случаев предусмотрен импорт/экспорт созданных окон.

Импорт/экспорт

Можно включить режим совместимости.

Режим совместимости

Пробовала деактивировать Easy Modal сразу после экспорта всплывающих окон. Но когда окон много, лучше сначала настроить все в новом плагине, а потом уже удалять предшественника, проверив, что все работает. Это касается в первую очередь триггеров и нацеливания. Если в нацеливании поля оставить пустыми, окна будут выводиться по всему сайту. Это совсем не нужно, если вызываются попапы автоматически при входе посетителя на страницу и не подключена обработка куки. Конечно, предупреждение уместно для настроек на работающем сайте.

При настройках Popup Maker взамен Easy Modal без отключения последнего открываются оба окна – одно поверх другого. Мне этот вариант подошел больше, правда, пришлось сидеть ночь, чтобы подключать по одному окну, сразу удаляя старое. Выбор был небольшой: или оставить посетителей без информации, или допустить косяк в виде наложения окон.

Как запустить импортированные всплывающие окна

Чтобы попап открывался, нужно добавить триггер – по клику или автооткрытие. При автооткрытии рекомендую создавать куки, чтобы при переходам по страницам пользователю не выскакивало однажды закрытое окно.

Типы триггеров

Следующий шаг – добавить селектор.

Добавление селектора

В импортированные окна селектор можно выбрать и скопировать в списке классов плагина Easy Modal. Пример: eModal-25. Перед классом не забудьте поставить точку. Также можно узнать селектор во фронтэнде сайта, если включена верхняя панель администратора справа: Инструменты Получить селектор.

И после нажатия на «Ок» кликнуть по области, где должно вызываться окно.

Получение класса CSS селектора

Настройка тем Popup Maker

В плагине есть несколько тем оформления. Можно настроить дизайн, подходящий для сайта, какой-то одной темы и сделать ее темой по умолчанию. Это цвет каждого элемента (контейнера, заголовка, содержания, закрыть), размер шрифтов, высоту строк, отступы и все другие нюансы. Справа предварительный просмотр. Все изменения видны сразу. Когда мы сами себе дизайнеры, главное, придерживаться какого-то единого стиля, независимо, будет ли в попапе форма связи, текст, картинка или что-то иное. Но здесь дело вкуса.

Добавление/редактирование всплывающих окон

Обычный редактор WordPress, можно переключаться с визуального в редактирование html. Мы вольны вставлять туда любое по типу содержимое. Очень удобно выводить в popup большие тексты, например, Политику конфиденциальности или Пользовательское соглашение – документы, которые должны быть доступны на всех страницах сайта.

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

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

В принципе, плагин очень удобный, настраиваемый, не очень тормозит загрузку. Практически все варианты для выбора мест размещения окон. Мы точечно указываем, где должен быть этот элемент. Это записи, страницы, товары, рубрики, категории товаров, метки и все прочее и по названия, и по ID. Остается в выбранном месте поставить ссылку, кнопку, картинку и «прикрутить» ее к popup.

Закладка Постоянная ссылка.

8 комментариев

  1. Спасибо за подробный обзор плагина. Я с ним не знаком, теперь мы это исправили) Думаю пригодится.

    • Надежда Хачатурова

      Познакомьтесь, Александр! Ничего сложного в нем нет. Вдруг и правда пригодится. Для настройки и отладки можно попап временно нацелить на какую-то специально созданную тестовую страницу, но опубликованную (иначе ее будет не выбрать). Удобно.

  2. они так всех раздражаю )

    • Надежда Хачатурова

      Вы имеете в виду окна, появляющиеся при входе на страницу, да если еще куки не собираются, и при переходе по сайту окна могут всплывать раз за разом. И время задержки неудачно выбрано. Но я использую плагин только для вызова окон по клику, например, политику конфиденциальности и пользовательское соглашение удобно поместить в попапы. Хочет человек почитать — открыл и почитал, не уходя на другую страницу. Ссылки стоят в футере, на виду. Много таких мест бывает на сайте, где нужно показать информацию, а отпускать посетителя нежелательно.

      P.S. Надо в этом блоге так же реализовать, для наглядности. ))

      • Надежда

        Надежда, здравствуйте. У меня как раз модальное окно с формой открывается по клику на ссылку. Форму заполняю, отправляю, но окно не закрывается, ни после успешной отправки формы, ни по клику на крестик, ни вне оверлея, ни по кнопке F4, хотя галочки в настройках стоят. Может, нужно триггер добавить на закрытие? Вроде бы они (триггеры) нужны только для настройки открытия… Подскажите, пожалуйста, в чем может быть проблема?

        • Надежда Хачатурова

          Проверьте на всякий случай, что со временем задержки https://yadi.sk/i/omzrl4bbjLtmww. Должно стоять на минимуме. И еще попробуйте закрывать автоматически после отправки формы https://yadi.sk/i/_pt9h6UBUvQilw.

          Вордпресс обновлен до 5.5.1? Все проверьте. Могут быть конфликты и с какими-то плагинами, хотя у меня ни разу проблем не было. Последний вариант писать в поддержку плагина. Они обязательно подскажут, в чем причина. Буду признательна, если отпишетесь о результатах.

  3. Надежда

    Надежда, WP обновлен, проверила настройки, которые Вы рекомендовали. Выяснилась новая подробность. Окно не закрывается только на Главной странице. Установлен плагин W3 Total Cache. Может, дело в какой-то настройке, которую нужно отключить.

  4. У меня тоже установлен плагин W3 Total Cache и все работает.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *