Sådan opretter du en 80 stil stil side med Elementor

80'ers design - vi elsker det! Med alle disse geometriske former, rumlige baggrunde og neonlyseffekter kunne vores destinationsside til en særlig begivenhed (julefester) ikke være mere strålende! Lad os vise os, hvordan vi gør det.

Fjern dine pandebånd, tænd dine neonlamper og indsæt Tron i din videobåndoptager ... 80 årene er tilbage!

Som designer har jeg altid haft et blødt sted for 80'ers design, som ingen taler om. Med alle disse geometriske former, masser af mønstre, rumlige baggrunde med de billige neoneffekter (det skulle bringe gode minder tilbage).

Faktisk kan du se det overalt. Fra "Strangers Things" fra Netflix, MineCraft eller Muse, der netop udgav et album med en 80'ers smag - eller endda en remake af Tron.

Så hvorfor ikke drage fordel af denne trend og vise dig, hvordan du implementerer den på en landingsside oprettet med Elementor ?

Det er ikke kun en teoretisk tutorial. Vi har taget nogle elementer til den aktuelle rabatperiode (Black Friday) for at give dig værktøjer til at forberede dig til dine fremtidige begivenheder.

Åbningssektion

Vores åbningssektion er en heltesektion. Den første ting at bemærke her er titlen. Jeg anbefaler at lægge en stor indsats i dette område, fordi det er det første, du har besøgende vil se.

Tænk på det nøjagtige budskab, du har til hensigt at formidle. At have din titel stor og klar vil fange folks opmærksomhed. Dette første afsnit skal også tilskynde brugerne til at rulle ned og gennemse resten af siden.

Neoneffekt

I midten af kompositionen placerede jeg logoet, meddelelsen og knappen.

Du kan se, at den vigtigste besked er skrevet i et "neonlys". For at få det neonudseende skal du tilføje CSS til dit design. CSS tilføjer en masse lyserød skygge til teksten. Det er det hele.

Så du skal tilføje en headerwidget, ændre størrelsen på den valgte skrifttype for at få den til at skinne og indstille farven til hvid.

Åbn derefter fanen Avanceret, og indsæt den i den brugerdefinerede CSS-fane, tilføj denne kode:

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

Hvis du vil bruge en anden nuance ved siden af den lyserøde, skal du bare ændre farvenummeret efter pundtegnet. Det er alt.

Lodret titel

Et andet interessant aspekt ved dette design vises ved siden af bogstaverne "FRI", hvor året knyttet til det vises lodret (90 grader).

For at opnå dette udseende skal du tilføje en interiørdel-widget. Dette gøres for kun at implementere den lodrette effekt på en kolonne.

Efter tilføjelse af det indre afsnit skal du tilføje en titel-widget til hver kolonne.

Stil din tekst, og åbn derefter den avancerede fane i den anden kolonne (den, du vil rotere), og skriv denne kode i den tilpassede CSS-fane:

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

80 retro baggrund

Når du er færdig med at arbejde på hovedindlægget, skal du begynde at arbejde på baggrunden for at give teksten et boost og gøre retro-80'ers sci-fi til virkelighed. Her tilføjede jeg et billede designet i Photoshop og brugte det som en helt baggrund.

I dette design har baggrunden et geometrisk gitter, der minder om Tron med et strejf af palmetræer, der læner sig til venstre og en hovedgradient af blå-lilla-pink for at opnå den retrofølelse. Der er også nogle gode detaljer som “DeLorean DMC-12” (du vil sandsynligvis genkende det i Back to the Future).

Bilen såvel som stjerneskuddene er alle målrettet mod hovedteksten i vores sektion og fremhæver vores hovedbudskab.

Funktioner afsnit

Når du designer en destinationsside, skal du tænke på forholdet mellem hver sektion. Det er en mere kompliceret opgave, når det kommer til et fashionabelt design som retro 80'erne.

Så efter at have designet en fantastisk første sektion og hævet bjælken, skal du opretholde det høje niveau og holde det samme designtema, mens du betragter hvert afsnit som en komposition i sig selv.

Design

I dette afsnit designede jeg et mørkere "ukendte objekter"-look, mens vi "crawler" siden. Her kan du se en titel, 3 kugler og en knap. For at skabe denne svævende 3D-effekt brugte jeg lidt Photoshop i kombination med Flip-box-indstillinger fraElementor.

Iscenesat på Photoshop

Så det første, jeg gjorde, var at oprette hele scenen i Photoshop for at se, hvordan alt ville se ud, før jeg begyndte at bygge det. I titlen kan du se neonudseendet fra før, og under det tilføjede jeg 3 trekanter med ikoner og en titel (cirklerne).

Jeg tilføjede en blå-lilla-lyserød gradient til hver trekant. Over det giver et linjemønster det et tv-look fra 80'erne og en sløring bagved for at skabe et mousserende sci-fi-look.

Ikonerne får også et neonudseende såvel som for titlen i bunden af trekanten. Tilføj en flydende effekt med fed skrift. Baggrunden har en røget, overskyet, mørk effekt med det samme linjemønster, der bruges til trekanten.

Til 3D-animation har trekanterne en gennemsigtig baggrund. Dette betyder, at teksten på bagsiden vises, når den ikke er dækket. Så jeg tilføjede lidt sort røg til siderne af trekanten for at få tæppet til at blande sig ind og stadig dække ryggen.

Så dybest set er der tre lag, der skal bygges ind i editoren: baggrunden, ikonet og titlen.

Byg live

I redaktøren tilføjede jeg flip-box-widgeten. I den forreste indholdsfane valgte jeg et billede som det grafiske element og tilføjede titlen. I fanen Baggrund ændrede jeg i farve farven til gennemsigtig og tilføjede trekanten, jeg designede i billedsektionen, og ændrede derefter positionen, så den passer perfekt .

Så i bagerste fane gjorde jeg det samme, men i stedet for at tilføje en titel tilføjede jeg teksten. For at flytte til fanen Indstillinger. Her legede jeg med højden på kassen. Jeg brugte VH-enheden, fordi det er en relativ enhed, som vil ændre billedet i forhold til skærmen som besøgende vil bruge.

Dette gør det mere lydhørt. I effektdelen holdt jeg Flip-effekten, ændrede retningen til venstre og aktiverede 3D-dybden for at opnå denne fantastiske 3D-effekt.

CTA

Hele kompositionen her er rettet mod knappen (for det, du ønsker, er, at brugeren skal klikke på knappen). Her kan du se, at knappen ikke er fed og 'i dit ansigt', men passer godt ind i den røgfyldte baggrund med lidt glød omkring den. Men når du går over det, vises den lyserøde farve.

Kritikafdeling

Hvis brugeren ruller til det tredje afsnit - betyder det, at du gør noget rigtigt. Så efter at have talt om produktet og dets forbløffelse, er det nu tid for en anden part at tale op.

Design

I dette afsnit har vi en kommentar-widget på en radikal geometrisk baggrund med en neontitel. Baggrunden blev designet i Photoshop og derefter placeret i baggrunden af sektionen som en fast baggrund for at skabe en rulle-svævende effekt.

Jeg ønskede at få dette afsnit til at se 'bag kulisserne', så når du ruller ned, bliver du udsat for det.

Pris tabel sektion

Dette afsnit er afsnittet Prissætningstabel . Her kan du se alle de varer, der kan understøtte salget. Titlen, nedtællingen og selvfølgelig - pristabellen.

Dette er målstregen på landingssiden. Derfor, hvis din bruger ikke klikker, gik der noget galt.

Design

Designet i dette afsnit har mere end én kontakt 80'er-galaksen. Baggrunden her er blevet redigeret i Photoshop, hvilket giver den et lyst radise-lilla udseende og skiller sig ud fra den sort-sorte baggrund, der eksisterede, før den gav den et slag til sidst.

Under overskriften og sloganet er der en tæller, der viser den resterende tid indtil slutningen af salget. Her brugte jeg en stor skrifttype kaldet 'space mono', som jeg tilføjede gennem den tilpassede skrifttypemulighed.

I nedenstående pristabel har hver tabel en lys sort baggrund, der giver det et "flydende i rummet" udseende. Når du svæver over det, bliver baggrunden mørkere, og der er en glød rundt som et fokuspunkt, der leder dig til at læse teksten indeni.

Når du flytter musemarkøren over knappen, ændrer knappen igen farven igen. Når du er færdig med at læse oplysningerne om vores fantastiske billeder,

Få denne helt fantastiske model

Skabelonen vist i denne øvelse er nu tilgængelig i biblioteket Elementor. Så du kan bruge det med et enkelt klik.

Sådan opretter du en 80 stil stil side med Elementor