Главная | Блог | Журнал | Анатомия лендинга: основные блоки и их задачи

Анатомия лендинга: основные блоки и их задачи

29 декабря 2021

16 мин на чтение

12 158

Craftum

Конструктор сайтов

Содержание

Нет времени читать?

Лендинг – это один из наиболее удобных способов представить свой бизнес в интернете. Такой ресурс можно запустить в кратчайшие сроки.

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

Calltouch

Привлекайте, конвертируйте
и анализируйте ваших клиентов

Платформа омниканального маркетинга

Подробнее

Шаблоны vs Самописный сайт

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

Шаблон – это инструмент будущего, новый тренд, позволяющий создать такой сайт, который сможет конкурировать с профессионально разработанным лендингом. Из основных преимуществ можно отметить:

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

Один из таких функциональных конструкторов – Craftum. В него входит большая библиотека разнообразных шаблонов, которые можно подстроить под себя, а если этого недостаточно – модернизировать их, добавив новые блоки и кастомизируя их. С помощью функции «Дизайн блок» создание сайта сводится к простому перетаскиванию элементов.

Примеры хороших лендингов

Вот несколько удачных сайтов, которые можно использовать в качестве примера при создании собственного лендинга в конструкторе.

Первый из них – лендинг от СБЕРа. Обратите внимание на то, как подана информация: на первом экране мы видим мощный заголовок, по которому сразу понятно, что здесь происходит. На нем же подталкивают записаться на мероприятие и стать участником. Если пользователь пока не уверен, что хочет подать заявку, его побуждают сделать это в последующих блоках. Например, во втором объясняя, зачем это нужно, а в третьем показывая те категории, кому мероприятие будет интересно.

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

Следующий лендинг оформлен в одном из трендовых стилей, который стал популярен с приходом ночной темы в iPhone и Android. Здесь так же, как и в предыдущем примере, используется крупная типографика с отличным гротеском, подходящим под выбранную тематику. Все блоки построены таким образом, чтобы клиент захотел записаться на вебинар. Каждый из них – это этап прогрева пользователя. В них рассказывается о преимуществах, показана формула успеха и, конечно же, есть дата предстоящей лекции. Такой подход позволяет «зацепить» пользователей и направить их на запись.

И еще один пример – лендинг компании, которая работает со звуковым оборудованием для фоновой музыки. Оформлен он уже немного иначе: вся графика представлена в виде абстракции, отлично иллюстрирующей звук. На первом экране дан крупный заголовок, поясняющий, чем занимается компания. Также на нем есть интересно оформленная кнопка «Включить эмоции», ри клике на которую запускается звуковое сопровождение. Последующие блоки рассказывают о компании более детально, демонстрируя ее преимущества и сообщая о том, чем она может помочь.

Как видите, конструкторы позволяют создавать практически любые варианты оформления того или иного блока, что раньше без знания кода сделать было невозможно.

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

Обязательные блоки лендинга

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

главный экран;
преимущества;
о компании;
этапы работы;
призыв к действию;
отзывы;
контакты.

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

Главный экран

Основной блок, без которого не обходится ни один лендинг. На этом экране чаще всего расположена офферная конструкция, включающий в себя заголовок, подзаголовок и кнопку.

Заголовок, как правило, дает посетителю сайта ответ на вопрос «Что здесь происходит?». Например, если это компания, занимающаяся установкой сложных систем, то заголовок может выглядеть так: «Устанавливаем сложные системы для дома и бизнеса». Подзаголовок же раскрывает суть заголовка: «Мы выполняем монтаж систем и проводим техобслуживание видеонаблюдения, контроля доступа, домофонов».

Кнопка – важнейший элемент, который должен подталкивать пользователя к целевому действию, для которого собственно и создан лендинг. Например, «Заказать консультацию», «Посмотреть каталог» и так далее. Иногда к кнопке также приписывается сопроводительный текст со спецпредложением: «Оставьте заявку и получите скидку 10% на все виды услуг». По клику обычно открывается всплывающая форма, в которой пользователь может оставить свои данные для обратной связи. Также кнопка может вести на другую страницу, допустим, в каталог товаров.

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

Примеры нескольких главных страниц:

Либо вот так:

И еще один пример:

Основная задача первого экрана – рассказать пользователю, что происходит на сайте и какую пользу он может получить.

Преимущества

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

Например, рассказать о преимуществах ремонта холодильников можно так:

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

Все эти шаблоны в конструкторе Craftum можно легко модернизировать, например, добавить в них фотографии, различные графические элементы и даже HTML-код, позволяющий дополнить функционал: добавить видео, отобразить уже добавленные элементы в другом ключе, задать анимацию для заголовка и многое другое.

О компании

С помощью данного блока можно познакомить пользователя с вашим бизнесом, показать направления работы и экспертность. Раздел может быть расположен как после первого экрана, так и в середине страницы.

Не стоит писать много – объемный текст никто не будет читать. В целом, тексты на сайтах мало кто читает, поэтому следует минимизировать их количество. Но если все-таки хочется добавить больше информации, то такой контент следует красиво оформить.

Выглядеть это может так:

Также можно указать в цифрах, чего добилась компания за время существования:

Этапы работы

Еще один из распространенных блоков, используемых на продающем лендинге. Он позволяет пользователям поближе познакомиться услугами компании и порядком их получения. Например, если клиент пришел за строительством нового дома, то ему будет интересно узнать об этапах работ. Этот блок позволяет снять страхи и возражения клиента, в процессе детального разбора ваших услуг.

Выглядеть это может так:

Также блок «Этапы работы» может быть представлен немного в формате «Как заказать». В таком случае дается пошаговая инструкция для взаимодействия с компанией.

Призыв к действию

Этот блок позволяет подтолкнуть пользователя к действию – покупке, звонку, заявке. Как правило, он размещается в середине или конце лендинга. Но чаще всего в конце, когда пользователь пройдет по всем блокам и будет готов сделать выбор – призыв к действию в таком случае будет уместным и своевременным.

Например, это может быть призыв получить консультацию:

Либо оставить заявку и получить взамен скидку:

Также это может выглядеть как форма записи на получение услуги:

Отзывы

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

В большинстве случаев этот блок выглядит одинаково:

Но никто не запрещает креативить и в таком простом блоке, например заменив заголовок:

Контакты

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

Выглядеть это блок может так:

Или так:

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

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

С конструктором Craftum ваш сайт будет выглядеть органично, стильно и цельно, так как все шаблоны проработаны опытными дизайнерами. Отредактировав их под себя, вы получите эффективный лендинг, способный приводить новых клиентов.

Предложения от наших партнеров