Hur man skapar en 80 stilstil sida med Elementor

80-talsdesign - vi älskar det! Med alla dessa geometriska former, rumsliga bakgrunder och neonljuseffekter kunde vår målsida för ett speciellt evenemang (julfest) inte vara mer strålande! Låt oss visa hur vi gör det.

Ta bort pannbanden, slå på neonljusen och sätt in Tron i din videobandspelare ... 80 åren är tillbaka!

Som designer har jag alltid haft en mjuk plats för 80-talsdesign som ingen pratar om. Med alla dessa geometriska former, massor av mönster, rumsliga bakgrunder med de billiga neoneffekterna (det borde ge tillbaka minnen).

Faktum är att du kan se det överallt. Från Netflix "Strangers Things", MineCraft eller Muse, som precis släppte ett 80-talssmakat album - eller till och med Tron-remaken.

Så varför inte dra nytta av denna trend och visa dig hur du implementerar den på en målsida skapad med Elementor ?

Det är inte bara en teoretisk handledning. Vi har tagit några element för den aktuella rabattperioden (Black Friday) för att ge dig verktyg för att förbereda dig för dina framtida evenemang.

Öppningssektion

Vår öppningsavdelning är en hjältesektion. Det första att notera här är titeln. Jag rekommenderar att du satsar mycket på detta område eftersom det är det första du har besökaren får se.

Tänk på det exakta budskapet du tänker förmedla. Att ha din titel stor och tydlig kommer att fånga folks uppmärksamhet. Detta första avsnitt bör också uppmuntra användare att bläddra ner och bläddra i resten av sidan.

Neoneffekt

Mitt i kompositionen placerade jag logotypen, meddelandet och knappen.

Du kan se att det viktigaste meddelandet är skrivet i ett "neonljus". För att få det neonutseendet måste du lägga till CSS i din design. CSS lägger till mycket rosa skugga i texten. Det är det hela.

Så du måste lägga till en sidwidget, ändra storleken på det valda teckensnittet så att det lyser och ställa in färgen på vit.

Öppna sedan fliken Avancerat och klistra in den i den anpassade fliken CSS, lägg till den här 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; }

Om du vill använda en annan nyans bredvid den rosa, ändrar du bara färgnumret efter pundskylten. Det är allt.

Vertikal titel

En annan intressant aspekt av denna design dyker upp bredvid bokstäverna "FRI", med året som fästs vid det visas vertikalt (90 grader).

För att uppnå detta utseende måste du lägga till en interiöravsnittswidget. Detta görs för att endast implementera den vertikala effekten på en kolumn.

När du har lagt till det inre avsnittet lägger du till en titelwidget i varje kolumn.

Formatera din text och öppna sedan den avancerade fliken i den andra kolumnen (den du vill rotera) och skriv den här koden i den anpassade CSS-fliken:

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

80 retro bakgrund

När du är klar med huvudposten, börja arbeta med bakgrunden för att ge texten en boost och göra retro-80-talets sci-fi till verklighet. Här lade jag till en bild designad i Photoshop och använde den som hjältebakgrund.

I denna design har bakgrunden ett geometriskt rutnät som påminner om Tron med en touch av palmer som lutar åt vänster och en huvudgradient av blå-lila-rosa för att uppnå den retrokänslan. Det finns också några trevliga detaljer som "DeLorean DMC-12" (du kommer förmodligen att känna igen den i Back to the Future).

Bilen, såväl som skytte stjärnorna, riktar sig alla till huvudtexten i vårt avsnitt, och belyser vårt huvudbudskap.

Funktioner avsnitt

När du utformar en målsida måste du tänka på relationerna mellan varje avsnitt. Det är en mer komplicerad uppgift när det gäller en modern design som retro 80-talet.

Så efter att ha utformat en fantastisk första sektion och höjt baren måste du bibehålla den höga nivån och behålla samma designtema, samtidigt som du betraktar varje sektion som en komposition i sig.

Designen

I det här avsnittet designade jag ett mörkare "okända objekt"-utseende när vi "crawlar" sidan. Här kan du se en titel, 3 kulor och en knapp. För att skapa denna flytande 3D-effekt använde jag lite Photoshop i kombination med Flip-box-inställningar frånElementor.

