Приветствую вас дорогой читатель, меня зовут Юлия Гусарь, я фронтенд разработчик и в этой статье я покажу вам как создать форму обратной связи во всплывающем окне на вашем сайте WordPress.
- 1. Для чего нужна всплывающая форма обратной связи?
- 2. Устанавливаем Contact Form 7
- 3. Устанавливаем Easy FancyBox
- 4. Настраиваем всплывающее окно для формы
- 5. Выводим форму обратной связи во всплывающее окно.
- 6. Редактируем фрагмент кода вывода формы обратной связи.
- 7. Стилизация кнопки
- Как сделать интеграцию в PopupMaker
- Всплывающее окно после заполнения и отправки
- Плагином Easy Fancy box в форме ссылки
- Итог
- Плагин Easy Modal — всплывающее/модальное окно для WordPress
- Настройка и создание всплывающего окна в WordPress
- Contact Form 7 в всплывающем окне
- Popup Maker — плагин всплывающее окно для WordPress
- Как настроить всплывающие окна в WordPress?
- Popups — WordPress Popup
1. Для чего нужна всплывающая форма обратной связи?
Прежде всего, всплывающая форма позволяет вам сэкономить место на вашем сайте, за счет чего вы можете разместить такую форму где-нибудь в шапке вашего сайта, в подвале, в сайдбаре, либо же в тексте самой страницы, либо сделать её плавающей кнопкой сбоку.
Во вторых, всплывающий эффект достаточно интересно выглядит;
В третьих, пользователи Вашего сайта могут получать доступ к такой форме обратной связи практически с любой страницы Вашего сайта.
Стоит отметить что вместо формы обратной связи вы можете аналогично сделать форму заказа звонка, либо заказ какого то конкретного продукта или услуги, форму подписки либо какой то другой контент.
Для того чтобы создать такую форму обратной связи нам понадобится два WordPress-плагина:
Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.
Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.
Вы можете использовать любой другой плагин формы обратной связи который позволяет выполнять вывод этой формы с помощью шорт-кода.
2. Устанавливаем Contact Form 7
Нажимаем на кнопку «Установить» и теперь активируем его.
3. Устанавливаем Easy FancyBox
Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox
4. Настраиваем всплывающее окно для формы
Заходим в пункт меню «Настройки» => «Медиафайлы».
Сверху мы видим блок стандартных настроек WordPress медиафайлов и уже ниже приписываются наши настройки плагина Easy FancyBox. По умолчанию у нас здесь стоит активация всплывающего окна при нажатии на изображение.
Нам необходимо снять эту галочку, так как если на Вашем сайте стоит какой-либо плагин, который так или иначе связан с созданием каких-то всплывающих эффектов, например «WooCommerсе», плагин галереи, плагин для открытия изображений во всплывающих окнах и т.д. то ваши изображения будут открываться во всплывающем окне дважды
Теперь нам необходимо установит галочку возле пункта «Inline content»
И теперь нажимаем на кнопку «Сохранить изменения».
В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.
5. Выводим форму обратной связи во всплывающее окно.
Теперь нам нужно определиться где мы будем выводить нашу форму обратной связи.
Я буду выводить в виджете. Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст». И в поле «Текст»
вставляем следующий фрагмент кода:
Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.
Если вы используете другой плагин для создания формы обратной связи то этот пункт у вас будет отличаться
6. Редактируем фрагмент кода вывода формы обратной связи.
По умолчанию стили этой формы не очень интересные, их можно будет потом исправить, так же можно будет отредактировать форму. Как редактировать форму, добавлять в нее новые поля, добавлять плэйсхолдеры, применять для нее различные стили – это я вам расскажу и покажу в отдельной статье. Вы моете добавить какой-то текст прямо перед нашей формой, либо после формы, для этого просто переходите обратно в виджеты и прямо перед шорт-кодом впишете какой-то текст. Этот текст Вы также можете обернуть в отдельный блок, либо в заголовок, либо как-то еще, и таким образом этот текст появится, перед Вашей формой обратной связи.
7. Стилизация кнопки
Для того чтобы наша ссылка для открытия формы обратной связи была больше похожа на кнопку предлагаю приписать её немного стилей. Заходим в файл style.css вашей темы и в самом конце приписываем следующие стили:
Я оставила в коде пояснения, какое свойство за что отвечает. Так что вы сможете изменить эти стили на своё усмотрение.
Также я подготовила для вас видеоинструкцию, в которой показываю как создать всплывающую форму на wordpress.
Для начала создадим первый проект в contact form 7, с тремя полями имя, телефон и почта. Стандартный набор подходящий для сбора контактных данных в обратной связи. Сделали проект, теперь надо скопировать либо записать шорт код. С ним будем работать детальнее.
Как сделать интеграцию в PopupMaker
Устанавливаем PopupMaker, стандартно через административную панель поиском, либо скачиваем . После установки появиться в меню wordpress новый пункт, заходим и вводим новое модальное окно.
- Путь к добавлению нового всплывающего окна
- Название, оно не будет отображаться на сайте
- Заголовок попапа, если не нужно, то не пишем
- Шорт код из contact form 7
Далее спускаемся вниз. Нужно определить при каких условиях будет всплывать попап.
- Раздел Триггеры
- Нажимаем кнопку Добавить
- Выбираем один из двух триггеров, по нажатию какого либо элемента (открыть) или авто открытие, то есть по истечению какого либо времени.
- Добавляем
Выбрав «открыть», появятся следующие опции. Задаём уникальный класс, я сделал .otkryt-modelnoe, с ним работаем дальше.
Теперь добавим класс к любому элементу в статье, например к ссылке на главной странице. Создадим новую запись, в ней вставим ссылку с прикреплением класса. Как видим на картинке, сначала во вкладке «визуально» создали ссылку, после перешли в текст и туда записали комбинацию.
class="otkryt-modelnoe"
Обновили или сохранили запись, обязательно проверяем работу на странице блога. Нажимая на «текст ссылки» отображается всплывающий элемент, а в нём наша форма созданная в contact form 7, оформление fancybox выставил.
Для данной операции подойдут плагины FancyBox и Easy Modal, но с ними операция боле сложная, приходиться писать код.
Всплывающее окно после заполнения и отправки
Разберём другой случай, когда модальное окно нужно после заполнения и отправки, то есть по достижении нажатия на кнопку «отправить». С данной целью справиться плагин Popup for Contact Form 7, . Устанавливаем и активируем, после появится новый раздел.
- Раздел General Settings
- Основными настройки, выставляете галочками к каким проектам добавить постоповещение, настраиваем размеры окна (длину, ширину), а так же автоматическое закрытие, в нашем случае 5000 миллисекунд
- Сохраняем.
В Popup Text пишем содержимое, существует возможность применения стандартного редактора wordpress. В Popup Design делаем внешний вид, цвет шрифта и заднего фона. После сохранения проверяем работу.
Инструмент минимален, для более глубокой разработки и настройки внешнего вида понадобятся небольшие знания css. Отмечу наличие способов без применения плагинов при помощи скриптов, применяя хуки contact form 7, но не советуем их брать, ввиду сложного применения, и не всегда корректного поведения.
В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.
Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи автору сайта.
В WordPress использую связку плагинов Popup maker и Contact form 7, почему:
- Они постоянно обновляются
- Профессиональные разработчики
- У инструментов есть интеграция друг с другом
- На русском языке
Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.
В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.
После активации в меню появится новый раздел в WordPress, заходим и нажимаем Добавить новую, появится стандартная текстовая область с уже заполненными строками.
Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.
Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.
- Выбираем Текст
- Если обязательно для заполнения то отмечаем галочкой
- Уникальный идентификатор, оставляем без изменения
- Значение, которое отображается по умолчанию, что нужно ввести
- Если отметить чекбокс, то название поля будет внутри
- Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
- Находим вставить тег
Переместил получившийся шорткод между тегами label, должно получится так.
Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.
Делаем по аналогии, что получилось.
Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.
Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.
- Вкладка письмо
- Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
- Тема отображается когда письмо придёт на почту
- Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
- В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта WordPress
Нажимаем внизу сохранить, и смотрим на шорткод, который выдает плагин для данной формы. Обязательно заполняем название, копируем в отдельный документ шорткод и нажимаем еще раз на Сохранить.
Устанавливается стандартно из админки WordPress, вводим в поиске по плагинам Popup Maker, устанавливаем и активируем.
Переходим в левой панели в одноименный раздел и нажимаем Добавить всплывающее окно. Заполняем имя всплывающего окна, название можно не прописывать, иначе оно появится на сайте. Помещаем в текстовое поле шорткод скопированный после создания формы обратной связи.
Спускаемся ниже и видим меню настройки всплывающего окна. Выбираем пункт Триггеры, находим кнопку Добавить новый.
Обычно обратная связь появляется по нажатию кнопки, поэтому из списка выбираем параметр Открыть и на Добавить. Можете выставить при наведении или через промежуток времени, но нужно настроить куки, а то модальное окно надоест посетителю.
Появится новое окно, задаем класс обязательно с точкой, введу .osnova. Для триггера основанного на нажатии куки не нужны, выбираем Добавить или обновить если создаете не в первый раз.
Походите по другим разделам, настройте внешний вид, анимацию и другие параметры появления, в статье разбирать не будем.
Не забываем нажать на опубликовать.
После публикации проверим работу всплывающей формы в WordPress. Осталось добавить класс .osnova к любому элементу на сайте. Создадим новую статью, и вставим всплывающую обратную связь по нажатию картинки.
В запись загрузил изображение с помощью медиафалов.
Теперь переходим во вкладку текст и прописываем в поле class стиль osnova.
Как вы понимаете класс можно прописать к любой части текста к ссылке, картинке, целому абзацу и т.д.
Переходим обратно в Визуально и нажимаем предварительный просмотр.
Открывается новая страница в браузере.
Жмем и появляется всплывающая форма обратной связи сделанная на WordPress. Заполните данные и отправьте для теста.
Попап нуждается в доработке, поиграйтесь с настройками отображения (выбрал тему оформления fancybox), добавьте стили к полям (мы прописывали forma-1 и forma-2) и получиться очень симпатичный вариант.
В Gutenberg, чтобы привязать класс нужно нажать на три точки у блока и выбрать «Редактировать как HTML», а дальше по старой схеме.
Плагином Easy Fancy box в форме ссылки
В поисковой выдаче есть запросы на тему всплывающей обратной связи через плагин Easy Fancy Box в форме ссылки, поэтому обязан написать обзор. Устанавливаем дополнение поиском из панели.
Переходим в админке Настройки > Медиафайлы. Из первого пункта убираем все отметки и оставляем Inline Content. Так отменили появление popup при нажатии на картинку.
Берем код прописанный ниже, в разделе Внешний вид > Виджеты добавляем новый типа HTML–код, вписываем в него скопированную конфигурацию обратной связи.
<a href="#form_popup1" class="fancybox-inline">Отправить сообщение</a>
<div style="display:none" class="fancy-box">
<div id="form_popup1">
[contact-form-7 id="246" title="Всплывающая форма"]
</div>
</div>
По логике заменяем мой шорткод от Contact Form 7 на свой. Переходим на блог и проверяем работу, в примере действие происходит нажатием по ссылке.
Можно менять текст, прибавлять новые div, только не меняйте ID и CLASS – они привязаны к fancy box, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.
Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.
Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.
Открывается, заполняем обратную связь и смотрим приходит ли письмо на почту. Конечно, во всех разобранных методах нужны визуальные настройки формы, но при базовых знаниях CSS сделать не составит труда.
Итог
На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:
- Устанавливаем оба плагина WordPress
- В Contact form 7 создаем новую форму, настраиваем ее по инструкции
- Добавляем шорткод в новый попап Popupmaker
- Настраиваем отображение окна
- Привязываем класс к любому элементы на сайте
- Проверяем работу
Наконец решили проблему как создать всплывающую форму обратной связи на WordPress, пишите свои вопросы в комментариях, удачи.
Плагины, который я представлю чуть ниже, вы можете использовать для: Contact Form 7 в модальном окне; любая контактная форма (обратной связи) в модальном (всплывающем) окне; видео в модальном окне; картинки во всплывающем окне; размещение полезной информации с ссылками; форма подписки по почте на новые статьи в модальном окне
и так далее, и так далее всего, и не перечислишь.
Плагин Easy Modal — всплывающее/модальное окно для WordPress
Установить данный плагин можно стандартным способом, через админпанель — Плагины — Добавить новый и в поле Поиск плагинов
вводите название Easy Modal. В списке он должен быть первым. Устанавливаете и как обычно активируете его. А дальше можно переходить к созданию нового модального окна.
Настройка и создание всплывающего окна в WordPress
Для этого нажмите на новый появившейся раздел Easy Modal и выберите пункт Modals:
После этого, в самом вверху страницы нажмите кнопку Add New:
В общих настройках (вкладка General) даёте имя нового окна (отображаться оно не будет, это для вас, если например, вы создадите несколько модальных окон); тип загрузки Load Sitewide (для всего сайта); заголовок окна и наконец вставляете в редактор (режим Текст) нужный вам код. У меня в примере вставлен код видео с YouTube.
В параметрах можно выбрать размер окна; использовать фон или нет; тип анимации для модального/всплывающего окна; расположение окна, а также можно окно зафиксировать (поставить галочку и указать отступ от верха экрана).
Тут можно выбрать простую текстовую ссылку, кнопку или иконку. Обратите внимание, что к каждому вновь созданному окну присваивается класс . Первое созданное окно будет иметь класс eModal — 1 второе eModal — 2 и так далее. Вам нужно только самому подставлять номер после знака . Этот код можно вставлять в виджет Текст или в любом месте вашей статьи. Естественно, текст в коде вы можете написать любой. Да чуть не забыл, что после создания модального окна справа на странице не забудьте нажать кнопку Опубликовать (Publish).
Надеюсь, друзья и товарищи, общий принцип работы с плагином Easy Modal вам понятен. Только лишь добавлю, что вы можете потом или сразу для модального окошка оформить внешний вид, нажав пункт Theme. К сожалению, в бесплатной версии плагина есть только одна тема для оформления, но её вы можете оформить как угодно, настроек достаточно. При настройке внешнего вида модального окна тут же вы можете видеть справа предпросмотр оформления:
После всех настроек внешнего вида окна нажимайте кнопку справа Save (Сохранить). И напоследок, дамы и господа, покажу пример вывода контактной формы Contact Form 7 в модальном окне.
Contact Form 7 в всплывающем окне
Всплывающее окно WordPress contact form 7. Создайте новое модальное окно, как показано выше и в текстовый редактор просто вставьте шорткод Contact Form 7 (если у вас установлен этот плагин, если нет, установите):
Нажмите кнопку Опубликовать (Publish) и вам остаётся только разместить код (про класс не забывайте) в нужном вам месте (в сайдбаре, в сообщениях, в футере блога, в меню). Пример, кнопка Написать автору после сообщения:
Если читатель захочет связаться с вами, то он нажмёт кнопку и контактная форма откроется в модальном окне:
Вот, как то, так. Ещё, все ваши созданные всплывающие окна будут отображаться на странице (пункт Modals), где кстати, указаны классы для каждого модального окошка:
В связи с тем, что данный плагин давно не обновлялся, предлагаю обратить внимание на следующий модуль.
Знаете ли вы, что у Easy Modal новая модная замена под названием Popup Maker? Это самый популярный пользовательский всплывающий и модальный плагин для WordPress.
- Неограниченные темы;
- Точный таргетинг, триггеры и файлы cookie;
- Настроить все;
- Полная линия расширений;
- Обширная документация и API для разработчиков.
Если вы уже являетесь пользователем Easy Modal, переход с Easy Modal на Popup Maker — это совсем несложно с пользовательским импортером!
Popup Maker — плагин всплывающее окно для WordPress
Popup Maker — всплывающие формы, подписки и многое другое. Все, что вам нужно для создания уникальных всплывающих окон WordPress. Плагин всплывающее окно для ВордПресс предлагает довольно щедрую бесплатную версию. И поэтому у него более 6 325 238 активных установок.
Лучший плагин для всплывающих окон, который предлагает WordPress. Возможностей масса. Сразу скажу, Popup Maker поддерживает русский язык. Так что, с настройками у вас проблем не будет. Он невероятно универсален и гибок. Измените его, чтобы создать любой тип всплывающего, модального или наложения контента для вашего веб-сайта WordPress.
Настройте его, чтобы создать любой тип всплывающих окон, модальных или контентных оверлеев для вашего сайта WordPress.
А теперь возможности плагина. У него слишком много функций, чтобы перечислять их полностью здесь. Вот самые главные, то что вам обязательно пригодиться.
С помощью Popup Maker вы можете создавать такие всплывающие окна:
- Лайтбоксы для видео,
- Всплывающие окна с подпиской на электронную почту,
- Всплывающие окна для приветствия посетителей,
- Всплывающие окна контактной формы,
- Объявления о коронавирусе / COVID-19,
- Уведомления о файлах cookie ЕС,
- Создавайте всплывающие окна WooCommerce,
- И многое, многое другое.
Легко создавайте уведомления о файлах cookie, всплывающие окна (лайтбоксы) с видео, модальные формы (Ninja Forms, Gravity Forms, Contact Form 7 (CF7), Caldera Forms, WPForms, Mailchimp для WordPress (MC4WP) и многое другое).
Можно использовать редактор всплывающих окон для создания любого содержимого. Множество опций для настройки внешнего вида вашего всплывающего окна с помощью уникального редактора тем. Измените цвета, тени, шрифты, отступы и многое, многое другое.
Все всплывающие/модальные окна являются отзывчивыми. Идеально подходит для мобильных устройств.
Вот пожалуй и всё, о чём я хотел с вами сегодня поделиться. Надеюсь вам было полезно. Удачи всем и до новых встреч, на страницах лучшего блога в мире WordPress mania.
Сегодня я расскажу вам о Супер плагине, для создания всплывающих popup окон. Вы сможете добавить на свой сайт всплывающее окно, на любую страницу, с помощью шорткода. Можно сделать, чтобы окно открывалось при нажатии на кнопку, ссылку, изображение, текст, либо любой другой элемент на вашем сайте. Можно сделать, чтобы окно появлялось при наведении на любой элемент. Есть обычный вариант, popup окно всплывает при открытии, загрузки страницы. В окно вы можете добавить любой HTML код, изображение, шорткод и т.д. Очень простой и полезный плагин!
Установить плагин Popup Builder — Responsive WordPress Pop up вы сможете прямо из админ-панели WordPress. Перейдите на страницу: — , введите название плагина в форму поиска, установите и активируйте открывшийся плагин.
Далее,
после установки и активации плагина, перейдите на страницу: Popup Builder — . Здесь будут отображаться все созданные всплывающие окна. Чтобы создать новое окно, нажмите вверху на кнопку .
Далее, на странице создания, укажите название окна. Добавьте содержание, с помощью визуального редактора.
Настройки:
— Popup theme,можно выбрать стиль окна.
— Effect type,эффект при открытии.
— Effect duration,длительность эффекта.
— Popup opening delay,задержка при открытии.
— Responsive mode,сделать адаптивным.
— Custom mode,указать свои размеры.
— Initial,можно указать начальную ширину и высоту.
— Max,максимальная высота и ширина.
— Dismiss on «esc» key,закрывать окно при нажатии на клавишу Esc.
— Show «close» button,показать кнопку Закрыть.
— Enable content scrolling,включить прокрутку содержимого.
— Disable page scrolling,отключить прокрутку страницы.
— Enable reposition,включить репозиции.
— Enable scaling,включить масштабирование.
— Dismiss on overlay click,закрывать при нажатии на верхний слой.
— Dismiss on content click,закрывать при нажатии на зону вне окна.
— Reopen after form submission,повторно открывать после отправки формы.
— Show popup this often,как часто открывать окно, выберите дни и время.
— Repetitive popup,открывать окно после X секунд.
— Change overlay color,изменить цвет верхнего слоя.
— Change background color,изменить цвет фона.
— Background opacity,прозрачность фона.
— Background overlay opacity,прозрачность слоя.
— Overlay custom class,свой класс слоя.
— Content custom class,свой класс контента.
— Popup z-index,индекс.
— Content padding,набивка.
— Popup location,выбрать расположение окна.
— Сохраните настройки.
Далее,на странице , где отображаются все созданные окна, вы можете скопировать шорткод окна и вставить его в любое место на сайте.
Можно добавлять окна с помощью кнопки, прямо из визуального редактора, на странице редактирования записи или страницы. Нажмите на кнопку .
Далее, у вас откроется окно. Здесь можно выбрать название окна и тип открывания.
Далее, у вас в содержании появится два шорткода. Между ними можно вставить любой элемент, если вы выбрали открытие при нажатии или наведении. Обновите или опубликуйте страницу.
Зачем нужны такие попапы? Обычно popup (всплывающие окна) помогают конвертировать посетителей в подписчиков (т.е. в постоянных пользователей) рассылок, сообществ и групп в социальных сетях и т.д. Они привлекают внимание пользователей к определенным элементам сайта, например, к какому-либо товару, акции, предоставляемым услугам.
Конечно, если такие окна будут “вылетать” час за часом перед глазами посетителя, то понятно, что он уйдет из такого сайта и не захочет больше возвращаться.
Как настроить всплывающие окна в WordPress?
Стандартные средства WordPress не предоставляют возможность создания всплывающих окон. Решить эту задачу помогут плагины.
“Движок”, по умолчанию, не предоставляет возможности создать и настроить всплывающие окна стандартными средствами. Поэтому потребуется стороннее решение.
В итоге Вы попадаете в основное окно создания всплывающих окон.
Для создания попап-окна необходимо нажать кнопку Добавить Всплывающее окно, после чего Вы попадете на страницу создания всплывающего окна.
Тут нужно будет ввести следующие данные. В первых двух полях для ввода вводим название и заголовок нашего окна. Отметим, что в названии можно ввести произвольный текст, так как он нигде показываться не будет выводится.
Блок Условия подразумевает настройку места показа всплывающего окна. Как видим, тут довольно большой выбор параметров, позволяющих гибко настроить показ (на всех страницах сайта, только на главной, в рубриках и пр.) Кроме того, есть возможность отключать показ попап-окна на мобильных и планшетных устройствах (настройки Отключать этот Popup на мобильных устройствах и Отключите это всплывающее окно на планшетных устройствах соответственно).
Дальше, в самом большом текстовом блоке нужно ввести контент, который будет отображаться в окне. Тут может быть как простой текст и изображения, так и медиаданные (например, ролик с YouTube).
В блоке настроек Настройка темы Вы можете выбрать одну из предлагаемых плагином тем визуального оформления окна.
Блок Показать настройки позволяет задать размеры попап-окна.
Настройка Отключить фон позволяет отображать или скрывать фон под всплывающим окном.
Блок Анимация позволяет задать Вашему окну скорость, а также эффекты анимации (затухание, увеличение и др.)
В блоке Позиция. Вы можете выбрать место на экране, где будет показываться Ваше попап-окно.
Popups — WordPress Popup
Еще один бесплатный плагин Popups — WordPress Popup попап-окон, содержит следующие функции:
- вывод всплывающих окон на выбранных частях сайта;
- фильтры для пользователей;
- настройка popup-окна в зависимости от шаблона страницы и пр.
После загрузки и активации плагина в админ-панели появится новый раздел меню Popups, где и находятся все необходимые настройки.
В разделе Все Popups присутствует уже созданная по умолчанию демо-версия всплывающего окна (с названием Popups Example), готовая к настройке. Щелкнув по названию, Вы увидите визуальный редактор, в котором можно будет отредактировать окно (изменить его название и содержимое).
Блок Отображать правила PopUp отвечает за место на сайте, где будет появляться всплывающее окно — выбранная страница, тип поста и т.п.
Следующим разделом настроек плагина идет блок Отображать опции, в котором можно задать призыва к действию, анимации, прозрачность и т.д.
В последнем разделе, Шорткоды PopUp, присутствуют шорткоды для отображения социальных кнопок.
После настройки необходимых параметров нужно нажать кнопку Опубликовать.
