Главное Свежее Вакансии Образование
Выбор редакции:
44 487 37 В избр. Сохранено
Авторизуйтесь
Вход с паролем

​12 классических блоков лендинга. Структура и функционал

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

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

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

Мы описали блоки по функциональным возможностям, а не по контенту. В других обзорах вы можете встретить деление блоков на “отзывы”, “снятие возражений”, “УТП”. Давайте условимся, что нужно разделять содержимое (контент) и форму, в которую его можно упаковать. Мы говорим именно о форме.

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

Шапка лендинга. Блок первой зоны.

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

b_55cdd82d20465.jpg

Лендинг https://www.happn.com/

b_55cdd94e4b7a4.jpg

Лендинг https://deliveroo.co.uk/

CTA-блок полной ширины (растяжка)

Call-to-Action — призыв к действию может появляться на странице несколько раз, а может быть выделен в отдельный полноценный блок, как в данных случаях:

b_55cdd9b291ba9.jpg

Лендинг https://www.crowdyhouse.com/

b_55cdd9cd040b9.jpg

Лендинг https://www.treatwell.com/

Карусель

Блок представляет возможность закольцевать любой визуальный или текстовый контент: от изображений товара до отзывов.

b_55cdda0e9ea63.jpg

Лендинг https://www.hellofresh.co.uk/

b_55cdda218a5e2.jpg

Лендинг https://www.outfittery.de/

Текстовый блок

Блок для разного типа контента: от функционала вашего предложения до отзывов. Текст может быть в колонках и сопровождаться картинкой.

b_55cdda703fd9a.jpg

Лендинг http://www.acast.com/

b_55cdda9e99878.jpg

Лендинг https://developer.similarweb.com/

Галерея

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

b_55cddadb4ba35.jpg

Лендинг http://www.deliveryhero.com/

b_55cddaff56da1.jpg

Лендинг http://www.smadex.com/

Таймер

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

b_55cddb728f420.jpg

Лендинг https://www.algolia.com/

b_55cddb5f5215f.jpg

Лендинг https://www.sinch.com/

Тарифы

Возможность сравнить разные версии продукта и показать преимущества разной цены.

b_55cddb8c5e384.jpg

Лендинг https://openclassrooms.com/

b_55cddba0bd8af.jpg

Лендинг http://mailtrack.io/

Список с буллитами

В качестве буллитов как правило выступают схематичные картинки. Способ быстро и кратко подать информацию и подчеркнуть детали.

b_55cddbb759cb6.jpg

Лендинг https://www.marfeel.com/

b_55cddbc52e073.jpg

Лендинг http://8fit.com/

Цифры

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

b_55cddbe08582f.jpg

Лендинг http://www.bboxx.co.uk/

Видео

Может занимать всю ширину страницы или только ее часть.

b_55cddbff53c55.jpg

Лендинг http://www.quiver.net/

b_55cddbf412789.jpg

Лендинг http://kantox.com/

Карта

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

b_55cddc3772981.jpg

Лендинг https://maptia.com/

b_55cddc4d35437.jpg

Лендинг https://www.3dhubs.com/

b_55cddc56aaffe.jpg

Лендинг https://laruchequiditoui.fr

Футер

Важный функциональный элемент без которого лендинг не завершен. Место для Last-Minute-Chance CTA.

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

Можно использовать для размещения логотипов партнеров и спонсоров. Это повышает доверие, про которое вся третья часть лендинга.

b_55cddc7d43aad.jpg

Лендинг http://goocreate.com/

b_55cddd0d1f638.jpg

