Hvordan lage en 80 stil stil side med Elementor

80-tallsdesign - vi elsker det! Med alle de geometriske fasongene, den romlige bakgrunnen og neonlyseffektene, kunne ikke destinasjonssiden vår for en spesiell begivenhet (julefester) være mer strålende! La oss vise oss hvordan vi gjør det.

Ta av deg hodebåndene, slå på neonlysene og sett Tron i videospilleren ... 80-tallet er tilbake!

Som designer har jeg alltid hatt et mykt sted for 80-tallsdesign som ingen snakker om. Med alle disse geometriske figurene, mange mønstre, romlig bakgrunn med de billige neoneffektene (det burde gi gode minner tilbake).

Faktisk kan du se det overalt. Fra "Strangers Things" fra Netflix, MineCraft eller Muse, som nettopp ga ut et album med 80-tallsmak - eller til og med remake av Tron.

Så hvorfor ikke dra nytte av denne trenden og vise deg hvordan du implementerer den på en landingsside opprettet med Elementor ?

Det er ikke bare en teoretisk opplæring. Vi har tatt noen elementer for den nåværende rabattperioden (Black Friday), for å gi deg verktøy for å forberede deg på dine fremtidige arrangementer.

Åpningsseksjon

Åpningsdelen vår er en helteseksjon. Det første å merke seg her er tittelen. Jeg anbefaler å legge mye krefter på dette området fordi det er det første du har besøkende vil se.

Tenk på det nøyaktige budskapet du har tenkt å formidle. Å ha tittelen din stor og klar vil fange folks oppmerksomhet. Denne første delen bør også oppmuntre brukere til å bla nedover og bla gjennom resten av siden.

Neoneffekt

I midten av komposisjonen plasserte jeg logoen, meldingen og knappen.

Du kan se at den viktigste meldingen er skrevet i et "neonlys". For å få det neonutseendet, må du legge til CSS i designet ditt. CSS vil legge til mye rosa skygge i teksten. Det er hele greia.

Så du må legge til en topptekst-widget, endre størrelsen på den valgte skrifttypen for å få den til å skinne og sette fargen til hvit.

Åpne deretter kategorien Avansert og lim den inn i kategorien Custom CSS, legg til denne koden:

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 bruke en annen nyanse ved siden av den rosa, er det bare å endre fargenummeret etter pundtegnet. Det er alt.

Vertikal tittel

Et annet interessant aspekt ved dette designet vises ved siden av bokstavene "FRI", med året som er knyttet til det, vises vertikalt (90 grader).

For å oppnå dette utseendet, må du legge til en interiørdel-widget. Dette gjøres for å implementere den vertikale effekten bare på en kolonne.

Når du har lagt til den indre delen, legger du til en tittel-widget i hver kolonne.

Stil teksten din, og åpne deretter den avanserte kategorien i den andre kolonnen (den du vil rotere), og skriv denne koden i den tilpassede CSS-fanen:

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

80-tallet retro bakgrunn

Når du er ferdig med å jobbe med hovedinnlegget, begynn å jobbe med bakgrunnen for å gi teksten et løft og få retro-80-tallet sci-fi til å se ut som en realitet. Her la jeg til et bilde designet i Photoshop og brukte det som en helt bakgrunn.

I dette designet har bakgrunnen et geometrisk rutenett som minner om Tron med et snev av palmer som lener seg til venstre og en hovedgradient av blå-lilla-rosa for å oppnå den retrofølelsen. Det er også noen fine detaljer som “DeLorean DMC-12” (du vil sannsynligvis kjenne den igjen i Back to the Future).

Bilen, i tillegg til stjerneskuddene, er alle rettet mot hovedteksten i vår seksjon og understreker hovedbudskapet vårt.

Kjennetegn

Når du designer en destinasjonsside, må du tenke på forholdet mellom hver seksjon. Det er en mer komplisert oppgave når det kommer til et fasjonabelt design som retro 80-tallet.

Så etter at du har designet en fantastisk første seksjon og hevet linjen, må du holde standarden høy og beholde samme designtema, mens du vurderer hver seksjon som en komposisjon i seg selv.

Design

I denne delen designet jeg et mørkere "ukjente objekter"-utseende mens vi "gjennomsøker" siden. Her kan du se en tittel, 3 kuler og en knapp. For å lage denne flytende 3D-effekten brukte jeg litt Photoshop i kombinasjon med Flip-box-innstillinger fraElementor.

Iscenesettelse i Photoshop

Så det første jeg gjorde var å lage hele scenen i Photoshop for å se hvordan alt ville se ut før jeg begynte å bygge det. I tittelen kan du se utseendet til neonlysene fra før, og under det la jeg til 3 trekanter med ikoner og en tittel (sirklene).

Jeg la til en blå-lilla-rosa gradient til hver trekant. Over det gir et linjemønster det et 80-talls TV-utseende og en uskarphet bak, for å skape et glitrende sci-fi-utseende.

Ikonene får også et neonutseende, samt tittelen nederst i trekanten. Legg til en flytende effekt i fet skrift. Bakgrunnen har en røykfylt, overskyet og mørk effekt med samme linjemønster som brukes for trekanten.

For 3D-animasjon vil trekantene ha en gjennomsiktig bakgrunn. Dette betyr at teksten på baksiden vil vises når den ikke er dekket. Så jeg la litt svart røyk til sidene av trekanten for å få teppet til å blande seg inn og fortsatt dekke ryggen.

Så i utgangspunktet er det tre lag å bygge inn i redigeringsprogrammet: bakgrunnen, ikonet og tittelen.

Bygg live

I redaktøren la jeg til flip-box-widgeten. I frontinnholdsfanen valgte jeg et bilde som grafisk element og la til tittelen. I kategorien Bakgrunn, i Farge, endret jeg fargen til gjennomsiktig og la til trekanten jeg designet i bildeseksjonen, og endret deretter posisjonen slik at den passer perfekt .

Så i bakre fane gjorde jeg det samme, men i stedet for å legge til en tittel la jeg til teksten. For å gå til innstillingsfanen. Her lekte jeg med høyden på boksen. Jeg brukte VH-enheten fordi det er en relativ enhet, som vil endre bildet i forhold til skjermen som besøkende vil bruke.

Dette gjør det mer responsivt. I effektdelen holdt jeg Flip-effekten, endret retningen til venstre og aktiverte 3D-dybden for å oppnå denne fantastiske 3D-effekten.

CTA

Hele komposisjonen her er rettet mot knappen (fordi det du ønsker er at brukeren klikker på knappen). Her kan du se at knappen ikke er fet og "i ansiktet ditt", men smelter fint sammen med den røykfylte bakgrunnen med litt glød rundt. Men når du går over den, vises den rosa fargen.

Omtaler

Hvis brukeren blar til den tredje delen - betyr det at du gjør noe riktig. Så, etter å ha snakket om produktet og dets forbløffelse, er det nå på tide for en annen part å ta ordet.

Design

I denne delen har vi en kommentar-widget på en radikal geometrisk bakgrunn med en neontittel. Bakgrunnen ble designet i Photoshop og deretter plassert i bakgrunnen av seksjonen som en fast bakgrunn for å skape en rullende svevereffekt.

Jeg ønsket å få denne delen til å se "bak kulissene", slik at når du blar nedover, blir du utsatt for den.

Pris tabell seksjon

Denne delen er seksjonen Prisbord . Her kan du se alle varene som kan støtte salget. Tittelen, nedtellingen og selvfølgelig - pristabellen.

Dette er mållinjen til destinasjonssiden. Derfor, hvis brukeren ikke klikker, gikk noe galt.

Design

Designet i denne delen har mer enn én kontakt 80-talls galakse. Bakgrunnen her har blitt redigert i Photoshop, noe som gir den et lyst reddiklilla utseende og skiller seg ut fra den svart-svarte bakgrunnen som fantes før den ga den et slag til slutt.

Under overskriften og slagordet er det en teller som viser gjenværende tid til slutten av salget. Her brukte jeg en stor skrift kalt 'space mono' som jeg la til gjennom det tilpassede fontalternativet.

I pristabellen nedenfor har hvert bord en lys svart bakgrunn som gir det et "flytende i rommet" -utseende. Når du holder markøren over den, blir bakgrunnen mørkere og det er en glød rundt som et fokuspunkt som leder deg til å lese teksten inni.

Når du holder markøren over knappen, endrer knappen farge igjen. Når du er ferdig med å lese informasjonen om de flotte planene våre,

Få denne helt fantastiske malen

Malen vist i denne opplæringen er nå tilgjengelig i biblioteket Elementor. Så du kan bruke den med ett klikk.

Hvordan lage en 80 stil stil side med Elementor