Бъдещето на уеб хостинга е тук!

Веднага щом вашият уебсайт достигне 15.000 3 посетители на месец за период от 90 месеца (XNUMX дни), вашият хостинг автоматично става безплатен за цял живот... както и всички включени Premium WordPress плъгини.
N

Несравним управляван хостинг

N

Elementor, Divi AI, AIOSEO и др

N

Имейл адрес на PayPal за партньори

N

Brouavo Super Marketing Plugin

N

Стартирайте сайта си за минути

N

Първокласна 24/7 експертна поддръжка

N

30 дни гаранция за връщане на парите

Открийте предимствата

Включено във всички пакети: Elementor Pro – Divi Builder и Divi Ai, Преводателпрес Про, Всичко в едно SEO професионалист, Защитник Професионален, Форминатор Про, Смъш Про, Snapshot Pro, Платен абонамент за членове Pro, Hummingbird Pro, Хъстъл Про, Плъгинът Brouavo Super Marketing.

Как да създадем страница стил на стил 80 с Elementor

by Блеър Jersyer | Elementor, WordPress инстркцията

Дизайн от 80-те - обичаме го! С всички тези геометрични фигури, пространствени фонове и неонови светлинни ефекти, нашата страница за целево събитие (коледни партита) не може да бъде по-лъчезарна! Нека да ни покажем как да го направим.

Свалете лентите за глава, включете неоновите си светлини и поставете Tron във вашия видеорекордер ... годините на 80 се завръщат!

Като дизайнер винаги съм имал меко място за дизайна от 80-те, за което никой не говори. С всички тези геометрични фигури, тонове модели, космически фонове с онези евтини неонови ефекти (това трябва да върне приятни спомени).

Всъщност можете да го видите навсякъде. От „Strangers Things“ от Netflix, MineCraft или Muse, които току-що издадоха албум с вкус от 80-те - или дори римейка на Tron.

Така че защо не се възползвате от тази тенденция и не ви покажем как да я приложите в целева страница, създадена с Elementor ?

Това не е просто теоретичен урок. Взехме някои елементи за текущия период на отстъпка (Черен петък), за да ви дадем инструменти за подготовка за бъдещите ви събития.

Секция за отваряне

Нашата начална секция е секция за герои. Първото нещо, което трябва да се отбележи тук, е заглавието. Препоръчвам да положите много усилия в тази област, защото това е първото ви нещо посетител ще види.
Помислете за точното послание, което възнамерявате да предадете. Ако заглавието ви е голямо и ясно, ще привлечете вниманието на хората. Този първи раздел също трябва да насърчи потребителите да превъртат надолу и да разгледат останалата част от страницата.

Неонов ефект

Ефект неон черен петък elementor.jpg

В центъра на композицията поставих логото, съобщението и бутона.

Можете да видите, че най-важното съобщение е написано в „неонова светлина“. За да получите този неонов външен вид, трябва да добавите CSS към вашия дизайн. CSS ще добави много розова сянка към текста. Това е цялата работа.

Затова трябва да добавите приспособление за заглавка, да промените размера на избрания шрифт, за да заблести и да зададете цвета на бял.

След това отворете раздела Advanced и го поставете в раздела персонализиран CSS, добавете този код:

selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }

Ако искате да използвате различен нюанс до розовото, просто променете номера на цвета след знака за паунда. Това е всичко.

Вертикално заглавие

Друг интересен аспект на този дизайн се появява до буквите "FRI", като прикрепената към него година се появява вертикално (90 градуса).

За да постигнете този външен вид, трябва да добавите джаджа за вътрешен раздел. Това се прави за прилагане на вертикалния ефект само върху една колона.

След като добавите вътрешната секция, добавете джаджа за заглавие към всяка колона.

Оформете текста си и след това отворете разширения раздел на втората колона (този, който искате да завъртите) и в персонализирания CSS раздел напишете този код:

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

80 ретро фон

След като приключите с работата по основния пост, започнете да работите на заден план, за да дадете тласък на текста и да направите ретро науката от 80-те да изглежда реалност. Тук добавих изображение, проектирано във Photoshop, и го използвах като фон за герой.
В този дизайн фонът се отличава с геометрична решетка, напомняща на Tron с докосване на палми, наклонени вляво и основен градиент от синьо-лилаво-розово, за да се постигне това ретро усещане. Има и някои приятни щрихи като „DeLorean DMC-12“ (вероятно ще го разпознаете в Back to the Future).
Автомобилът, както и снимащите звезди, са насочени към основния текст на нашия раздел, подчертавайки основното ни послание.

Раздел функции

информационно поле elementor.gif
Когато проектирате целева страница, трябва да помислите за връзките между всеки раздел. Това е по-сложна задача, когато става въпрос за модерен дизайн като ретро 80-те.
Така че, след като проектирате невероятна първа секция и вдигнете лентата, трябва да поддържате високото ниво и да поддържате същата тема на дизайна, като същевременно разглеждате всеки раздел като композиция сама по себе си.

