Лендинг или сайт, имеющий всего одну страничку, как никогда подходит новичкам для создания собственного ресурса. Предстоящая работа не вызовет затруднений, а готовый ресурс будет выполнять все необходимые функции.
Больше подробностей о том, как создать лендинг пейдж самостоятельно, вы сможете узнать из представленной статьи.
Сайты лендинг пейдж – что это такое?
Ранее, сайты такого формата были не слишком востребованы, поскольку раскручивать ресурс было очень проблемно. Сегодня конъюнктура рынка существенно изменилась, появились новые направления, инструменты для продвижения. В результате лендинги приобрели новое значение и оригинальную конфигурацию.
Термин: Лендинг пейдж (landing page) – это страница, где продвигается товар, услуга, посетители «направляются» к совершению определенного действия.
Сайты такого формата используются для обращения покупателей за бесплатными консультациями, для бронирования мест, подачи заявки на приобретение товара, получения услуги. Из характерных особенностей таких сайтов можно указать следующие моменты:
- состоит из одной страницы, а все сведения и полезные данные расположены в виде блоков;
- можно разместить информацию разного типа – тексты, фото и видео, файлы для скачивания;
- не имеет сложной навигации, больших текстов и баннеров. Переход по блокам осуществляется путем обычной прокрутки.
Получается, что небольшой и простой сайт содержит минимум информации, необходимой для представления проекта в интернете. Для предпринимателя или компании, которые планируют обозначить свое присутствие в интернете, такой вариант может стать оптимальным решением.
Семь шагов создания Landing page для новичков
Самостоятельно сделать сайт такого типа не сложно. Важно действовать строго по инструкции и переходить от этапа к этапу для получения нужного результата. Придерживаясь представленных рекомендаций, можно будет получить профессионально сделанный, красивый сайт, полностью бесплатно. Рассмотрим пошаговые рекомендации по созданию лендинга из html шаблона.
Шаг 1. Скачиваем html-шаблон для лендинга (обычно, такие предложения бесплатные).
Фактически, речь идет об отдельной странице в интернете, которая сподвигает пользователя на конкретное действие. У таких сайтов не меню и ссылок на другие ресурсы. Чтобы реализовать проект, сначала надо найти подходящий html-шаблон и отредактировать его.
Шаг 2. Меняем картинки на главном экране.
Когда задача по скачиванию шаблона выполнена, необходимо перейти на следующий этап – редактирование. Здесь будет такой порядок действий:
- Скачали, переходите в папку «blue», в которой хранятся файлы с расширением «html». Необходимо кликнуть по файлу index.html и открыть шаблон, который был скачан, в браузере.
- Переходим к редактированию при помощи программы Notepad++. Потребуется ее сказать и установить на компьютер.
- Первоочередные действия – установка нормальной картинки на начальный экран проекта. Для этого ищем картинку, которая будет подходить к теме сайта. Найти полезный контент можно в Яндекс-картинках, указав размер «Большой».
- Скачиваем выбранную картинку и копируем ее в папку ««images», меняем название на «banner.jpg». Старое изображение тоже нужно переименовать.
- Обновляем шаблон в браузере. Если картинка появляется, значит все встало как надо. Переходим к следующему этапу
- Правой кнопкой мышки кликаем по «index.html» - «Открыть с помощью Notepad++».
- Открывается исходный код шаблона. Задача исполнителя – заменить черный текст на другие параметры. Качество правки – это 80% успеха всей работы.
- Меняем заголовки: «Alpha» на нужный нам (например, Консультация с опытным юристом по любым вопросам и в любое время). Текст надо вставить между тегами .
- Сохранить и обновить. Заголовок появляется на весь экран, но он очень растянут. Необходимо его отредактировать, поэтому после слова «с юристом» можно поставить тег «
». Он выполняет функцию переноса, и часть текста опустится ниже.
- По аналогии меняем подзаголовки
- Переходим к замене текста для кнопок. На белой пишем «Заказать», а на прозрачной – «Подробнее»"
- В итоге, главная страница сайта готова.
- Переходим в папку «assets -> css ->images».
- Меняем название двух файлов, которые представлены здесь. К примеру, светлый переименовываем в «overlay2.png», а более темный — просто «overlay».
- Сохраняем и обновляем. Теперь все смотрится намного лучше.
- Аналогичным образом меняем весь шаблон, приводим его к красивому виду.
Шаг 3. Редактируем тексты на главном экране.
Переходим к редактированию текстовой информации. Для этого используем алгоритм:
Шаг 4. Затемняем картинку, выбранную для фона.
Продолжаем работу над шаблоном. Слишком светлый фон приводит к тому, что заголовок не слишком выделяется. Сделаем фон темнее. Для этого:
Шаг 5. Меняем форму подписки.
Здесь могут возникнуть сложности, поскольку придется регистрироваться в любом сервисе рассылок, генерировать форму и вставлять ее в лендинг. Есть более простое решение – указать номер телефона и тем самым, увеличить конверсию заказов.
В коде шаблона нужно будет просто удалить всю форму и вписать номер мобильного телефона.
В результате получится вот такая картинка.
Шаг 6. Загружаем сайт на хостинг.
Готовый проект необходимо выложить в интернет. Для этого покупает домен и хостинг, например у Reg.ru и закачивает страницу на хостинг. Предварительно нужно будет переименовать папку «blue», например, в «services». Это позволит лендингу приобрести адрес yourdomain.ru/services/index.html. На завершающем этапе необходимо сменить расширение на «php».
Шаг 7. Продвигаем лендинг и привлекаем целевую аудиторию
На финальной стадии остается протестировать работу сайта и заняться продвижением ресурса. Сделать это тоже можно самостоятельно и бесплатно. Для этого необходимо настроить правильно контекстную рекламу и использовать другие способы продвижения лендинга.
В дальнейшем, необходимо постоянно отслеживать статистику по проекту, чтобы понять, какие коррективы необходимы к внесению для максимально продуктивной работы сайта. Если вы нуждаетесь в помощи профессионалов, то в нашем агентстве найдете полезные услуги.