Лендинг https://www.volumental.com/

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
AutoCoder
Автоматическое программирование для Wordpress
Михаил Грибов
Это Ваше видение набор блоков лендинга или Вы проанализировали существующие и сгруппировали?
Ответить
DreamFab
Услуги по развитию индивидуальных предпринимателей
Григорий Ситнин
Проанализировали и выделили наиболее часто используемые формы блоков.
Ответить
AutoCoder
Автоматическое программирование для Wordpress
Михаил Грибов
Надо было еще добавить к какому из трех типов согласно "анатомии ленгдинга" каждый из приведенных блоков по-Вашему должен относиться:)
Ответить
DreamFab
Услуги по развитию индивидуальных предпринимателей
Григорий Ситнин
Согласен с вами. Либо добавим, либо сделаем ещё одну статью.
Ответить
4devs
Разработка и поддержка проектов на Symfony 2
Андрей 22153
интересно было бы как часто встречаются, те или другие блоки. К примеру в 100 из 1000.
Ответить
Carrot quest
Платформа общения и маркетинга с пользователями
Илья Фадеев
Я жду когда кто-нибудь придумает что-то новое. Так все похожи друг на друга.
Ответить
HellsHamsters
Команда разрабатывающая технологические проекты
Антон Пискунов
А зачем множить энтропию если и так работает?
Ответить
LanguageBoost
Онлайн сервис для изучающих иностранный язык
Tihiro 17917
Да, да, как раз тоже хотела написать, что это ужас что творится. Открываешь любой сайт, а там одно и то же - большая размытая фотка улыбающихся людей, потом примитивные глупые плоские иконки (иконка с бумажным самолетиком обязательна), потом самодовольные лица фаундеров (при общей команде в 20 человек).
Вот доколе??
Ответить
Kirill Viktorovi4
Забыли добавить ракету в список заезженных пикт.
Ответить
LanguageBoost
Онлайн сервис для изучающих иностранный язык
Tihiro 17917
Ракета, точно!
Эта ракета уж так намозолила глаза, просто ужас :)
А все потому, что это стандартное представление о чем-то быстром, ускоряющем. Мы бы убрали ракету, да не знаем, чем заменить. Вроде быстрее ничего пока нет :(
Ответить
Илья Фадеев
Не множить, разнообразия хочется. Приелось.
Ответить
Илья Фадеев
Часики, приплывающие блоки, три предложения с одним выделенным...
Ответить
Денис Супрун
Пуля быстей ракеты
Ответить
LanguageBoost
Онлайн сервис для изучающих иностранный язык
Tihiro 17917
А вам слабо сделать подборку нетипичных лэндингов успешных проектов?
Ответить
Valeriya Efanova
Скриншоты любопытных лендингов мы собираем в альбоме на Facebook https://www.facebook.com/media/set/?set=a.1056422427702189.1073741827.533348113342959&;type=3 А для чего вам именно нетипичные? И как бы вы определили нетипичность? В каких категориях?
Ответить
LanguageBoost
Онлайн сервис для изучающих иностранный язык
Tihiro 17917
Потому что от типичных уже тошнит, и все сайты похожи друг на друга, как близнецы. Часто на хабре читаешь статью про какие-нибудь полезные сервисы, идешь по ссылке, потом по другой, что за фигня, вроде то же самое - чуть-чуть по оттенкам различаются, а все остальное одинаковое до жути (см. мой предыдущий коммент тут).

Вот невольно и задумываешься - что же получается, только типичные лэндинги имеют право на жизнь?
Ответить
Valeriya Efanova
Если инструмент (например лопата) хорошо работает и выполняет свои функции, нужно ли заменять ее на дрель? Ради чего? Ради оригинальности?
Вопрос "разве только типичное имеет право на жизнь" - риторический. Конечно нет. Конечно должно быть оригинальное - это часто единственный способ запомниться. Но запоминается и то, что привычно, повторяемо. Вопрос в цели. У музыкальной группы вряд ли должен быть типичный лендинг. У более консервативного товара - ближе к типичному.
Форма, о которой мы говорили в этой статье - лишь форма. Ее надо наполнять содержимым и вот тут-то, в вопросе контента, и кроются оригинальность и индивидуальность.
Ответить
LanguageBoost
Онлайн сервис для изучающих иностранный язык
Tihiro 17917
>>Конечно должно быть оригинальное - это часто единственный способ запомниться.

Вот это, по-моему, ключевой момент. Как можно выделиться среди толпы однообразных сайтов, если ваш такой же?
Ответить
ChatFirst
Автоматизируйте поддержку сотрудников с ChatFirst
Павел Осадчук
На сайт человек приходит в поиске решения своей проблемы. Если этот сайт решает его проблему, какая ему разница что он похож на сотни сайтов которые его проблемы не решают?
ИМХО только в условиях жесткой конкуренции необходимо выделятся - как например у авиабилетников. Там оптимизация "форм" и лендингов доходит до абсолюта - вымеряют (именно измерениями) каждый пиксель.
Ответить
LanguageBoost
Онлайн сервис для изучающих иностранный язык
Tihiro 17917
>>Если этот сайт решает его проблему, какая ему разница что он похож на сотни сайтов которые его проблемы не решают?

По-моему, не так.
Если этот сайт решает его проблему, ему есть разница, что он НЕ похож на соти других сайтов, решающих эту же проблему.
Мы ведь не рассматриваем уникальный случай, когда сервис или сайт является единственным в своем роде, решающим какую-то проблему?
Ответить
Callibri.ru
Сервисы прокачки маркетинга
Шкиря Иван
Разножопица же.

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

А блоки то стандартные
- Что?
- Зачем?
- Как получить?
- Почему именно тут?

А уж каким образом оно реализовано зависит от целевой аудитории, а не от того как это "принято делать"
Ответить
Valeriya Efanova
Именно об этом и речь в статье.
Ответить
365 Days of SMD
Оформление сообществ ВКонтакте за бесплатно! Новый день — новый дизайн.
andrew.nefedov 9202
где вы это старье находите)
Ответить
Valeriya Efanova
Конкретизируйте вопрос пожалуйста.
Ответить
365 Days of SMD
Оформление сообществ ВКонтакте за бесплатно! Новый день — новый дизайн.
andrew.nefedov 9202
ну в данной статье не просто классика, а уже древность.

