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

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

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

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

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

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

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

• скачать popup

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

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

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

Затем откройте 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';

В этой строке, если Вам не нравится синий цвет окна, можете выбрать другой: измените слово 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.

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

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

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