Hoe maak je een 80 stijlstijlpagina aan met Elementor

80s design - we zijn er gek op! Met al die geometrische vormen, ruimtelijke achtergronden en neonlichteffecten kan onze landingspagina voor een speciaal evenement (kerstfeestjes) niet stralender zijn! Laten we ons laten zien hoe we het moeten doen.

Verwijder je hoofdbanden, zet je neonlichten aan en plaats Tron in je videorecorder ... de 80-jaren zijn terug!

Als ontwerper heb ik altijd een zwak gehad voor design uit de jaren 80 waar niemand het over heeft. Met al deze geometrische vormen, tonnen patronen, ruimtelijke achtergronden met die goedkope neoneffecten (het zou goede herinneringen moeten oproepen).

Je kunt het zelfs overal zien. Van "Strangers Things" van Netflix, MineCraft of Muse, die net een album met een jaren 80-smaak hebben uitgebracht - of zelfs de remake van Tron.

Dus waarom zou u niet profiteren van deze trend en u laten zien hoe u deze kunt implementeren in een bestemmingspagina die is gemaakt met Elementor ?

Het is niet alleen een theoretische tutorial. We hebben een aantal elementen genomen voor de huidige kortingsperiode (Black Friday), om u tools te geven om u voor te bereiden op uw toekomstige evenementen.

Opening sectie

Onze openingssectie is een heldensectie. Het eerste dat hier opvalt, is de titel. Ik raad aan dat u veel moeite doet op dit gebied, omdat dit het eerste is wat u doet bezoeker we zullen het zien.

Denk na over de exacte boodschap die u wilt overbrengen. Als je titel groot en duidelijk is, zal dit de aandacht van mensen trekken. Dit eerste gedeelte moet gebruikers ook aanmoedigen om naar beneden te scrollen en door de rest van de pagina te bladeren.

Neon effect

In het midden van de compositie plaatste ik het logo, de boodschap en de knop.

U kunt zien dat de belangrijkste boodschap in een "neonlicht" is geschreven. Om die neon-look te krijgen, moet je CSS aan je ontwerp toevoegen. De CSS zal veel roze schaduw aan de tekst toevoegen. Dat is de hele zaak.

U moet dus een koptekstwidget toevoegen, de grootte van het gekozen lettertype wijzigen om het te laten schijnen en de kleur op wit zetten.

Open vervolgens het tabblad Geavanceerd en plak het in het aangepaste CSS-tabblad, voeg deze code toe:

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

Als je naast het roze een andere tint wilt gebruiken, verander dan gewoon het kleurnummer achter het hekje. Dat is alles.

Verticale titel

Een ander interessant aspect van dit ontwerp verschijnt naast de letters "FRI", met het jaartal eraan verticaal (90 graden).

Om deze look te bereiken, moet u een widget voor het interieurgedeelte toevoegen. Dit wordt gedaan om het verticale effect alleen op één kolom te implementeren.

Nadat u de binnenste sectie hebt toegevoegd, voegt u een titelwidget toe aan elke kolom.

Style uw tekst en open vervolgens het geavanceerde tabblad van de tweede kolom (degene die u wilt roteren) en schrijf in het aangepaste CSS-tabblad deze code:

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

80 retro achtergrond

Als je klaar bent met het werken aan de hoofdpost, begin je aan de achtergrond te werken om de tekst een boost te geven en de retro sci-fi-look uit de jaren 80 een realiteit te maken. Hier heb ik een afbeelding toegevoegd die is ontworpen in Photoshop en deze als heldenachtergrond heb gebruikt.

In dit ontwerp heeft de achtergrond een geometrisch raster dat doet denken aan Tron met een vleugje palmbomen die naar links leunen en een hoofdverloop van blauw-paars-roze om dat retro-gevoel te bereiken. Er zijn ook enkele leuke details, zoals de "DeLorean DMC-12" (u zult hem waarschijnlijk herkennen in Back to the Future).

De auto, evenals de vallende sterren, richten zich allemaal op de hoofdtekst van onze sectie en benadrukken onze belangrijkste boodschap.

Functies sectie

Bij het ontwerpen van een bestemmingspagina moet u nadenken over de relaties tussen elke sectie. Het is een meer gecompliceerde taak als het gaat om een modieus ontwerp zoals retro jaren 80.

Dus na het ontwerpen van een verbazingwekkende eerste sectie en het verhogen van de lat, moet je het hoge niveau behouden en hetzelfde ontwerpthema behouden, terwijl je elke sectie als een compositie op zichzelf beschouwt.

Het ontwerp

In deze sectie heb ik een donkerdere 'onbekende objecten'-look ontworpen terwijl we de pagina 'crawlen'. Hier zie je een titel, 3 opsommingstekens en een knop. Om dit zwevende 3D-effect te creëren heb ik een beetje Photoshop gebruikt in combinatie met Flip-box instellingen vanElementor.

Geënsceneerd op Photoshop

