Первые всплывающие окна были созданы по сценарию, придуманному Итаном Цукерманом дляHébergement его веб-страницы на штативе в начале 90-х. Его пользователи жаловались на количество рекламы, которую он размещал на веб-сайте, поэтому он решил разместить баннеры на отдельной странице, которая открывалась, когда пользователь заходил на эту страницу.

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

Есть две вещи, которые раздражают пользователей, когда дело доходит до всплывающих окон: когда они прыгают на вас, когда вы не хотите их; и когда его внешний вид полностью отличается от стиля сайта. Эти две проблемы появляются, когда вы используете плагины, которые, кажется, не самого высокого качества.

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

Два потрясающих плагина, созданных специально для Elementor Page Builder, помогут вам создавать всплывающие окна любого типа, формы и стиля, которые вам нужны. Elementor Popup Builder et JetPopup. Поскольку они оба сделаны из той же плоти, что и Elementor, единственный вопрос, который нужно задать, - какой из этих плагинов выбрать. Чтобы помочь вам принять это решение, я собираюсь провести тщательный обзор обоих, и вы сможете сравнить их плюсы и минусы. Итак, начнем !

Загрузка и установка

Это не самый важный критерий при выборе плагина, но чтобы опробовать его, вам нужно сначала его получить. Вот почему я собираюсь начать с самого начала и описать процесс его получения - цены, требуемые усилия и простота процесса установки.

Popup Builder

Elementor

Этот плагин был создан командой Elementor. Поэтому мы могли назвать его настоящим «ребенком». Это последнее обновление для Elementor, выпущенное в январе 2019 года для удовлетворения потребностей клиентов. Однако он недоступен для пользователей бесплатной версии Elementor.

Popup Builder включен в профессиональный план подписки. Итак, чтобы иметь возможность создавать всплывающие окна, вы должны сначала установить Elementor Pro. Самый простой тарифный план, который позволяет использовать все возможности Elementor для одного веб-сайта, стоит 49 долларов в год. Итак, с первых шагов (покупка Elementor Pro), вот алгоритм получения Popup Builder:

  • Купить Про Элементор Page Builder.
  • Зайдите в личный кабинет и загрузите плагин.
  • Перейдите в панель управления вашего веб-сайта, выберите «Плагины»> «Добавить новый», нажмите кнопку «Загрузить плагин» и выберите соответствующий файл .zip.
  • Когда установка будет завершена, активируйте плагин своим лицензионным ключом.
  • Вот Конструктор всплывающих окон, расположенный на вкладке «Шаблоны»> «Всплывающие окна».

Это немного долгий путь, но с Popup Builder вы также получаете огромную коллекцию различных элементов от Elementor, таких как виджеты, шаблоны и другие дополнительные инструменты.

Popup Builder

JetPopup

«Семейство» плагинов Jet уже содержит больше статей 10, и JetPopup - одна из них. Он был тщательно создан специально для Elementor и увеличивает количество доступных инструментов. Этот плагинJetPopupsПолностью совместим с бесплатными и платными версиями. Так что дополнительных покупок делать не нужно. JetPopup стоит 15 долларов, и как только вы его получите, вы сможете использовать его только для одного веб-сайта. Если он вам нужен более чем для одного проекта, вы можете приобрести плагин по лицензии разработчика (это будет стоить вам 45 долларов) и использовать его на пяти веб-сайтах. Алгоритм получения плагина немного проще:

  • Купите плагин на Торговой площадке TemplateMonster. Он будет загружен на ваш компьютер.
  • Перейдите в панель управления вашего веб-сайта, выберите «Плагины»> «Добавить новый», нажмите кнопку «Загрузить плагин» и выберите соответствующий файл .zip.
  • Когда установка будет завершена, активируйте плагин.
  • Вуаля! Когда вы откроете меню настройки Elementor (нажав кнопку «Редактировать с помощью Elementor»), вы увидите раздел JetPopup в левом меню виджета.

JetPopup

Создание всплывающих окон

Теперь, когда инструменты готовы и готовы, я могу попытаться создать всплывающее окно с обоими плагинами и посмотреть, насколько проста и понятна эта функция. Далее я создам основное всплывающее окно и рассмотрим параметры настройки для Popup Builder и JetPopup.

Popup Builder

В Pro Elementor всплывающие окна создаются отдельно от страниц сайта. Чтобы изменить внешний вид веб-сайта, откройте страницу, которую вы хотите настроить, нажмите кнопку «Редактировать с помощью Elementor» и внесите изменения. Но для создания (а затем редактирования) всплывающих окон вам нужно перейти в «Шаблоны»> «Всплывающие окна» и нажать кнопку «Добавить новое всплывающее окно».

Popup Builder
Попробуйте Popup Builder прямо сейчас

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

создание всплывающих окон

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

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

Я выбрал одну из моделей, отображаемых вверху списка библиотек. Сразу после выбора вы попадаете в рабочее пространство Elementor, к которому, вероятно, уже привыкли. Параметры персонализации размещены на боковой панели в левой части экрана. У вас есть три вкладки.

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

настройки всплывающих окон

