КАК СДЕЛАТЬ ВСПЛЫВАЮЩИЕ ОКНА В WORD PRESS 7 ЛУЧШИХ ПЛАГИНОВ 2023

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

Содержание

1. 1. Для чего нужна всплывающая форма обратной связи?
2. 2. Устанавливаем Contact Form 7
3. 3. Устанавливаем Easy FancyBox
4. 4. Настраиваем всплывающее окно для формы
5. 5. Выводим форму обратной связи во всплывающее окно.
6. 6. Редактируем фрагмент кода вывода формы обратной связи.
7. 7. Стилизация кнопки
8. Как работает всплывающая форма?
9. Куда же тогда вставить код с формой?
10. Оформление внешнего вида всплывающего окна
11. Задаём параметры открытия всплывающего окна
12. Редактирования созданного всплывающего окна
13. Видеоинструкция
14. Плагином Easy Fancy box в форме ссылки
15. Итог
16. Плагин Easy Modal — всплывающее/модальное окно для WordPress
17. Настройка и создание всплывающего окна в WordPress
18. Popup Maker — плагин всплывающее окно для WordPress
19. Вот пожалуй и всё, о чём я хотел с вами сегодня поделиться. Надеюсь вам было полезно. Удачи всем и до новых встреч, на страницах лучшего блога в мире WordPress mania.
20. Основные цели всплывающих окон
21. Типы и разновидности
22. По внешнему виду
23. По триггерам
24. Советы по конструированию попапов
25. Итоги
26. Как сделать интеграцию в PopupMaker
27. Всплывающее окно после заполнения и отправки
28. Как настроить всплывающие окна в WordPress?
29. My Popup
30. Popup Maker
31. Popups — WordPress Popup

1. Для чего нужна всплывающая форма обратной связи?

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

Во вторых, всплывающий эффект достаточно интересно выглядит;

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

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

Для того чтобы создать такую форму обратной связи нам понадобится два WordPress-плагина:

Первый плагин – это Easy FancyBox, который позволит нам создать эффект всплывающего окна, т.е. эффект FancyBox.

Второй плагин который нам понадобится – это Contact Form 7. Плагин для создания формы обратной связи.

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

2. Устанавливаем Contact Form 7

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

Копируем название плагина Contact Form 7

Либо сразу в строку поиска ввести название плагина и нажать Enter.

Нажимаем на кнопку «Установить» и теперь активируем его.

3. Устанавливаем Easy FancyBox

Точно также, копируем название, нажимаем на кнопку «Добавить новый», вводим название плагина, нажимаем «Enter» и вот он, нужный нам плагин Easy FancyBox

4. Настраиваем всплывающее окно для формы

Для того чтобы получить доступ к настройкам плагина Easy FancyBox

Заходим в пункт меню «Настройки» => «Медиафайлы».

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

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

Теперь нам необходимо установит галочку возле пункта «Inline content»

И теперь нажимаем на кнопку «Сохранить изменения».

В плагине Easy FancyBox помимо этих настроек есть еще множество различных других интересных настроек с которыми вы можете поэкспериментировать.

5. Выводим форму обратной связи во всплывающее окно.

Теперь нам нужно определиться где мы будем выводить нашу форму обратной связи.

Я буду выводить в виджете. Переходим в меню «Внешний вид» => «Виджеты» => выбираем виджет «Текст»

И в поле «Текст» вставляем следующий фрагмент кода:

Теперь нам нужно получить шоткод для вывода нашей формы обратной связи. Для этого переходим в меню «Contact Form 7» => «Формы». По умолчанию здесь уже есть одна форма со стандартными полями «Ваше имя», «Ваш e-mail», «Тема» и «Сообщение». Для начала мы не будем в ней ничего убирать или исправлять. О том как править поля, делать плэйс-холдеры, добавлять и генерировать новые поля различной сложности и делать защиту от ботов и т.д. я расскажу в отдельной статье.

Если вы используете другой плагин для создания формы обратной связи то этот пункт у вас будет отличаться

6. Редактируем фрагмент кода вывода формы обратной связи.

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

7. Стилизация кнопки

Для того чтобы наша ссылка для открытия формы обратной связи была больше похожа на кнопку предлагаю приписать её немного стилей. Заходим в файл style.css вашей темы и в самом конце приписываем следующие стили:

Посмотрим, что у нас получилось:

Я оставила в коде пояснения, какое свойство за что отвечает. Так что вы сможете изменить эти стили на своё усмотрение.

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

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

