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

Шаблон адаптивен под разные устройства, состоит из:

• заголовка и подзаголовка,
• 3D коробки инфопродукта для визуализации,
• списка выгод (буллитов),
• формы подписки – по емейл и через ВК,
• подвала с важной информацией (ссылки на ваш сайт или группу ВК, политику конфиденциальности, соцсети).

Пример данного шаблона:

А здесь видеоурок по его редактированию:

Также размещаю текстовую инструкцию по редактированию ниже.

1) Сначала скачайте шаблон по ссылке.

Шаблон простой страницы подписки – редактируем под себя

2) Он запакован в архив, после скачивания его нужно распаковать в обычную папку. Кликаете по архиву правой кнопкой мыши и выбираете «Извлечь в текущую папку».

Шаблон простой страницы подписки – редактируем под себя

У вас на компьютере должен быть установлен архиватор!

Или двойным кликом мыши открываете архив и перетягиваете папку из архива на рабочий стол.

3) Сделайте копию папки с шаблоном. Зачем? Чтобы шаблон у вас остался, а с текущей копией вы продолжили работу по редактированию.

Нажмите по папке правой кнопкой мыши, выберите «Копировать».

Шаблон простой страницы подписки – редактируем под себя

Затем кликните по рабочему столу правой кнопкой мыши и выберите «Вставить».

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

4) Откройте двойным кликом мыши скопированную папку, внутри у вас будет два файла. Файл index.html и папка assets. Начнем с редактирования index.html – это и есть наш шаблон. А в папке assets нам понадобится только подпапка с картинками – images. Я покажу, как вам в ней заменить макет 3D коробки вашей обложкой продукта.

Шаблон простой страницы подписки – редактируем под себя

Другие папки трогать не надо – они отвечают за стили, скрипты и корректное отображение страницы на разных устройствах.

Для редактирования файла index.html понадобится скачать и установить бесплатный блокнот Notepad++.

Вот так выглядит его иконка.

Шаблон простой страницы подписки – редактируем под себя

После установки кликните правой кнопкой мыши по файлу index.html и выберите «Открыть в блокноте». Вы откроете код шаблона.

Шаблон простой страницы подписки – редактируем под себя

Что мы здесь редактируем?

Во-первых, заголовок (title), который отображается в браузере – просто напишите свой текст вместо текущего.

Шаблон простой страницы подписки – редактируем под себя

Далее редактируется текст заголовка и подзаголовка непосредственно на подписной странице. Вы пишите название вашего оффера и в подзаголовке конкретизируете, что именно предлагаете за подписку.

Шаблон простой страницы подписки – редактируем под себя

нажимайте на скриншоты для увеличения

Показываю на примере своего словарика начинающего партнера.

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

Ниже идет кнопочка «ПОЛУЧИТЬ ДОСТУП», при нажатии на которую человека перекидывает в конец странички на форму подписки. Здесь вы можете написать свое название на кнопке вместо текущего.

Шаблон простой страницы подписки – редактируем под себя

Далее редактируем заголовок «Чем вам будет полезен данный материал?» и список выгод вашей бесплатности – буллиты.

Просто подставляете ваш текст вместо моего.

Шаблон простой страницы подписки – редактируем под себя

Здесь важно описать, какие ценности, пользу, выгоды получит подписчик от вашей бесплатности. И лучше всего это работает в виде вот такого списка – четко по пунктам.

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

По умолчанию в нем 4 пункта, если вам нужно больше, можно скопировать, к примеру, последний пункт, выделив соответствующую часть в коде. Что нужно выделить я показала на скриншоте, тут важно копировать внимательно!

Шаблон простой страницы подписки – редактируем под себя

нажимайте на скриншоты для увеличения

Далее вставляете этот скопированный код после 3-го тега </div> , сделав пробел. Меняете цифру пункта 4 на 5 и пишите пятую выгоду. Смотрите внимательно в коде:

Шаблон простой страницы подписки – редактируем под себя

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

Если, наоборот, нужно удалить пункт, то точно также выделяете блок, как на скриншоте:

Шаблон простой страницы подписки – редактируем под себя

И жмете на клавиатуре Delete. Лишний пробел в коде тоже можно удалить с помощью клавиши Backspace (Back).

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

Теперь нам нужно заменить форму подписки. Здесь проще, так как часть кода, которую будем менять, помечена комментариями <!—Formbuilder Form—>. Нам полностью нужно удалить содержимое между двумя комментариями и вставить код формы подписки от своего сервиса рассылок.

Шаблон простой страницы подписки – редактируем под себя

нажмите на скриншот для увеличения

В моем случае это Джастклик. Я предварительно создала форму подписки в разделе «CRM» – «Формы подписки».

Шаблон простой страницы подписки – редактируем под себя

Теперь просто копирую ее код для вставки на подписную страницу.

Шаблон простой страницы подписки – редактируем под себя

И вставляю вместо текущего кода – полностью выделяю этот фрагмент и сочетанием клавиш Ctrl+V вставляю код моей формы.

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

нажимайте на скриншоты для увеличения

Текст над формой «Введите свой email в форму ниже…» тоже можно заменить.

Важно: чтобы сохранять внесенные изменения, не забывайте периодически нажимать на иконку дискеты «Сохранить» в блокноте Notepad++.

