Гайд для новичка: как быстро и дешево сделать свой прелендинг | пошаговая инструкция - ProTraffic
бизнес фестивальна заливе
Купить билет
-10% по промокоду PROTRAFFIC
m1-logo m1-logo m1-logo

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

Автор: ProTraffic
17 декабря 2021

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

GoLogin Антидетект для масштабирования аккаунтов
GoLogin Антидетект для масштабирования аккаунтов
Реклама

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

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

Бесплатные серверы, то есть хостинг, предоставляют следующие площадки: 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!

17 декабря 2021
Для голосования требуется
19
Автор:
ProTraffic
Количество статей:
919
Рейтинг автора:
47
Количество статей:
919
Рейтинг автора:
47
поделиться:
Комментарии (0)
Читатели еще не оставили комментарий, будьте первым
label

Сервис Bankoff, позволявший выпускать карты, прекращает свою деятельность из-за наплыва пользователей  /  Криптобиржа Currency прекращает работать в России  /  Выпустили огненное интервью на YouTube-канале с командой TraffBraza  /  Роскомнадзор запретил на территории России рекламное продвижение Google и её сервисов  /  Новое экзотическое ГЕО от М1 — Эквадор  /  NashStore вместо Google Play: в России запустят аналог магазина приложений для Android  /  

Изменения сохранены
Черновик сохранен
Отправлено на модерацию
Произошла ошибка