Как сделать всплывающее окно в wordpress
Добавил пользователь Алексей Ф. Обновлено: 18.09.2024
Часто ли Вы замечали на сайтах всплывающие окна? Так, большинство интернет-ресурсов, особенно новостные и блоговые сайты, показывают посетителям всплывающие или попап-окна с той или иной информацией. Зачем они нужны вообще? Обычно их наличие помогает конвертировать посетителей в подписчиков (т.е. в постоянных пользователей). По данным интернет-маркетологов, наибольший процент конверсии приходится именно на всплывающие окна, если, конечно, они настроены правильно. Конечно, если такие окна будут “вылетать” час за часом перед глазами посетителя, то понятно, что он уйдет из такого сайта и не захочет больше возвращаться.
Как настроить всплывающие окна в WordPress?
“Движок”, по умолчанию, не предоставляет возможности создания и настройки всплывающих окон. Поэтому воспользуемся сторонним решением – бесплатным плагином Popup Maker .
Плагин Popup Maker
Итак, после установки и активации плагина, сразу видим окно приветствия. Для начала работы нажимаем кнопку Skip.
В итоге Вы попадаете в основное окно создания всплывающих окон.
Для создания попап-окна необходимо нажать кнопку Добавить Всплывающее окно, после чего Вы попадете на страницу создания всплывающего окна.
Тут нужно будет ввести следующие данные. В первых двух полях для ввода вводим название и заголовок нашего окна. Отметим, что в названии можно ввести произвольный текст, так как он нигде показываться не будет выводится.
Блок Условия подразумевает настройку места показа всплывающего окна. Как видим, тут довольно большой выбор параметров, позволяющих гибко настроить показ (на всех страницах сайта, только на главной, в рубриках и пр.) Кроме того, есть возможность отключать показ попап-окна на мобильных и планшетных устройствах (настройки Отключать этот Popup на мобильных устройствах и Отключите это всплывающее окно на планшетных устройствах соответственно).
Дальше, в самом большом текстовом блоке нужно ввести контент, который будет отображаться в окне. Тут может быть как простой текст и изображения, так и медиаданные (например, ролик с YouTube).
В блоке настроек Настройка темы Вы можете выбрать одну из предлагаемых плагином тем визуального оформления окна.
Блок Показать настройки позволяет задать размеры попап-окна.
Настройка Отключить фон позволяет отображать или скрывать фон под всплывающим окном.
Блок Анимация позволяет задать Вашему окну скорость, а также эффекты анимации (затухание, увеличение и др.)
В блоке Позиция Вы можете выбрать место на экране, где будет показываться Ваше попап-окно.
Итак, после того, как все настройки были внесены, следует нажать кнопку Опубликовать.
Наше всплывающее окно создано, и теперь можно смотреть на сайте.
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.
Каждый человек, имеющий свой сайт на WordPress, наверное, очень часто думает над тем, как сделать его еще более красивым, динамичным и удобным для пользователей. В этой статье мы разберемся, как сделать всплывающую контактную форму на вордпресс. Мы рассмотрим семь лучших плагинов, которые позволяют добавить на свой сайт всплывающие окна в вордпресс.
Возникли проблемы с вашим текущим хостингом WordPress? Слишком дорогой? Слишком много простоя? Плохая поддержка? Медленный? В целом неудачный опыт? Это может помочь: Самый быстрый хостинг для WordPress
Bloom
Этот плагин позволяет добавить на свой сайт всплывающее окно WordPress. Этот инструмент доступен лишь как часть полного членства Elegant Themes, потому что его создали разработчики популярной темы Divi. Это делает его достаточно дорогим, если единственное, что Вам необходимо – это добавление всплывающей формы связи WordPress. Если Вам интересны дополнительные функции этого плагина, он, возможно, отлично Вам подойдет, ведь обладает рядом особенностей:
- Прежде всего, этот инструмент имеет красивейшую панель мониторинга, которую Вы больше нигде не найдете;
- Предельно простой и интуитивно понятный интерфейс, который позволяет без труда работать с плагином;
- Инструмент поставляется с более чем сотней разных шаблонов, которые могут настраиваться под нужды пользователя. Также в комплекте идут некоторые другие уникальные параметры;
- Плагин позволяет настраивать тексты и просматривать аналитику, исходя из которой, можно сделать вывод касательно того, выполняют ли всплывающие окна, поставленные им задачи.
Плагин, кстати, имеет неполную бесплатную версию, однако для того, чтобы воспользоваться полным функционалом инструмента, придется заплатить 89 долларов.
OptinMonster
В самом начале своего существования плагин предоставлялся пользователям как инструмент для создания всплывающей формы WordPress, а сейчас представляет собой целую платформу, включающую в себя ряд инструментов SaaS. Однако плагин не забыл свои корни WP, поэтому пользователям всё еще предоставляется возможность скачивания специального плагина WordPress, который значительно упрощает интеграцию.
Однако нельзя не сказать, что создавать и управлять всеми своими всплывающими окнами придется в отдельном интерфейсе OptinMonster.
Плагин имеет ряд отличительных особенностей:
- Рассматриваемый инструмент является одним из наиболее мощных всплывающих плагинов, потому что он включает в себя огромный спектр функциональных возможностей;
- Плагин позволяет пользователям создавать всплывающие окна с нуля или настраивать один из существующих шаблонов;
- Пользователям предоставляются крайне понятные правила запуска, подробнее о которых рекомендуется почитать на сайте разработчика;
- Инструмент обладает очень полезной функцией: если посетитель Вашего сайта подписался на Ваши обновления через всплывающее окно, Вы сможете в дальнейшем показывать ему все новые предложения.
Elementor PRO
Этот широко распространенный плагин, позволяющий создавать всплывающую форму обратной связи WordPress, используется более чем на миллионе сайтов, работающих на WP. Важно отметить, что при помощи дополнительного функционала Elementor PRO вы получаете доступ к Popup WordPress Builder. При помощи этой функции пользователь может использовать один и тот же полнофункциональный интерфейс и компоновщика страниц для построения различных всплывающих окон.
Этот вариант будет оптимальным, если вы желаете получить от инструмента гибкость и стопроцентный контроль над всеми окнами, которые всплывают на страницах Вашего сайта.
Расширенная версия этого плагина обладает рядом преимуществ:
- Инструмент позволяет создавать различные всплывающие формы вордпресс;
- Пользователь может использовать все обычные виджеты и параметры стиля;
- Вы можете контролировать то, как выглядит Ваш сайт;
- Плагин предоставляет пользователям более чем сотню разных всплывающих шаблонов, которые могут помочь Вам начать работу.
Layered Popups
Layered Popups – достаточно распространенный инструмент, создающий в вордпресс всплывающую форму обратной связи. Этот плагин поставляется с огромной коллекцией заготовленных шаблонов, имеет уникальный метод, который позволяет пользователям создавать собственные всплывающие окна. Инструмент был приобретен свыше пятнадцати тысяч раз и сохранил при этом отличный рейтинг. Средняя оценка приложения – 4.79/5.
Также этот плагин всплывающего окна WordPress обладает рядом особенностей:
- Колоссальное количество различных шаблонов – их больше двухсот. Более того, вы можете использовать многослойные всплывающие окна или придумать какой-нибудь свой шаблон;
- Пользователям предоставляется возможность встраивания формы входа WP во всплывающее окно. Это, наряду с двухэтапной функциональностью выбора, позволит Вам создать оптимальную функциональность, использующуюся на большом количестве популярных сайтов;
- Достаточно стандартный набор параметров.
Icegram
С помощью этого плагина можно заняться оснащением своего сайта всплывающей формой вордпресс совершенно бесплатно. Тем не менее, плагин имеет платную, более расширенную версию. Стандартная версия отлично подойдет для обычных, основных всплывающих окон, а вот расширенный вариант позволит просматривать аналитику. Более того, он оснащен другими не менее полезными функциями.
Также этот инструмент имеет ряд особенностей:
- Если нужно создать обычное всплывающее окно вордпресс – плагин Icegram, а точнее бесплатная его версия, подойдет наилучшим образом. В ней можно самостоятельно создавать всплывающие окна из выбранных шаблонов, а также использовать некоторые параметры запуска. Это очень удобно и отлично подойдет при постоянном использовании.
- Если Вам необходим доступ к широкому спектру новых функций, таких как А/В тестирование, аналитика и огромный выбор готовых тем – лучше приобрести расширенную версию.
Popup maker
Popup maker wordpress – самый популярный плагин для создания всплывающих окон. На WordPress он предлагает бесплатную версию, которая окупается пятизвездочным рейтингом и огромным количеством положительных отзывов.
Попап вордпресс выделяется своими необычными правилами запуска. Особенно ярко это выражено в платной версии программы. Более того, плагин имеет максимально простой и интуитивно понятный интерфейс, который основан на обычном редакторе. Кроме всего перечисленного, этот maker wordpress позволяет работать с Вашими собственными cookie файлами. Если вы являетесь разработчиком, то для Вас в плагине присутствует огромное количество разных фишек, которые позволят настроить работу сайта так, как вам хочется.
WordPress Subscribe PRO
Этот плагин является премиальным плагином от MyTthemeShop. Есть, конечно, бесплатная версия, однако большинство клиентов предпочитают использовать расширенный вариант, потому что он куда более приятен в использовании и многофункционален.
Этот плагин обладает рядом особенностей:
- Если Вы довольны внешним видом всплывающих окон, их будет максимально просто настроить;
- Вам предоставят доступ к большинству наиболее важных параметров запуска;
- Плагин обладает не слишком гибким инструментарием, а это, в свою очередь, делает его не самым подходящим для опытных разработчиков вариантом.
Заключение
Проведя черту над всем, что было сказано выше, становится понятно – что оснащение своего сайта всплывающими окнами – действительно полезное занятие, которое приносит огромное количество пользы. Для того чтобы добавить на свой сайт всплывающие окна, существует достаточно много плагинов, лучшие из которых были перечислены в этой статье.
Очень сложно сказать, какой из них является лучшим – каждый по-своему хорош и имеет свои отличительные черты. О том, какой лучше всего вам подойдет, должны судить только вы, исходя из своих личных предпочтений и потребностей вашего сайта. Возможно, есть смысл попробовать несколько разных плагинов, ведь только так получится найти тот, который лучшим образом будет вписываться в работу вашего сервиса.
Всплывающая реклама… Сколько разных эмоций возникает от этого словосочетания. Она не нравится пользователям, но приносит хороший доход вебмастерам.
Есть множество способов сделать всплывающую рекламу на сайте. В этой статье мы поговорим о плагинах для CMS Wordpress, которые помогут вам настроить всплывающие окна на сайте наилучшим образом.
Виды всплывающих окон
Есть очень много видов всплывающих окон на сайте. Только за последние пару лет появилось около пяти новых, и всё ограничивается только фантазией рекламодателя. К основным форматам попапов можно отнести:
- Стандартный попап - всплывающее окно посередине страницы
- RichMedia - формат всплывающего окна, закрывающий собой почти всю страницу
- Видео с автоплеем - всплывает видео и автоматически начинает проигрываться со звуком (самый мерзкий вид рекламы)
- Всплывающее окно внизу страницы - обычно занимает больше 30% от места на экране
- Объявления блокирующие доступ к сайту на протяжении какого-то времени
- Всплывающее окно в нижнем или верхнем углу страницы, занимающее не больше 20% от места на экране
Это основные форматы, которые используют для всплывающего окна.
Минималистичные виды всплывающих окон
Поп-аут
Современный формат небольшого всплывающего окна в нижнем углу страницы. Обычно показывается только на десктопных устройствах. Занимают не больше 10% от места на сайте и в основном выглядят в виде каких-либо уведомлений.
Хелло-бар
Тонкая полоска в самом верху или низу страницы. Такой бар может открываться сразу вместе со страницей, ведь он не сильно помешает пользователю. Обычно в такой бар добавлять форму подписки на рассылку. Возможно вы уже встречали такое на популярных сайтах.
Какие задачи решают всплывающие окна
Как ни странно, но попапы нужны не только для размещения в них рекламы. Одной из самых распространенных задач является сбор базы подписчиков в социальные сети или по Email.
Помимо этого, с помощью попапов можно информировать пользователей об акциях и скидках, проводить опросы, сообщать о нововведениях на сайте, ну и конечно же собирать лиды через форму заявки.
Делайте попапы по правилам
У браузеров есть четкие рекомендации по допустимым всплывающим окнам.Эти правила разработали в Coalition for Better ADS и их придерживаются все современные браузеры. Если ваш попап не соблюдает эти рекомендации, то браузер может заблокировать вашу рекламу.
Чего делать нельзя:
- Запускать видео со звуком во всплывающем окне
- Делать попап с отчетом без возможности закрытия
- Нельзя, чтобы нижний попап занимал больше 30% от экрана
- Делать мигаюшие, скользящие, пульсирующие и прочие агрессивные попапы
Что делать можно:
- Показывать попап, если пользователь решил покинуть страницу
- Если пользователь бездействовал на странице больше 30 секунд, при условии, что на странице нет видео
- Показывать попап если пользователь ушел на другую вкладку, а потом вернулся на ваш сайт
Еще несколько рекомендаций по всплывающим окнам
Первый совет. Не делайте много текста на попапе. Помните, первое желание пользователя при появлении всплывающего окна - закрыть его и вернуться к контенту сайта. Однако, как не крути, но пользователь пробежится взглядом по содержимому “всплывашки”, и если взгляду будет незачто зацепиться в сплошной стене текста - он так и закроет окно.
В вашем попапе должен быть четкий заголовок, призыв к действию и кнопка самого действия. Причем призыв и кнопка должны дублировать друг друга.
Если в призыв звучит “подпишись на нас”, то и на кнопке должно быть написано “подписаться”. Если “купи у нас”, то и кнопка “Купить” соответственно.
Второй совет: не обманывайте пользователя и не бесите его. Есть много способов сыграть на пользовательском опыте, гордости пользователя или просто невнимательности. Один из самых распространенных примеров: На попапе есть призыв “подпишись!” и две кнопки, “да” и “нет”. Обычно кнопка Да всегда слева, а Нет справа, мы так привыкли, согласитесь? Но рекламодатель меняет кнопки местами и пользователь не глядя кликает на правую кнопку.. А если её еще и выделить красным цветом, т.к. обычно именно он значит “нет”. Как итог - пользователь подписался обманным путем. Вряд ли он после этого вернется на сайт, где его обманули.
Второй распространенный пример “Вы хотите зарабатывать много? Купите наш курс!” и кнопки “Да я хочу стать богатым” и “Нет, я лучше буду бедным”. По задумке маркетолога это должно сыграть на гордости пользователя, однако это играет только на его злости. Не повторяйте этот пример.
Третий совет. Не используйте несколько попапов одновременно. Что может быть хуже для пользователя, если на один попап наложится другой? С вероятностью 146% он сбежит с вашего сайта и будет полностью прав.
В своей погоне за лидами или подписчиками никогда не забывайте про чувства пользователя и его эмоции. Оставьте только один лаконичный попап, не более того.
Четвертый совет. Не напрягайте юзера постоянной рекламой. Один раз показали попап - хватит. Не нужно показывать одно и тоже при каждом переходе на новую страницу, иначе у пользователя просто не будет желания идти на следующую страницу сайта. Один юзер - один показ попапа.
Пятый совет. Таргетируйтесь. Если у вас есть возможность показывать на конкретных разделать конкретные попапы - это идеально. Как показывает практика, если пользователь и хочет увидеть всплывающую рекламу, то только на те тему, из-за которой он посетил сайт. Пришел юзер на услугу по пластике груди, вы можете ему там показать попап с акцией на пластику груди.Но ни в коем случае не показывайте попап с пластикой других органов, это пользователю просто не интересно и только помешает.
Если вы будете так таргетировать попапы, то вы сможете в разы увеличить процент конверсии.
Шестой совет. Попап должен быть в дизайн сайта. Если ваш дизайн сделан в едином стиле, в спокойных голубых или зеленых цветах, то ни в коем случае не показывайте красный мигающий попап. Во-первых это вызовет резкий диссонанс у пользователя из-за контраста с сайтом, во-вторых, это просто будет некрасиво смотреться. Нативные попапы продают лучше.
Седьмой совет. Не забывайте предупреждать пользователей о том, что вы собираете данные и обрабатываете их. Всегда нужно иметь соответствующий чек-бокс согласия пользователя на такие действия. Это и конверсия повысит, и закон обработки и хранения персональных данных будет соблюден. Если вы подписываете на рассылку в своём попапе, не забудьте про это.
Восьмой совет. У пользователя всегда должна быть возможность легко закрыть всплывающее окно. Ни в коем случае не прячьте крестик и не включайте отсчет до закрытия попапа. Не вынуждайте пользователя напрягаться и искать или ждать закрытия. Он должен иметь возможность легко продолжить изучение контента вашего сайта или он просто покинет его. Не портите свои отношения с аудиторией и поведенческие факторы.
Девятый совет. Подтверждайте действия с попапом. Если вы собираете базу подписчиков и пользователь отдал вам свою почту, то подтвердите его подписку появившейся фразой “Вы успешно подписались на нашу рассылку”. Если он отправил заявку, то выведите надпись “Ваша заявка получена, скоро с вами свяжутся”. Обязательно дайте знать пользователю, что будет дальше. Некоторые начинают волноваться, если нет уведомления, что им перезвонят. Что им делать дальше? Непонятно. Облегчите пользователю жизнь и оповестите его об успешном действии.
Вот вам небольшой лайфхак. Например у вас сайт по доставке суши и пользователь оставил заявку во всплывающем окне. Почему бы вместе с уведомлением, что его заказ оформлен не вывести несколько ссылок на материалы, которые будут ему полезны? Например: Как правильно пользоваться китайскими палочками, как получить кэшбэк с покупки и как подобрать напиток под суши. Согласитесь, эти темы могут быть интересны пользователю уже после совершения заказа. Ему контент и забота, вам поведенческие и лояльность. Все в плюсе.
Десятый совет. Тестируйте всплывающие окна на себе и на всех устройствах. Есть такое заблуждение: “Это же моя реклама и мой попап, конечно он мне не интересен, я же не целевая аудитория”. Так вот, это ложь. Истина в том, что вы сами должны быть в восторге от своего оффера и внешнего вида всплывающего окна. Только такой попап можно запускать в работу. В ином случае смысл ждать от него великой конверсии?
То же самое касается и устройств. Обязательно проверьте внешний вид вашего попапа
на всех возможных устройствах и разрешениях экранов. Везде верстка должна быть идеальной, текст помещаться в границы, а крестик или кнопка закрытия должны быть в видных местах.
Одиннадцатый совет. Делайте цепочки всплывающих окон там, где это необходимо.Допустим, ваша цель подписать пользователя на рассылку, но вы хотите сделать это не просто так, а дать ему какую-то ценность, например книгу. В первом попапе вы предлагаете юзеру получить бесплатную книгу и две кнопки “Получить” и “Отказаться”. Если юзер жмет “Получить”, то можно ему тут же показать второй попап с формой подписки, куда он должен ввести свою почту для получения книги на неё.
Разрешается использовать несколько попапов только в таком случае и никак иначе.
Двенадцатый совет. Анализируйте результаты. Вы можете анализировать ваши попапы с помощью целей в Яндекс.Метрике или Google Analytics, с помощью внутренней статистики вашего сайта или любым другим удобным способом. Не забывайте проводить А/Б-тестирование, менять офферы и виды всплывашек. Анализ - уже половина успешного попапа.
Чек-лист всплывающего окна на сайте
Давайте теперь соберем все советы в единый чек-лист, который вы можете сохранить и постоянно обращаться к нему.
- На попапе нет большого количества текста. Заголовок, призыв и кнопка.
- На попапе нет информации вводящей пользователя в заблуждение
- У вас только один попап на сайте
- На одного юзера попап всплывает только один раз
- На попапе содержится релевантная странице информация
- Внешний вид всплывающего окна соответствует дизайну сайта
- Вы получаете согласие пользователя на обработку его данных
- Крестик или кнопка “закрыть” легко доступна
- После выполнения целевого действия есть подтверждение для пользователя
- Вы протестировали окно на всех устройствах и на себе
- На попапе настроена аналитика и цели в системах метрики
Как сделать всплывающее окно на сайте Wordpress
Вот мы и добрались до самого главного, каким способом можно сделать попап на сайте собранном на CMS Wordpress. Сразу отметим, что задача это не сложная и существует очень много инструментов, позволяющих создавать красивые попапы, которые будут отвечать всем рекомендациям, написанным выше.
Также помимо стандартных попапов, некоторые плагины умеют легко создавать и остальные виды всплывающих окон.
Давайте посмотрим на 5 плагинов для создания всплывающих окон, а один полностью настроим для наглядного примера.
Master Popups
Название плагина говорит само за себя. Плагин имеет 25 шаблонов всплывающих окон, 12 форм подписки на рассылку и красивый drag-n-drop редактор.
Вы можете таргетировать попап по типам страниц или постов, по тегам и категориям. Можно показывать одну всплывашку на весь сайт.
Количество попапов в плагине не ограничено, вы можете делать столько окон, сколько вам нужно. Каждому окну можно задавать свою ширину и высоту, менять цвет заднего фона страницы,
Помимо прочего, вы можете настраивать даже свой собственный прелоадер для каждого попапа.
Для каждого всплывающего окна можно задать шорткод и вызывать его по клику на кнопку или ссылку. Все настройки плагина можно экспортировать для использования на другом сайте.
К сожалению, плагин обновляется не так часто как хотелось бы, тем не менее, он прекрасно работает с последними версиями Wordpress.
Из недостатков плагина - он полностью на английском языке.
Popup by Supsystic
Создать лайтбокс за пару минут, выбрав один из 18 типов всплывающих окон и один из 69 адаптивных шаблонов? Легко.
Плагин позволяет вам создавать неограниченное количество всплывашек, каждую из которых можно настраивать по размеру, цвету и любому другому стандартному критерию.
Таргетировать всплывающие окна можно по категориям или типам страниц. Также можно делать различные задержки и целые серии попапов с помощью тонких настроек.
Вы можете выбирать место на странице для каждого попапа и сделать одну из двадцати возможных анимаций открытия. В общем очень много настроек, шаблонов и типов всплывающих окон.
Плагин часто обновляется, но также не поддерживает русский язык. Однако, пусть английский язык не пугает вас. Администрирование плагина и создание новых окон настолько просто и понятно, что с этим справится любой неопытный пользователь.
Popup Builder — Responsive WordPress Pop up — Subscription & Newsletter
Очень популярный и функциональный плагин. Поддерживает интеграцию практически со всеми более-менее крупными плагинами для создания форм на сайте, поддерживает интеграцию и с конструкторами страниц (Visual Composer, Elemental, DIVI, WPML и другие).
Плагин действительно довольно функциональный и имеет все необходимые для комфортной работы настройки. Вы можете выбирать анимации открытия, расположение всплывающего окна на странице, таргетироваться по страницам, рубрикам и тегам, а также вызвать модальное окно по шорткоду.
У плагина есть и платная версия. В ней доступен функционал интеграции в WooCommerce, делать всплывающие окна регистрации и авторизации на сайте, делать всплывающие окна с счетчиками и вызывать попап когда пользователь пытается покинуть страницу. Также для платной версии доступен функционал обхода Adblock и еще более двадцати настроек.
Плагин постоянно обновляется, имеет более 100 000 скачиваний и основная масса оценок это 5*.
Popup Maker — Popup Forms, Opt-ins & More
Еще один очень популярный плагин для создания всплывающих окон. Как и предыдущий, этот плагин делится на платную и бесплатную версию. В бесплатной вам доступен весь основной функционал, включая интеграции с различными плагинами форм или email-рассылок.
В платной версии доступен функционал показа попапа пользователю, покидающему страницу, подгрузки попапов с помощью AJAX, все верификационные окна, внутренняя аналитика плагина и большое количество таргетингов.
Плагин очень крупный и “тяжелый”. Хорошо подойдет тем, кто продумывает стратегию размещения модальных окон, создает цепочки и отслеживает аналитику. Если вам нужно одно окно на весь сайт и вы не заморачиваетесь настройками, лучше воспользоваться более “легким” плагином.
На момент написания статьи плагин имеет более 400 000 установок и более 3 000 наивысших оценок. Кстати, плагин поддерживает русский язык.
Popups by OptinMonster
Самый популярный плагин из этой подборки. Плагион обладает всем функционалом своих конкурентов описанных выше. Есть возможность проводить А/Б тесты всего в пару кликов и без сложных настроек. Все виды таргетинга и всплывающих окон.
Есть и внутренняя аналитика поведения на всплывашках. Вы можете воспользоваться одним из шаблонов в библиотеке плагина или создать своё модальное окно с помощью drag-n-drop редактора.
Плагин постоянно обновляется и имеет более 1 000 000 активных установок. Русского языка к сожалению в плагине не имеется.
Добавление всплывающего окна на сайт Wordpress - пошаговая инструкция
Добавлять попап мы будем на примере плагина Popup by Supsystic. Почему именно он? Да просто потому, что он довольно легкий, не имеет много лишнего функционала и вполне подходит для решения 90% типовых задач попапа. Зачем нужен лишний функционал, если он не будет использоваться?
Устанавливаем плагин, активируем его и находим в левой колонки админки ссылку “Добавить новый PopUp”.
Перед нам страница со всеми попапами, которые у нас есть. Поскольку попапов нет, страница пуская. Нужно будет нажать на кнопку “добавить попап” уже на самой странице. Таким образом вы попадете на страницу с шаблонами.
Не ходите использовать шаблон? Выберите шаблон под названием “Clear Popup” и твориту с нуля.
Поскольку дело к новому году, мы выберем новогодний шаблон и разместим на нем акцию. Выбираем нужный шаблон, вводим его имя и жмем сохранить.
Вы попадете на страницу с огромным количеством чек-боксов. Не пугайтесь. Тут у нас всё по русски, и достаточно прочитать, что от нас хотят. Многие настройки доступны только в версии PRO, так что сильно тут не разойдешься.
Во вкладке дизайн мы и будем менять внешний вид нашего всплывающего окна. Тут вы можете изменить прозрачность фона, цвета текстов, внешний вид кнопки закрыть и маркеров. Опять же, многие функции доступны только в платной версии плагина. Когда вы закончили основные настройки, перейдите во вкладку тексты и измените тексты на нужные вам.
Также вы можете добавить кнопки социальных сетей на свой попап.
Сама контактная форма настраивается по вкладке Подписки. Тут вы можете задать нужные поля, настроить интеграцию с сервисами сбор электронных почт, изменить оповещение пользователей о удачной или неудачной подписке и изменить текст самой кнопки.
В этом же разделе можно задать и текст письма, который придет пользователю после подписки на рассылку.
Вкладка А/В тестирование доступна только для PRO версии плагина, статистику вы можете настроить бесплатно. По умолчанию статистика самого плагина уже включена, статистика от Google Analytics доступна только в платной версии плагина.
Сохраняем и идем на сайт. Итого, наш финальный вид всплывающего окна выглядит следующим образом.
Заключение
Естественное продвижение
Привет! Сегодня я расскажу вам о Супер плагине, для создания всплывающих popup окон. Вы сможете добавить на свой сайт всплывающее окно, на любую страницу, с помощью шорткода. Можно сделать, чтобы окно открывалось при нажатии на кнопку, ссылку, изображение, текст, либо любой другой элемент на вашем сайте. Можно сделать, чтобы окно появлялось при наведении на любой элемент. Есть обычный вариант, popup окно всплывает при открытии, загрузки страницы. В окно вы можете добавить любой HTML код, изображение, шорткод и т.д. Очень простой и полезный плагин!
Установить плагин Popup Builder — Responsive WordPress Pop up вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый , введите название плагина в форму поиска, установите и активируйте открывшийся плагин.
Далее, после установки и активации плагина, перейдите на страницу: Popup Builder — All Popups . Здесь будут отображаться все созданные всплывающие окна. Чтобы создать новое окно, нажмите вверху на кнопку Add New .
Далее, вам нужно выбрать тип окна. Вам будут доступны 4 бесплатных типа. Для примера я выберу HTML.
— Изображение.
— HTML код.
— Facebook.
— Шорткоды.
Далее, на странице создания, укажите название окна. Добавьте содержание, с помощью визуального редактора. Настройки:
— Popup theme, можно выбрать стиль окна.
— Effect type, эффект при открытии.
— Effect duration, длительность эффекта.
— Popup opening delay, задержка при открытии.
— Responsive mode, сделать адаптивным.
— Custom mode, указать свои размеры.
— Initial, можно указать начальную ширину и высоту.
— Max, максимальная высота и ширина.
— 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, выбрать расположение окна.
Далее, на странице All Popups , где отображаются все созданные окна, вы можете скопировать шорткод окна и вставить его в любое место на сайте.
Можно добавлять окна с помощью кнопки, прямо из визуального редактора, на странице редактирования записи или страницы. Нажмите на кнопку Insert popup .
Далее, у вас откроется окно. Здесь можно выбрать название окна и тип открывания.
— Select Popup, выберите окно, которое будет открываться.
— Select Event, выберите тип открытия:
- On load, при открытии страницы.
- Click, при нажатии на кнопку или другой элемент.
- Hover, при наведении на объект.
— Нажмите на кнопку Insert .
Далее, у вас в содержании появится два шорткода. Между ними можно вставить любой элемент, если вы выбрали открытие при нажатии или наведении. Обновите или опубликуйте страницу.
Далее, на сайте будет отображаться кнопка. Нажмите на неё.
При нажатии на кнопку, у вас откроется всплывающее popup окно.
Всё готово! Вот так просто и быстро вы можете создать всплывающее popup окно для своего сайта.
Читайте также: