Si të krijoni një faqe stil stili 80 me Elementor

Dizajni i viteve 80 - ne e duam atë! Me të gjitha këto forma gjeometrike, sfondet hapësinore dhe efektet e dritës neoni, faqja jonë e uljes për një ngjarje të veçantë (partitë e Krishtlindjeve) nuk mund të ishte më rrezatuese! Le të na tregojmë se si ta bëjmë atë.

Hiqni shiritat e kokës, ndizni dritat tuaja neoni dhe futni Tron në VCR tuaj ... vitet 80 janë kthyer!

Si dizajner, gjithmonë kam pasur një pikë të butë për dizajnin e viteve 80, për të cilin askush nuk flet. Me të gjitha këto forma gjeometrike, shumë modele, sfonde hapësinore me ato efekte të lira neoni (duhet të rikthejë kujtime të këndshme).

Në fakt, ju mund ta shihni kudo. Nga "Strangers Things" nga Netflix, MineCraft ose Muse, i cili sapo nxori një album me aromë të viteve '80 - apo edhe xhiron e Tron.

Pra, pse të mos përfitoni nga ky trend dhe t'ju tregojmë se si ta zbatoni atë në një faqe ulje të krijuar me Elementor ?

Nuk është vetëm një udhëzim teorik. Ne kemi marrë disa elementë për periudhën aktuale të zbritjes (e Premtja e Zezë), për t'ju dhënë mjete për t'u përgatitur për ngjarjet tuaja të ardhshme.

Seksioni i hapjes

Seksioni ynë i hapjes është një seksion hero. Gjëja e parë që duhet theksuar këtu është titulli. Unë rekomandoj të bëni shumë përpjekje në këtë fushë sepse është gjëja e parë që keni vizitor do të shohë.

Mendoni për mesazhin e saktë që synoni të përcillni. Pasja e titullit tuaj të madh dhe të qartë do të tërheqë vëmendjen e njerëzve. Kjo pjesë e parë duhet gjithashtu të inkurajojë përdoruesit të lëvizin poshtë dhe të shfletojnë pjesën tjetër të faqes.

Efekt neoni

Në qendër të përbërjes, vendosa logon, mesazhin dhe butonin.

Ju mund të shihni se mesazhi më i rëndësishëm është shkruar në një "dritë neoni". Për të marrë atë pamje neoni, duhet të shtoni CSS në modelin tuaj. CSS do të shtojë shumë hije rozë në tekst. Kjo është e tëra gjë.

Kështu që duhet të shtoni një miniaplikacion të kokës, të ndryshoni madhësinë e fontit të zgjedhur për ta bërë atë të shkëlqejë dhe vendosni ngjyrën në të bardhë.

Pastaj hapni skedarin e përparuar dhe ngjisni atë në skedën e zakonshme CSS, shtoni këtë kod:

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

Nëse dëshironi të përdorni një hije tjetër pranë trëndafilit, thjesht ndryshoni numrin e ngjyrës pas shenjës së kile. Kjo eshte e gjitha.

Titulli vertikal

Një aspekt tjetër interesant i këtij dizajni shfaqet pranë shkronjave "FRI", me vitin e bashkangjitur me të që shfaqet vertikalisht (90 gradë).

Për të arritur këtë pamje, duhet të shtoni një miniaplikacion të seksionit të brendshëm. Kjo është bërë për të zbatuar efektin vertikal vetëm në një kolonë.

Pasi të shtoni pjesën e brendshme, shtoni një widget për titullin në secilën kolonë.

Stili i tekstit tuaj dhe më pas hapni skedën e përparuar të kolonës së dytë (atë që dëshironi të rrotullohet) dhe në skedën me porosi CSS shkruani këtë kod:

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

Sfond retro 80

Pasi të keni mbaruar së punuari në postimin kryesor, filloni të punoni në sfond për t'i dhënë tekstit një hov dhe për ta bërë realitetin të duken shkencat fantastike të viteve '80 retro. Këtu shtova një imazh të dizajnuar në Photoshop dhe e përdori atë si një sfond heroi.

Në këtë dizajn, sfondi përmban një rrjet gjeometrik që të kujton Tron me një prekje të palmave të përkulur në të majtë dhe një gradient kryesor të ngjyrës blu-vjollcë-rozë për të arritur atë ndjenjë retro. Ka edhe disa prekje të këndshme si "DeLorean DMC-12" (ju ndoshta do ta njihni atë në Kthehu tek e Ardhmja).

Makina, si dhe yjet e xhirimit, të gjithë synojnë tekstin kryesor të seksionit tonë, duke nënvizuar mesazhin tonë kryesor.

Seksioni i veçorive

Kur hartoni një faqe uljeje, duhet të mendoni për marrëdhëniet midis secilit seksion. Isshtë një detyrë më e komplikuar kur bëhet fjalë për një dizajn në modë si vitet 80 retro.

Kështu që, pasi të krijoni një seksion të parë të mahnitshëm dhe të ngrini shiritin, duhet të ruani nivelin e lartë dhe të mbani të njëjtën temë të dizajnit, ndërsa vlerësoni secilën pjesë si një përbërje në vetvete.

Dizajni

Në këtë seksion, unë projektova një pamje më të errët të "objekteve të panjohura" ndërsa ne "zvarritim" faqen. Këtu mund të shihni një titull, 3 pika dhe një buton. Për të krijuar këtë efekt lundrues 3D përdora pak Photoshop në kombinim me cilësimet e Flip-box ngaElementor.

Vënë në skenë në Photoshop

Gjëja e parë që bëra ishte të krijoja të gjithë skenën në Photoshop për të parë se si do të dukej gjithçka para se të filloja ta ndërtoja. Në titull mund të shihni pamjen neoni nga më parë, dhe nën të shtova 3 trekëndësha me ikona dhe një titull (rrathët).

Unë shtova një gradient blu-vjollcë-rozë në çdo trekëndësh. Mbi të, një model linje i jep asaj një pamje televizive të viteve '80 dhe turbullira prapa, për të krijuar një pamje të gazuar fantastiko-shkencore.

Ikonat gjithashtu marrin një pamje neoni, si dhe titullin në fund të trekëndëshit. Shtoni një efekt lundrues në tip të theksuar. Sfondi ka një efekt të tymosur, me re dhe të errët me të njëjtin model linje të përdorur për trekëndëshin.

Për animacionin 3D, trekëndëshat do të kenë një sfond transparent. Kjo do të thotë se teksti në pjesën e pasme do të tregojë kur nuk është i mbuluar. Kështu që shtova pak tym të zi në brinjët e trekëndëshit për ta bërë batanijen të përzier dhe ende të mbulojë pjesën e pasme.

Pra, në thelb ka tre shtresa për t'u ndërtuar në redaktor: sfondi, ikona dhe titulli.

Ndërtoni live

Në redaktor, shtova widget-in e rrokullisjes. Në skedën e përmbajtjes së përparme, unë zgjodha një imazh si element grafik dhe shtova titullin. Në skedën Sfondi, në Ngjyra, unë ndryshova ngjyrën në transparente dhe shtova trekëndëshin që unë projektova në seksionin e figurës, pastaj ndryshova pozicionin në mënyrë që të përshtatet në mënyrë të përsosur .

Pastaj në skedën e pasme bëra të njëjtën gjë, por në vend që të shtoja një titull, shtova tekstin. Për të kaluar në skedën e cilësimeve. Këtu kam luajtur me lartësinë e kutisë. Kam përdorur njësinë VH sepse është një njësi relative, e cila do të ndryshojë imazhin në lidhje me ekranin si vizitor do të përdorë.

Kjo e bën atë më të përgjegjshëm. Në pjesën e efekteve, unë mbajta efektin Flip, ndryshova drejtimin në të majtë dhe aktivizova thellësinë 3D për të arritur këtë efekt të mahnitshëm 3D.

CTA

E gjithë përbërja këtu ka për qëllim butonin (sepse ajo që dëshironi është që përdoruesi të klikojë butonin). Këtu mund të shihni se butoni nuk është i theksuar dhe 'në fytyrën tuaj' por bashkohet bukur me sfondin e tymosur me pak shkëlqim rreth tij. Por kur ecni mbi të, shfaqet ngjyra rozë.

Seksioni i Kritikëve

Nëse përdoruesi lëviz në pjesën e tretë - kjo do të thotë që ju po bëni diçka siç duhet. Kështu që, pasi folëm për produktin dhe habinë e tij, tani është koha që një palë tjetër të flasë.

Dizajni

Në këtë seksion kemi një miniaplikacion komentesh mbi një sfond radikal gjeometrik me një titull neoni. Sfondi u krijua në Photoshop dhe më pas u vendos në sfondin e seksionit si një sfond i fiksuar për të krijuar një efekt të lëvizjes së lëvizjes.

Doja ta bëja këtë pjesë të dukej 'prapa skenave', në mënyrë që kur të lëvizni poshtë, të ekspozoheni ndaj saj.

Seksioni i tabelës së çmimeve

Ky seksion është seksioni Tabela e çmimeve . Këtu mund të shihni të gjithë artikujt që mund të mbështesin shitjen. Titulli, numërimi mbrapsht dhe natyrisht - tabela e çmimeve.

Kjo është vija e përfundimit e faqes së uljes. Prandaj, nëse përdoruesi juaj nuk klikon, diçka shkoi keq.

Dizajni

Dizajni në këtë seksion ka më shumë se një na kontaktoni 80-galaktikë. Sfondi këtu është redaktuar në Photoshop duke i dhënë një pamje të ndezur ngjyrë vjollce rrepkë dhe duke u dalluar nga sfondi zi-zi që ekzistonte përpara se t'i jepte një goditje në fund.

Nën titullin dhe parullën ka një sportel që tregon kohën e mbetur deri në fund të shitjes. Këtu kam përdorur një font spacy të quajtur 'mono hapësinor' të cilin e kam shtuar përmes opsionit të shkronjave të personalizuara.

Në tabelën e çmimeve më poshtë, secila tryezë ka një sfond të zi të lehtë duke i dhënë asaj një pamje "lundruese në hapësirë". Kur rri pezull mbi të, sfondi errësohet dhe ka një shkëlqim rreth tij si një pikë qendrore që të drejton të lexosh tekstin brenda.

Kur rri pezull mbi butonin, butoni ndryshon ngjyrën përsëri. Pasi të keni mbaruar leximin e informacionit rreth të shtënave tona të shkëlqyera,

Merrni këtë model krejtësisht të mrekullueshëm

Modeli i paraqitur në këtë udhëzues është tani i disponueshëm në bibliotekë Elementor. Kështu që mund ta përdorni me një klik.

Si të krijoni një faqe stil stili 80 me Elementor