Шаблон простой страницы подписки – редактируем под себя

А чтобы просматривать в браузере, как меняется ваша подписная – просто открывайте в папке файл index.html, дважды кликнув по нему левой кнопкой мыши (так вы открываете предпросмотр шаблона в браузере).

Шаблон простой страницы подписки – редактируем под себя

Также вы можете выбрать, в каком браузере открыть файл, если нажмете на него правой кнопкой мыши. Выберите «Открыть с помощью» и нажмите в списке по нужному браузеру (если у вас их несколько).

Шаблон простой страницы подписки – редактируем под себя

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

Шаблон простой страницы подписки – редактируем под себя

Затем вставить ее в кнопку вместо значка # между кавычками. Надпись на кнопке, как и текст «Или получите материал во Вконтакте» вы тоже можете поменять.

Шаблон простой страницы подписки – редактируем под себя

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

Шаблон простой страницы подписки – редактируем под себя

Теперь осталось отредактировать текст и ссылки в подвале сайта. Здесь обязательно оставляем Политику конфиденциальности. Как сделать политику для своего сайта я показала здесь.

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

Шаблон простой страницы подписки – редактируем под себя

Ниже идут кнопочки социальных сетей, вместо ссылок на мои соцсети между кавычками укажите ссылки на ваши.

Шаблон простой страницы подписки – редактируем под себя

Если какую-то соцсеть хотите убрать, например Ютуб, выделите фрагмент кода и нажмите Delete на клавиатуре.

Шаблон простой страницы подписки – редактируем под себя

И в самом низу вместо текста Ваши ФИО напишите свои данные.

А теперь заменим 3D обложку инфопродукта на подписной. Для этого вам понадобится создать вашу обложку. Если вы не знаете, как это сделать, то рекомендую посмотреть мой урок.

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

Например, я уменьшила размер с 1500Х1500 пикселей вполовину.

Готовую картинку нужно поместить в папку images, которая находится папке assets – обязательно дав ей такое же название, как у текущей обложки – maket, а мою картинку удалить.

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

То есть вам нужно заменить текущую картинку вашей, но обязательно с таким же названием и форматом. Повторюсь, ваша картинка должна называться maket и формат у нее должен быть png!

Шаблон простой страницы подписки – редактируем под себя

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

Шаблон простой страницы подписки – редактируем под себя

Как добавить Яндекс.Метрику или код пикселя от Вконтакте на подписную?

Очень просто, Метрику или пиксель можно разместить в коде перед тегом< /head>, сделав пробел. Если размещаете и то, и то, можно сразу друг после друга.

Шаблон простой страницы подписки – редактируем под себя

Пример:

Шаблон простой страницы подписки – редактируем под себя

В конце не забудьте еще раз сохранить в шаблоне все ваши изменения!

Шаблон простой страницы подписки – редактируем под себя

Когда шаблон отредактирован – самое время отправить страницу подписки на хостинг, чтобы опубликовать ее в интернете.

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

Я назову папку с шаблоном primer1. Кликаю по ней правой кнопкой мыши и выбираю «Переименовать».

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

Теперь нам нужно заархивировать папку, чтобы загрузить ее на хостинг. Для этого, опять же, жмем по ней правой кнопкой мыши – Добавить в архив. Тип архива выбираем zip.

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

Этот архив нам и нужно загрузить на хостинг в корневую папку своего сайта.

После загрузки и архив, и папку с компьютера можно удалить.

Далее рассмотрим процесс на примере хостинга Таймвеб. Заходим в «Файловый менеджер» – здесь двойным кликом мыши открываем корневую папку нашего сайта, куда собираемся грузить шаблон.

Шаблон простой страницы подписки – редактируем под себя

Я выбрала свой сайт – likens.ru.

Внутри этой папки двойным кликом мыши открываем папку public_html. Именно в нее и загружаем наш архив с подписной страницей.

Шаблон простой страницы подписки – редактируем под себя

Делается это через вкладку «Файл» – «Загрузить на сервер».

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

После загрузки архив нужно распаковать. Выделяем его мышкой – жмем по вкладке «Архиватор» и выбираем «Разархивировать».

Шаблон простой страницы подписки – редактируем под себя

Распакованный архив выделяем мышью и удаляем («Файл» – «Удалить»).

Шаблон простой страницы подписки – редактируем под себя

В корневой папке сайта остается папка с файлами подписной страницы.

Шаблон простой страницы подписки – редактируем под себя

И теперь эта страница открывается в интернете по адресу: домен вашего сайта/название папки. В моем случае адрес подписной: likens.ru/primer1

Шаблон простой страницы подписки – редактируем под себяКстати, в дальнейшем вы можете редактировать подписную страницу прямо на хостинге. Просто заходите внутрь папки и двойным кликом мыши открываете файл index.html – он тут же открывается в редакторе.

Шаблон простой страницы подписки – редактируем под себя

Шаблон простой страницы подписки – редактируем под себя

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

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

Оставляйте ваши вопросы и комментарии!

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

P.S. А если вы хотите сами научиться делать современные и разные страницы подписки, используя простой и удобный плагин Вордпресс, то рекомендую получить видеоурок моего коллеги «Как сделать сайт за 15 минут».