Iscenesatt på Photoshop

Så det första jag gjorde var att skapa hela scenen i Photoshop för att se hur allt skulle se ut innan jag började bygga det. I titeln kan du se neonljusens utseende från tidigare, och under den lade jag till tre trianglar med ikoner och en titel (cirklarna).

Jag lade till en blå-lila-rosa lutning i varje triangel. Ovanför det ger ett linjemönster ett tv-utseende på 80-talet och en suddighet bakom, för att skapa ett gnistrande sci-fi-utseende.

Ikonerna får också ett neonutseende, liksom titeln längst ner i triangeln. Lägg till en flytande effekt i fetstil. Bakgrunden har en rökig, grumlig och mörk effekt med samma linjemönster som används för triangeln.

För 3D-animering kommer trianglarna att ha en transparent bakgrund. Detta betyder att texten på baksidan kommer att visas när den inte täcks. Så jag lade till lite svart rök på sidorna av triangeln för att få filten att smälta in och fortfarande täcka ryggen.

Så i princip finns det tre lager att bygga in i redigeraren: bakgrunden, ikonen och titeln.

Bygg live

I redaktören lade jag till flip-box-widgeten. På den främre innehållsfliken valde jag en bild som grafiskt element och lade till titeln. I fliken Bakgrund, i färg, ändrade jag färgen till transparent och lade till triangeln som jag designade i bildsektionen och ändrade sedan positionen så att den passar perfekt .

Sedan på baksidan gjorde jag samma sak men istället för att lägga till en rubrik lade jag till texten. För att flytta till fliken Inställningar. Här lekte jag med höjden på lådan. Jag använde VH-enheten eftersom det är en relativ enhet, som kommer att ändra bilden i förhållande till skärmen som besökaren kommer att använda.

Detta gör det mer lyhört. I effektdelen behöll jag Flip-effekten, ändrade riktningen åt vänster och aktiverade 3D-djupet för att uppnå denna fantastiska 3D-effekt.

CTA

Hela kompositionen här riktas mot knappen (för det du vill ha är att användaren klickar på knappen). Här kan du se att knappen inte är djärv och "i ansiktet", men smälter in snyggt med den rökiga bakgrunden med lite glöd runt den. Men när du går över den visas den rosa färgen.

Kritics Section

Om användaren rullar till det tredje avsnittet - betyder det att du gör något rätt. Efter att ha pratat om produkten och dess förvåning är det nu dags för en annan part att tala.

Designen

I det här avsnittet har vi en kommentarwidget på en radikal geometrisk bakgrund med en neontitel. Bakgrunden designades i Photoshop och placerades sedan i bakgrunden av sektionen som en fast bakgrund för att skapa en rullningseffekt.

Jag ville få det här avsnittet att se "bakom kulisserna", så att när du rullar ner blir du utsatt för det.

Pris tabell sektion

Detta avsnitt är avsnittet Prissättningstabell . Här kan du se alla artiklar som kan stödja försäljningen. Titeln, nedräkningen och naturligtvis - pristabellen.

Detta är mållinjen på målsidan. Därför, om din användare inte klickar, gick något fel.

Designen

Designen i det här avsnittet har mer än en kontakta 80-talsgalax. Bakgrunden här har redigerats i Photoshop vilket ger den ett ljust rädislila utseende och sticker ut från den svart-svarta bakgrunden som fanns innan den gav den ett slag till slut.

Under rubriken och slogan finns en räknare som visar återstående tid till slutet av försäljningen. Här använde jag ett stort teckensnitt som heter 'space mono' som jag lade till genom det anpassade teckensnittet.

I pristabellen nedan har varje tabell en ljus svart bakgrund som ger den ett "flytande i rymden" utseende. När du svävar över den mörknar bakgrunden och det lyser som en kontaktpunkt som leder dig att läsa texten inuti.

När du flyttar muspekaren över knappen ändras knappen igen. När du väl har läst informationen om våra fantastiska bilder,

Få denna helt fantastiska modell

Mallen som visas i denna handledning är nu tillgänglig i biblioteket Elementor. Så du kan använda den med ett klick.

Hur man skapar en 80 stilstil sida med Elementor