Дизайнът

В този раздел проектирах по-тъмен вид на „неизвестни обекти“, докато „обхождаме“ страницата. Тук можете да видите заглавие, 3 куршума и бутон. За да създам този плаващ 3D ефект, използвах малко Photoshop в комбинация с настройките на Flip-box отElementor.

Инсталиран във Photoshop

Така че първото нещо, което направих, беше да създам цялата сцена във Photoshop, за да видя как ще изглежда всичко, преди да започна да го изграждам. В заглавието можете да видите неоновия облик от преди, а под него добавих 3 триъгълника с икони и заглавие (кръговете).
Добавих синьо-лилаво-розов градиент към всеки триъгълник. По-горе, линеен модел му придава телевизионен поглед от 80-те години и се размазва отзад, за да създаде искрящ научно-фантастичен вид.
Иконите също придобиват неонов облик, както и заглавието в долната част на триъгълника. Добавете плаващ ефект с получер шрифт. Фонът има опушен, облачен, тъмен ефект със същия модел на линия, използван за триъгълника.
За 3D анимация триъгълниците ще имат прозрачен фон. Това означава, че текстът на гърба ще се показва, когато не е покрит. Затова добавих малко черен дим към страните на триъгълника, за да накарам одеялото да се слее и пак да покрие гърба.
Така че в основата си има три слоя за вграждане в редактора: фон, икона и заглавие.

Изграждане на живо

В редактора добавих приспособлението flip-box. В раздела за предно съдържание избрах изображение като графичен елемент и добавих заглавието. В раздела Фон, в Цвят, промених цвета на прозрачен и добавих триъгълника, който проектирах в раздела за изображение, след което промених позицията, така че да пасва идеално .
След това в задния раздел направих същото, но вместо да добавя заглавие, добавих текста. За да преминете към раздела с настройки. Тук си поиграх с височината на кутията. Използвах единицата VH, защото тя е относителна единица, която ще промени изображението спрямо екрана като посетител ще използвам.
Това го прави по-отзивчив. В частта за ефектите запазих ефекта Flip, промених посоката наляво и активирах 3D дълбочината, за да постигна този невероятен 3D ефект.

CTA

Цялата композиция тук е насочена към бутона (защото това, което искате, е потребителят да щракне върху бутона). Тук можете да видите, че бутонът не е удебелен и „в лицето ви“, но се слива добре с опушения фон с малко блясък около него. Но когато преминете през него, се появява розовият цвят.

Секция за критиците

списък с мнения elementor.jpg
Ако потребителят превърти до третия раздел - това означава, че правите нещо правилно. И така, след като говорим за продукта и неговото учудване, сега е моментът друга страна да се произнесе.

Дизайнът

В този раздел имаме джаджа за коментари на радикален геометричен фон с неоново заглавие. Фонът е проектиран във Photoshop и след това е поставен на фона на раздела като фиксиран фон, за да се създаде ефект на превъртане при нанасяне.
Исках да направя този раздел да изглежда „зад кулисите“, така че когато превъртите надолу, да сте изложени на него.

Раздел "Таблица на цените"

цена диаграма elementor.jpg
Този раздел е раздел Таблица за ценообразуване . Тук можете да видите всички елементи, които могат да подкрепят продажбата. Заглавието, броенето и разбира се - таблицата с цените.
Това е финалната линия на целевата страница. Следователно, ако вашият потребител не кликне, нещо се обърка.

Дизайнът

Дизайнът в тази секция има по-скоро галактически привкус от 80-те. Фонът тук е редактиран във Photoshop, което му придава ярък лилав цвят на репички и се откроява от съществуващия преди това черно-черен фон, което му придава блясък накрая.
Под заглавката и лозунга има брояч, който показва оставащото време до края на продажбата. Тук използвах просторен шрифт, наречен "space mono", който добавих чрез опцията за персонализиран шрифт.
В таблицата с цени по-долу всяка таблица има светло черен фон, придаващ й вид „плаващ в пространството“. Когато задържите курсора на мишката върху него, фонът потъмнява и около него има сияние като фокусна точка, която ви насочва да прочетете текста вътре.
Когато преместите курсора на мишката върху бутона, бутонът отново променя цвета си. След като приключите с четенето на информацията за нашите страхотни снимки,

Вземете този напълно страхотен модел

Шаблонът, показан в този урок, вече е наличен в библиотеката Elementor. Така че можете да го използвате с едно кликване.

аватар на автора
Блеър Jersyer
Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.
Вижте пълната биография

Коментирай

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са маркирани *

Този сайт използва Akismet за намаляване на нежеланите. Научете повече за това как се обработват вашите данни за обратна връзка.

Тя ПИН на Pinterest