Желаю вам успехов в создании такой формы и до встречи в следующих статьях.

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

Как работает всплывающая форма?

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

Работает он так: мы оборачиваем блок с контентом отдельный блок и делаем его невидимым приписав ему style=»display:none».

Далее мы пишем в нужном нам месте код ссылки и присваиваем ей класс «fancybox-inline».

При этом у вас должны быть выставлены соответствующие настройки плагина Easy FancyBox. Подробнее о них написано в этой статье.

Так вот в любом месте темы этот способ срабатывает без проблем, а вот с меню есть небольшая загвоздка. И заключается она в том, что нам как то нужно присвоить нужному нам пункту меню класс «fancybox-inline».

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

Для того чтобы это сделать нужно:

1. 1. Переходим в раздел «Внешний вид»
      => «Меню»
      .
   2. В верхней части экрана нажимаем кнопку «Настройки экрана»
      .

1. 1. В открывшейся панели ставим галочку возле пункта «Классы CSS»
      .

1. 1. Нажимаем пункт меню для которого мы хотим добавить всплывающую форму и видим что теперь у него помимо стандартных полей есть ещё и поле «Классы CSS»
      .

1. Вписываем в это поле название класса «fancybox-inline»
   и сохраняем меню.

Куда же тогда вставить код с формой?

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

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

Для этого можно использовать виджет «Текст». На сайте этот виджет отображаться не будет, так как в нём находится скрытый блок.

Также данный блок можно вывести в шаблоне темы. Например, вставить в шаблон «footer.php» перед закрытием тега body.

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

Вот и всё! После этих нехитрых махинаций ваша всплывающая форма должна срабатывать при нажатии на определённом пункте меню. Если возникнут ещё какие то вопросы – не стесняйтесь и задавайте их в комментариях.

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

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

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

Плагин называется Hustle – Pop-Ups, Slide-Ins and Email Opt-Ins.

1. 1. Устанавливается плагин как обычно. Копируем название и в административной части сайта заходим в раздел «Плагины»
      → «Добавить новый»
      . Устанавливаем и активируем этот плагин.
   2. Сразу же после его активации у нас, на панели инструментов слева, появляется пункт «Hustle»
      .

Данный плагин имеет очень много различных возможностей и настроек. В рамках данной статьи я рассмотрю только те настройки и возможности, которые касаются непосредственно создания всплывающих окон.

1. В блоке «Pop-Ups»
   кликаем на кнопку «Create Pop-Up»
   .
2. На вкладке «Content»
   задаем название нашему всплывающему окну. Здесь же можно активировать или деактивировать заголовок и подзаголовок.
3. В блоке «Main Content» добавляем тест, который будет высвечиваться во всплывающем окне. Сюда же можно добавлять изображения, шорткоды форм подписки или обратной связи, видео и многое другое.
4. В блоке «Featured image» можно добавить изображение, которое будет отображаться во всплывающем окнеАктивация пункта «Hide on mobile devices» позволит скрыть это изображение на мобильных устройствах
5. Далее, вы можете добавить кнопку призыва к действию «Call to Action». Здесь мы задаём звание кнопки и URL-адрес страницы, на которую будет перенаправлять пользователя при ее нажатии.
   

   Так же вы можете выбрать, где будет открываться данная страница:

   • «New tab»
     — в новой вкладке,
   • «This tab»
     — в этой же вкладке.

6. В блоке « Email collection module» можно добавить форму подписки. Выбрав пункт «Local Hustle List» — список e-mail адресов будет сохраняться в экспортируемом .csv-файле. Нажав на кнопку «Add Another Service» мы можем подключить определённый сервис для ведения рассылок.
7. Нажав на кнопку «Edit form» мы можем добавлять или удалять поля в форме подписки, а так же переставлять их местами.
8. В блоке «Successful submission behavior» можно задать текст сообщение об успешной подписке, либо перенаправить на определенную страницу.
9. Для предпросмотра всплывающего окна мы можем нажить на кнопку «Preview Pop-Up» вверху слева. После того, как мы отредактировали контент, мы можем переходить к внешнему оформлению нашего всплывающего окна. Для этого кликаем на копке «Continue».

Оформление внешнего вида всплывающего окна