Dus het eerste dat ik deed, was de hele scène in Photoshop maken om te zien hoe alles eruit zou zien voordat ik ermee begon. In de titel zie je de neon-look van ervoor, en daaronder heb ik 3 driehoeken met icoontjes en een titel (de cirkels) toegevoegd.

Ik heb aan elke driehoek een blauw-paars-roze verloop toegevoegd. Daarboven geeft een lijnenpatroon het een tv-look uit de jaren 80 en een vervaging erachter, om een sprankelende sci-fi-look te creëren.

De pictogrammen krijgen ook een neon-look, evenals de titel onderaan de driehoek. Voeg een vetgedrukt zwevend effect toe. De achtergrond heeft een rokerig, troebel, donker effect met hetzelfde lijnenpatroon als voor de driehoek.

Voor 3D-animatie hebben de driehoeken een transparante achtergrond. Dit betekent dat de tekst op de achterkant te zien is wanneer deze niet bedekt is. Dus ik voegde een beetje zwarte rook toe aan de zijkanten van de driehoek om de deken in elkaar te laten overvloeien en toch de achterkant te bedekken.

Dus eigenlijk zijn er drie lagen om in de editor in te bouwen: de achtergrond, het pictogram en de titel.

Bouw live

In de editor heb ik de flip-box-widget toegevoegd. Op het inhoudstabblad aan de voorkant heb ik een afbeelding als grafisch element gekozen en de titel toegevoegd. Op het tabblad Achtergrond, in kleur, heb ik de kleur gewijzigd in transparant en de driehoek toegevoegd die ik heb ontworpen in het afbeeldingsgedeelte, en vervolgens de positie gewijzigd zodat deze perfect past .

Vervolgens deed ik op het achterste tabblad hetzelfde, maar in plaats van een titel toe te voegen, voegde ik de tekst toe. Om naar het tabblad Instellingen te gaan. Hier speelde ik met de hoogte van de doos. Ik heb de VH-eenheid gebruikt omdat het een relatieve eenheid is, die het beeld ten opzichte van het scherm zal veranderen als de bezoeker zal gebruiken.

Dit maakt het responsiever. In het effectgedeelte heb ik het Flip-effect behouden, de richting naar links veranderd en de 3D-diepte geactiveerd om dit geweldige 3D-effect te bereiken.

CTA

De hele build hier is gericht op de knop (want wat u wilt, is dat de gebruiker op de knop klikt). Hier kun je zien dat de knop niet vet en 'in your face' is, maar mooi opgaat in de rokerige achtergrond met een kleine gloed eromheen. Maar als je eroverheen loopt, verschijnt de roze kleur.

Sectie Critics

Als de gebruiker naar het derde gedeelte scrolt, betekent dit dat u iets goed doet. Dus, na over het product en zijn verbazing te hebben gesproken, is dit het moment voor een andere partij om zich uit te spreken.

Het ontwerp

In deze sectie hebben we een opmerkingenwidget op een radicale geometrische achtergrond met een neontitel. De achtergrond is ontworpen in Photoshop en vervolgens op de achtergrond van de sectie geplaatst als een vaste achtergrond om een scrollend zweefeffect te creëren.

Ik wilde deze sectie 'achter de schermen' laten kijken, zodat je eraan wordt blootgesteld als je naar beneden scrolt.

Prijstabel sectie

Deze sectie is de sectie Prijzen tabel . Hier kunt u alle items zien die de verkoop kunnen ondersteunen. De titel, het aftellen en natuurlijk - de prijstabel.

Dit is de finishlijn van de landingspagina. Daarom is er iets misgegaan als uw gebruiker niet klikt.

Het ontwerp

Het ontwerp in deze sectie heeft er meer dan één contact Jaren 80-melkwegstelsel. De achtergrond hier is bewerkt in Photoshop waardoor het een heldere radijs-paarse uitstraling heeft en opvalt van de zwart-zwarte achtergrond die bestond voordat het uiteindelijk een klap uitdeelde.

Onder de kop en slogan staat een teller die de resterende tijd tot het einde van de verkoop laat zien. Hier heb ik een ruim lettertype gebruikt genaamd 'space mono' dat ik heb toegevoegd via de optie voor aangepast lettertype.

In de onderstaande prijstabel heeft elke tafel een lichtzwarte achtergrond waardoor het een "zwevend in de ruimte" uiterlijk heeft. Wanneer u erover zweeft, wordt de achtergrond donkerder en is er een gloed rondom als brandpunt die u ertoe aanzet de tekst erin te lezen.

Als u de muiscursor over de knop beweegt, verandert de knop weer van kleur. Als je klaar bent met het lezen van de informatie over onze geweldige foto's,

Koop dit absoluut geweldige model

De sjabloon die in deze tutorial wordt getoond, is nu beschikbaar in de bibliotheek Elementor. U kunt het dus met één klik gebruiken.

Hoe maak je een 80 stijlstijlpagina aan met Elementor