[fusion_builder_container hundred_percent=»no» equal_height_columns=»no» menu_anchor=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» class=»» id=»» background_color=»» background_image=»» background_position=»center center» background_repeat=»no-repeat» fade=»no» background_parallax=»none» parallax_speed=»0.3″ video_mp4=»» video_webm=»» video_ogv=»» video_url=»» video_aspect_ratio=»16:9″ video_loop=»yes» video_mute=»yes» overlay_color=»» video_preview_image=»» border_color=»» border_style=»solid» padding_top=»» padding_bottom=»» padding_left=»» padding_right=»» type=»legacy»][fusion_builder_row][fusion_builder_column type=»1_1″ layout=»1_1″ background_position=»left top» background_color=»» border_color=»» border_style=»solid» border_position=»all» spacing=»yes» background_image=»» background_repeat=»no-repeat» padding_top=»» padding_right=»» padding_bottom=»» padding_left=»» margin_top=»0px» margin_bottom=»0px» class=»» id=»» animation_type=»» animation_speed=»0.3″ animation_direction=»left» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» center_content=»no» last=»true» min_height=»» hover_type=»none» link=»» border_sizes_top=»» border_sizes_bottom=»» border_sizes_left=»» border_sizes_right=»» first=»true»][fusion_text columns=»» column_min_width=»» column_spacing=»» rule_style=»default» rule_size=»» rule_color=»» content_alignment_medium=»» content_alignment_small=»» content_alignment=»» hide_on_mobile=»small-visibility,medium-visibility,large-visibility» sticky_display=»normal,sticky» class=»» id=»» font_size=»» fusion_font_family_text_font=»» fusion_font_variant_text_font=»» line_height=»» letter_spacing=»» text_color=»» animation_type=»» animation_direction=»left» animation_speed=»0.3″ animation_offset=»»]
Из каких частей можно собрать продающий лендинг и какими возможностями обладает каждый блок? spark.ru систематизировал знания о внутренней архитектуре посадочной страницы.
Если вы хоть раз пытались создать посадочную страницу, то рано или поздно упирались в вопрос ее структуры. При огромном выборе конструкторов кажется, что создать лендинг проще простого. Нужно просто заменить предустановленные картинки и тексты своими и вуаля — все готово.
Эта мнимая легкость. Прежде, чем сверстать лендинг самостоятельно или взять готовый шаблон на сайте, изучите этот список доступных вам вариантов блоков.
Мы описали блоки по функциональным возможностям, а не по контенту. В других обзорах вы можете встретить деление блоков на “отзывы”, “снятие возражений”, “УТП”. Давайте условимся, что нужно разделять содержимое (контент) и форму, в которую его можно упаковать. Мы говорим именно о форме.
Использовать непременно все эти блоки в одном лендинге нужно далеко не всегда. Порядок размещения блоков должен определяться не вашими эстетическими или иными пристрастиями, а ходом мысли вашего персонажа. Об этом — в следующих публикациях, а пока внимание на блоки.
Шапка лендинга. Блок первой зоны
Как правило здесь находятся логотип, заголовок и подзаголовок, которые кратко и емко передают самую суть и выгоду вашего предложения.
Лендинг https://www.happn.com/
Лендинг https://deliveroo.co.uk/
CTA-блок полной ширины (растяжка)
Call-to-Action — призыв к действию может появляться на странице несколько раз, а может быть выделен в отдельный полноценный блок, как в данных случаях:
Лендинг https://www.crowdyhouse.com/
Лендинг https://www.treatwell.com/
Карусель
Блок представляет возможность закольцевать любой визуальный или текстовый контент: от изображений товара до отзывов.
Лендинг https://www.hellofresh.co.uk/
Лендинг https://www.outfittery.de/
Текстовый блок
Блок для разного типа контента: от функционала вашего предложения до отзывов. Текст может быть в колонках и сопровождаться картинкой.
Лендинг http://www.acast.com/
Лендинг https://developer.similarweb.com/
Галерея
Коллекция фотографий: места, где можно найти ваш продукт, фотографии разработчиков или пользователей.
Лендинг http://www.deliveryhero.com/
Лендинг http://www.smadex.com/
Таймер
Можно отсчитывать не только секунды до окончания скидки, но и число благодарных пользователей или достигнутых показателей.
Лендинг https://www.algolia.com/
Лендинг https://www.sinch.com/
Тарифы
Возможность сравнить разные версии продукта и показать преимущества разной цены.
Лендинг https://openclassrooms.com/
Лендинг http://mailtrack.io/
Список с буллитами
В качестве буллитов как правило выступают схематичные картинки. Способ быстро и кратко подать информацию и подчеркнуть детали.
Лендинг https://www.marfeel.com/
Лендинг http://8fit.com/
Цифры
Отличный блок для наглядного представления любой информации, которую можно сравнить и измерить количественно.
Лендинг http://www.bboxx.co.uk/
Видео
Может занимать всю ширину страницы или только ее часть.
Лендинг http://www.quiver.net/
Лендинг http://kantox.com/
Карта
Это не просто указание на карте тех мест, где продается ваш продукт или находится ваш офис. Это способ показать картину вашего мира.
Лендинг https://maptia.com/
Лендинг https://www.3dhubs.com/
Лендинг https://laruchequiditoui.fr
Футер
Важный функциональный элемент, без которого лендинг не завершен. Место для Last-Minute-Chance CTA.
В него часто помещают ссылки на страницы сайта, профили в соцсетях и другую контактную информацию. Мы настоятельно не рекомендуем этого делать (CTA должен быть один).
Можно использовать для размещения логотипов партнеров и спонсоров. Это повышает доверие, про которое вся третья часть лендинга.
Лендинг http://goocreate.com/
Лендинг https://www.volumental.com/
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
Подскажите, какие доработки на сайте lpgenius.ru могут дать быстрый результат? Спасибо.