всплывающая форма в elementor
Engage Your Audience With Stunning Popups
No Code Drag & Drop Editor
Create custom popups, zero coding required. Choose a designer-made, responsive template & make it your own.
Precise Targeting
Timing is everything. Engage your audience with the right triggers, display conditions & advanced settings.
Full Conversion Tools
Convert leads on the spot with Elementor’s custom forms, built-in form submissions & integrations.
Design Popups
Your Visitors Will Love
Drag & Drop Live Editor
Build Visually, Zero
Coding Required
Create professional popups like never before with Elementor’s visual editor. Choose from a variety of widgets & design features.
One Builder,
Endless Possibilities
Choose from an ever-growing selection of designer-made popup templates,
focused on helping you grab attention, grow your email list, and increase sales.
Place It Right On Your Page
Choose from a variety of different layouts and add your popup exactly where you need it.
Full Customization
Stay on Brand
Match your popup to the design of your WordPress website. Define colors & fonts, add content, set entrance/exit animations, & more.
Timing Is Everything
Catch your audience’ attention at the right time on the right page.
Conditions
Choose Where to
Include Your Popup
Decide whether you want your popup to be displayed across your entire website or exclude it from specific pages, such as your members’ area or blog.
Triggers
Set Triggers to
Catch Visitors’ Attention
Show your popup at the right moment. Set triggers for page load, click, scroll, page Exit Intent, scroll to element, or after inactivity.
Advanced Rules
Implement
Advanced Settings
Refine your targeting with advanced rules. Make your popups appear after a visitor views a number of pages, browses from a specific device, & more.
Easily
Collect Answers
Add custom forms to any of your popups. Collect leads, grow your email lists, register participants for events, and more.
Custom Forms
Engage With Your Leads
Add engaging custom forms to your popup. Collect the information you need using 20 dedicated form fields and customize the design and layout of the form to perfectly match it to your popup.
Form Submissions
Collect Visitor Information
Integrations
Integrate Your Marketing
& CRM Tools
Seamlessly integrate leading marketing and CRM tools, like Mailchimp, HubSpot, or GetResponse, and engage with your customers on all fronts.
Your All-In One Marketing Platform
Create engaging landing pages, popups, and forms with Elementor’s all-in-one marketing platform – zero coding required.
Recipes to Boost Results
Whether you’re building your first popup, or are a popup master, our articles, guides, and tutorials will help make your creations stand out.
10 Incredible Popup Examples To Increase Your Conversions
How to Create a Shopping Cart Popup in WordPress
Target Your Popups Right With Conditions, Triggers & Advanced Rules
Get Your Audience’s Attention
Design stunning popups for your WordPress website to engage with your leads, collect information, or drive sales – zero coding required.
Have more questions? Try the Elementor Help Center or Contact Us.
ANY type you can imagine! Some favorites include: email subscriptions, login forms, content lock & upgrades, welcome mats, promotions & sales, announcements, upsells, exit intents, consent forms, countdown timers, and more!
Target methods include page-based, time-based, device-based, visitor-based, and behavior-driven targeting.
Elementor Pro offers the full toolbox that web creators need to build professional, pixel-perfect websites. It includes Elementor’s industry-leading Theme Builder, custom forms, WooCommerce features, and of course… POPUPS!
Of course! Elementor’s popups can easily be connected with our built-in integrations like MailChimp, Drip, ActiveCampaign, ConvertKit, HubSpot, GetResponse, MailerLite, MailPoet, or to 1000+ more integrations using Zapier.
Yes, all you need to do is install & activate Elementor Pro, and you’re good to go 🙂
Of course! Elementor’s Library includes a variety of pre-designed popups. Choose your layout – full screen, modal, slide-in, top or bottom bar – and the design you love. Customize your popup however you want and make it fully your own.
Popups — Всплывающие окна
Обычно в качестве всплывающих окон используют формы обратной связи (запрос звонка, оправка сообщения) или какие либо всплывающие окна с информацией о акциях и событиях или же боковое всплывающее меню. Т.е вы можете создать все что угодно и использовать любой шаблон с любым событие (по клику, времени, по выходу итд.)
Рассмотрим принцип создания всплывающего окна в конструкторе сайта Elementor.
1.Создание шаблона Popups.
После нажатия, открывается стандартное окно выбора шаблона с поле ввода его имени. Вводим имя и нажимаем кнопку Создать Шаблон
После появится окно с выбором предварительно настроенного и готового шаблона всплывавшего окна.
Вы можете выбрать подходящий или закрыть и создать шаблон с чистого листа.
2. Настройка параметров.
После выбора готового шаблона всплывающего окна или создания собственного, нам необходимо настроить его параметры.
Настроек всплывающего окна достаточно много. Вы можете выбрать ширину, высоту, позицию окна, можно выбрать отключения затемняющего фона или кнопки закрытия окна или настроить анимацию появления и исчезновения окна (Entrance Animation и Exit Animation). А на вкладке Стиль, можно настроить стили самого окна и фона затемнения, а так же выбрать позицию и стиль кнопки закрытия окна.
На вкладке Расширенные, мы может задать время для задержки отображения кнопки закрытия или просто время закрытия самого окна. В добавок можно задать вручную стили для окна или же задать порядок открытия она по клику селектора.
3. Публикация всплывающего окна
После того как мы создали необходимый контент окна и настроили его так как нам нужно, нажимаем на стандартную кнопку ОПУБЛИКОВАТЬ и открывается окно настроек публикации.
Conditions — тут мы задаем сравнение, для каких страниц или записей будет отображаться и реагировать данное всплывающее окно.
Show after X Page views: если установлено значение Yes, установите количество просмотров страниц до запуска всплывающего окна.
Show after X sessions: если установлено значение Yes, установите количество сеансов пользователя до запуска всплывающего окна (сеанс начинается, когда пользователь посещает веб-сайт, и заканчивается, когда пользователь закрывает браузер).
Show when arriving from: если установлено значение Yes, показать, если пользователь приходит из поисковых систем, внешнюю ссылку (введите URL конкретной ссылки) и/или внутреннюю ссылку (введите URL конкретной ссылки).
Hide for logged in users: установите значение Да, чтобы скрыть всплывающее окно для всех вошедших пользователей или от выбранных пользовательских ролей. Для веб-сайтов с кэшем эта функция может работать неправильно.
Show on devices: установите значение Да, чтобы выбрать отображение на настольных, планшетных и / или мобильных устройствах.
4. Вызов всплывающего окна
Возможно окно вызывается у вас автоматически, на основе тех правил которые мы установили выше. Но часто (почти всегда) бывает так, что нам необходимо вызвать окно вручную по клику по ссылке и для этого нам необходимо произвести манипуляции.
Для вызова окна по ссылке, мы выбираем объект со ссылкой, например Кнопка и переходим в выбор динамических данных.
Далее, выбираем Popup и уже в настройках ссылке выбираем наше созданное окно (в списке Popup необходимо ввести название шаблона и выбрать его)
После произведенных манипуляция, выбранное всплывающее окно будет отображаться при клике по ссылке.
Если у вас сторонний элемент т.е не виджет конструктора, то вызвать окно можно по селектору. Для этого на странице редактирования Всплывающего окна, переходим в настройки и на вкладку Расширенные. Далее в поле Open By Selector указываем селектор вашего элемента.
Таким образом, комбинируя настройки и стили можно создать абсолютно любое всплывающее окно для вашего сайта, будь это просто форма обратной связи или маркетинговое всплывающее окно.
Popups — Всплывающие окна: 57 комментариев
Здравствуйте. Подскажите пожалуйста, у меня бывает открывается, а бывает не открывается всплывающее окно. Какая может быть причина? я всё перепроверил, всё нормально, и кстати с pop box тоже самое было.
Вот мой сайт https://uslugi-pr.ru там в футере «добавить услугу» иногда не открывается, или открывается, но потом перехожу на другую страницу сайта и там уже не открывается, хотя футер сделан в шаблонах в конструкторе тем.
Здравствуйте. Не вижу что не срабатывает с первого раза, но вижу в консоли браузера есть ошибка js связанная с гугл аналитикс. Поэтому для начала нужно вам разобраться с ней.
Добрый день! Я установил на сайте 30 попапов под разные задачи, а потом осознал, что все они подгружаются сразу на любой странице, тормозя при этом загрузку. причем очень нормально так тормозят. Скажите — с эти можно бороться как-то или просто уменьшить количество попапов, единственный выход? Спасибо
вы волшебник…все верно, про правило Conditions я знаю, но почему не учел, что присваивал всем попапам ENTIRE SITE. Можно же задать правила. Тем не менее на каждую страницу у меня останется по 6 попапов, но это уже лучше чем 30.
СПАСИБО
Thank you Friend for the answer. My site started loading 10 seconds faster thanks to your response.
Здравствуйте. Не подскажете, как передать переменную со значением в попап окно при вызове?
Здравствуйте. Если окно на разных страницах, то через динамический запрос.
Если на одной, то через хеш и js скрипт.
Здравствуйте, вопрос таков. При нажатии на кнопку в popup окне происходит переход на якорь(его мы указываем в ссылке) но при переходе на якорь popup окно не закрывается. Каким образом можно организовать закрытие popup окна и переход на якорь одновременно?
Здравствуйте. Необходимо написать свой js обработчик для такого случая (при нажатие на кнопку, событие на закрытие окна)
Добрый день, как сделать так, чтоб при вводе информации и отправке, pop up закрывался автоматически?
где настройки для действия после отправки?
у всплывающего окна нет такой опции.
Подскажите возможно ли привязать один Popup на разные кнопки?
У меня ситуация такая: ставлю popap на кнопку форма открывается все отлично, ставлю этот же popap на другую кнопку, нажимаю кнопку форма открывается но автоматом закрывается через 2 сек. а нажимаю второй раз форма открывается и все нормально.
Не вижу проблем. Проверил, ничего не закрывается автоматом. Данный функционал из версии ПРО, поэтому проверьте еще раз и в случаи проблем, напишите в поддержку элементор.
Добрый день!
Подскажите, возможно ли в popup выводить содержимое записи?
Например, на главной слайдер с мероприятиями, чтобы не осуществлять переход на страницу, при клике, мне необходимо выводить popup с иформацией записи.
День добрый. Да, можно. Используйте для этого виджет Записи https://blog.web5x.ru/zapisi-widget-elementor-pro/
Выбираете в запросе нужную запись и отключаете ненужные поля в настройках.
Здравствуйте. Помогите разобраться с elementor pro. У меня есть сетка товаров, где у каждого товара есть своя кнопка.
Задача: сделать подстановку value скрытого поля в зависимости от нажатой кнопки. То есть при нажатии кнопки, открывается форма, заполняются данные и отправляются на почту, где можно видеть, какой товар выбрал человек, как это сделать?
Всплывающая форма обратной связи WordPress с помощью плагинов Contact form 7 и Popupmaker
В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.
Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:
Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.
Установка Contact Form 7
В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.
После активации в меню появится новый раздел в WordPress, заходим и нажимаем Добавить новую, появится стандартная текстовая область с уже заполненными строками.
Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.
Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует “текст”, “e-mail” и “текстовая область”. В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.
Переместил получившийся шорткод между тегами label, должно получится так.
Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.
Делаем по аналогии, что получилось.
Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.
Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.
Нажимаем внизу сохранить, и смотрим на шорткод, который выдает плагин для данной формы. Обязательно заполняем название, копируем в отдельный документ шорткод и нажимаем еще раз на Сохранить.
Первый этап преодолели, можете добавлять свои поля, их в панели много, только не забывайте потом прописывать во вкладке Письмо.
Установка Popup Maker
Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.
Переходим в левой панели в одноименный раздел и нажимаем Добавить всплывающее окно. Заполняем имя всплывающего окна, название можно не прописывать, иначе оно появится на сайте. Помещаем в текстовое поле шорткод скопированный после создания формы обратной связи.
Спускаемся ниже и видим меню настройки всплывающего окна. Выбираем пункт Триггеры, находим кнопку Добавить новый.
Обычно обратная связь появляется по нажатию кнопки, поэтому из списка выбираем параметр Открыть и на Добавить. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.
Походите по другим разделам, настройте внешний вид, анимацию и другие параметры появления, в статье разбирать не будем.
Не забываем нажать на опубликовать.
В запись загрузил изображение с помощью медиафалов.
Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.
Как вы понимаете класс можно прописать к любой части текста к ссылке, картинке, целому абзацу и т.д.
Переходим обратно в Визуально и нажимаем предварительный просмотр.
Открывается новая страница в браузере.
Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.
Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.
В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать “Редактировать как HTML”, а дальше по старой схеме.
Для более простого понимания процесса советую посмотреть авторское пошаговое видео.
Плагином Easy Fancy box в форме ссылки
В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.
Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.
Настройки fancybox
Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.
Вставка кода в виджет
По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.
Пример исполнения
Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.
Popup в Elementor по кнопке
Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.
Вносим ID в тригеры
Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.
Выводим параметры элемента в elementor
Показ формы связи через elementor
Открывается, заполняем обратную связь и смотрим приходит ли письмо на почту. Конечно, во всех разобранных методах нужны визуальные настройки формы, но при базовых знаниях CSS сделать не составит труда.
На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:
Наконец решили проблему как создать всплывающую форму обратной связи на WordPress, пишите свои вопросы в комментариях, удачи.
JetPopup или Elementor Popup Builder: какой из них вы выбираете?
Divi: самая простая тема WordPress для использования
Легко создайте свой сайт с Elementor
Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]
Первые всплывающие окна были созданы на основе сценария, предложенного Итаном Цукерманом для размещения своего веб-сайта на Tripod в начале 90-х. Его пользователи жалуются на количество размещаемых им объявлений на сайте, сказал он. поэтому решили разместить баннеры на отдельной странице, которая открывается, когда пользователь заходит на страницу.
Этот небольшой фрагмент кода все еще не был настоящим всплывающим окном, как сейчас на каждом веб-сайте, но именно здесь все началось. На современных веб-страницах всплывающие окна используются для разных целей, а не только для рекламы. Контактные формы, предупреждения о политике конфиденциальности и предложения по подписке также часто отображаются в виде всплывающих окон.
Есть две вещи, которые раздражают пользователей, когда дело доходит до всплывающих окон: когда они прыгают на вас, когда вы не хотите их; и когда его внешний вид полностью отличается от стиля сайта. Эти две проблемы появляются, когда вы используете плагины, которые, кажется, не самого высокого качества.
Самая большая проблема большинства плагинов, которые используют начинающие разработчики создание всплывающих окон это отсутствие контроля над полученным сообщением. Однако вы можете избежать всех этих проблем, если будете использовать Elementor для создания веб-сайта.
Загрузка и установка
Popup Builder
Этот плагин был создан командой Elementor. Поэтому мы могли назвать его настоящим «ребенком». Это последнее обновление для Elementor, выпущенное в январе 2019 года для удовлетворения потребностей клиентов. Однако он недоступен для пользователей бесплатной версии Elementor.
Popup Builder включен в профессиональный план подписки. Итак, чтобы иметь возможность создавать всплывающие окна, вы должны сначала установить Elementor Pro. Самый простой тарифный план, который позволяет использовать все возможности Elementor для одного веб-сайта, стоит 49 долларов в год. Итак, с первых шагов (покупка Elementor Pro), вот алгоритм получения Popup Builder:
Это немного долгий путь, но с Popup Builder вы также получаете огромную коллекцию различных элементов от Elementor, таких как виджеты, шаблоны и другие дополнительные инструменты.
Popup Builder
JetPopup
Создание всплывающих окон
Теперь, когда инструменты готовы и готовы, я могу попытаться создать всплывающее окно с обоими плагинами и посмотреть, насколько проста и понятна эта функция. Далее я создам основное всплывающее окно и рассмотрим параметры настройки для Popup Builder и JetPopup.
Popup Builder
В Pro Elementor всплывающие окна создаются отдельно от страниц сайта. Чтобы изменить внешний вид веб-сайта, откройте страницу, которую вы хотите настроить, нажмите кнопку «Редактировать с помощью Elementor» и внесите изменения. Но для создания (а затем редактирования) всплывающих окон вам нужно перейти в «Шаблоны»> «Всплывающие окна» и нажать кнопку «Добавить новое всплывающее окно».
Попробуйте Popup Builder прямо сейчас
В открывшемся окне вам нужно выбрать шаблон, который вы создадите (да, вы можете создавать шаблоны не только для всплывающих окон, но также для страниц и других элементов) и дать ему имя.
Divi: Лучшая тема WordPress всех времен!
После нажатия кнопки «Создать шаблон» вы будете перенаправлены в меню персонализации Elementor. Проще настроить существующий элемент, создав его с нуля. Поэтому сначала вас попросят выбрать подходящую модель.
Я выбрал одну из моделей, отображаемых вверху списка библиотек. Сразу после выбора вы попадаете в рабочее пространство Elementor, к которому, вероятно, уже привыкли. Параметры персонализации размещены на боковой панели в левой части экрана. У вас есть три вкладки.
JetPopup
Этот плагин также добавляет новую вкладку на панель инструментов WordPress тема и с его помощью также создаются попапы отдельно от страниц. Готовые к использованию всплывающие окна также хранятся на вкладке «Библиотека всплывающих окон». Чтобы создать новое всплывающее окно, вы можете либо нажать кнопку «Добавить» на предопределенном шаблоне, либо перейти к JetPopup> Добавить новое всплывающее окно, дать шаблону имя и нажать «Редактировать с помощью Elementor».
Область работы немного отличается от нормы, потому что вы сейчас создаете меньшее окно. В левом меню вы можете добавить любой тип элемента в ваше всплывающее окно.
Открыть настройки из всплывающего окна не совсем очевидно. Вам нужно нажать на кнопку обслуживания внизу меню. Меню настроек очень похоже на меню Popup Builder, но есть только две вкладки настройки. «Общие настройки» позволяют определить эффект анимации, переименовать модель или определить условия. На вкладке «Стиль» вы можете изменить макеты, цвета, изображения, шрифты и границы.
JetPopup имеет чуть менее очевидную функциональность, но компенсирует это подробными и полезными видеоуроками.
Вы ищете лучшие темы и плагины WordPress?
Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]