1. На вкладке «Design» выбираем один из нескольких макетов формы в блоке «Form layout.
2. Блок «Featured image position» позволяет выбрать позицию изображения (если мы добавляли его при помощи плагина)
3. В блоке «Featured image fitting» мы можем выбрать расположение этого изображения. Для этого выбираем здесь различные варианты и смотрим как это выглядит используя кнопку предпросмотра «Preview Pop-Up».
4. В блоке «Colors Palette» задаётся цветовая схема для всплывающего окна. Её можно выбрать из раскрывающегося списка или задать свои цвета, активировав пункт «Customize colors»
5. В блоке «Shapes, borders, icons» можно задать следующие настройки
   • «Pop-up module border»
     – рамка для всплывающего окна
   • «Form fields border»
     – рамка для полей формы
   • «Button border»
     – рамка для кнопки
   • «Form fields icon»
     – тип иконки в полях подписки
   • «Form fields proximity»
     – расположение полей формы
6. «Drop Shadow» позволяет задать тени для всплывающего окна.
7. «Custom Pop-Up Size» — позволяет изменить размер, но я этот пункт вам не советую использовать. Потому, что если вы зададите какой-то фиксированный размер, то могут быть проблемы при адаптации на мобильных устройствах.
8. Если вы владеете CSS, то можно дописывать пользовательские CSS-свойства в блоке «Custom CSS». Причем здесь уже добавлены некоторые кнопки с заготовками для определенных селекторов.
9. После того, как мы задали все визуальные настройки, нажимаем на кнопку «Continue».

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

Последний шаг – это задание настроек отображения «Display Settings».

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

1. В блоке «Pop-up display rules»
   вы можете отображать всплывающее окно только на определенных записях, или на определенных страницах, на странице 404, отображать только на мобильных устройствах, не отображать на мобильных устройствах, отображать только на определенных URL-адресах, и т.д. Настроек здесь очень много и при желании вы можете с ними поэкспериментировать.
2. В блоке «Pop-up triggers»
   мы задаём событие, после которого будет происходить показ нашего всплывающего окна. Здесь у нас есть несколько опций:
   • «Time» — всплывающее окно отображается по прошествии определенного интервала времени. Активируем опцию и указываем здесь через сколько секунд, минут, или даже часов будет появляться форма.
   • «Scroll» — позволяет показывать всплывающую форму после прокрутки страницы на определенное количество процентов (пункт «Show after page scrolled») или после того, как посетитель прокрутит страницу до определенного блока с каким-то селектором (пункт «Show after passed selector»). Название селектора мы указываем поле «Show pop-up after user passed a CSS selector»
   • «Click»— данная опция позволяет открывать всплывающее окно при клике на определенном элементе. При этом мы можем воспользоваться предложенным здесь шорткодом, который выводит кнопку, при клике на которую открывается наша всплывающая форма. Правда у меня этот шорткод почему-то не копируется.Или вы можете задать здесь класс или идентификатор уже существующей кнопки, которая уже есть на вашем сайте.В данном случае при клике на элементе с идентификатором «#form» у нас должна будет открываться всплывающее окно.

     

   • «Exit intent»— открытие всплывающего окна при закрытии вкладки или окна браузера.
     При активации параметра «Trigger once per session only» наша всплывающая форма будет открываться только один раз для одного посетителя. Так же мы можем здесь активировать опцию «Add delay», которая позволяет выставить задержку в секундах, минутах или часах.
   • В блоке «Animation settings» модно задать параметры анимации появления и исчезновения всплывающего окна. После выбора определенного вида анимации, вы можете кликнуть по кнопке «Preview Pop-Up» и посмотреть, как это будет выглядеть на сайте.
   • В блоке «Additional settings» задаются расширенные настройки, в которых мы можем задать, будет ли у нас еще открываться всплывающее окно на этой странице или на всем сайте.При выборе первого варианта после того, как пользователь один раз закрыл наше всплывающее окно, оно не будет больше появляться на данной странице.При выборе второго варианта, после закрытия окна сообщение не будет больше высвечиваться на какой-бы странице сайта посетитель не находился и на какую-бы страницу не перешел.

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

     

   • В блоке «Expires (after expiry, user will see the Pop-up again)» мы можем задать, чтобы сообщение в следующий раз показывалось пользователю, к примеру, если он зайдет на наш сайт через день, или через неделю, через месяц, через год.
   • «Allow page to be scrolled while Pop-up is visible» — можно разрешить или отключить прокрутку страницы во всплывающем окне.
   • «Clicking on the background does not close Pop-up» — при активации этой опции всплывающее окно не будет закрываться при клике на фон.

И последнее, если вы используете форму подписки во всплывающем окне, то в блоке «Form submit behavior»
можно выбрать, что будет происходить после того, как человек заполнит эту форму. У нас есть несколько вариантов:

1. «Close the pop-up»
   — закрывать всплывающее окно
2. «Re-direct to form target URL»
   — перенаправлять на определенный URL-адрес
3. «Do nothing (use for Ajax Forms)»
   — ничего не делать.

После того, как вы задали все параметры, нажимаем на кнопку «FINISH».

Теперь мы можем перейти на сайт и посмотреть, как работает наше всплывающее окно.

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

1. Возвращаемся в административную часть и в разделе «Hustle Pop-Ups»
2. Кликаем на три точки возле названия нужного всплывающего окна и выбираем в раскрывающемся списке пункт «Edit Pop-Up»
3. Далее у нас открываются те же три вкладки, на которых вы можете менять контент, дизайн, и другие настройки всплывающего окна.

Так же вы можете отключить эту форму, нажав на кнопку «OFF»
, или включить ее в режиме тестирования. В этом случае она не будет отображаться для посетителей вашего сайта.

Видеоинструкция

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

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

Успехов вам! До встречи в следующих статьях!

В прошлом e-mail маркетинг был на пике популярности, люди с базами от 10000 человек зарабатывали деньги, продавая свои или чужие товары, либо просто на рекламе. Кто еще помнит SmartResponder? Он первый в рунете давал собирать с помощью форм контактные данные посетителей сайта. Тогда о таких вещах как политика конфиденциальности и не слышали, базы продавались и перекупались.

Сейчас научимся делать всплывающие формы для отправки сообщений из форм обратной связи
автору сайта. В WordPress использую связку плагинов Popup maker и Contact form 7, почему:

• Они постоянно обновляются
• Профессиональные разработчики
• У инструментов есть интеграция друг с другом
• На русском языке

Это дает максимум удобства, разберем пошагово, как делать попапы с встроенными формами.

В Contact Form 7 создадим форму обратной связи с полями ввода Имя, Почта и Вопрос. Чтобы установить плагин вводим в поиске название, устанавливаем и активируем.

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

Они не нужны, единственно оставляем теги label. Нужно три поля, приведем к виду.

Оставляем submit это кнопка для отправки. В верхнем меню есть несколько кнопок нас интересует «текст», «e-mail» и «текстовая область». В первом пользователь будет вводить имя, во втором свою почту и в третьем вопрос. Разберем нагляднее, нажимаем вкладку Текст.

1. Выбираем Текст
2. Если обязательно для заполнения то отмечаем галочкой
3. Уникальный идентификатор, оставляем без изменения
4. Значение, которое отображается по умолчанию, что нужно ввести
5. Если отметить чекбокс, то название поля будет внутри
6. Можем задать class, чтобы в дальнейшем привязать к нему CSS стили для оформления
7. Находим вставить тег

Переместил получившийся шорткод между тегами label, должно получится так.

Тоже самое делаем с остальными полями, нажимаем и перемещаем между тегами label. Нас интересуют элементы указанные на скриншоте.

Делаем по аналогии, что получилось.

Для текстовой области задал другой класс forma-2, потому что ее надо настраивать по другим правилам и стилям. Теперь нажимаем на Сохранить.

Переходи во вкладку Письмо, навастриваем несколько параметров, смотрим на снимок.

1. Вкладка письмо
2. Те шорткоды с номерами, которые создавали в разделе Шаблоны, их копируем в область Тело письма, это будет приходить при заполнении формы вам на почту. Дописал напротив каждого фразы Имя, чтобы обозначить какая информация будет мне поступать на почту.
3. Тема отображается когда письмо придёт на почту
4. Дополнительные заголовки советую стереть, никакой помощи не добавляют, а лишь ошибки при отправке
5. В разделе Кому указываем почту, на которую получать письма с формы, по умолчанию берется из аккаунта 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 с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Пример исполнения:
.osnova, #form-test

Переходим в Elementor, создаем кнопку, жмем на ней левой клавишей мыши. Появится боковая панель, в поле id вписываем ранее заданный параметр в попапмейкере без решетки.

Переходим в предвариетльный просмотр, кликаем по, появляется всплывающее окно с обратной связью.

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

Итог

На этом закончу статью, мануал получился не маленький, давайте выведем чек–лист действий:

• Устанавливаем оба плагина WordPress
• В Contact form 7 создаем новую форму, настраиваем ее по инструкции
• Добавляем шорткод в новый попап Popupmaker
• Настраиваем отображение окна
• Привязываем класс к любому элементы на сайте
• Проверяем работу

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

