Vai al contenuto principale

Come creare una pagina di stile di stile 80 con Elementor

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Design anni '80: lo adoriamo! Con tutte quelle forme geometriche, sfondi spaziali ed effetti di luce al neon, la nostra pagina di destinazione per un evento speciale (feste di Natale) non potrebbe essere più radiosa! Mostraci come farlo.

Rimuovi le fasce per la testa, accendi le luci al neon e inserisci Tron nel videoregistratore ... gli anni di 80 sono tornati!

Come designer, ho sempre avuto un debole per il design degli anni '80 di cui nessuno parla. Con tutte queste forme geometriche, tonnellate di motivi, sfondi spaziali con quegli effetti al neon economici (dovrebbe riportare bei ricordi).

In effetti, puoi vederlo ovunque. Da "Strangers Things" di Netflix, MineCraft o Muse, che ha appena pubblicato un album dal sapore anni '80 - o anche il remake di Tron.

Allora perché non approfittare di questa tendenza e mostrarti come implementarla in una landing page realizzata con Elementor?

Non è solo un tutorial teorico. Abbiamo preso alcuni elementi per l'attuale periodo di sconto (Black Friday), per darti gli strumenti per prepararti ai tuoi eventi futuri.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Sezione di apertura

La nostra sezione di apertura è una sezione degli eroi. La prima cosa da notare qui è il titolo. Consiglio di impegnarti molto in quest'area perché è la prima cosa che vedrà il tuo visitatore.
Pensa al messaggio esatto che intendi trasmettere. Avere un titolo ampio e chiaro attirerà l'attenzione della gente. Questa prima sezione dovrebbe anche incoraggiare gli utenti a scorrere verso il basso e navigare nel resto della pagina.

Effetto neon

Effetto neon nero venerdì elementor.jpg

Al centro della composizione ho posizionato il logo, il messaggio e il bottone.

Puoi vedere che il messaggio più importante è scritto in una "luce al neon". Per ottenere quell'aspetto al neon, devi aggiungere CSS al tuo design. Il CSS aggiungerà molta ombra rosa al testo. Questo è tutto.

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Quindi è necessario aggiungere un widget di intestazione, modificare la dimensione del carattere scelto per farlo brillare e impostare il colore su bianco.

Quindi apri la scheda Avanzate e incollala nella scheda CSS personalizzata, aggiungi questo codice:

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

Se vuoi usare una tonalità diversa accanto al rosa, cambia semplicemente il numero del colore dopo il cancelletto. È tutto.

Titolo verticale

Un altro aspetto interessante di questo disegno appare accanto alle lettere "FRI", con l'anno allegato che appare verticalmente (90 gradi).

Per ottenere questo aspetto, è necessario aggiungere un widget della sezione interna. Questo viene fatto per implementare l'effetto verticale solo su una colonna.

Dopo aver aggiunto la sezione interna, aggiungi un widget del titolo a ciascuna colonna.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Definisci lo stile del tuo testo, quindi apri la scheda avanzata della seconda colonna (quella che desideri ruotare) e nella scheda CSS personalizzata scrivi questo codice:

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

80 sfondo retrò

Una volta che hai finito di lavorare sul post principale, inizia a lavorare sullo sfondo per dare una spinta al testo e rendere la fantascienza retrò degli anni '80 una realtà. Qui ho aggiunto un'immagine progettata in Photoshop e l'ho usata come sfondo eroe.
In questo disegno, lo sfondo presenta una griglia geometrica che ricorda Tron con un tocco di palme inclinate a sinistra e una sfumatura principale di blu-viola-rosa per ottenere quella sensazione retrò. Ci sono anche alcuni bei tocchi come il "DeLorean DMC-12" (probabilmente lo riconoscerai in Ritorno al futuro).
L'auto, così come le stelle cadenti, prendono di mira il testo principale della nostra sezione, evidenziando il nostro messaggio principale.

Sezione caratteristiche

box informazioni elementor.gif
Quando si progetta una pagina di destinazione, è necessario pensare alle relazioni tra ciascuna sezione. È un compito più complicato quando si tratta di un design alla moda come gli anni '80 retrò.
Quindi, dopo aver progettato una prima sezione straordinaria e alzato il livello, è necessario mantenere l'alto livello e mantenere lo stesso tema progettuale, considerando ogni sezione come una composizione in sé.

Il progetto

In questa sezione, ho progettato un aspetto più oscuro degli "oggetti sconosciuti" mentre "esploravamo" la pagina. Qui puoi vedere un titolo, 3 punti elenco e un pulsante. Per creare questo effetto 3D fluttuante, ho usato un po 'di Photoshop in combinazione con le impostazioni Flip-box di Elementor.

In scena su Photoshop

