Создание Landing Page имеет большой спрос в последнее время и это не случайность. Продающие страницы действительно очень хорошо работают и приносят прибыль, но неправильное её создание может привести к обратному результату.
Как правильно создать продающую страницу?
Важной особенностью Landing Page является её оригинальность и красота, которые подкрепляются точным и ёмким изложением информации о продукте. Именно соблюдение всех условий позволяет достичь той необходимой конверсии, которая задумывалась в создании продающей страницы.
Сегодня я хотел бы поговорить о том — как же создать красивую продающую страницу. Хотелось бы отметить, что любая Landing Page должна иметь разделение на слайды (этапы), чтобы последовательно представить всю информацию: компания, продукт, выгода, отзывы, заказать (к примеру). Важно обратить внимание на оформление переходов между блоками, чтобы пользователь понимал что к чему относится.
В данном примере оформления Landing Page будут представлены самые разнообразные разделители, среди которых можно выбрать самый подходящий именно для вас. Помимо этого, в примерах будут представлены различные варианты оформления блоков продающей страницы, а также красивые иконки, которые позволяют пользователю проще ориентироваться и получать удовольствие от просмотра.
Как создать Landing Page
Какие только одностраничники мы с вами не видели — все были краше другого. Разделители на них были самыми разнообразными, которые только можно было придумать, чтобы подчеркнуть уникальность своей продающей страницы. Так как же выделится среди других?
В примере можно посмотреть достаточно большую страницу с самыми разными разделителями. Создание их не требует ни одной картинки — только css3 и SVG-иконки, что означает очень ёмкий вес страницы и отсутствие нагрузки на сервер.
Для создания эффекта «Точки», нам необходимо воспользоваться псевдо-классами:
|
1 2 3 4 5 6 7 8 9 10 11 |
.ss-style-dots::before { bottom: 20px; width: 14px; height: 14px; border-radius: 50%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #2072a7; box-shadow: 30px 0 #2072a7, -30px 0 #2072a7; } |
Для создания эффекта «Шашки» необходимо применить линейный градиент:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.ss-style-boxes { padding-top: 4em; padding-bottom: 13em; } .ss-style-boxes::before { bottom: 0; left: 0; width: 100%; height: 50px; background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3500db), color-stop(0.5, #2980b9)); background-image: linear-gradient(to right, #3500db 50%, #2312b9 50%); -webkit-background-size: 130px 100%; background-size: 130px 100%; } |
Чтобы спрятать лишние слои, которые могут испортить вид нашей страницы — необходимо воспользоваться свойствами CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.pageload-overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; } .pageload-overlay.show { visibility: visible; } .pageload-overlay svg { position: absolute; top: 0; left: 0; } .pageload-overlay svg path { fill: #fff; } .pageload-overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; } .pageload-overlay.show { visibility: visible; } .pageload-overlay svg { position: absolute; top: 0; left: 0; } .pageload-overlay svg path { fill: #fff; } |
Как я уже говорил — в некоторых примерах используется ещё и SVG, одним из них является вот такой эффект загнутых углов:
HTML-код эффекта, с использованием SVG имеет такой формат:
|
1 |
<svg id="slit" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"> |
И соответствующие ему CSS-свойства:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.ss-style-slit { padding-top: 5em; } .ss-style-slit::before, .ss-style-slit::after { width: 50.5%; width: -webkit-calc(50% + 10px); width: -moz-calc(50% + 10px); width: calc(50% + 10px); height: 160px; background: #2980b9; top: -160px; } .ss-style-slit::before { left: -20px; -webkit-transform: skewX(10deg); transform: skewX(10deg); box-shadow: -10px -20px #3192d3; } .ss-style-slit::after { right: -20px; -webkit-transform: skewX(-10deg); transform: skewX(-10deg); box-shadow: 10px -20px #3192d3; } |
Хотелось бы отметить то, что данный пример является адаптивным — и это очень важно. Многие продающие страницы не имеют адаптивности и существенно проигрывают своим конкурентом, которые продумали этот момент. Следует понимать, что достаточно крупная часть пользователей сёрфит в интернете исключительно с планшетов или мобильных устройств.
Вывод
Таким образом, можно создавать оригинальные переходы блоков и оформлять страницы так, чтобы они запоминались пользователю и он возвращался к вашей продающей странице снова. Любым примером вы можете воспользоваться уже сейчас, чтобы создать действительно крутую Landing Page, которая будет приносить вам прибыль и радовать глаз пользователей.
Как вы уже заметили — дизайн меняется с каждым днём и то, что казалось нам достойным уже сегодня перекрывается свежими тенденциями в веб-дизайне. При создании такого рода страниц следует понимать это и быть в курсе новинок, что позволит создавать красивые продающие страницы.
