Exore LTD » CSS3 » Дизайн страницы продаж — оформляем страницу продаж
Лого SiteHere.ru

Август 15, 2021 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Дизайн страницы продаж — оформляем страницу продаж

Дизайн страницы продаж

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

Узнай подробнее о профессии UX/UI дизайнер, пройди обучение и создавай крутые продающие страницы!

В этом уроке я предлагаю вам посмотреть какими способами можно красиво оформить страницу продаж. А частности, мы рассмотрим дизайн разделителей между блоками. Чтобы вы понимали что такое блоки — это это части вашей продающей страницы с одним общим смыслом (о как выразился 🙂 ). То есть блок с выгодами, блок с информацией об авторе и так далее.

Дизайн страницы продаж

Разнообразные дизайны разделителей доступны ниже:

Посмотреть примерСкачать

Одно время было популярно делать одностраничники с разделителем в виде диагонали. Чтобы сделать двойную диагональ, мы будем использовать псевдо-элементы:

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

section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
 
.ss-style-doublediagonal {
    z-index: 1;
    padding-top: 6em;
    background: #2072a7;
}
 
.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
    transform: rotate(-2deg);
    transform-origin: 0 0;
}
 
.ss-style-doublediagonal::before {
    height: 50%;
    background: #116094;
    transform: rotate(-3deg);
    transform-origin: 3% 0;
}

Чтобы сделать «заборчик» (или как это еще назвать :)), нужно применять линейный градиент:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.ss-style-inczigzag::before,
.ss-style-inczigzag::after {
    left: 0;
    width: 100%;
    height: 50px;
    background-size: 100px 100%;
}
 
.ss-style-inczigzag::before {
    top: 0;
    background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
}
 
.ss-style-inczigzag::after {
    bottom: 0;
    background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%);
}

Также в 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 (например, для того чтобы сделать большие треугольники):

1
2
3

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 0 L50 100 L100 0 Z" />
</svg>


Вывод

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


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

3 комментария к записи
  • Елена

    Спасибо за очень интересную и полезную информацию.

     
    Ответить
  • fotodizart

    Отличный мануал, спасибо за интересную информацию. 😎

     
    Ответить
  • TRADING

    Спасибо, подхватил один скрипт у Вас!

     
    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *