Cum de a crea o pagină de stil stil 80 cu Elementor

Designul anilor 80 - ne place! Cu toate aceste forme geometrice, fundaluri spațiale și efecte de lumină neon, pagina noastră de destinație pentru un eveniment special (petreceri de Crăciun) nu ar putea fi mai strălucitoare! Să ne arătăm cum să o facem.

Îndepărtați-vă benzile, porniți luminile de neon și introduceți Tron în videograful dvs. ... anii 80 au revenit!

În calitate de designer, am avut întotdeauna un punct slab pentru designul anilor 80 despre care nu vorbește nimeni. Cu toate aceste forme geometrice, tone de modele, fundaluri spațiale cu acele efecte ieftine de neon (ar trebui să aducă amintiri plăcute).

De fapt, îl puteți vedea peste tot. De la „Strangers Things” de la Netflix, MineCraft sau Muse, care tocmai au lansat un album cu aroma anilor 80 - sau chiar remake-ul lui Tron.

Deci, de ce să nu profitați de această tendință și să vă arătați cum să o implementați într-o pagină de destinație creată cu Elementor ?

Nu este doar un tutorial teoretic. Am luat câteva elemente pentru perioada actuală de reducere (Black Friday), pentru a vă oferi instrumente de pregătire pentru evenimentele viitoare.

Secțiunea de deschidere

Secțiunea noastră de deschidere este o secțiune de eroi. Primul lucru de remarcat aici este titlul. Vă recomand să depuneți mult efort în acest domeniu pentru că este primul lucru pe care îl aveți vizitator vom vedea.

Gândiți-vă la mesajul exact pe care intenționați să-l transmiteți. Dacă titlul dvs. este mare și clar, va atrage atenția oamenilor. Această primă secțiune ar trebui, de asemenea, să încurajeze utilizatorii să deruleze în jos și să navigheze în restul paginii.

Efect neon

În centrul compoziției, am așezat sigla, mesajul și butonul.

Puteți vedea că cel mai important mesaj este scris într-o „lumină de neon”. Pentru a obține acel aspect neon, trebuie să adăugați CSS la design. CSS va adăuga multă umbră roz textului. Asta e totul.

Deci, trebuie să adăugați un widget de antet, să schimbați dimensiunea fontului ales pentru a face să strălucească și să setați culoarea la alb.

Apoi deschideți fila Advanced și lipiți-o în fila CSS personalizată, adăugați acest cod:

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

Dacă doriți să utilizați o nuanță diferită lângă roz, schimbați doar numărul de culoare după semnul lirei. Asta e tot.

Titlu vertical

Un alt aspect interesant al acestui design apare alături de literele „FRI”, cu anul atașat la acesta care apare vertical (90 de grade).

Pentru a obține acest aspect, trebuie să adăugați un widget de secțiune interioară. Acest lucru se face pentru a implementa efectul vertical numai pe o singură coloană.

După adăugarea secțiunii interioare, adăugați un widget de titlu la fiecare coloană.

Stilizați textul și apoi deschideți fila avansată a celei de-a doua coloane (cea pe care doriți să o rotiți) și în fila CSS personalizată scrieți acest cod:

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

Fundal retro 80

După ce ați terminat de lucrat la postarea principală, începeți să lucrați pe fundal pentru a da textului un impuls și pentru a arăta retro-știința SF din anii 80 o realitate. Aici am adăugat o imagine proiectată în Photoshop și am folosit-o ca fundal de erou.

În acest design, fundalul prezintă o grilă geometrică care amintește de Tron, cu o atingere de palmieri înclinată spre stânga și un gradient principal de albastru-violet-roz pentru a obține acel sentiment retro. Există, de asemenea, câteva atingeri frumoase, cum ar fi „DeLorean DMC-12” (probabil că îl veți recunoaște în Back to the Future).

Mașina, precum și stelele de filmare, toate vizează textul principal al secțiunii noastre, subliniind mesajul nostru principal.

Secțiunea caracteristici

Când proiectați o pagină de destinație, trebuie să vă gândiți la relațiile dintre fiecare secțiune. Este o sarcină mai complicată atunci când vine vorba de un design la modă precum retro-ul anilor 80.

Așadar, după ce proiectați o primă secțiune uimitoare și ridicați bara, trebuie să mențineți nivelul ridicat și să păstrați aceeași temă de design, în timp ce considerați fiecare secțiune ca o compoziție în sine.

Designul

În această secțiune, am proiectat un aspect mai întunecat de „obiecte necunoscute” în timp ce „târăm” pagina. Aici puteți vedea un titlu, 3 marcatori și un buton. Pentru a crea acest efect 3D plutitor am folosit un pic de Photoshop în combinație cu setările Flip-box dinElementor.

