Gå till innehållet

Hur man skapar en 80 stilstil sida med Elementor

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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 den här trenden och visa dig själv hur du implementerar den på en målsida byggd 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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Öppningssektion

Vår öppningssektion är en hjältesektion. Det första att notera här är titeln. Jag rekommenderar att du lägger mycket ansträngning på detta område eftersom det är det första som din besökare kommer att 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

Effekt neon svart fredag ​​elementor.jpg

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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

informationsrutan elementor.gif
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 utseende av "okända objekt" när vi "utforskade" 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 Elementors Flip-box-inställningar.

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 detsamma, men istället för att lägga till en titel lade jag till texten. Växla till inställningsfliken. Här lekte jag med boxens höjd. Jag använde VH-enheten eftersom det är en relativ enhet som kommer att ändra bilden i förhållande till skärmen 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

lista över recensioner elementor.jpg
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

pris diagram elementor.jpg
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 detta avsnitt har mer av en 80-tals Galaxy Touch. Bakgrunden här har ändrats i Photoshop, vilket gör att den ser blanka rädisa lila ut och sticker ut från den svart-svarta bakgrunden som fanns tidigare, vilket gav den en stans i slutet.
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

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

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del2
tweet
Enregistrer