Всем огромный привет! Это снова я, с полезным постом — всплывающее окно для WordPress— для начинающих и не только пользователей WordPress. Если вас интересует  плагины  всплывающего окна WordPress, его ещё называют плагин модального окна WordPress, то вы, друзья, попали точно по назначению.

Плагины, который я представлю чуть ниже, вы можете использовать для: Contact Form 7 в модальном окне; любая контактная форма (обратной связи) в модальном (всплывающем) окне; видео в модальном окне; картинки во всплывающем окне; размещение полезной информации с ссылками; форма подписки по почте на новые статьи в модальном окне и так далее, и так далее всего, и не перечислишь.

Создавайте эффективные всплывающие окна для WordPress!

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

Данные плагины совсем простые, без сложных настроек и почти не создающий дополнительную нагрузку на ваш блог
/сайт. И так читайте — Как сделать всплывающее окно в WordPress?

Плагин Easy Modal — всплывающее/модальное окно для WordPress

 

Установить данный плагин можно стандартным способом, через админпанель — Плагины — Добавить новый и в поле Поиск плагинов
вводите название Easy Modal. В списке он должен быть первым. Устанавливаете и как обычно активируете его. А дальше можно переходить к созданию нового модального окна.

Настройка и создание всплывающего окна в WordPress

Для этого нажмите на новый появившейся раздел Easy Modal и выберите пункт Modals:

 

После этого, в самом вверху страницы нажмите кнопку Add New:

 

А здесь, всё просто:

 

В общих настройках (вкладка General) даёте имя нового окна (отображаться оно не будет, это для вас, если например, вы создадите несколько модальных окон); тип загрузки Load Sitewide (для всего сайта); заголовок окна и наконец вставляете в редактор (режим Текст) нужный вам код. У меня в примере вставлен код видео с YouTube.

Далее, на вкладке Display Options:

 

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

На вкладке Examples вы найдёте примеры кода для вывода всплывающего окна в WordPress:

 

Тут можно выбрать простую текстовую ссылку, кнопку или иконку. Обратите внимание, что к каждому вновь созданному окну присваивается класс  . Первое созданное окно будет иметь класс eModal — 1 второе eModal — 2 и так далее. Вам нужно только самому подставлять номер после знака . Этот код можно вставлять в виджет Текст
или в любом месте вашей статьи. Естественно, текст в коде вы можете написать любой. Да чуть не забыл, что после создания модального окна справа на странице не забудьте нажать кнопку Опубликовать (Publish).

Код модального окна с видео я вставил в сайдбаре в виде кнопки.

Пример исполнения:
.osnova, #form-test Модальное окно с видео

Надеюсь, друзья и товарищи, общий принцип работы с плагином Easy Modal вам понятен. Только лишь добавлю, что вы можете потом или сразу для модального окошка оформить внешний вид, нажав пункт Theme. К сожалению, в бесплатной версии плагина есть только одна тема для оформления, но её вы можете оформить как угодно, настроек достаточно. При настройке внешнего вида модального окна тут же вы можете видеть справа предпросмотр оформления:

Редактирование темы — оформления модального/всплывающего окна

После всех настроек внешнего вида окна нажимайте кнопку справа Save (Сохранить). И напоследок, дамы и господа, покажу пример вывода контактной формы Contact Form 7 в модальном окне.

Contact Form 7 в всплывающем окне

Создайте новое модальное окно, как показано выше и в текстовый редактор просто вставьте шорткод 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.

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

Основные цели всплывающих окон

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

Среди примеров задач, выполняемых такими окнами, можно выделить несколько:

• Информирование клиентов.
  В данном случае всплывающее окно используется для привлечения внимания к услугам, товарам или промоакциям. Такие попапы выводят преимущественно тот контент, который посетитель может пропустить во время серфинга по сайту.
• Сбор контактов.
  Благодаря PopUp можно получить данные потенциальных клиентов. Впоследствии, на основе собранной базы контактов, можно провести их анализ или организовать рассылку.
• Средство связи.
  Всплывающее окно может служить формой обратной связи между пользователем и технической поддержкой без перехода на другую страницу. Также можно напомнить человеку о тех или иных функциях сайта и узнать его мнение. В список подобных окон входят опросы и уведомления (notification).

Типы и разновидности

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

По внешнему виду

1. Лайтбокс (Lightbox)
   — наиболее распространенный вид popup-окон. Как только выскакивает такое окно, фон страницы затемняется. Используется в основном для сбора email-адресов и предложения рассылок.