Quindi la prima cosa che ho fatto è stata creare l'intera scena in Photoshop per vedere come sarebbe stato tutto prima di iniziare a costruirla. Nel titolo puoi vedere l'aspetto delle luci al neon di prima, e sotto ho aggiunto 3 triangoli con icone e un titolo (i cerchi).
Ho aggiunto una sfumatura blu-viola-rosa a ciascun triangolo. Sopra di esso, un motivo a linee conferisce un aspetto TV anni '80 e una sfocatura dietro, per creare un aspetto fantascientifico scintillante.
Le icone hanno anche un aspetto al neon, così come il titolo nella parte inferiore del triangolo. Aggiungi un effetto fluttuante in grassetto. Lo sfondo ha un effetto fumoso, nuvoloso e scuro con lo stesso motivo a linee utilizzato per il triangolo.
Per l'animazione 3D, i triangoli avranno uno sfondo trasparente. Ciò significa che il testo sul retro verrà visualizzato quando non è coperto. Quindi ho aggiunto un po 'di fumo nero ai lati del triangolo per far sfumare la coperta e coprire ancora la parte posteriore.
Quindi fondamentalmente ci sono tre livelli da costruire nell'editor: lo sfondo, l'icona e il titolo.

Costruisci dal vivo

Nell'editor, ho aggiunto il widget flip-box. Nella scheda del contenuto anteriore, ho scelto un'immagine come elemento grafico e ho aggiunto il titolo. Nella scheda Sfondo, in Colore, ho cambiato il colore in trasparente e ho aggiunto il triangolo che ho disegnato nella sezione dell'immagine, quindi ho cambiato la posizione in modo che si adatti perfettamente .
Poi nella scheda posteriore ho fatto lo stesso, ma invece di aggiungere un titolo ho aggiunto il testo. Per passare alla scheda delle impostazioni. Qui ho giocato con l'altezza della scatola. Ho usato l'unità VH perché è un'unità relativa, che cambierà l'immagine rispetto allo schermo che il visitatore utilizzerà.
Questo lo rende più reattivo. Nella parte degli effetti, ho mantenuto l'effetto Capovolgi, ho cambiato la direzione a sinistra e attivato la profondità 3D per ottenere questo incredibile effetto 3D.

CTA

L'intera composizione qui è rivolta al pulsante (perché quello che vuoi è che l'utente faccia clic sul pulsante). Qui puoi vedere che il pulsante non è in grassetto e "in faccia", ma si fonde bene con lo sfondo fumoso con un po 'di bagliore intorno. Ma quando ci cammini sopra, appare il colore rosa.

Sezione critica

lista di recensioni elementor.jpg
Se l'utente scorre fino alla terza sezione, significa che stai facendo qualcosa di giusto. Quindi, dopo aver parlato del prodotto e del suo stupore, ora è il momento per un'altra parte di parlare.

Il progetto

In questa sezione abbiamo un widget di commenti su uno sfondo geometrico radicale con un titolo al neon. Lo sfondo è stato progettato in Photoshop e quindi posizionato sullo sfondo della sezione come sfondo fisso per creare un effetto di scorrimento al passaggio del mouse.
Volevo che questa sezione guardasse "dietro le quinte", in modo che quando scorri verso il basso, ne sei esposto.

Sezione tabella dei prezzi

tabella dei prezzi elementor.jpg
Questa sezione è la sezione Tabella dei prezzi . Qui puoi vedere tutti gli articoli che possono supportare la vendita. Il titolo, il conto alla rovescia e, naturalmente, la tabella dei prezzi.
Questo è il traguardo della pagina di destinazione. Pertanto, se l'utente non fa clic, qualcosa è andato storto.

Il progetto

Il design in questa sezione ha più di un tocco galattico degli anni '80. Lo sfondo qui è stato alterato in Photoshop, facendolo sembrare viola ravanello lucido e risaltare dallo sfondo nero-nero che esisteva prima, dandogli un pugno alla fine.
Sotto l'intestazione e lo slogan c'è un contatore che mostra il tempo rimanente fino alla fine della vendita. Qui ho usato un carattere spacy chiamato "space mono" che ho aggiunto tramite l'opzione del carattere personalizzato.
Nella tabella dei prezzi sottostante, ogni tabella ha uno sfondo nero chiaro che gli conferisce un aspetto "fluttuante nello spazio". Quando ci passi sopra, lo sfondo si scurisce e c'è un bagliore intorno come punto focale che ti indirizza a leggere il testo all'interno.
Quando si sposta il cursore del mouse sul pulsante, il pulsante cambia di nuovo colore. Una volta che hai finito di leggere le informazioni sui nostri fantastici scatti,

Ottieni questo modello assolutamente fantastico

Il modello presentato in questo tutorial  è ora disponibile nella libreria Elementor. Quindi puoi usarlo con un clic.

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
2 azioni
quota2
Tweet
Enregistrer