Дизайн сторінки продажів

Зараз Інфобізнес розвивається стрімкими темпами, і з`являється все більше і більше продають сторінок. Кожен намагається зробити дизайн сторінки продажів найбільш оригінальним і неповторним. Таким, щоб він запам`ятався відвідувачеві і давав якомога більше конверсії продажів. У цьому уроці я пропоную вам подивитися якими способами можна красиво оформити сторінку продажів. А зокрема, ми розглянемо дизайн роздільників між блоками. Щоб ви розуміли що таке блоки - це це частини вашої продає сторінки з одним загальним змістом (про як висловився # 128578; ). Тобто блок з вигодами, блок з інформацією про автора і так далі.

Різноманітні дизайни роздільників доступні нижче:

Подивитися прімерСкачать

У свій час було популярно робити одностранічнікі з роздільником у вигляді діагоналі. Щоб зробити подвійну діагональ, ми будемо використовувати псевдо-елементи:

12345678910111213141516171819202122232425262728293031

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-}

Щоб зробити «парканчик» (або як це ще назвати :)), потрібно застосовувати лінійний градієнт:

Відео: БІЗНЕС СООБЩЕСТВО ВКОНТАКТЕ - Як Просувати? SMM, Продажі Групи в ВК, Вікі-сторінки

1234567891011121314151617

.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 нам потрібно задати властивість, яке буде спочатку ховати перекриває шар:

Відео: Сторінка в контакті. Як оформити? продає сторінка

123456789101112131415161718192021222324252627282930313233343536373839404142434445

.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 (наприклад, для того щоб зробити великі трикутники):

123	="BigTriangleColor" xmlns="Http://w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="None"gt;="M0 0 L50 100 L100 0 Z" /gt;lt;/svggt;

висновок

Дизайн змінюється дуже швидко. Здається ще тільки вчора у всіх були прості білі одностранічнікі, а вже сьогодні роздільники у вигляді діагоналі. Якщо вам щось сподобалося - сміливо можете брати і використати на своїй продає сторінці.