Главная » Бизнес в Интернете

Попап или всплывающее окно на блоге

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

Спорный вопрос — стоит ли использовать окно popup на сайте или блоге? Все зависит от того, для чего Вы блог используете. Если для Вас главное — популярность и посещаемость, то наверно, не стоит. Если Вы используете сайт как воронку для привлечения подписчиков в Ваш подписной лист, то для Вас выпадающее окно станет весьма полезным инструментом.

Вы сегодня узнаете, как сделать всплывающее окно на блоге WordPress. Для того, чтобы поставить такое окно, Вам понадобится скачать плагин popup:

Данный архив содержит две папки: папка darkwingpopup — собственно, сам плагин, и папка всплывающего окна darkwing_templates, в которой находятся образцы выпадающих окон разных цветов.

Распакуйте архив, и положите эти две папки в папку плагинов Вашего блога, которую Вы найдете на своем хостинге по адресу:

Ваш домен — wp-content — pluginsустановить плагин на wordpress

Положить плагин в эту папку можно самыми разными способами, например, с помощью консоли блога, выбрав Плагины — Добавить новый.

А можно использовать для этого программу Total Commander. С помощью этой программы Вы сможете переносить на хостинг любые файлы и папки, не заходя непосредственно на сам хостинг.

плагин popup

После того, как Вы перенесете эти две папки, заходите в консоль, и активизируете плагин.

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

Например, если Вы выбрали синий цвет, то это будет адрес:

http://ваш домен/wp-content/plugins/darkwing_templates/blue/index.html

В графе Как показывать название окошка «классический вид» означает, что окно выпадет через какое-то время после захода посетителя на сайт. Время задается Вами. Если Вы выберете Exit-попап, то окно появится, когда посетитель потянется мышкой закрыть в браузере закладку с блогом.

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

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


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

Дальнейшие действия проделываете у себя на компьютере. Открываете файл index.html всплывающего окна в любом html-редакторе, или даже в блокноте. Этот файл находится по адресу: папка darkwing_templates — папка с окном того цвета, который Вы используете — index.html. Прежде всего, если у Вас кодировка не utf-8, меняете кодировку файла выпадающего окна на utf-8.

И последнее, что нужно сделать — это поставить данные Вашей рассылки в форму подписки на рассылку: чтобы посетители становились именно Вашими подписчиками.

Я использую для своих рассылок Smartresponder, и потому буду показывать, как это делать, на примере этого сервиса. На сервисе Smartresponder заходите в Генератор форм и выбираете свою рассылку. Потом проделываете следующие действия:

1. В коде формы берете фрагмент от начала до закрывающего тэга </script> и ставите его вместо соответствующего фрагмента в файле index.html Вашего окна.

форма рассылки

2. Берете четыре тэга input, которые находятся после тэга form и также меняете соответствующий фрагмент в файле index.html

форма рассылки

3. Берете еще один тэг input, и тоже его меняете в index.html

форма рассылки

После этого форма подписки окна будет подписывать именно на Вашу рассылку, а не на чью-либо другую.

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

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


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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Вам понравилась статья? Поделитесь, буду весьма признателен:


Также приглашаю добавиться в друзья в социальных сетях:

<< Предыдущая статья Следующая статья >>
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

8 комментариев »

  • Татьяна Мильчевская пишет:

    Отличная статья. Всё разложено по полочкам. Любой может установить «чёрный плащ» себе на блог и увеличить трафик. Рекомендую всем.

  • Ирина пишет:

    Профессионально! Поздравляю. Обязательно воспользуюсь.

    Удачи!

  • Ольга пишет:

    Замечательный урок по установке всплывающего окна! Спасибо

  • Татьяна пишет:

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

  • Александр пишет:

    Добрый день!

    У меня не работает. Причем и на Denwere, и на хостинге. Не могу понять, в чем дело. Все настройки перепробовал. Даже намека на окно нет ))

    В чем может быть проблема?

    Заранее спасибо!

  • Александр Ризун (автор) пишет:

    Добрый день! Александр, скорее всего, тема Вашего блога не поддерживает этот тип попапа. В таком случае, нужно искать другой.

  • Светлана Задорина пишет:

    У меня такой вопрос по поводу подписной формы. Можно ли вставить другую форму, не от смартреспондера или это работает только со смартом?

  • Александр пишет:

    Поставил ,все работает,большое спасибо

Оставьте свой комментарий и ответный визит Вам обеспечен