Гайд для новичка: как быстро и дешево сделать свой прелендинг | пошаговая инструкция

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

Регистрация домена и хостинга

Сайт — это набор файлов и папок. Так просто выгрузить их в интернет нельзя. Нужно арендовать место, где они будут размещаться, — сервер. А также присвоить уникальное имя, по которому его смогут найти пользователи, — домен. 

Бесплатные серверы, то есть хостинг, предоставляют следующие площадки: Beget, 2domains, СpanelHosting, Hostiman, Sprinthost. Последний хоть и платный, но дает триал на 30 дней. Этого достаточно, чтобы залиться на ситуативный оффер. Домен можно купить на всех вышеперечисленных сервисах (иногда домен идет в подарок к покупке одного из тарифов хостинга), но мы взяли на Reg.ru, так как он банально удобнее. 

Чтобы зарегистрировать домен, нужно указать ФИО, адрес, номер телефона и оплатить аренду (мы нашли домен за 199 ₽). Также потребуется указать паспортные данные, но не рекомендуем использовать свои — если рекламодатель будет слать кирпичи в посылках, претензии предъявят владельцу сайта, то есть вам. 

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

Переходим в раздел “Домены” в хостере и жмем “Создать новый”. В пустую строку вставляем купленное имя и нажимаем на кнопку “Добавить домен”.

Далее переходим в регистратор, открываем купленный домен и вводим DNS-серверы от хостера. Sprinthost присылают их на почту вместе с логином и паролем. В других хостерах DNS-серверы можно найти в настройках добавленного домена. 

Все, домен привязан к хостингу. Остается дождаться, пока сайт заработает. Как правило, проверка занимает от 3 до 72 часов. Чтобы понять, что сайт одобрили, вбиваем домен в адресную строку браузера и смотрим, чтобы на странице было написано “Успешно создан и готов к использованию”. Если выдает ошибку — значит домен еще не проверили.

Кстати, в Sprinthost к домену можно получить бесплатный SSL-сертификат. Сделать это просто: переходим в раздел “Домены”, выбираем “Настройки DNS” и рядом со своим доменом нажимаем кнопку “Let’s Encrypt Wildcard”. Она будет доступна только после одобрения сайта. Готовый сертификат присылают на почту. 

SSL нужен, чтобы подтвердить подлинность веб-страницы. Без него при вводе домена в адресную строку через https:// сайт будет выдавать окно с предупреждением, что страница никак не защищена. Это может спугнуть пользователей. 

Оформление прелендинга по шаблону

Итак, мы создали хостинг и домен, теперь нужно оформить сайт. Чтобы не мучаться с кодингом, проще скачать уже готовую прокладку и использовать ее как шаблон. Мы зашли в партнерку AFFSTAR и к одному из офферов нашли вот такой прелендинг. Представим, что мы взяли в работу другое средство для похудения — например, Lipogenetic. Оффер новый, поэтому прелендов нет. Чтобы страница соответствовала выбранному товару, нужно заменить фотографии, текст и логотип.

Подготовка шаблона: удаляем лишнее

Чтобы использовать сайт как шаблон, его нужно сохранить. Для этого кликаем по странице ПКМ и жмем “Сохранить как…”. Выбираем путь сохранения и “Сохранить”. Повторяем это дважды, но загружаем их в разные папки.

Вместе с веб-страницами сохранятся папки с картинками. В одном месте такую папку удаляем, а файл переименовываем в “index”.

Дальше нужно работать с кодом. Для этого скачиваем самый простой текстовый редактор Notepad++. Сделать это можно на официальном сайте в разделе “Download”. И как раз с помощью него открываем файл “index”.

Весь код удаляем.

Переходим на страницу с прелендингом, копируем исходный код страницы и вставляем его в Notepad++.

Следующий этап подготовки шаблона — удаление скриптов. Выглядят они следующим образом: <script>…</script>. В них прописывают последовательность действий. Например, какая страница откроется, если пользователь нажмет на определенную вкладку. Нам нужно, чтобы юзеры вне зависимости от того, куда нажмут на сайте, попадали на наш ленд, поэтому все чужие скрипты удаляем. Чтобы проще было искать их в коде, используем поиск по тексту — Ctrl+F.

Далее смотрим, из какой папки в текст вставлены картинки. Для этого находим код, начинающийся со строки <img alt, и перед названием самого изображения видим название папки, в которой хранятся картинки. Создаем папку с таким же названием в папке с файлом index.

