Здравствуйте, уважаемые читатели блога сайт. Замечаете на некоторых сайтах всплывающие окна? Возникали вопросы, как они делаются и для чего они вообще нужны? У меня да.
Так вот друзья, сегодня я расскажу вам именно о них. Но! Давайте сначала узнаем, зачем они нам вообще? Что с них можно получить и какой будет результат? Отвечаю.
Через такие всплывающие окна, эффект отдачи очень велик. Говорят, иногда бывает такое, что число подписчиков увеличивается в 4 раза. Круто! Не правда ли? Использование всплывающих окон (попандеров) — очень эффективный способ привлечь огромное число посетителей. Обычно их используют для:
- новостной рассылки;
- пиара платных обучающих курсов;
- раскрутки групп в соц. сетях;
Должен напомнить, что иногда такая всплывающая реклама может принести вред сайту. Это связано с тем, что неких пользователей она очень сильно раздражает. Да что здесь говорить, я тоже очень сильно злюсь на такие способы привлечения внимания. В ответ всему этому на сайте увеличиваются 100% отказы, что вредят .
Но! Все эти проблемы, можно обойти, если всплывающее окно настроить правильно.
Итак, давайте лучше вернемся к нашему главному вопросу.
Всплывающие окна на WordPress
1. WP-MK
Крутой плагин, на который я наткнулся случайно. Простота в настройке, русскоязычный интерфейс и целый набор инструментов. Он отлично подойдет для:
- Рекламы (например, Google Adsense);
- Пиара своих групп в соц. сетях;
- Простой формы подписки.
Скачать плагин можно по . Потом устанавливаем его и активируем обычным способом. Переходим слева в настройки
? всплывающее окошко
и видим следующее:
На мой взгляд, здесь все просто, не вижу смысла разбирать все по отдельности. Возникнут вопросы, можете задать их в комментариях.
2. Ninja Popups.
Если вы хотите, чтобы пользователи, заходя на ваш сайт, увидев всплывающее окно, кричали «Ухты», установите себе этот мега крутой плагин. Ninja Popups — монстр всплывающих окон на . Если сравнивать с WP-MK, то он сильно обходит его по функционалу. Я заметил, что Ninja Popups пользуются мастера своего дела. Почему? Плагин платный и не все могут позволить его себе. От себя могу сказать, что цены у них приемлемы, много не просят. Подробно о стоимости, можно узнать здесь
.
Ну, давайте узнаем, что именно мы получим от этого плагина:
- простота в настройках;
- более 100 готовых шаблонов для подписки и других видов рекламы (конкурсы, акции, обучающие курсы и т.п.);
- статистика;
- мобильную версию всплывающего окна;
- расширенная настройка времени показов;
- и много другое.
Если хотите узнать обо всех преимуществах плагина, перейдите по этой
ссылке.
Как настроить плагин под себя?
Я предлагаю следующее… Вместо настырного текста, лучше посмотреть обучающее видео:
Вот и все друзья, что касается настроек. Но все же, если возникнут вопросы, задайте их в комментариях.
3. Popup Maker (модальное окно)
Плагин, который имеет функцию создания модального всплывающего окна. В нашем случае, всплывающие окна будут отображаться при нажатии на:
- ссылку;
- кнопку;
- картинку.
Итак, как его настроить?
1. Скачиваем
плагин;
2. Устанавливаем и активируем;
3. Слева в меню ищем: Pupup Maker -> Добавить новое.
4. Перед нами покажется страница, такого вида:
Ничего не напоминает? Страница вплоть аналогична форме публикаций статей на WordPress. Как видите, здесь добавились некие дополнительные функции (настройки).
Давайте разберем их более подробно.
Всплывающее окно (название)
— нигде отображаться не будет, здесь мы даем название своему попандеру в плагине.
Укажите здесь заголовок окна
— пишем название (например: подписка на новости).
Условия таргетинга
— отмечаем галочкой, где будет отображаться наше окно.
Настройки темы
— пока здесь нет вариантов. Выбираем по умолчанию. Друзья, в дальнейшем вы можете создать свой шаблон для оформления модального окна. Кстати, функция очень крутая. Найти ее можно: Pupup Maker -> Все темы
.
Код
— что будет отображаться в окне. В нашем случае видео с YouTube:
Внизу, нас ждут и другие настройки (размер окна, прозрачность, время показа и т.д.). Ничего сложного там нету. Надеюсь, справитесь. Если у вас будут возникать вопросы — смело задавайте их в комментариях.
После того как все настройки сделаны, нам остается только опубликовать всплывающее окно.
Но это друзья еще не все. Переходим в раздел Pupup Maker -> Все всплывающие окна
. Ищем CSS Classes. Нас интересует код, такого вида: popmake-xxx.
Этот код нам нужен для, отображения окна при нажатии по ссылке, картинке или кнопке (говорил вначале).
Открытие окна при нажатии на картинку:
Открытие при нажатии на кнопку:
< button class = «popmake-xxx» >Открыть окно
Такой код можно вставлять где угодно (например, в статье или виджете). Разницы нет. Если будут возникать проблемы или вопросы — задавайте в комментариях, буду рад помочь.
На этой веселей ноте, список плагинов для всплывающих окон на WordPress заканчивается. Надеюсь, с этих трёх вы найдете свой, который придется вам по душе. Спасибо, что были со мной до конца.
На обновления, участвуйте в . До скорой встречи. Всем пока!
С уважением, Могиш Иван
В данной статье мы познакомим вас с плагином «WP-MK», позволяющий создать выплывающее окно на своём сайте WordPress.
«WP-MK» достаточно прост в применении и так же, как и такой плагин как вызывать особого раздражения не будет у посетителей блога. Поскольку появляется данное всплывающее окно лишь после прокрутки страницы сайта до низа (можно настроить) и будет исчезать если посетитель пролистывает , также имеется кнопка для закрытия такого всплывающего окна. Окно, которое отображает плагин «WP-MK», направлено может быть для того, чтобы решить самые разные задачи.
Настройка плагина «WP-MK»
Для того, чтобы настроить плагин «WP-MK» необходимо перейти в раздел «Параметры» в административной панели WordPress, дальше пункт «Всплывающее окно» и таким образом попадаем в настройку плагина.
Страница настроек данного плагина имеет интерфейс на русском языке, и детальные пояснения к каждому пункту данного плагина давать нет никакого смысла, я считаю и так все ясно.
Клик для увеличения
Один пункт, который необходимо отметить — «Содержимое». В это поле можно вставить нужный html-код, к примеру, на своём блоге в данном всплывающем окне отображается на анонсы свежих статей посредством сервиса feedburner, так же возможна размещение кода формы от сервиса Smartresponder, ну, в общем, что отображать в этом окне решать только вам. Не нужно забывать после внесения, каких-либо модификаций в настройках данного плагина нажать на «сохранить» внизу страницы.
Вот данное и все настройки, которые имеет плагин «WP-MK», все достаточно просто. Надеюсь, что «WP-MK» заинтересует вас и окажется для вас достаточно полезным.
С уважением, Андрей Юрийчук
Приветствую всех. Попался мне в очередной раз popup plugin, который будет полезен не только для инфо бизнеса, но, думаю, заинтересует и блоггеров, которые занимаются развитием своих сайтов. У меня была уже статья на блоге, в которой я рассказывал про popup plugin для wordpress. Ознакомится с ней можно по этой ссылке: “ “. Не сказал бы что предыдущий плагин хуже или лучше того, что будем сегодня рассматривать. Они несколько отличаются друг от друга.
Прежде чем, перейдем к рассмотрению самого плагина, хочу напомнить о том, что с прошлой недели на официальном канале
публикуются только плагины без русификации. Русифицированные плагины и темы отправляются на закрытый канал. Прошу учитывать этот момент.
Итак, приступим.
Popup plugin для wordpress – настройки и возможности.
Ни чего особо интересного в нём нет. Разработчики доносят до вас информацию о том, какие возможности вам предоставляет данное решение.
Для пользователей предусмотрено три варианта использования popup plugin для wordpress. Можете использовать что-то одно, можете хоть все три решения – ограничений нет:
- Modal Popup
– создайте красивое и интерактивное pop-up окно, чтобы привлечь внимание посетителей. - Info Bar
– создайте красивую и интерактивную информационную панель, чтобы привлечь внимание посетителей. - Slide In Popup
– создайте красивый и интерактивный слайд во всплывающем окне, чтобы привлечь внимание посетителей.
Настройки самого плагина не представляют особых сложностей, во всяком случае в русифицированной версии (постарался перевести все подсказки на русский язык).
В принципе с этими настройками ни чего сложного возникнуть не должно. Если что-то не понятно пишите в комментариях к посту свои вопросы.
Как видите на скриншоте ниже у меня показано огромное количество различных типов пользователей. Не волнуйтесь, если у вас такого не будет. Всё зависит от темы, которая у вас установлена в данный момент времени.
Данный popup plugin позволяет не только создавать симпатичные окна для сбора подписчиков на ваш сайт, в нём так же заложена функция аналитики, то есть собирая данные о пользователях, вы будите лучше понимать какой из ваших продуктов им интересен больше.
Разработчики плагина позаботились о своих пользователях и разработали несколько вариантов, условно, примеров pop-up окон.
Например, вы выбрали какое-то из них и решили с ним поработать, так чтобы максимально эффективно настроить под свой сайт.
Отправляемся в раздел “Подключения” и создаем свою первую компанию:
Для вас уже созданы заготовки. Можете посмотреть как они будут выглядеть у вас на сайте, нажав предпросмотр. Я взял несколько примеров, чтобы показать, как что будет выглядеть:
Например, вот такой-вот вариант, если вы предоставляете какой-то информационный контент, скажем, на бесплатной основе:
Или предложите посетителю сайта подписаться на рассылку писем с вашего сайта, как вариант:
Кто-то, возможно, захочет использовать своеобразный “Социальный замок” на ресурсе. Почему бы и нет.
Как вариант, использовать видео для сбора подписной базы. Ну а что – кролик вполне себе симпатичный, а вы можете поставить, к примеру, видео со своего вебинара.
На скриншоте ниже показано как выглядит панель настройки в popup plugin для wordpress. Думаю, что ни чего сложного вам в ней не покажется. Во всяком случае, я слегка поразвлекся и сделал парочку всплывающих окон, чтобы посмотреть как все работает.
Правда, в плагине есть и минусы. Например, в нём отсутствуют отечественные социальные сети, но присутствует масса зарубежных или тот же самый Linkdin. В общем и целом отсутствие Вконтакте и Одноклассников меня не порадовало.
Ну и вот такой вот всплывающий баннер я сделал минуты за 3 сильно не напрягаясь, а больше развлекаясь:
Здравствуйте, друзья! Предлагаю поговорить о создании в WordPress модальных окон
. Всплывающие (модальные) окна ощутимо расширяют возможности сайта. У вас есть сообщение или объявление, которое должен увидеть каждый посетитель вебресурса? Нужно сделать заметной проводимую акцию? Хотите сделать всплывающую форму регистрации на сайте или форму расшаривания контента в социальных сетях? Создайте модальное окно!
Всплывающие модальные окна предназначены для привлечения внимания. Появляясь на странице, они блокируют основной контент и заставляют пользователя ознакомиться со своим содержимым (текстом, видео, призывом к действию и т.п.).
Внимание!
Пусть вас не пугает длина этого урока – сложностей в создании модальных окон нет (читайте, и убедитесь сами), просто я подробно описываю каждый шаг.
Алгоритм создания в WordPress модальных окон
В WordPress нет встроенных инструментов для работы со всплывающими окнами. Мы будем конструировать и настраивать их с помощью плагина Popup Maker
. Давайте, например, создадим модальное окно с видео, всплывающее при клике по кнопке
(позже можно будет настроить его автоматическое
появление).
- Установите
плагин Popup Maker. Активируйте
его. Напоминаю: устанавливать плагины мы учились .
- Найдите в боковом меню слева админпанели раздел Popup Maker
и перейдите в его подраздел Add Popup
.
- Открылся редактор модальных окон. Впишите название окна в поле вверху страницы (название будет отображаться только в админпанели – пользователи его не увидят).
- Придумайте заголовок окна
(будет виден пользователям) и впишите его в поле над кнопкой Добавить медиафайл
. - В блоке Conditions
выберите в выпадающем меню страницами (категории), на которых будет появляться окно. Если плагин должен работать на всех страницах сайта
, выберите Формат:All
. - Добавьте в большое поле под панелью инструментов текст, изображения, видео или аудио
– любой контент, который будет показываться во всплывающем окне. В рассматриваемом примере я добавил код видео с YouTube (добавление видео на сайт WordPress мы изучали ).
- В блоке Triggers
находятся настройки ручного или автоматического открытия (самоактивации) всплывающего окна. В нашем примере я выбрал значение Click Open
. - Укажите ниже размер всплывающего окна
(в пикселах или процентах). При выборе варианта Auto
плагин подберет размеры модального окна автоматически. - Отметьте чек-бокс в строке Отключить фон
, чтобы за всплывающим окном была видна страница сайта (рекомендую). - Настройте тип и скорость анимации
(не обязательно: по умолчанию уже выставлены оптимальные значения).
- Настройте положение окна на экране. Изначально плагин позиционирует его по центру вверху.
- Значение свойства z-index
, установленное по умолчанию, обычно в изменении не нуждается.
- Выберите варианты закрытия всплывающего окна. Отметьте «птичками» чек-боксы в строках Click Overlay to Close
(окно закроется при клике на фон вокруг него), Press F4 to Close
(окно закроется клавишей F4
), Press ESC to Close
(окно закроется клавишей ESC
). Чтобы не раздражать посетителей сайта головоломкой с закрытием модального окна, рекомендую отмечать все пункты.
- Нажмите Опубликовать.
Поздравляю, модальное окно создано!
О настройке дизайна всплывающего окна
Чтобы изменить дизайн созданного модального окна, перейдите в подраздел Theme
раздела Popup Maker
бокового меню админпанели (слева).
В открывшемся редакторе настройте нужный фон окна, цвет
и размеры шрифтов, отступы, тени
, название кнопки
закрытия. На вкус и цвет…– сами знаете, поэтому подробно останавливаться на настройке дизайна всплывающего окна не буду. Появятся вопросы – задайте их в комментариях.
Как настроить открытие всплывающего окна
Помните, мы не задействовали в настройках плагина функцию автоматического открытия модального окна? Поэтому нужно придумать, каким образом наше окно будет открываться. Давайте настроим «всплытие» окна при клике по ссылке, картинке или кнопке.
Каждому окну плагин Popup Make присваивает два уникальных CSS-класса
. Если добавить к элементу вебстраницы любой из этих классов, то при клике по этому элементу откроется модальное окно.
Где и как сделать накрутку комментариев Instagram – все методы. Портал pricesmm.com выяснил, что дешевле и лучше: накрутить комментарии в Инстаграме самостоятельно, с программами, получить в обмен или заказать услугу на сервисе СММ. Плюсы и минусы каждого способа.
Примеры добавления CSS-кода модального окна в код ссылки, изображения и кнопки:
<
a
href
=
«#»
class
=
>
Открытьмодальноеокно<
/
a
>
Модальное окно появится при клике по картинке
<
img
src
=
«popup-primer.jpg»
class
=
«popmake-obrazets-modalnogo-okna»
/
>
Модальное окно активируется после нажатия кнопки
<
button
class
=
«popmake-obrazets-modalnogo-okna»
>
Открытьмодальноеокно<
/
button
>
Нажмите на HTML-элемент после после добавления к нему CSS-класса popmake-obrazets-modalnogo-okna
. Должно появиться похожее модальное окно:
Появилось? Отлично! Теперь вы умеете настраивать всплывающие окна. Если окно не открылось, опишите проблему в комментариях – запустим его сообща!
Часто ли Вы замечали на сайтах всплывающие окна? Так, большинство интернет-ресурсов, особенно новостные и блоговые сайты, показывают посетителям всплывающие или попап-окна с той или иной информацией. Зачем они нужны вообще? Обычно их наличие помогает конвертировать посетителей в подписчиков (т.е. в постоянных пользователей). По данным интернет-маркетологов, наибольший процент конверсии приходится именно на всплывающие окна, если, конечно, они настроены правильно. Конечно, если такие окна будут “вылетать” час за часом перед глазами посетителя, то понятно, что он уйдет из такого сайта и не захочет больше возвращаться.
Как настроить всплывающие окна в WordPress?
“Движок”, по умолчанию, не предоставляет возможности создания и настройки всплывающих окон. Поэтому воспользуемся сторонним решением – бесплатным плагином Popup Maker
.
Плагин Popup Maker
Итак, после установки и активации плагина, сразу видим окно приветствия. Для начала работы нажимаем кнопку Skip
.
В итоге Вы попадаете в основное окно создания всплывающих окон.
Для создания попап-окна необходимо нажать кнопку Добавить Всплывающее окно
, после чего Вы попадете на страницу создания всплывающего окна.
Тут нужно будет ввести следующие данные. В первых двух полях для ввода вводим название и заголовок нашего окна. Отметим, что в названии можно ввести произвольный текст, так как он нигде показываться не будет выводится.
Блок Условия
подразумевает настройку места показа всплывающего окна. Как видим, тут довольно большой выбор параметров, позволяющих гибко настроить показ (на всех страницах сайта, только на главной, в рубриках и пр.) Кроме того, есть возможность отключать показ попап-окна на мобильных и планшетных устройствах (настройки Отключать этот Popup на мобильных устройствах
и Отключите это всплывающее окно на планшетных устройствах
соответственно).
В блоке настроек Настройка темы
Вы можете выбрать одну из предлагаемых плагином тем визуального оформления окна.
Блок Показать настройки
позволяет задать размеры попап-окна.
Настройка Отключить фон
позволяет отображать или скрывать фон под всплывающим окном.
Блок Анимация
позволяет задать Вашему окну скорость, а также эффекты анимации (затухание, увеличение и др.)
В блоке Позиция
Вы можете выбрать место на экране, где будет показываться Ваше попап-окно.
Итак, после того, как все настройки были внесены, следует нажать кнопку Опубликовать
.
Наше всплывающее окно создано, и теперь можно смотреть на сайте.
