Создайте PopUp с помощью JetPopup от Crocoblock и Elementor

Привет ребята,

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

В этой другой статье я объясняю Как создать всплывающее окно с Elementor Pro.

Jetpopup — это платежный плагин, который вы можете купить за $22 отдельно:

или если вы получаете доступ к членству Crocoblock, у вас есть все за 130 долларов.

Мне нравится философия Crocoblock, потому что вместо того, чтобы делать огромный и тяжелый плагин, он делит функциональность на маленькие плагины, и каждый из них делает отдельный плагин. Мне кажется очень правильным.

После установки плагина в меню WordPress появится новый элемент под названием JetPopup.

В моем случае у меня установлены плагины JetPopup, JetEngine и JetElementos For Elementor.

Если мы хотим JetPopup -> Библиотека предустановок мы находим огромную библиотеку предопределенных всплывающих окон:

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

Кроме того, в каждом всплывающем окне сообщается, какие плагины потребуются для его работы. На изображении это будет плагин Jet Elements.

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

Никакой загадки, нажимаем установить в понравившемся шаблоне.

После установки он перенаправляет нас на страницу Elementor с добавленным шаблоном.

Теперь мы можем добавлять, изменять и удалять элементы так же, как на любой странице с Elementor.

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

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

И когда мы нажимаем, мы находим все эти варианты:

Анимация: это эффект, который будет иметь всплывающее окно при входе

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

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

Условия отображения Здесь мы указываем, где в Интернете мы хотим, чтобы он отображался:

Мы можем сказать вам, на какие страницы мы хотим включить его или на какие страницы мы хотим его исключить.

Как только наше всплывающее окно будет опубликовано, оно появится на нашем сайте 😉

Сделайте так, чтобы всплывающее окно прыгало при нажатии на ссылку

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

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

Добавить идентификатор к кнопке

Первое, что нам нужно сделать, это добавить идентификатор или класс к кнопке, которую мы хотим использовать в качестве триггера всплывающего окна:

Теперь, когда у нас есть идентификатор кнопки, мы возвращаемся к создаваемому всплывающему окну.

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

Если все прошло хорошо, теперь всплывающее окно будет прыгать, когда кто-то нажимает на кнопку, которую мы настроили.

Отправляйте потенциальных клиентов в наш инструмент электронного маркетинга с помощью веб-хуков

JetPopup имеет прямую интеграцию с Mailchimp. Интеграция осуществляется через ключ API быстро и легко.

В меню Crocoblock —> Настройки JetPlugins —> Интеграции мы можем подключить его:

Но как бы мы сделали это с другим инструментом, кроме Mailchimp?

Мы бы благодаря Webhooks.

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

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

JetEngine позволяет нам создавать формы, а также позволяет нам добавлять webhooks так что это как раз то, что нам нужно 😉

После установки JetEngine мы можем найти Forms:

Создаем форму с нужными нам полями, в моем случае

В части Настройки полей мы добавляем поля, которые нам нужны в нашей форме.

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

Мы должны нажать на Добавить уведомление и добавить уведомление типа Звонок в вебхук

Откуда мы получаем URL-адрес Webhook?

Мы должны получить эту информацию от инструмента, который мы хотим подключить, в нашем случае мы хотим отправить потенциальных клиентов в Encharge.

В рамках Encharge, когда мы создаем Поток и добавить форму. Мы находим URL-адрес Webhook, который мы должны добавить в JetEngine:

После того, как форма настроена, нам нужно только добавить ее во всплывающее окно JetPopup:

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

Не говорите мне, что это не прекрасно? 😉

Увидимся в следующем уроке