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 sfruttare questa tendenza e mostrarti come implementarla in una landing page creata 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.
Sezione di apertura
Effetto neon
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.
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.
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ò
Sezione caratteristiche
Il progetto
In scena su Photoshop
Costruisci dal vivo
CTA
Sezione critica
Il progetto
Sezione tabella dei prezzi
Il progetto
Ottieni questo modello assolutamente fantastico
Il modello mostrato in questo tutorial è ora disponibile nella libreria Elementor. Quindi puoi usarlo con un clic.