2. Да/Нет
   — окно, состоящее из 2 шагов, где первое содержит лёгкий вопрос, на который можно ответить только «Да» либо «Нет». Как показывает практика, человек куда охотнее завершит уже начатый им процесс, и данный попап может склонить пользователя к решению подписаться на рассылку. Также имеется подвид данного окна в формате «Да/Да», где один вариант предлагает отправиться к услуге с дополнительным бонусом, а второй позволяет просто перейти к услуге. Такие окна могут неплохо увеличить конверсию. Опытные маркетологи со мной согласятся.
3. Небольшое в углу
   — тип всплывашки, который является наименее навязчивым из всех перечисленных. Такие попапы не мешают просмотру страницы и не вызывают усталости от них.
4. Интерактивное
   — крайне эффективная разновидность popup, позволяющая через побуждение к интеракции (чаще всего в виде игры) заинтересовать клиента нужным предложением.
5. Полноэкранное
   — наиболее агрессивный тип. Гарантированно обращает внимание посетителя на предложение, но с такой же лёгкостью может отвратить от него. Попапами этого типа стоит пользоваться максимально аккуратно.

По триггерам

1. Приветственное (entry popup).
   Появляется при загрузке страницы и, как правило, перекрывает доступ к контенту до его выключения. Лучше всего его использовать для срочной связи с посетителями.
2. С отсрочкой по времени (timed popup).
   Возникает через некоторое заданное время после захода посетителя на страницу. Интервал рассчитан таким образом, чтобы вначале можно было оценить сайт и только потом увидеть попап.
3. По пролистыванию (scroll popup).
   Всплывает, если читатель пролистывает определённую часть страницы сайта. Благодаря этому попапу, можно предложить услугу, релевантную просмотренному материалу. Но стоит учитывать, что пользователь может пролистать статью слишком быстро, не вникая в материал. Также есть риск промахнуться с процентом страницы, при котором срабатывает всплывающее окно.
4. Выхода
   (exit popup window).
   Появляется при уходе человека со страницы. Используется, чтобы держать внимание клиента на странице как можно дольше и за счет этого повысить конверсию. Такие окна могут задержать потенциального клиента, предложив ему оставить отзыв о портале, поделиться ссылкой с друзьями или подарить акцию. Стоит учитывать, что посетитель может закрыть весь браузер целиком со всеми вкладками, и тогда активация попапа не случится.
5. Со всплыванием по клику (click popup).
   Примечательно тем, что демонстрируется в первую очередь заинтересованным пользователям (например, с выгодным предложением), а значит, способно значительно повысить конверсию сайта. В отличие от других типов окон, «всплывашки», активируемые при нажатии на определенный элемент, не перегружают интерфейс страницы, не раздражая тем самым новых посетителей.

Советы по конструированию попапов

Эти рекомендации будут полезны для проектов не только на движке WordPress, но и на других CMS.

• Не используйте всплывающие окна в первые секунды, если только это не приветственные или уточняющие локацию элементы сайта. Даже для перечисленных исключений лучше создавать компактные по размеру попапы, чтобы не отпугнуть потенциальных клиентов.
• Держите временную и пространственную дистанцию между всплывающими окнами и не перегружайте ими страницу. Даже всего две всплывашки одновременно могут заставить пользователя нервничать и вызвать желание уйти с сайта.
• Не стоит прятать от аудитории кнопку закрытия попапа или делать окно невыключаемым.
• Не следует занимать больше времени у посетителя, чем это действительно требуется.
• Не надо включать звук в окне автоматически. Это признак хорошего тона, и вы не поставите посетителя в неудобное положение.
• Не создавайте всплывающие окна с бесполезной информацией. Уважайте время вашего клиента и делайте ему действительно выгодные предложения.
• Не показывайте одно и то же окно несколько раз. Не стоит быть слишком навязчивыми в продвижении своих задач.
• Не ставьте попап, который может всплыть прямо во время чтения материала. Так вы оборвёте процесс изучения контента вашего сайта. Лучше разделите текст на отдельные смысловые блоки и вставьте всплывашки между ними.
• Не требуйте от посетителя выключить его адблокер (плагин, блокирующий отображение рекламы). Лучше покажите, что уважаете его выбор, и, возможно, он сам решит отключить блокировщик при просмотре вашего сайта.
• Всплывающее окно не должно выбиваться из общей стилистики интернет-проекта, иначе оно будет смотреться инородным пятном для ваших клиентов.
• Добавьте мотивационную составляющую. Пользователь куда охотнее подпишется на вашу рассылку, если сможет получить за это особую скидку, электронную книгу, полезный кейс и т. д.
• Помните, что на мобильные устройства сегодня приходится подавляющее количество трафика. Поэтому обязательно адаптируйте ваш попап под них.
• Будьте лаконичным и уместным. В хорошем всплывающем окне человек сразу понимает, что именно ему предлагают и какие действия от него ждут.

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

