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

Всплывающее окно для WordPress

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

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

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

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

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

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

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

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

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

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

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

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

Посетитель нажимает на неё и открывается окошко с видео:

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

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

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

Всплывающее окно WordPress contact form 7. Создайте новое модальное окно, как показано выше и в текстовый редактор просто вставьте шорткод Contact Form 7 (если у вас установлен этот плагин, если нет, установите):

Нажмите кнопку Опубликовать (Publish) и вам остаётся только разместить код (про класс не забывайте) в нужном вам месте (в сайдбаре, в сообщениях, в футере блога, в меню). Пример, кнопка Написать автору после сообщения:

Если читатель захочет связаться с вами, то он нажмёт кнопку и контактная форма откроется в модальном окне:

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

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

Знаете ли вы, что у Easy Modal новая модная замена под названием Popup Maker? Это самый популярный пользовательский всплывающий и модальный плагин для WordPress.

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

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

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

С помощью Popup Maker вы можете создавать такие всплывающие окна:

Легко создавайте уведомления о файлах cookie, всплывающие окна (лайтбоксы) с видео, модальные формы (Ninja Forms, Gravity Forms, Contact Form 7 (CF7), Caldera Forms, WPForms, Mailchimp для WordPress (MC4WP) и многое другое).

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

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

Вот пожалуй и всё, о чём я хотел с вами сегодня поделиться. Надеюсь вам было полезно. Удачи всем и до новых встреч, на страницах лучшего блога в мире WordPress mania.

Источник

Всплывающая форма обратной связи 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, добавляйте стили к тем что сейчас стоят коде. Вставляйте в статьях или напрямую в код шаблона.

Чтобы сделать всплывающее окно с обратной связью в Elementor не нужно больших знаний. Переходим в Popup Maker и в тригерах (ранее разбирали) добавляем через запятую id с помощью знака решетки через запятую. Не забываем обновлять тригер формы и сам проект.

Вносим ID в тригеры

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

Выводим параметры элемента в elementor

Показ формы связи через elementor

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

Читайте также:  Как сделать сразу включенный поршень minecraft

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

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

Источник

Создаем всплывающее окно с помощью плагина Popup Maker

Если вы задались вопросом: «как создать всплывающее окно для сайта на WordPress?» – То для этого, предлагаю воспользоваться плагином всплывающих окон Popup Maker. Это достаточно мощный и простой в использовании плагин!

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

Описание плагина

Popup Maker доступен бесплатно, в репозитории WordPress. Количество функций, доступных в бесплатной стандартной версии, впечатляет. В зависимости от ваших потребностей, вы сможете расширить Popup Maker за пределы своей основной функциональности. Для этого, на данный момент – доступно 17 дополнительных платных расширений.

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

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

Изначально, в плагине нет собственной формы подписки по электронной почте. Но это можно будет с легкостью исправить. Например, объединить его с формой подписок Contact Form 7 или Ninja Forms!

Настройка

Установить и использовать Popup Maker очень просто. Установите его, как и любой другой плагин WordPress. Перейдите в «Плагины ⁄ Добавить новый». После его активации, появится опция Popup Maker на вашей боковой панели WordPress.

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

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

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

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

Вот что у меня получилось в редакторе:

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

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

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

Триггеры: Установите как открывать окно, автоматически или с задержкой по времени. Установите cookie, и т.д.

Задержка времени / Автооткрытие: Задайте задержку перед открытием окна и выберите, какие куки отключат этот триггер.

Файлы cookie: Установите файлы cookie, чтобы предотвратить избыточное открытие всплывающих окон. Это необходимо для пользователей, которые предпочитают их скрывать. Напишите название и время действия файла cookie. Мои параметры выглядят так:

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

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

Размер: Задайте размер всплывающего окна, укажите ширину в пикселях.

Тип и скорость анимации: Выберите тип и скорость анимации для всплывающего окна.

Позиция: Исправьте положение и перестановку на основе изменения размера экрана, выберите местоположение, в котором открывается окно.

Z-индекс: Параметры этого пункта оставляем по умолчанию.

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

Настройка темы

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

Некоторые элементы, для которых вы сможете настроить внешний вид:

Для некоторых из этих элементов, есть возможность настроить границу, установить тени, задать параметры шрифта (цвет, размер, высота строки) и многое другое. Также, рекомендую попробовать плагин для приема онлайн-оплат: Платежный шлюз для WooCommerce.

Вот примеры моих настроек:

Фон под всплывающим окном

Пример настроек контейнера

Внешний вид содержания

Внешний вид кнопки закрыть

Готово! Все необходимые настройки мы настроили. Теперь, на боковой панели нажмите «Сохранить», затем «Опубликовать».

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

Источник

Как сделать всплывающие окна (popup) на сайт WordPress

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

Читайте также:  Антипробуксовочная система своими руками с abs

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

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

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

WP Popups: Список возможностей

WP Popups поставляется как в бесплатной версии на WordPress.org (WP Popups Lite), так и в премиум-версии с большим количеством функций.

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

Что вы получаете в бесплатной версии?

Работа с WP Popups.

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

Для создания нового всплывающего окна, вам нужное перейти к WP Popups → Add New.

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

1. Выберите шаблон

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

Бесплатная версия поставляется с двумя готовыми шаблонами — в то время как в премиум-версии шаблонов больше:

Для этого обзора я выбрал элегантный шаблон (Elegant Popup)

2.Добавьте контент.

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

Вы можете использовать вкладку «Content» чтобы добавить содержимое всплывающего окна с помощью классического редактора WordPress.

Кроме этого, здесь есть две примечательные особенности:

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

3. Настройка внешнего вида

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

В бесплатной версии вы получаете семь различных вариантов позиции:

Выбрав новую позицию, вы сразу увидите свою форму в предварительном просмотре:

Теперь вы можете указать оставшиеся настройки:

4. Настройка правил отображения

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

Правила отображения — это то, где плагин WP Popups действительно превосходен.

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

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

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

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

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

В общей сложности, в бесплатной версии WP Popups вам предоставляется 26 различных правил отображения. Вы можете настроить таргетинг на:

Вы можете смешивать и сочетать все эти условия, используя правила И и ИЛИ:

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

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

5. Настройка параметров.

Теперь вам нужно настроить еще две важные детали:

Для этого вам нужно перейти в раздел Settings (настройки)

Что вы получаете с полной версии плагина WP Popups.

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

Премиум-версия дает вам доступ к:

Вы также получаете доступ к дополнительным готовым шаблонам.

Стоимость платной подписки составляет от 35 долларов в год, до 299 долларов в год.

Заключение.

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

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

Совсем другое дело, когда вы сами полностью контролируете этот вид рекламы. Когда вы сами устанавливаете, что именно показывать, кому показывать, когда показывать и как показывать.

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

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

В общем, если вам нужен отличный инструмент для создания всплывающих окон на сайт WordPress, то попробуйте WP Popups.

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

Источник

Оцените статью
Как сделать своими руками
Adblock
detector