Puse în scenă pe Photoshop

Așadar, primul lucru pe care l-am făcut a fost să creez întreaga scenă în Photoshop pentru a vedea cum ar arăta totul înainte să încep să o construiesc. În titlu puteți vedea aspectul luminilor de neon de dinainte, iar sub el am adăugat 3 triunghiuri cu icoane și un titlu (cercurile).

Am adăugat un gradient albastru-violet-roz la fiecare triunghi. Deasupra, un model de linie îi conferă un aspect TV din anii 80 și se estompează în spate, pentru a crea un aspect științifico-fantastic.

Icoanele au, de asemenea, un aspect neon, precum și titlul din partea de jos a triunghiului. Adăugați un efect plutitor cu caractere aldine. Fundalul are un efect fumuriu, tulbure și întunecat, cu același model de linie folosit pentru triunghi.

Pentru animația 3D, triunghiurile vor avea un fundal transparent. Aceasta înseamnă că textul din spate va fi afișat atunci când nu este acoperit. Așa că am adăugat puțin fum negru pe părțile laterale ale triunghiului pentru a face pătura să se amestece și să acopere în continuare spatele.

Deci, în principiu, există trei straturi de integrat în editor: fundalul, pictograma și titlul.

Construiți live

În editor, am adăugat widget-ul flip-box. În fila conținut frontal, am ales o imagine ca element grafic și am adăugat titlul. În fila Background, în Color, am schimbat culoarea în transparentă și am adăugat triunghiul pe care l-am proiectat în secțiunea imagine, apoi am schimbat poziția astfel încât să se potrivească perfect .

Apoi, în fila din spate am făcut același lucru, dar în loc să adaug un titlu am adăugat textul. Pentru a trece la fila de setări. Aici m-am jucat cu inaltimea cutiei. Am folosit unitatea VH deoarece este o unitate relativă, care va schimba imaginea în raport cu ecranul ca vizitator voi folosi.

Acest lucru îl face mai receptiv. În partea de efecte, am păstrat efectul Flip, am schimbat direcția spre stânga și am activat adâncimea 3D pentru a obține acest efect 3D uimitor.

CTA

Întreaga compoziție aici vizează butonul (deoarece ceea ce doriți este ca utilizatorul să facă clic pe buton). Aici puteți vedea că butonul nu este îndrăzneț și „în fața dvs.”, dar se combină frumos cu fundalul fumuriu, cu o strălucire mică în jurul său. Dar când treci peste el, apare culoarea roz.

Secțiunea criticilor

Dacă utilizatorul derulează la a treia secțiune - înseamnă că faceți ceva corect. Deci, după ce am vorbit despre produs și uimirea acestuia, este momentul ca o altă parte să vorbească.

Designul

În această secțiune avem un widget de comentarii pe un fundal geometric radical cu un titlu neon. Fundalul a fost proiectat în Photoshop și apoi plasat în fundalul secțiunii ca fundal fix pentru a crea un efect de deplasare.

Am vrut să fac această secțiune să arate „în culise”, astfel încât, atunci când derulați în jos, să fiți expuși la ea.

Tabela de prețuri

Această secțiune este secțiunea Tabela de prețuri . Aici puteți vedea toate articolele care pot sprijini vânzarea. Titlul, numărătoarea inversă și bineînțeles - tabelul prețurilor.

Aceasta este linia de sosire a paginii de destinație. Prin urmare, dacă utilizatorul dvs. nu face clic, ceva nu a mers bine.

Designul

Designul din această secțiune are mai mult de unul contactați-ne Galaxia anilor 80. Fundalul aici a fost editat în Photoshop, dându-i un aspect purpuriu de ridiche strălucitor și ieșind în evidență de fundalul negru-negru care a existat înainte de a-i da un pumn în cele din urmă.

Sub antet și slogan există un contor care arată timpul rămas până la sfârșitul vânzării. Aici am folosit un font spațial numit „spațiu mono” pe care l-am adăugat prin opțiunea de font personalizat.

În tabelul de prețuri de mai jos, fiecare tabel are un fundal negru deschis, oferindu-i un aspect „plutitor în spațiu”. Când plasați deasupra acestuia, fundalul se întunecă și există o strălucire în jurul său ca punct focal care vă îndeamnă să citiți textul din interior.

Când mutați cursorul mouse-ului peste buton, butonul modifică din nou culoarea. Odată ce ați terminat de citit informațiile despre minunatele noastre fotografii,

Obțineți acest model complet minunat

Șablonul prezentat în acest tutorial este acum disponibil în bibliotecă Elementor. Deci îl puteți folosi cu un singur clic.

Cum de a crea o pagină de stil stil 80 cu Elementor