— это самое популярное из решений для создания попапов среди бесплатных плагинов на WordPress. Благодаря встроенному редактору WYSIWYG, новичок может легко реализовать своё первое окно, включая настройку его внешнего отображения, частоты появления и темы.

Однако для раскрытия полного потенциала плагина потребуется докупать расширения, которых на данный момент доступно 17.

Среди платных возможностей — создание видео-попапа или вывод окна для подтверждения возраста.

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

Этот плагин от компании Supsystic
является неплохим вариантом для вывода простеньких сообщений (massage) в попапах подтипа «Lightbox».

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

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

Разберем премиум-версии popup-плагинов, которые подойдут для сайтов разных типов, начиная от лендингов (landing page) и интернет-магазинов, заканчивая обычными блогами или агрегаторами.

Демо-сайт с примерами

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

Предлагаю вашему вниманию несколько примеров всплывашек, сделанных этим WordPress-модулем.

Легко интегрируется в любую тему WordPress.

Имеет самый продвинутый детальный таргетинг на аудиторию из имеющихся в среде всплывающих окон.

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

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

Стоит также отметить полностью русскоязычный интерфейс, окно предпросмотра для мгновенного отслеживания изменений, поддержку шорткодов (shortcodes) и html-вставок, а также адаптивность к разным платформам (Персональный компьютер, планшет, смартфон).

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

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

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

Известный среди профессиональных плагинов за рубежом — , с помощью которого можно легко на сайте или блоге в системе WordPress сделать попап-окно.

В наличии большое количество симпатичных шаблонов, форм, макетов, разных цветовых схем с красивым стильным дизайном.

Также можно отметить адаптивность под разные устройства, параметры предпросмотра внешнего вида попапов и многое другое.

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

В наличии имеются готовые шаблоны с возможностью редактирования и поддержка использования собственного CSS-кода, JavaScript и Cookie.

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

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

Итоги

Всплывающие окна являются одним из ведущих средств онлайн-маркетинга. Поэтому акулы интернет-бизнеса (например, М. Видео, Ситилинк, DNS и др.) активно их используют.

Среди платных утилит лучшим выбором можно назвать My Popup WPShop
, который при полностью сопоставимом с зарубежными аналогами функционале стоит гораздо дешевле и ориентирован в первую очередь на русскоязычную аудиторию. Это делает плагин наилучшим выбором среди попап-решений сайтов на CMS WordPress для эффективного маркетинга в России и других русскоговорящих сегментах.

В статье разберём как вставить contact form 7 во всплывающее окно. Скажу сразу принцип построен на связке с плагином Popup maker, который идеально совместим и не изменяет внешнего вида первого. Начнём с пошагового разбора с детальными инструкциями.

Для начала создадим первый проект в contact form 7, с тремя полями имя, телефон и почта. Стандартный набор подходящий для сбора контактных данных в обратной связи. Сделали проект, теперь надо скопировать либо записать шорт код. С ним будем работать детальнее.

Как сделать интеграцию в PopupMaker

Устанавливаем PopupMaker, стандартно через административную панель поиском, либо скачиваем . После установки появиться в меню wordpress новый пункт, заходим и вводим новое модальное окно.

1. Путь к добавлению нового всплывающего окна
2. Название, оно не будет отображаться на сайте
3. Заголовок попапа, если не нужно, то не пишем
4. Шорт код из contact form 7

Далее спускаемся вниз. Нужно определить при каких условиях будет всплывать попап.

1. Раздел Триггеры
2. Нажимаем кнопку Добавить
3. Выбираем один из двух триггеров, по нажатию какого либо элемента (открыть) или авто открытие, то есть по истечению какого либо времени.
4. Добавляем

Выбрав «открыть», появятся следующие опции. Задаём уникальный класс, я сделал .otkryt-modelnoe, с ним работаем дальше.

В contact form 7 существует поддержка cookie, поэтому можно добавить различные настройки где отображать или скрывать. Будет полезным поиграться с автооткрытием, но это тема других статей.

Теперь добавим класс к любому элементу в статье, например к ссылке на главной странице. Создадим новую запись, в ней вставим ссылку с прикреплением класса. Как видим на картинке, сначала во вкладке «визуально» создали ссылку, после перешли в текст и туда записали комбинацию.

  class="otkryt-modelnoe"

