Привет! Мы продолжаем серию уроков по созданию лендинга. Напомним, что в предыдущем уроке мы завершили подготовительный этап. Сегодня уже перейдем к практической части и расскажем, из каких элементов состоит лендинг, а также на практике покажем, как сделать свой сайт с нуля, используя шаблоны конструктора.
В конце статьи – видеоурок по этой теме.
Прототип
После подготовительного этапа в создании лендинга есть еще один промежуточный этап – прорисовка прототипа. Прототип – это черновой набросок будущей страницы, который можно сделать в графическом редакторе, документе, таблице или на простом листе.
Основная цель прототипа – это показать все, что будет размещено на сайте, но в черновом варианте. На этапе прототипирования не стоит думать о дизайне, главное – определить иерархию блоков, а все остальное за вас сделают блоки и шаблоны в конструкторе.
Прототип следует составлять на основе подготовительных этапов, о которых мы говорили в предыдущем уроке – определения цели лендинга, анализа конкурентов и анализа целевой аудитории. Напомним, что идея лендинга в том, чтобы не перегрузить посетителя и сообщить ему только необходимую информацию. Основываясь на этих данных, мы составим смысловое наполнение лендинга.
Чтобы промо-страница получилась интересной и продающей, в блоках необходимо рассказать о следующем:
- Коротко представить продукт и показать, чем он полезен вашим клиентам. В этом вам поможет анализ целевой аудитории из прошлого урока.
- Продемонстрировать продукт в деле. Если вы продаете какие-то сложные продукты, то лучше рассказать о них детально. Клиентам комфортнее заказать товар, когда они знают, что покупают.
- Проработать возражения, ответить на вопросы и развеять опасения. Вы должны закрыть все «боли» клиентов, чтобы у них не оставалось никаких сомнений. В этом помогут отзывы и ответы на частозадаваемые вопросы.
- Сформулировать условия сделки и сделать предложение. В этом вам помогут кнопки по типу «Купить», «Заказать», «Оставить данные» и так далее.
В результате клиент на лендинге должен проходить примерно такой путь:
- У клиента есть проблема.
- У вас есть решение этой проблемы.
- Показываем, как это работает.
- Доказываем, что не стоит сомневаться в покупке товаров или услуг.
- Призываем к действию.
Не стоит полностью придерживаться такого пути, но лучше всего держать его в голове. Каждый элемент структуры можно расположить на нескольких блоках либо использовать несколько блоков, чтобы показать лишь один элемент.
Например, предложение о покупке можно сделать в самом начале. Если же клиента это не убедило, то можно добавить кнопку «Купить» после демонстрации товара или услуги. Если это не помогло, то можно еще добавить кнопку после блока, в котором исключаются все сомнения.
Давайте теперь наглядно посмотрим, из каких блоков конструктора все это можно реализовать. Заодно познакомимся со структурой лендинга на практике.
Элементы лендинга
Лендинг в большинстве случае состоит из таких элементов:
- Шапка, «header». В этой части располагается логотип, навигация, контактная информация – номер телефона, адрес, а также кнопка действия, например «Оставить заявку».
- Главный экран – на нем располагается оффер или УТП (уникальное торговое предложение) и графический элемент, четко иллюстрирующий бизнес. Оффер, как правило, включает в себя заголовок, подзаголовок и кнопку действия. Например, в заголовке прописывается «Свадебное агентство Сердцеедки», в подзаголовке «Свадьба по уникальному сценарию, выездная регистрация и видео love story – в подарок», а кнопка действия – «Забронировать дату». К этому же примеру в качестве изображения может подойти фотография со свадьбы.
- Преимущества – здесь стоит рассказать о том, почему клиент должен воспользоваться вашими услугами. Преимущества должны приносить пользу клиенту, поэтому стоит сконцентрироваться на том, как хорошо будет клиенту при использовании ваших услуг.
- Услуги или товары. В этом блоке следует показать, что именно от вас может получить клиент. Это может быть перечень услуг или фото товара с ценой и кнопкой заказа. Обратите внимание, что не стоит объединять на одной странице предложения из разных сфер для противоположных аудиторий. Например, если на одной странице продавать товары из фермерской и автомобильной отраслей, то, скорее всего, ничего не выйдет.
- Этапы работ – блок, где необходимо подробнее рассказать об услугах и показать их в деле. Например, поэтапно проиллюстрировать, как выполняется ремонт квартир. Или что произойдет, когда клиент отправил заявку. Это поможет вам продемонстрировать услугу и проработать опасения.
- Отзывы – они вызывают доверие пользователей и показывают экспертность. Здесь можно разместить отзывы о работе или рассказать о партнерах, сотрудничеством с которыми вы гордитесь.
- Форма заявки – здесь может быть заявка на консультацию, обратный звонок или заказ услуги.
- Контакты – в этом блоке, как правило, указывается почта, номер телефона, адрес компании, а также прикрепляется карта. Это поможет клиенту быстро найти офис или связаться с вами.
- Подвал, «Footer» – это завершающая часть сайта, в которой прописывается навигация по сайту и добавляются ссылки на соцсети, политику конфиденциальности и другие необходимые адреса.
Создание лендинга на примере Craftum
Выше мы разобрались, как и в какой последовательности проектируется лендинг. Теперь можно переходить к практической части.
В этом разделе мы покажем, как создать реальный сайт с помощью нашего конструктора. Подобных инструментов на рынке довольно много, но не все они позволяют работать комфортно и быстро.
Использование Craftum позволяет выполнять все действия синхронно. Вы не будете тратить время на переключение между блоками и вам не придется по несколько раз сохранять и копировать текст. Вся работа выполняется так, будто вы пишете заметку, а на выходе получаете полноценный рабочий инструмент для бизнеса.
Самим конструктором можно воспользоваться бесплатно в течение 10 дней – за этот период вы познакомитесь со всем функционалом и сможете оценить преимущества Craftum.
Давайте создадим страницу на основе шаблона. Как мы уже говорили в предыдущем уроке, шаблоны позволяют сделать сайт быстро и тут же запустить его в работу. Достаточно выбрать подходящий макет и изменить в нем детали.
Итак, начнем:
- Заполняем все необходимые поля и жмем на «Создать сайт».
- В результате перед нами отображается страница с доступными шаблонами. Для примера возьмем шаблон «Грузовые перевозки». Вы же можете сразу выбрать тот шаблон, который подходит под ваш бизнес. Если такой не получается найти, то можно выбрать любой другой и изменить его под себя.
4. Мы попадаем в окно редактирования шаблона – здесь и будут происходить все наши дальнейшие действия. Все крайне просто – достаточно поменять весь текст и картинки под себя. Первым делом давайте изменим название логотипа и контакты
5. Теперь давайте перейдем к УТП, о котором мы уже говорили. В шаблоне оно уже есть, но нам нужно сделать свое. Для примера назовем его «Перевозка больших грузов по всей России от 2 недель». Обратите внимание, что у вас оно может быть другим.
6. Осталось заменить фоновое изображение. Вы можете оставить и оригинальное, но лучше добавить свое. Если изображения у вас нет, то его можно найти во встроенном фотостоке каталога Craftum. Настроить фон можно через специальное окно, которое открывается в нижнем левом углу.
7. Достаточно перенести свое изображение в окно и нажать «Использовать в блоке».
8. В результате мы получаем вот такой главный экран:
9. Но это еще не все, ведь у нас есть кнопка, которую также нужно настроить. Давайте сделаем так, чтобы при нажатии на нее открывалась форма. Для этого перейдем в окно «Настроить».
10. В блоке «Контент» выберем «Кнопка#1», в «Тип ссылки» укажем «Всплывающее окно», а в разделе «Блок» – «Добавить новый блок».
11. После этого внизу появится новое окно с формой. Для ее редактирования переходим в настройки и в разделе «Контент» пишем заголовок, имя, телефон и почту.
12. В разделе «Форма» укажем почту, на которую будем получать заявки.
13. Теперь форма настроена, а это значит, что пользователи смогут ее использовать и оставлять заявки на сайте. Аналогичным образом прорабатываем все оставшиеся блоки на сайте. Если нужно добавить блок, то наведите курсор мыши в область между блоков – там появится специальная кнопка в виде плюсика. Чтобы удалить один из блоков – наведите курсор мыши на него и нажмите на кнопку в виде корзины.
14. Также при необходимости вы можете полностью отредактировать любой из блоков. Например, изменить в нем цветовую палитру, шрифт и другие атрибуты. Сделать это можно в настройках во вкладке «Дизайн».
15. Чтобы понять, как сайт выглядит на разных экранах, воспользуйтесь кнопками сверху.
16. Когда все блоки будут проработаны, останется только опубликовать сайт. Для этого есть соответствующая кнопка в верхнем правом углу.
17. В отобразившемся окне даем название странице и жмем на «Опубликовать».
У нас получилось создать свой собственный сайт без привлечения специалистов. Мы быстро загрузили нужный контент, картинки, настроили форму связи. Представьте, что такой сайт может приносить до 1000 посещений в день.
Сейчас сайт находится на тестовом домене, который выдается пользователям сервиса по умолчанию. Использовать домен можно для демонстрации сайта в интернете, но для продвижения такой вариант совсем не подойдет.
Для участников данного курса у нас есть предложение: при оплате конструктора на 1 месяц вы получите домен в зонах .ru и .рф всего за 99 рублей, а при оплате на год домен достанется вам бесплатно.
Смотреть видеоурок
Заключение
В этом уроке мы поговорили о прототипировании, рассмотрели основные блоки продающего лендинга, а также сделали полноценный сайт из шаблона конструктора. В следующем уроке мы расширим инструментарий и поговорим об основах дизайна и копирайтинга, которые помогут вам сделать сайт более презентабельным и интересным. До встречи!