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

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

popup скриптВы уже знаете, что такое popup - это так называемое всплывающее окно на сайте, которое выпадает сверху, или выезжает откуда-то сбоку. Как же разместить такое выпадающее окно на нашем сайте? Прежде чем рассмотреть этот вопрос, давайте разберемся, зачем нам эти popup, или всплывающие окна, на сайтах нужны?

Дело в том, что если на блогах еще стоит подумать, ставить попап, или нет, то на одностраничных сайтах-воронках даже и задумываться нечего — ставьте. Конечно, Вы можете потом проверить, насколько увеличилась конверсия после установки выпадающего окна на сайте, но многочисленные исследования сходятся в одном: всплывающее окно, как правило, конверсию сайта увеличивает. На всякий случай напомню, что такое конверсия — это процент посетителей, которые выполнили действие, для которого Ваша страничка была предназначена. Например, подписались на рассылку, или купили товар.

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

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

Так что сейчас мы будем ставить всплывающее окно на сайт.

Для начала скачайте себе на компьютер папку с архивом всплывающего окна для сайта:

Затем распакуйте архив и проделайте следующие действия:

popup скрипт

1. Положите папку splash_wind в папку с Вашим одностраничником.

2. Откройте файл readme.txt. Этот файл лежит в папке, которую Вы разархивировали.

popup скриптЗатем откройте index.html Вашего сайта и поместите туда код из файла readme.txt,  сразу после тэгов <title>...</title>.

3. После этого в папке Вашего сайта откройте: splash_wind — s_dialog — modal.js, и в этом файле измените код. Нас интересует строчка 19.

modal_wnd_path = 'splash_wind/s_dialog/templates/blue/index.html';popup скрипт

В этой строке, если Вам не нравится синий цвет окна, можете выбрать другой: измените слово blue на другое: green, grey, pink, purple, red или teal.

Образцы окон этих цветов Вы можете посмотреть в:

splash_wind — s_dialog — templates


4. Кодировка этих окон — utf-8. Если Вам нужна другая кодировка, меняете ее в index.html в папке templates.

5. Меняете текст нужного Вам окна, это можно проделывать в программе SharePoint Designer.

6. Подставляете в подписную форму окна данные Вашей рассылки. Для рассылок я использую SmartResponder, и поэтому покажу, как это делать, на примере этого сервиса. В Генераторе Форм сервиса SmartResponder Вы: — выбираете нужную рассылку и выделяете ее; — в коде формы берете фрагмент от самого начала до закрывающего тэга </script> и ставите его вместо соответствующего фрагмента в файле index.html Вашего окна;

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

 — берете тэги input, которые находятся после тэга form, и меняете такие же в файле index.html окна;

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

 — берете еще один тэг input, и меняете в index.html

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

В результате форма подписки окна будет подписывать посетителя на Вашу рассылку.

7. Размещаете Ваш одностраничник в Интернете с помощью FTP-доступа программы Dreamweaver или Total Commander.

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


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

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

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


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

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

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

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

    Я сейчас как раз в раздумье — делать такое, или нет...

    Знаю только, что меня такие окошки порой раздражают. Но что внимание привлекают — это точно! :)

    Если решусь, приду перечитывать! :)

  • Екатерина Колодина пишет:

    А я давно такое хотела, а тут вот оно и искать не нужно, спасибо.

  • Екатерина Колодина пишет:

    а проще не input менять, а значения uid, tid, did

  • Екатерина Колодина пишет:

    У меня не получилось, что я сделала не так?

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

    Екатерина, добавьтесь ко мне в скайп, мой логин sasha3130 Посмотрим, разберемся.

  • Anastasia пишет:

    Здравствуйте. Очень интересная ситуация. Все сделала как Вы описываете и у меня все получилось..., правда один раз, а после повторной проверки, перезагрузки и т.д. окна нет. что я сделала не так?

    Спасибо.

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

    Анастасия, здравствуйте! Посмотрите в 10-й строке файла modal.js Там должна стоять цифра 3. Если что-то не будет получаться. Добавляйтесь в скайп, мой логин sasha3130

  • Anastasia пишет:

    Спасибо. Все работает. Но можно я все же добавлю Вас в Скайп, вдруг другие вопросы возникнут. Спасибо еще раз.

  • Марат пишет:

    Спасибо Александр! Окно всплывает,дальше посмотрим,как оно повлияет на сайт!

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

    Александр, спасибо за урок и исходники!

    Попробовал - получилось!

    Только не во всех браузерах popup-окно отображается корректно:

    — в Opera — русский язык отображается иероглифами;

    — в Safari и IE — закрывается плеером вставленного на страничке видеоролика.

    У Вас такого не наблюдается? Как с этим побороться?

    Кстати, как лучше настроить кодировку в Dreamweaver и на хостинге Jino?

    Буду признателен, если ответите!

  • Наталья пишет:

    Классно, очень доходчиво написано, пригодится мне в будущем. Пока надо побольше контента на сайт :) Александр, если это будет не одностраничник, то как ставить на определенную страничку классического сайта на Вордпресс например?

  • aely.ru пишет:

    Здравствуйте, у меня не сработало :( Сделал всё как написано и сказано в видео.Что же делать?

  • Сергей пишет:

    Полезная статья. может быть поставлю у себя такое окошко на блоге

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

    А мне очень не нравятся всплывающие окна, если они заслоняют текст статьи. Если они чуть в сторонке и не мешают читать, то это нормально!

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

    Я тоже их не люблю, когда навязываются слишком.

  • Tina пишет:

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

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

    Приветствую, Александр!

    Мне кажется время попапов потихоньку прошло, или я ошибаюсь? Лично мне не нравиться, когда выпрыгивают окна popup со всякими предложениями. Вполне может быть, что до сих пор всплывающие окна эффективны в плане конверсии.

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

    Александр, привет!

    В плане конверсии попап эффективен. А если человека заинтересует предложение, он и с попапом второй раз зайдет на страницу.

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