Два отличных плагина, чтобы сделать всплывающее окно в wordpress!

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

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

Читайте и смотрите видеоурок! Как сделать всплывающее окно в wordpress при помощи плагинов? И больше не спрашивайте!

Первый наш плагин делающий всплывающее окно в wordpress: Scroll Triggered Box

Что о нем можно сказать? Это хороший плагин. Прост в установке и настройке. Работа его стабильна и не влияет на скорость движка WordPress.

Установка Scroll Triggered Box

Входим во вкладку плагины в консоли, жмем добавить новый плагин, вставляем в поисковое поле его название "Scroll Triggered Box " и жмем «Enter». Все наш плагин нашелся! Далее жмем установить, активировать. То есть стандартная установка плагинов!

Настройка Scroll Triggered Box

• Theme: Выбора темы. Здесь четыре разноцветных темы. Подбираете какая вам понравиться и подходит по дизайну к вашему блогу.
• Testing: Ставите в этом чек боксе галочку и кроме Вас никто его не видит!
• Visible at: Настройка демонстраций всплывающего окна на страницах и в записях блога.
• Cookie lifetime: Настройка времени показа всплывающего окна на сайте.
• Show box at: Если поставите 50, то после прокрутки посетителем половины страницы окно всплывет. Если впишите «0», тогда окно будет показываться постоянно.
• Show box at element: Здесь пишите ключевое слово, которое будет сигнализировать о начале показа всплывающего окна. Например если пишите #comments , то окно всплывет на уровне комментариев и т. д.
• Include css: Отказ от CSS стилей установленных по умолчанию. Ниже можно установить свои стили, пройдя по ссылке.
• Box position: Этовыбор позиции всплывающего окна. Внизу, справа, слева, посередине. На ваше усмотрение.
• Box width: Изменениеширины всплывающего окна.
• Box html: Окно для вставки содержимого для всплывающего окна. Так же предусмотрена вставка HTML кода.
• Social buttons: Место для установки кнопок соцсетей.

Второй плагин WP-MK для установки всплывающего окна на WordPress

Плагин WP-MK на мой взгляд даже лучше, чем плагин Scroll Triggered Box , который мы рассмотрели выше. Он более функционален, его интерфейс настроек на русском языке в отличии от Scroll Triggered Box . Поэтому о настройках WP-MK вряд ли стоит подробно расписывать. Я думаю не составит труда посмотреть и разобраться вам самим.

Установка плагина WP-MK стандартная и затруднений не вызовет.

А вот найти его стандартным способом в поиске плагинов в консоли WordPress вам не удастся.

Вы можете скачать бесплатно плагин WP-MK вот по этой ссылке, которая расположена ниже.

Здравствуйте, друзья! Предлагаю поговорить о создании в WordPress модальных окон . Всплывающие (модальные) окна ощутимо расширяют возможности сайта. У вас есть сообщение или объявление, которое должен увидеть каждый посетитель вебресурса? Нужно сделать заметной проводимую акцию? Хотите сделать всплывающую форму регистрации на сайте или форму расшаривания контента в социальных сетях? Создайте модальное окно!

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

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

Алгоритм создания в WordPress модальных окон

В WordPress нет встроенных инструментов для работы со всплывающими окнами. Мы будем конструировать и настраивать их с помощью плагина Popup Maker . Давайте, например, создадим модальное окно с видео, всплывающее при клике по кнопке (позже можно будет настроить его автоматическое появление).

1. Установите плагин Popup Maker. Активируйте его. Напоминаю: устанавливать плагины мы учились .
   
2. Найдите в боковом меню слева админпанели раздел Popup Maker и перейдите в его подраздел Add Popup .
3. Открылся редактор модальных окон. Впишите название окна в поле вверху страницы (название будет отображаться только в админпанели – пользователи его не увидят).
4. Придумайте заголовок окна (будет виден пользователям) и впишите его в поле над кнопкой Добавить медиафайл .
5. В блоке Conditions выберите в выпадающем меню страницами (категории), на которых будет появляться окно. Если плагин должен работать на всех страницах сайта , выберите Формат:All .
6. Добавьте в большое поле под панелью инструментов текст, изображения, видео или аудио – любой контент, который будет показываться во всплывающем окне. В рассматриваемом примере я добавил код видео с YouTube (добавление видео на сайт WordPress мы изучали ).
   
7. В блоке Triggers находятся настройки ручного или автоматического открытия (самоактивации) всплывающего окна. В нашем примере я выбрал значение Click Open .
8. Укажите ниже размер всплывающего окна (в пикселах или процентах). При выборе варианта Auto плагин подберет размеры модального окна автоматически.
9. Отметьте чек-бокс в строке Отключить фон , чтобы за всплывающим окном была видна страница сайта (рекомендую).
10. Настройте тип и скорость анимации (не обязательно: по умолчанию уже выставлены оптимальные значения).
    
11. Настройте положение окна на экране. Изначально плагин позиционирует его по центру вверху.
12. Значение свойства z-index , установленное по умолчанию, обычно в изменении не нуждается.
    
13. Выберите варианты закрытия всплывающего окна. Отметьте «птичками» чек-боксы в строках Click Overlay to Close (окно закроется при клике на фон вокруг него), Press F4 to Close (окно закроется клавишей F4 ), Press ESC to Close (окно закроется клавишей ESC ). Чтобы не раздражать посетителей сайта головоломкой с закрытием модального окна, рекомендую отмечать все пункты.
    
