12 классических блоков успешного Landing page. Структура и функционал.

14-09-2015, 11:04

 

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

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

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

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

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

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

 

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

 

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

 

b_55cdda9e99878.jpg

 

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

Галерея

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

 

b_55cddadb4ba35.jpg

 

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

 

b_55cddaff56da1.jpg

 

Лендинг https://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

 

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

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

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

 

b_55cddbb759cb6.jpg

 

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

 

b_55cddbc52e073.jpg

 

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

Цифры

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

 

b_55cddbe08582f.jpg

 

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

Видео

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

 

b_55cddbff53c55.jpg

 

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

 

b_55cddbf412789.jpg

 

Лендинг https://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 должен быть один).

МРазработка сайтов Киев и Украина

E-mail рассылка