Как видите - ничего неожиданного, если вы использовали Elementor раньше, у вас не возникнет никаких проблем с этим плагином. Вот подробное видео, в котором объясняется, как создать всплывающее окно с помощью Popup Builder:

JetPopup

Этот плагин также добавляет новую вкладку на панель инструментов WordPress тема и с его помощью также создаются попапы отдельно от страниц. Готовые всплывающие окна также хранятся на вкладке «Библиотека всплывающих окон». Чтобы создать новое всплывающее окно, вы можете либо нажать кнопку «Добавить» на готовом шаблоне, либо перейти в JetPopup > Добавить новое всплывающее окно, дать шаблону имя и нажать «Редактировать с помощью Elementor».

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

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

всплывающие элементы

Плагин JetPopup добавляет в меню виджета единственный пункт - кнопку контекстного действия. Это позволяет определить тип действия, которое будет происходить, когда пользователь нажимает кнопку.

всплывающая кнопка действия

кнопка редактирования всплывающего окна

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

общие настройки всплывающего окна

JetPopup имеет чуть менее очевидную функциональность, но компенсирует это подробными и полезными видеоуроками.

триггеры

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

Popup Builder

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

опубликовать всплывающее окно

Этот плагин поможет вам определить необходимые условия сразу после настройки всплывающего окна. Когда вы нажимаете кнопку «Опубликовать», вы видите окно, в котором вы можете определить условия (на каких страницах будет отображаться это всплывающее окно), триггеры (когда будет отображаться всплывающее окно) и расширенные правила.

Popup Builder имеет шесть триггеров, таких как отображение при одной прокрутке и щелчке, и семь расширенных правил, таких как отображение после заданного количества сеансов или отображение на определенных устройствах. Триггеры и расширенные правила имеют простые ползунковые переключатели, и можно очень быстро установить любые параметры, которые вы хотите.

JetPopup

настройки всплывающих окон

первая страница всплывающего окна

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

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

позиционирование

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

позиционирование

Popup Builder et JetPopup разделить экран на девять секторов и позволить разместить всплывающее окно в любом из них. Позиционирование определяется по шкалам влево-вправо и вверх-вниз. Это не очень гибко, но для всплывающего окна достаточно.

Эффекты анимации

Очень важно то, как окно скользит (катится или прыгает) по странице. Если окно движется слишком быстро или слишком медленно, это не сработает. Отскоки, щекотание и тремор также следует использовать с большой точностью. Эффекты анимации делают сайт более динамичным, но могут испортить все впечатление.

Анимационные эффекты

Popup Builder имеет 36 типов анимации ввода, включая различные типы скольжения, разворачивания, масштабирования, подпрыгивания и вращения в разных направлениях. Все это, а также продолжительность анимации можно найти в разделе «Макет» на вкладке «Настройки».

настройки всплывающих окон

В плагине 13 видов анимации JetPopup, в том числе затухания, вертикальное переворачивание, различные слайды, подпрыгивание и масштабирование. Вы найдете их в разделе «Настройки» на вкладке «Настройки».

модели

В некоторых случаях вы хотите создать всплывающее окно с определенной структурой и точно знать, как оно должно выглядеть. Но это довольно редкий случай; гораздо чаще вы понятия не имеете, какие элементы должно содержать ваше всплывающее окно. Здесь на помощь приходят шаблоны. Даже если вы не используете какие-либо предварительно настроенные примеры, их обработка может дать вам хороший обзор. И, конечно же, настроить готовый элемент намного быстрее и проще, чем создавать его с нуля.

Библиотека моделей Elementor

Popup Builder добавлена ​​категория в библиотеку моделей Elementor. Как я уже говорил вам ранее, вы можете увидеть это прямо в начале нового процесса создания всплывающего окна. Ассортимент шаблонов всплывающих окон достаточно велик; здесь более 100 наименований. В верхнем левом углу есть раскрывающийся инструмент сортировки категорий, который позволяет ускорить поиск. Категории понятны, и поиск нужного всплывающего окна не займет много времени.

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

JetPopup также есть огромная библиотека шаблонов. Все они хранятся на вкладке «Контекстная библиотека» и имеют удобные функции, такие как кнопка предварительного просмотра и счетчик использования. Есть больше вариантов сортировки, список может быть настроен для отображения определенного типа моделей, а затем размещен в любом порядке; например, в зависимости от даты создания. Я не могу сказать вам точное количество доступных моделей, но их определенно более 100.

Сравнительная таблица

Elementor Popup Builder JetPopup
Цена 45 $ 15 $
модели 100+ 100+
триггеры Триггеры 6, расширенные правила 7 5 открытые события с дополнительными параметрами
Animatio 36 виды 13 виды
Учебники документации документация, видеоуроки 9

JetPopup vs Popup Builder

Заключение

Я не могу сказать, какой из этих двух плагинов лучше; их слишком сложно судить. В каждом случае и у каждого человека свои требования к выбору плагинов. Думаю, вы должны определить это сами - какой из этих двух подойдет вам лучше всего? Желаю удачи в добавлении классного всплывающего окна на ваш сайт!