14. Нажмите Опубликовать. Поздравляю, модальное окно создано!

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

Чтобы изменить дизайн созданного модального окна, перейдите в подраздел Theme раздела Popup Maker бокового меню админпанели (слева).

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

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

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

Каждому окну плагин Popup Make присваивает два уникальных CSS-класса . Если добавить к элементу вебстраницы любой из этих классов, то при клике по этому элементу откроется модальное окно.

Где и как сделать накрутку комментариев Instagram – все методы. Портал pricesmm.com выяснил, что дешевле и лучше: накрутить комментарии в Инстаграме самостоятельно, с программами, получить в обмен или заказать услугу на сервисе СММ. Плюсы и минусы каждого способа.

Примеры добавления CSS-кода модального окна в код ссылки, изображения и кнопки:

Модальное окно появится при клике по картинке

Модальное окно активируется после нажатия кнопки

Нажмите на HTML-элемент после после добавления к нему CSS-класса popmake-obrazets-modalnogo-okna . Должно появиться похожее модальное окно:

Появилось? Отлично! Теперь вы умеете настраивать всплывающие окна. Если окно не открылось, опишите проблему в комментариях – запустим его сообща!

В данной статье мы познакомим вас с плагином «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 в модальном окне. То есть при клике по ссылке «напишите нам» вместо перехода на соответствующую страницу пользователю должно открываться новое всплывающее окно, где и будет находится функция отправки сообщения. Это более интерактивное решение, хотя далеко не всем оно нравится. Я лично предпочитаю классическую реализацию со страницей контактов, однако формы на сайтах бывают разные — поэтому полезно будет рассмотреть решение данной задачи. В работе использовал 2 плагина: известный многим Contact Form 7 и модуль Easy Modal, чтобы сделать модальное окно в вордпресс.

Обновление 18.05.2017: Судя по последним отзывам в репозитории, в некоторых случаях могут наблюдаться проблемы с его работой. Если вас тоже это коснулось, попробуйте новое решение от разработчиков под названием Popup Maker . Еще в качестве альтернативы можно рассматривать .

Детально останавливаться на установке и настройке Contact Form 7 не буду, всю информацию о нем . В блоге также была статья про , что может пригодиться.

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

Загрузок более 10 тысяч, оценка 4.6. Допустимые версии 3.4 — 4.0.8, хотя я успешно запустил его на WP 4.3.1. Не смотря на то, что сейчас плагин трансформировался в новое решение Popup Maker, на сайте wordpress.org и при поиске плагинов внутри админки все еще можно найти обычный Easy Modal версии 2.0.17. На его примере я и расскажу про создание модального окна обратной связи в WordPress.

После установки появится одноименный раздел, где есть несколько пунктов. Нам понадобится самый первый из них — Modals . Кликаете там по кнопке Add New.

Это действие создаст новое модальное окно для вашего вордпресс сайта. В настройках элемента будет 4 закладки:

• General — общие параметры.
• Display Options — опции отображения.
• Close Options — настройки закрытия окна (с помощью клика или кнопки Esc).
• Examples — примеры кода для использования.

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

Тип загрузки Load Type имеет 2 варианта:

• Load Sitewide (для всего сайта).
• Per Page/Post (для конкретных постов и страниц).

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

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

Вторая закладка параметров модуля — Display Options (опции отображения) .

Здесь указываете:

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

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

Вставлять этот код нужно через виджет в сайдбаре или в текстовом редакторе. Он ничем не отличается о любого другого HTML кода, единственное, что здесь указан класс конкретного модального окна (eModal-1). Для, созданного вами, второго элемента класс будет eModal-2 и т.п. Дабы не совершить ошибку при вставке кода проще всего копировать его с данной страницы.

Редактирование темы оформления модального окна

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

В данном инструменте 6 закладок:

• General — указываете название темы;
• Overlay — фон (тут можно выбрать цвет и прозрачность подложки формы);
• Container — разные настройки самого модального окна (отступы, рамка, тень);
• Title — параметры заголовка всплывающего окна (шрифт, тень);
• Content — шрифт и цвет текстов в блоке;
• Close — элемент закрытия формы (текст и оформление).

Как видите, внешний вид можно настраивать как угодно под ваши нужды. У меня получилось вот такая простенькая WordPress форма в модальном окне:

После установки всех настроек на забудьте их сохранить (кликаете по кнопке Save).

Видео добавления Contact Form 7 во всплывающем окне Easy Modal

Кстати, нашел видео по работе с плагином Easy Modal, демонстрирующее процесс создания в вордпресс модального окна обратной связи. Там интерфейс модуля слегка устаревший (некоторые настройки выглядят по другому), но общую суть получается уловить. Возможно, кому-то будет проще разобраться в данном вопросе с помощью видео.

Итого про модальные окна для wordpress

Как уже говорилось выше, сейчас плагин Easy Modal (судя по официальной странице) преобразовали в Popup Maker. В репозитории удалось найти одноименный модуль, но его я не тестировал. Рассказываю вам об этом дабы знали что искать, если вдруг Easy Modal в WordPress последующих версий перестанет работать.

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

Что же касается задачи открытия формы обратной связи Contact Form 7 во всплывающем окне, то тут хватает базовых возможностей Easy Modal. Причем данное решение может использоваться и для вывода других модальных окон в вордпресс — полезных подсказок, дополнительной информации и т.п. Учитывая наличие редактора вставки HTML кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.