Kako stvoriti 80 stilu stilske stranice s Elementorom

Dizajn 80-ih - volimo ga! Uz sve one geometrijske oblike, prostorne pozadine i neonske svjetlosne efekte, naša odredišna stranica za poseban događaj (božićne zabave) ne može biti blistavija! Pokažimo nam kako to učiniti.

Uklonite zavoje, uključite neonska svjetla i umetnite Tron u svoj videorekorder ... 80 godine su se vratile!

Kao dizajner, uvijek sam imao lagano mjesto za dizajn 80-ih, o kojem nitko ne govori. Uz sve ove geometrijske oblike, tone uzoraka, svemirske pozadine s onim jeftinim neonskim efektima (trebao bi vratiti lijepe uspomene).

Zapravo ga možete vidjeti posvuda. Iz "Strangers Things" iz Netflixa, MineCrafta ili Musea, koji su upravo objavili album s okusom 80-ih - ili čak remake Trona.

Pa zašto ne biste iskoristili ovaj trend i pokazali vam kako ga implementirati na odredišnu stranicu stvorenu pomoću Elementor ?

To nije samo teorijski tutorial. Uzeli smo neke elemente za trenutno razdoblje popusta (Crni petak) kako bismo vam dali alate za pripremu za vaše buduće događaje.

Otvaranje odjeljka

Naš uvodni dio je herojski dio. Prvo što ovdje treba primijetiti je naslov. Preporučam da uložite puno truda u ovo područje jer vam je ono prvo posjetilac vidjet ćemo.

Razmislite o točnoj poruci koju namjeravate prenijeti. Ako vaš naslov bude velik i jasan, privući ćete pažnju ljudi. Ovaj bi prvi odjeljak također trebao potaknuti korisnike da se pomiču prema dolje i pregledavaju ostatak stranice.

Neonski efekt

U središte kompozicije stavio sam logotip, poruku i gumb.

Možete vidjeti da je najvažnija poruka napisana u "neonskom svjetlu". Da biste dobili taj neonski izgled, trebate dodati CSS u svoj dizajn. CSS će dodati puno ružičaste sjene u tekst. To je cijela stvar.

Zato morate dodati widget zaglavlja, promijeniti veličinu odabranog fonta kako bi zasvijetlio i boju postaviti na bijelu.

Zatim otvorite karticu Napredno i zalijepite je na prilagođenu karticu CSS, dodajte ovaj kôd:

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

Ako pored ružičaste želite koristiti drugu nijansu, samo promijenite broj boje nakon znaka funte. To je sve.

Okomiti naslov

Još jedan zanimljiv aspekt ovog dizajna pojavljuje se pored slova "FRI", a godina koja mu je pridružena prikazuje se okomito (90 stupnjeva).

Da biste postigli ovaj izgled, morate dodati widget za unutarnji odjeljak. To je učinjeno kako bi se vertikalni efekt primijenio samo na jednom stupcu.

Nakon što dodate unutarnji odjeljak, dodajte naslov widget u svaki stupac.

Oblikujte svoj tekst, a zatim otvorite naprednu karticu drugog stupca (onu koju želite rotirati) i na prilagođenu CSS karticu napišite ovaj kod:

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

80 retro pozadina

Kad završite s radom na glavnom postu, počnite raditi na pozadini kako biste potaknuli tekst i učinili da retro znanstvena fantastika iz 80-ih izgleda stvarnost. Ovdje sam dodao sliku dizajniranu u Photoshopu i upotrijebio je kao herojsku pozadinu.

U ovom dizajnu pozadina sadrži geometrijsku mrežu koja podsjeća na Tron s dodirom palmi naslonjenih ulijevo i glavnim gradijentom plavo-ljubičasto-ružičaste boje kako bi se postigao taj retro osjećaj. Postoje i lijepi dodiri poput "DeLorean DMC-12" (vjerojatno ćete ga prepoznati u Povratak u budućnost).

Automobil, kao i zvijezde koje pucaju, ciljaju na glavni tekst našeg odjeljka, ističući našu glavnu poruku.

Odjeljak značajke

Kada dizajnirate odredišnu stranicu, morate razmisliti o odnosima između svakog odjeljka. Kompliciraniji je zadatak kada je u pitanju moderan dizajn poput retro 80-ih.

Dakle, nakon dizajniranja nevjerojatnog prvog odjeljka i podizanja trake, morate održati visoku razinu i zadržati istu temu dizajna, dok svaki odjeljak smatrate kompozicijom u sebi.

Dizajn

U ovom odjeljku dizajnirao sam tamniji izgled "nepoznatih objekata" dok "pretražujemo" stranicu. Ovdje možete vidjeti naslov, 3 metka i gumb. Za stvaranje ovog lebdećeg 3D efekta koristio sam malo Photoshopa u kombinaciji s Flip-box postavkama izElementor.

