Шаблон лендинга со всплывающей формой подписки. Редактируем под себя

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

Вот о последних сегодня и пойдет речь.

Создать лендинг можно самыми разными способами – от бесплатных и недорогих (готовые шаблоны, плагины, сервисы) до более затратных (например, заказать персональный дизайн у фрилансера).

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

Впервые увидела его у Евгения Вергуса и идея мне понравилась. Кроме того, Женя поделился, что конверсия в подписчика на этом шаблоне у него составляет 70% (на теплом трафике). А тут, как раз, Александр представил набор таких готовых шаблонов, один из которых доступен бесплатно.

Поэтому я решила им воспользоваться, а заодно поделиться с вами и показать, как его отредактировать под себя. Это очень быстро и легко.:)

Да, вот как выглядит сам шаблон:

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

Скачивается шаблон в заархивированной папке, в которой содержатся все необходимые элементы:

• Индексный файл (его мы и будем изменять).

• Папка с картинками.

• Папка со стилями.

Собственно для редактирования шаблона я использовала визуальный html-редактор DreamWeaver (8 версию). Поэтому в видео показываю пример работы именно с ним.

Дримвивер хорош тем, что сочетает в себе и визуальную часть, и html-код. То есть, мы сразу видим все наши правки и, сохраняя их, уже смотрим, как выглядит страница в браузере.

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

Немного поясню…

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

Вот так:

До

После

Высоту и ширину можно указать свои, или вовсе убрать этот параметр, картинка автоматически добавится в тех размерах, в которых вы ее сохранили.

С текстом все понятно – там принцип тот же, что и в обычном Ворде. Редактируете его, как вам нравится.

Форма подписки на этом шаблоне адаптирована под Смартреспондер, поэтому мы просто заменяем нужные значения(uid, did) на свои. tid можно оставить 0 (этот параметр обозначает канал подписчиков и настраивается на Смарте отдельно).

Если у вас Jistclick или другой сервис рассылок, тогда полностью замените код Смартреспондера на свой.

Со ссылками тоже ничего сложного. Предварительно создайте страничку с политикой конфиденциальности. И вместо решетки # укажите ссылку на свою страницу. В кавычках, как на скриншоте.

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

Также в футере есть ссылка на сайт Александра Новикова, вы можете изменить ее на свою партнерскую или убрать эту строчку.

Да, и не забудьте в конце протестировать форму подписки на работоспособность.

Когда все будет сделано, переименовываем папку с элементами шаблона (на латинице) и закидываем в корневую папку на хостинг. Подписная страница будет отображаться по адресу:

Ваш домен/название папки, например у меня: o-zarabotkeonline.ru/free-kurs

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

ВАЖНО: ШАБЛОН БОЛЬШЕ НЕ АКТУАЛЕН И НЕ ДОСТУПЕН

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

Вот один из шаблонов, на который мы можем добавить видео:

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

Впрочем, в платном комплекте есть видео по работе с этими шаблонами и вы легко разберетесь. Комлект можно приобрести сразу после скачивания бесплатного шаблона.

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

Желаю успехов!

С уважением, Виктория Карпова