В данной статье мы познакомим вас с плагином «WP-MK», позволяющий создать выплывающее окно на своём сайте WordPress.
«WP-MK» достаточно прост в применении и так же, как и такой плагин как вызывать особого раздражения не будет у посетителей блога. Поскольку появляется данное всплывающее окно лишь после прокрутки страницы сайта до низа (можно настроить) и будет исчезать если посетитель пролистывает , также имеется кнопка для закрытия такого всплывающего окна. Окно, которое отображает плагин «WP-MK», направлено может быть для того, чтобы решить самые разные задачи.
Настройка плагина «WP-MK»
Для того, чтобы настроить плагин «WP-MK» необходимо перейти в раздел «Параметры» в административной панели WordPress, дальше пункт «Всплывающее окно» и таким образом попадаем в настройку плагина.
Страница настроек данного плагина имеет интерфейс на русском языке, и детальные пояснения к каждому пункту данного плагина давать нет никакого смысла, я считаю и так все ясно.
Клик для увеличения
Один пункт, который необходимо отметить — «Содержимое». В это поле можно вставить нужный html-код, к примеру, на своём блоге в данном всплывающем окне отображается на анонсы свежих статей посредством сервиса feedburner, так же возможна размещение кода формы от сервиса Smartresponder, ну, в общем, что отображать в этом окне решать только вам. Не нужно забывать после внесения, каких-либо модификаций в настройках данного плагина нажать на «сохранить» внизу страницы.
Вот данное и все настройки, которые имеет плагин «WP-MK», все достаточно просто. Надеюсь, что «WP-MK» заинтересует вас и окажется для вас достаточно полезным.
С уважением, Андрей Юрийчук
Сегодня я планирую рассказать про один плагин, который является весьма полезным для работы с сайтом на wordpress. Это плагин переведен примерно, на 75%, но этого вполне достаточно для того, чтобы начать им пользоваться.
Прежде чем, рассказывать как им пользоваться хочу сказать несколько слов о том, кому он может пригодится:
- У вас информационный бизнес и вы собираете подписчиков на свой сайт – всплывающее окно wordpress – это плагин для вас.
- У вас интернет магазин или каталог товаров – этот плагин так же подойдет для вас, чтобы с его помощью уведомлять пользователей и посетителей вашего сайта о новинках, которые у вас появились.
Откровенно сказать, плагин можно использовать для разных вещей.
Версия, которую я выложу внизу этой страницы – бесплатная. Есть так же платная версия плагина. Покупать ее или не покупать – решать только вам.
Всплывающее окно wordpress – плагин на русском языке.
После того, как вы установили и активировали плагин у себя на сайте. Перед вам появится вот такое окно:
Практически весь плагин переведен на русский язык и у вас не должно возникнуть с ним каких-то сложностей. Но, разработчики плагина – всплывающее окно wordpress, учли этот момент и поэтому подготовили инструкцию на русском языке, как пользоваться этим славным плагином:
В принципе статью на этом можно было бы закончить, но тем не менее, я решил пройтись по нему от А до Я.
После того, как мы посмотрели раздел “Обзор”, рекомендую перейти в пункт “Настройки”:
Рядом с каждым пунктом располагается иконка со знаком вопроса – при наведении на нее всплывает окно с подсказкой, для чего нужен тот или иной пункт. Вы, разумеется, читаете подсказки и выставляете галочки либо нет.
Естественно, после того, как Вы внесли какие-то изменения обязательно нужно нажать кнопку “Сохранить”, которая находится над меню.
Следующий раздел всплывающего окна для wordpress – это “Показать все PopUP”:
На момент тестирования PopUp – у меня не было ни одного из них, поэтому здесь ни чего не отображается, думаю,если вы будите им часто пользоваться у вас может образоваться несколько всплывающих окон wordpress.
И, наконец, самое интересное окно – “Добавить новый PopUp”:
Вам предложат выбрать тот или иной шаблон вашего будущего всплывающего окна wordress и выбрать его название – используйте английский язык, например, “primer”. Перед вам откроется специальное окно, в котором вы сможете создать ваш PopUp.
Всплывающее окно wordpress – главные настройки.
В этом разделе располагаются главные настройки вашего плагина. Все они переведены на русский и около каждого располагается подсказка, для чего нужна та или иная настройка. Некоторые из них помечены значком “Pro ” – это означает, что настойка будет доступна только после того, как вы приобретете платную версию всплывающего окна wordpress.
Следующий раздел:
Дизайн всплывающего окна wordpress.
Про этот раздел стоит поговорить отдельно, так как он содержит дополнительные очень полезные подразделы. Не забывайте и о том, что после того, как вы вносите какие-то изменения, нужно в обязательном порядке нажимать кнопку – “Сохранить” – иначе изменения не сохраняться и вам придется все настраивать заново.
Здесь находятся специальные подразделы:
- Внешний вид – здесь вы можете выбрать например что будет фоном у вашего всплывающего окна wordpress – это может быть определенный цвет или изображение – какая-то картинка, к примеру.
- Расположение PopUp – здесь вам предлагается выбрать, где будет располагаться всплывающее окно wordpress – к сожалению, данная функция доступна только в платной версии плагина.
- Тексты – в данной надстройке вы, собственно, пишите текст, который увидит человек, когда посетит ваш сайт.
- Анимация открытия PopUp – здесь вы можете задать анимацию того, как ваш всплывающее окно wordpress будет появляться на мониторе у пользователя.
Подписчики всплывающего окна wordpress.
В этом окне вам будет предложено внести дополнительные настройки, которые позволяют включить подписку на вашем сайте, после того, как пользователь указал свое имя и email:
Логин/Регистрация всплывающего окна wordpress.
Даная настройка, к сожалению, является платной функций. Если вы считаете, что вам она необходима – рекомендую приобрести плагин:
А/Б тестирования всплывающего окна wordpress.
И в этом случае данный раздел является платным:
Статистика всплывающего окна wordpress.
На момент того, как я тестировал плагин и у меня не отображались показатели статистики, но на момент того, как я пишу эту статью плагин зафиксировал 3 показа окна.
CSS/HTML-код всплывающего окна wordpress.
В большинстве своем данный пункт редко кем используется. Проводить в нем изменения вы можете, если знаете языки CSS и HTML – в противном случае, я бы не рекомендовал вносить корректировки в код:
Я не стал “выпендриваться” и сделал стандартное всплывающее окно wordpress, вот как оно выглядит:
Надеюсь статья вам понравилась и вы захотите воспользоваться данным плагином для создания PopUP.
P.S. Во все необязательно покупать платную версию плагина, функционала бесплатной версии вполне себе достаточно.
Недавно для одного сайта меня попросили сделать форму обратной связи для 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 кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.
Привет всем!
Popup plugin WordPress – layered Popups
Итак, после того, как вы скачаете его по ссылке в конце поста и установите на свой блог или сайт wordpress, что вы получите?
У вас будет возможность:
создавать всплывающее окно;
воспользоваться предустановленным шаблоном popup;
создать собственное popup окно.
Откровенно сказать, на перевод этого popup plugin я потратил в совокупности около недели и постарался сделать это хорошо. Надеюсь вам будет в радость им пользоваться.
Настройки popup plugin
В основных настройках всё на русском языке, как говорил выше. Ни чего сложного в нём для вас не будет. Выбираете параметры, тестируете их и выбираете оптимальный вариант.
При создании нового popup, вам будет доступен ряд функций, через которые вы сможете внести необходимые настройки в ваше всплывающее окно wordpress, тем самым, ни кто не останавливает вас в креативе.
Если вы видите текст типа: “enter you message..” – не волнуйтесь, можно поставить на его место любой другой текст и на каком хотите языке.
Вкладка рассылка popup plugin
Здесь о Вас так же уже позаботились, но вы можете вводить свой собственный текст, какой пожелаете нужным.
Раздел Интеграции popup plugin wordpress
Лично для меня он не представляет особого интереса, но возможно кто-то пользуется сторонними сервисами для отправки email.
Всплывающие окна – A/B кампании
Здесь вы можете создавать компании и отслеживать какое из popup наиболее эффективно.
Если вы видите, что какие-то формы заблокированы, не пугайтесь, вы можете их легко разблокировать, но в другом разделе.
Скажу сразу – этот раздел я особо не тестировал.
Если вы нажмете на кнопку “create” вам откроются дополнительные настройки, которые вы сможете отрегулировать под свои потребности.
Журнал я такк же не тестировал, поэтому лишь упомяну о нем и не более того..
В Popup plugin WordPress – layered Popups есть функция, которая позволяет вам скачать и установить дополнительные popup, но вот беда, без кода покупки она бесполезна..
Есть так же раздел с дополнениями, но, к сожалению они так же за деньги..
В раздел настройки, я бы заглянул обязательно и первым делом. Откровенно сказать, чтобы выставить все необходимые параметры.
Есть также раздел ЧЗВ – “Часто задаваемые вопросы”, но он к плагину ни какого отношения не имеет и перебрасывает пользователя на страницу с ответами на английском языке, так что перевести его не получится.
А теперь я бы хотел привести несколько примеров того, какое всплывающее окно wordpress вы можете сделать, используя даже встроенные в плагин примеры popup:
Часто ли Вы замечали на сайтах всплывающие окна? Так, большинство интернет-ресурсов, особенно новостные и блоговые сайты, показывают посетителям всплывающие или попап-окна с той или иной информацией. Зачем они нужны вообще? Обычно их наличие помогает конвертировать посетителей в подписчиков (т.е. в постоянных пользователей). По данным интернет-маркетологов, наибольший процент конверсии приходится именно на всплывающие окна, если, конечно, они настроены правильно. Конечно, если такие окна будут “вылетать” час за часом перед глазами посетителя, то понятно, что он уйдет из такого сайта и не захочет больше возвращаться.
Как настроить всплывающие окна в WordPress?
“Движок”, по умолчанию, не предоставляет возможности создания и настройки всплывающих окон. Поэтому воспользуемся сторонним решением – бесплатным плагином Popup Maker .
Плагин Popup Maker
Итак, после установки и активации плагина, сразу видим окно приветствия. Для начала работы нажимаем кнопку Skip .
В итоге Вы попадаете в основное окно создания всплывающих окон.
Для создания попап-окна необходимо нажать кнопку Добавить Всплывающее окно , после чего Вы попадете на страницу создания всплывающего окна.
Тут нужно будет ввести следующие данные. В первых двух полях для ввода вводим название и заголовок нашего окна. Отметим, что в названии можно ввести произвольный текст, так как он нигде показываться не будет выводится.
Блок Условия подразумевает настройку места показа всплывающего окна. Как видим, тут довольно большой выбор параметров, позволяющих гибко настроить показ (на всех страницах сайта, только на главной, в рубриках и пр.) Кроме того, есть возможность отключать показ попап-окна на мобильных и планшетных устройствах (настройки Отключать этот Popup на мобильных устройствах и Отключите это всплывающее окно на планшетных устройствах соответственно).
В блоке настроек Настройка темы Вы можете выбрать одну из предлагаемых плагином тем визуального оформления окна.
Блок Показать настройки позволяет задать размеры попап-окна.
Настройка Отключить фон позволяет отображать или скрывать фон под всплывающим окном.
Блок Анимация позволяет задать Вашему окну скорость, а также эффекты анимации (затухание, увеличение и др.)
В блоке Позиция Вы можете выбрать место на экране, где будет показываться Ваше попап-окно.
Итак, после того, как все настройки были внесены, следует нажать кнопку Опубликовать .
Наше всплывающее окно создано, и теперь можно смотреть на сайте.