сейчас в просторах интернета можно найти свежие креативные лендинги, которые завладевают эмоциями посетителя с первой секунды загрузки и не отпускают до совершения действия. причём всех перечисленных выше блоков может вообще не быть.
и работают такие лендинги в паре с ретаргетом, email рассылками и определением интересов посетителя по его соц.сетям и посещаемым сайтам. всё это дает возможность подстраивать контент и текст под человека. например употребить цитату из его любимого кинофильма в контексту услуги. это цепляет и человек попадает в воронку.
Ответить
Valeriya Efanova
Отлично, Андрей! Поделитесь ссылками на примеры?
Ответить
365 Days of SMD
Оформление сообществ ВКонтакте за бесплатно! Новый день — новый дизайн.
andrew.nefedov 9202
Несколько лендингов можно найти тут:
http://www.awwwards.com

А лендинги с подставкой контента под интересы пользователя работают только в связке с ретаргетом и email рассылкой + моя разработка(с точностью 100% можно определить по каким сайтам человек лазиет и вообще посещал). Такие лендинги собирают всю статистику о пользователе, даже если он отключил javascript в браузере.

Как работает механизм посадочных страниц которые я создаю для интернет магазина:
1) человек попадает на лендинг товара А
2) система определяет id пользователя в соц.сетях
3) поиск интересов и желаний пользователя в соц.сетях по ключевому слову.(задается продажниками)
Например: палка для селфи
4) система сканирует комментарии человека в группах соц.сетей.
5) если он в последнее время писал о желании приобрести один из наших ключевых товаров в соц.сети, то в блок рекомендуемых товаров подгружаются желаемые товары.
6) человек просмотрел информацию о товаре А, и увидел товар Б в блоке рекомендаций - то что он хотел и писал об этом.
7) он покупает товар Б, хотя пришел купить товар А.
Профит: бюджет сохранен, всё равно окупаем, угадывая желание.

Примерно такие вот штуки на лендингах размешаю. В основном очень сильные социальные мотеваторы.

Например если Товар А это фотик, то на лендинге будет блок с разбросанными фото по экрану, а на них изображение его и его друзей из ВКонтакте или Instagram. Типо "Сделай ещё больше классных фото с друзьями с помощью этого фотоаппарата!". (или смартфона)
Ответить
365 Days of SMD
Оформление сообществ ВКонтакте за бесплатно! Новый день — новый дизайн.
andrew.nefedov 9202
люди всё реже доверяют лендингам.
пора персонализировать посадочные страницы.
Ответить
DreamFab
Услуги по развитию индивидуальных предпринимателей
Григорий Ситнин
это да. но концепцию ещё неплохо бы было объяснить поисковым и рекламным системам ;)
Ответить
365 Days of SMD
Оформление сообществ ВКонтакте за бесплатно! Новый день — новый дизайн.
andrew.nefedov 9202
Для SEO делается статичный блок и робот хавает то что ему сказали хавать.
Ответить
DreamFab
Услуги по развитию индивидуальных предпринимателей
Григорий Ситнин
насколько мне известно, поисковики с этим довольно успешно борются. разве нет?
Ответить
365 Days of SMD
Оформление сообществ ВКонтакте за бесплатно! Новый день — новый дизайн.
andrew.nefedov 9202
используются такие приёмы, что нет. вообще не успешно.
Ответить
Yuri S Timoshenkov
Лазиет, значит, человек? )
Ответить
Александр Коротков
А накидайте ка нам креативных лендингов!
Ответить
Кинияев Фома
Люди добрые! Это я тем, которые так устали от однотипных лендингов. Дайте я угадаю - вы все связаны с web-дизайном или по работе вынуждены посещать десятки лендингов в день? Что значит "однотипный"? Так можно возмутиться и круглостью колеса! Лендинги отражают современные знания о человеческой психологии и управлении ей с точки зрения удерживания внимания. И тут всплывает факт: от человека к человеку восприятие в принципе однотипно! Я два месяца назад в большом и ну очень суръёзном интеграторе наблюдал, как начальство при помощи девочки-маркетолога и каких-то аутсорсеров пыталось осовременить свой сайт. Девочка не знала слово "лендинг", но уже отмечала, как ей нравится эта тенденция современных сайтов. говорила, какие-то они не такие, сразу видно, что модные. И притягивают! Ее никто слушать, конечно, не стал. Все хоть немного креативные и упрощающие текст начинания были зарублены самим же начальством. А лендинги не трогайте (я имею в виду только хорошие и до ужаса однотипные, как любимый однотипный бутерброд с колбасой и горчицей, всё такой же вкусный, всё такой же... работает одним словом)!
Ответить
DreamFab
Услуги по развитию индивидуальных предпринимателей
Sergey Schukin
абсолютно согласен с оценкой современной формы скрижали
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.