Друзья, привет! Сегодня рассмотрим один из способов создания сайта-прокладки под партнерку. И воспользуемся визуальным онлайн html-редактором.

В двух словах, зачем нужен сайт-прокладка…

Его мы делаем для того, чтобы «утеплить» трафик и добиться лучшей конверсии. Чем если бы мы сходу приводили посетителей на продажник или подписную страницу партнерского продукта.

Не зря в cpa-партнерках веб-мастерам часто предлагают уже готовые сайты-прокладки.

На такой прокладке мы можем дать отзыв о продукте, поделиться кейсом (успешным примером внедрения), сделать подробный обзор и т.п. То есть, не просто разрекламировать, похвалить продукт, а продемонстрировать реальный результат, показать пользу, порекомендовать…

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

Не обязательно делать все стандартно, по шаблону. Можно экспериментировать как с форматом – текст, видео.  Так и усиливать какими-то бонусами… Смотреть по ситуации, исходить из того, где вы собираетесь эту прокладку продвигать.

Кое-что из моих примеров

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

Совсем короткий вариант. Тут я разместила видеообзор курса Андрея Цыганкова «Формула эффективного и быстрого заработка на партнерках», а под роликом добавила кнопку перехода на его продающий сайт:

сайт-прокладка с видео

Ссылку на эту страничку даю в первом письме автоматической рассылки, вместе со ссылкой на скачивание моего бесплатного курса.

апсел в первом письме

Еще один пример сайта-прокладки, который я делала для курса Дениса Герасимова «Настройка холодного трафика», смотрите здесь.  В данном варианте не только обзор и отзыв о курсе, но и бонус от меня с ограничением по времени. И соответствующая кнопка со ссылкой в конце.

А вот один из самых первых вариантов, который я создавала под бесплатную книгу Азамата Ушанова «7-дневный план продаж». Рекламировала я эту прокладку в Яндекс.Директе.

Здесь все по шаблонной модели: моя фотка, история, как я начала зарабатывать в интернете, как мне захотелось большего, и как книга Азамата помогла мне сделать свои первые шаги в инфобизнесе  – создать бесплатность, начать собирать подписчиков, записывать видеоуроки.

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

Таков сам принцип создания прокладки. А теперь приступим к ее технической реализации…

Сначала поработаем в онлайн html-редакторе, затем доведем страницу до ума в блокноте Notepad++ и, наконец, разместим ее в интернете.

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

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

создаем таблицу

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

правим текст в html-редакторе

Партнерскую ссылку в тексте размещаем следующим образом:

добавляем ссылку

С картинками поступаем так. Через вкладку «изображение» добавляем заготовки, в соответствии с размерами наших изображений, а в поле ссылка пока ставим решетку (#). Потом в Notepad++ уже укажем путь к нашим картинкам, чтобы они начали отображаться.

добавляем изображение

После того, как все сделаем, жмем по кнопке «Источник» и копируем полученный html-код в Notepad++:

копируем исходный код

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

Этот фрагмент добавляем до начала кода:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Название вашего сайта</title>
</head>
<body bgcolor="#E6E6FA">

title – это название нашей странички, которое будет отображаться в браузере,

bgcolor="#E6E6FA"

– цвет фона, в данном случае серый, можно заменить на другой, указываем между кавычками.

А этот в конце:

</body>
</html>

Также добавим несколько дополнительных параметров в эту строчку кода:

редактируем код

А именно — фон и границу, чтобы отделить страничку с текстом от основного фона. Нам понадобится такой фрагмент:

background: #FFFFFF; border: 1px solid #CCCCCC

Где цвет фона белый, размер границы – 1 px, цвет границы – серый, а значение solid – указывает, что она сплошная. Все эти параметры тоже можно менять.

Добавляем их через пробел, как на скриншоте: (увеличьте кликом мышки)

добавляем фон и границу

Теперь осталось указать путь к картинкам вместо решетки (#).

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

путь к картинкам

А в коде просто укажем название и формат этих картинок между кавычками. Вот так:

указываем путь к картинкам

Чтобы партнерская ссылка открывалась в новой вкладке,  нужно добавить к ней параметр:

target="_blank"

открываем ссылку в новой вкладке

Кроме того, можем поставить на эту страничку счетчик или кнопки социальных сетей. Например, в конце, до закрывающего тега </body>.

Или разместить видео с Ютуба через код. Только нужно будет добавить к ссылке http, чтобы видеоролик проигрывался. А тегами center мы выровняем проигрыватель по центру.

Вот так: (увеличьте кликом мышки)

код проигрывателя ютуб

Перед окончательным сохранением странички в кодировках выбираем пункт «Кодировать в UTF-8 без BOM». Чтобы наш сайт корректно отображался в браузере, без кракозябров.

кодировка

Готовую папку с названием сайта-прокладки (латинскими буквами) и файлами (index.html + картинки) загружаем на сервер сайта. Я для этого использую ftp-клиент Filezilla.

Вот и все. Теперь сайт-прокладка будет доступен в интернете по адресу:

http://ваш домен/название сайта прокладки

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

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

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