Обновили или сохранили запись, обязательно проверяем работу на странице блога. Нажимая на «текст ссылки» отображается всплывающий элемент, а в нём наша форма созданная в contact form 7, оформление fancybox выставил.

Для данной операции подойдут плагины FancyBox и Easy Modal, но с ними операция боле сложная, приходиться писать код.

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

Разберём другой случай, когда модальное окно нужно после заполнения и отправки, то есть по достижении нажатия на кнопку «отправить». С данной целью справиться плагин Popup for Contact Form 7, . Устанавливаем и активируем, после появится новый раздел.

1. Раздел General Settings
2. Основными настройки, выставляете галочками к каким проектам добавить постоповещение, настраиваем размеры окна (длину, ширину), а так же автоматическое закрытие, в нашем случае 5000 миллисекунд
3. Сохраняем.

В Popup Text пишем содержимое, существует возможность применения стандартного редактора wordpress. В Popup Design делаем внешний вид, цвет шрифта и заднего фона. После сохранения проверяем работу.

Инструмент минимален, для более глубокой разработки и настройки внешнего вида понадобятся небольшие знания css. Отмечу наличие способов без применения плагинов
при помощи скриптов, применяя хуки contact form 7, но не советуем их брать, ввиду сложного применения, и не всегда корректного поведения.

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

Теперь вывести на сайте всплывающее окно легче легкого, ведь появился плагин My Popup WPShop
.

P. S.  Для любителей смотреть прикладываю видео обзор:

https://youtube.com/watch?v=cxtMCmP8fD0%3Ffeature%3Doembed

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

Часто ли Вы замечали на сайтах всплывающие окна? Так, большинство интернет-ресурсов, особенно новостные и блоговые сайты, показывают посетителям всплывающие или попап (popup) окна с той или иной информацией.

Сегодня разберемся, зачем использовать такие всплывашки, а также как создать и настроить его для сайта на CMS WordPress.

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

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

Как настроить всплывающие окна в WordPress?

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

“Движок”, по умолчанию, не предоставляет возможности создать и настроить всплывающие окна стандартными средствами. Поэтому потребуется стороннее решение.

My Popup

Платный, но очень классный плагин для создания самых разных попапов на WP — от WPShop.

Выбрать лицензию со скидкой на MyPopup

обширная кастомизация внешнего вида благодаря более чем 20 настройкам;

наличие готовых пресетов визуального оформления разной направленности;

гибкие условия вывода по времени и различным поведенческим моделям пользователей;

скорость и быстрота работы без лишней нагрузки;

удобное окно предпросмотра внесенных изменений;

большой выбор видов анимации.

система шорткодов для добавления сторонних скриптов и рекламы.

Такого нет ни в одном другом плагине попапов для WordPress! И все это — за скромную цену, самую выгодную из всех платных решений. Поэтому nulled версию
в сети вы вряд ли найдете.

Забирайте с промиком на скидку в размере 15%:

Активировать промокод на MyPopup

Читайте подробный о бзор плагина My Popup
для WordPress.

Popup Maker

Рассмотрим бесплатный плагин .

После установки и активации плагина, сразу видим окно приветствия. Для начала работы нажимаем кнопку Skip
.

В итоге Вы попадаете в основное окно создания всплывающих окон.

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

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

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

Дальше, в самом большом текстовом блоке нужно ввести контент, который будет отображаться в окне. Тут может быть как простой текст и изображения, так и медиаданные (например, ролик с YouTube).

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

Блок Показать настройки позволяет задать размеры попап-окна.

Настройка Отключить фон позволяет отображать или скрывать фон под всплывающим окном.

Блок Анимация позволяет задать Вашему окну скорость, а также эффекты анимации (затухание, увеличение и др.)

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

Итак, после того, как все настройки были внесены, следует нажать кнопку Опубликовать.

Наше всплывающее окно создано, и теперь можно смотреть на сайте.

Popups — WordPress Popup

Еще один бесплатный плагин Popups — WordPress Popup попап-окон, содержит следующие функции:

• вывод всплывающих окон на выбранных частях сайта;
• фильтры для пользователей;
• настройка popup-окна в зависимости от шаблона страницы и пр.

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

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

В разделе PopUp Appearance
Вы сможете настроить основные элементы внешнего вида popup-окна (фон, текст, рамки).

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

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

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

После настройки необходимых параметров нужно нажать кнопку Опубликовать
.

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