Далее находим элемент <link href и аналогично предыдущей инструкции создаем папку, на которую ссылаются в этом коде. В коде прописывают, откуда брать медиафайлы, стили текста и шрифты. 

Теперь нужно заполнить созданные папки теми же файлами и картинками, что используются на сайте. Для этого заходим в ранее сохраненную папку с изображениями и копируем их все в новую папку img. Все остальные файлы, помимо скриптов, переносим в папку css. Скрипты обозначаются форматом js.

Чтобы проверить, правильно ли вы перенесли файлы, откройте index через браузер. На странице должны присутствовать все изображения и текст. Если пропал логотип — не страшно. Мы в дальнейшем расскажем, как его создать или заменить.

Меняем изображения: где найти бесплатные картинки

Бесплатные изображения берем со стоков. Например, из Pixabay, Pexels, Stockvault, Unsplash, Life of Pix или Ru.freepik. Чтобы элементы сайта никуда не съезжали, лучше сразу подбирать картинки, соответствующие разрешению тех, что используются в шаблоне.

Чтобы заменить изображение на сайте, меняем название картинки на то, которое используется для пикчи на сайте. Закидываем ее в папку c остальными изображениями, выбирая “Заменить”. Не забываем сделать то же самое и для баннеров.

Вот как выглядит наше промежуточное “до” и “после”.

Если нужно вставить дополнительную картинку, то скачиваем нужное изображение, переходим на сайт-шаблон, кликаем ПКМ по тому месту, где должна быть картинка, и нажимаем “Исследовать”.

Копируем код, который соответствует заданному месту, и ищем его в файле index. Под ним вставляем <img alt=»» src=»./img/comment9.jpg» />, где comment9.jpg — название скачанной картинки.

Где найти текст и как заменить его в шаблоне

Добыть текст для сайта можно следующими способами:

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

Итак, мы нашли статью, теперь нужно вставить ее вместо той, что находится в шаблоне. Здесь работает тот же принцип, что и для изображений, только заменять текст мы будем прямо в коде. Открываем index через Notepad++, ищем строчки с текстом и заменяем их на текст из нашей статьи.

 Также заменяем названия разделов, комментарии и т. д.

Если нужно добавить дополнительный абзац, то снова действуем так же, как и в предыдущем случае с картинками. Только в этот раз код будет выглядеть так: <p> текст </p>. 

Меняем и создаем новый логотип

Итак, мы заполнили страницу. Если не нравится логотип или он не релевантен нашему офферу, то можно поменять и его. Для этого находим подходящую картинку в Яндексе (вбиваем желаемое название и добавляем “logo png”) или используем генератор Renderforest.

Для примера мы разберемся, как заменить лого на преленде с помощью вот этого логотипа, который мы нашли в поисковике: 

Открываем веб-страницу шаблона, кликаем по логотипу ПКМ, выбираем “Открыть изображение в новой вкладке” и сохраняем его в папку img. Далее там же заменяем лого на новый, не изменяя название.

Вот что имеем в результате:

Итак, сайт мы оформили, осталось только добавить скрипт, чтобы при нажатии на любое место пользователь попадал на лендинг. Для этого в конце кода, перед </body> и </html>, вставляем: 

<script type=»text/javascript»>

var d = document.getElementsByTagName(‘a’), i=d.length;

while (i—){

d[i].setAttribute(‘href’,’ссылка на ленд’);

}

</script>

<script src=»js/script.js»></script>

Завершение: загружаем файлы на сервер

Чтобы загрузить файлы на хостинг, переходим в раздел “Файловый менеджер” на хостере и через “Переход к сайту” выбираем наш домен.

Через кнопки меню создаем папки и файл, аналогичные тем, что мы создали ранее. Только вместо “index” пишем “index.html”.

Далее переносим из файла index код в index.html, а с помощью все тех же кнопок в папки img и css загружаем все картинки и файлы. 

Готово. Теперь, переходя по нашему домену, открывается оформленный ранее сайт.

Подытожим

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

• Аренда домена — 199 ₽;
• Хостинг можно взять бесплатный;
• Картинки тоже с бесплатных стоков;
• Тест на русском языке обойдется в 100-200 ₽ + перевод. 

Подписывайтесь на наш Telegram-канал, вступайте в арбитражный чат и не забывайте про наш YouTube-канал. GOOD LUCK!