Izdvojeno na Photoshopu

Dakle, prvo što sam učinio bilo je stvoriti cijelu scenu u Photoshopu kako bih vidio kako će sve izgledati prije nego što sam je počeo graditi. U naslovu možete vidjeti neonski izgled od prije, a ispod njega sam dodao 3 trokuta s ikonama i naslovom (krugovi).

Svakom trokutu dodala sam plavoljubičasto-ružičasti gradijent. Iznad njega linijski uzorak daje mu TV izgled iz 80-ih i zamućenost iza, stvarajući blistav znanstveno-fantastični izgled.

Ikone također dobivaju neonski izgled, kao i naslov na dnu trokuta. Dodajte plutajući efekt podebljanim slovima. Pozadina ima zadimljeni, oblačni i tamni efekt s istim uzorkom crte koji se koristi za trokut.

Za 3D animaciju trokuti će imati prozirnu pozadinu. To znači da će se tekst na poleđini prikazivati kad nije pokriven. Tako sam dodala malo crnog dima na stranice trokuta kako bi se pokrivač stopio i još uvijek pokrivao leđa.

Dakle, u osnovi se u uređivač mogu ugraditi tri sloja: pozadina, ikona i naslov.

Build live

U uređivač sam dodao widget flip-box. Na prednjoj kartici sadržaja odabrao sam sliku kao grafički element i dodao naslov. Na kartici Pozadina, u boji, promijenio sam boju u prozirnu i dodao trokut koji sam dizajnirao u odjeljku slike, a zatim promijenio položaj tako da savršeno odgovara .

Zatim sam u stražnjoj kartici napravio istu stvar, ali umjesto dodavanja naslova dodao sam tekst. Za prelazak na karticu postavki. Ovdje sam se poigrao s visinom kutije. Koristio sam VH jedinicu jer je to relativna jedinica, koja će promijeniti sliku u odnosu na ekran kao posjetilac koristit ću.

To ga čini osjetljivijim. U dijelu s efektima zadržao sam efekt Flip, promijenio smjer ulijevo i aktivirao 3D dubinu kako bih postigao ovaj nevjerojatan 3D efekt.

HAT

Cijeli je sastav ovdje usmjeren na gumb (jer ono što želite je da korisnik klikne gumb). Ovdje možete vidjeti da gumb nije podebljan i 'u lice', već se lijepo stapa sa zadimljenom pozadinom s malo sjaja oko njega. Ali kad prijeđete preko nje, pojavljuje se ružičasta boja.

Odsjek kritičara

Ako se korisnik pomakne do trećeg odjeljka - znači da radite nešto ispravno. Dakle, nakon razgovora o proizvodu i njegovom čuđenju, sada je vrijeme da još jedna stranka progovori.

Dizajn

U ovom odjeljku imamo widget za komentare na radikalnoj geometrijskoj pozadini s neonskim naslovom. Pozadina je dizajnirana u Photoshopu, a zatim je smještena u pozadinu odjeljka kao fiksna pozadina da bi se stvorio efekt pomicanja pokazivača.

Želio sam da ovaj odjeljak izgleda 'iza kulisa', tako da kada se pomaknete prema dolje, budete mu izloženi.

Odjeljak tablice cijena

Ovaj odjeljak je odjeljak Tablica cijena . Ovdje možete vidjeti sve stavke koje mogu podržati prodaju. Naslov, odbrojavanje i naravno - tablica cijena.

Ovo je završna crta odredišne stranice. Stoga, ako vaš korisnik ne klikne, nešto je pošlo po zlu.

Dizajn

Dizajn u ovom odjeljku ima više od jednog kontakt 80-te-galaksija. Pozadina je ovdje uređena u Photoshopu dajući joj jarko ljubičasti izgled i odskačući od crne-crne pozadine koja je postojala prije nego što joj je na kraju dala pun pogodak.

Ispod zaglavlja i slogana nalazi se brojač koji pokazuje preostalo vrijeme do kraja prodaje. Ovdje sam koristio prostrani font nazvan 'space mono' koji sam dodao putem opcije prilagođenog fonta.

U donjoj tablici cijena, svaki stol ima svijetlo crnu pozadinu koja mu daje izgled "lebdenja u svemiru". Kad zadržite pokazivač iznad nje, pozadina se potamni i oko vas zasija kao žarišna točka koja vas usmjerava na čitanje teksta iznutra.

Kada prelazite preko gumba, gumb ponovno mijenja boju. Kada završite čitanje informacija o našim sjajnim snimkama,

Nabavite ovaj potpuno fenomenalan model

Predložak prikazan u ovom vodiču sada je dostupan u knjižnici Elementor. Tako da ga možete koristiti jednim klikom.

Kako stvoriti 80 stilu stilske stranice s Elementorom