Lo sapevi che i colori direzionano i mostri occhi su cosa guardare, su cosa è importante e cosa no?
In questo articolo ti mostrerò come impostare una palette di colori con Elementor che ti servirà come base per costruire il tuo sito web.
Dopo aver letto questo articolo saprai come gestire i colori e costruire un sito risparmiando tempo.
Come sviluppatore di siti web mi trovo spesso ad aiutare clienti che mi chiedono di risolvere i problemi più disparati.
All’inizio mi chiedevano di creare pagine per vendere lanciare i loro prodotti o servizi,
Per anni cercavo in rete come aiutarli e principalmente trovavo articoli di autori con competenze ma che non riuscivano alla fine a farmi capire come risolvere il problema.
Ho dunque creato questo blog per aiutare sviluppatori come me dando un valore pratico e non teorico per risolvere facilmente i problemi.
Sei pronto?
Partiamo!
Sommario
La gestione dei colori
La gestione dei colori, come ti ho detto all’inizio di questo articolo, è molto importante quando si crea un sito web.
Devi sapere che ci sono addirittura ricerche scientifiche che aiutano i creatori di siti nella scelta dei colori.
Questo perchè la mente umana è stimolata da alcuni colori piuttosto che da altri.
I colori caldi come per esempio rosso, arancione e giallo sono considerati stimolanti, positivi e decisi.
Per questo molto spesso i pulsanti acquista sono di colore rosso, perchè il rosso per la nostra mente è sinonimo di urgenza.
I colori pastello e i colori freddi come verde e blu trasmettono fiducia.
Facebook, per esempio, utilizza il blu che è un colore che trasmette fiducia.
Vedi, quando un utente arriva sul tuo sito avrà una reazione inconscia che determinerà se vale la pena continuare la lettura o abbandonare.
Uno dei fattori che influenza la decisione degli utenti sono i colori
Per questo motivo quando devi costruire una pagina o un sito ti consiglio di pensare a quale emozione vuoi trasmettere e quindi cosa vuoi che gli utenti facciano sul tuo sito e poi scegliere il colore.
Impostare i colori è molto semplice, come abbiamo visto, devi solo andare nella Tab Stile e scegliere il colore che ti serve.
Elementor ti mette a disposizione una funzione che può farti risparmiare moltissimo tempo.
Questa funzione è la Palette Colori.
Palette di Colori
Con la Palette Colori puoi impostare i colori che saranno utilizzati automaticamente dal sito o dalla pagina che stai creando.
Una volta scelti i colori della tua pagina o dell’intero sito potrai impostarli nella pagina che stai costruendo con Elementor così non dovrai cambiare i colori per ogni titolo, sottotitolo etc che inserisci.
Per impostare la Palette Colori devi andare sull’icona in alto a sinistra prima del titolo Elementor
poi clicca su Colori Predefiniti
Troverai la Tavolozza Colori attualmente utilizzata per la pagina che stai creando
Come puoi notare dall’immagine nella pagina precedente, la tavolozza è formata da 4 colori:
- Principale: questo colore è utilizzato per le Intestazioni e le Icone.
- Secondario: il colore utilizzato per i Sottotitoli, gli Elenchi, gli Sfondi della tabella dei prezzi e i Titoli Animati.
- Testo: questo colore è utilizzato per i paragrafi e le voci del menu.
- In Risalto: è il colore utilizzato perLink, sfondi dei pulsanti, intestazioni di tabulazione e fisarmonica e badge.
Puoi cambiare questi colori in due modi: sostituire la palette con quelle che trovi sotto oppure cliccare su ogni colore ed inserire quello che desideri.
Se durante la costruzione della pagina vuoi variare un colore di un Widget puoi farlo tranquillamente.
Come cambiare i colori
Adesso che abbiamo visto come impostare i colori di base vediamo come variare i colori per le Sezioni, Colonne e Widget.
Elementor attraverso la Tab Stile ti permette di cambiare i colori predefiniti.
N.B Le opzioni colore non saranno uguali in tutti gli elementi della struttura (Sezione, Colonne e Widget), per questo motivo ti illustrerò tutte le opzioni che potrai trovare.
Vediamo per esempio cosa succede se vuoi cambiare la il colore di sfondo di una sezione, tralasciando le opzione immagine e video di sfondo troveremo queste opzioni:
Normale: il colore dello sfondo è visibile
Hover: il colore dello sfondo sarà visibile solo al passaggio del mouse
Queste due opzioni possono essere usate insieme, infatti è possibile impostare un colore dello sfondo che sarà visibile e cambierà al passaggio del mouse.
Queste due impostazioni hanno a loro volta altre due opzioni:
- Classico
- Gradiente
La prima è lo sfondo classico con un solo colore, Gradiente invece è una successione di tonalità cromatiche che si susseguono in modo progressivo e lineare.
Per fare questo devi impostare due colori e poi scegliere la posizione cioè la sfumatura di un colore verso l’altro.
Il Gradiente è molto utilizzato nella creazione delle pagine e ti permette di creare colorazioni straordinarie.
L’utilizzo del gradiente piace alle persone perchè è quello che vedono sempre più spesso.
Sempre più siti web, infatti, sono costruiti utilizzando il gradiente, per questo l’occhio degli utenti “premia” il suo utilizzo.
Conclusioni
Ti consiglio di non esagerare con l’utilizzo dei colori, un sito dovrebbe avere massimo 3 colori, uno principale uno secondario e un altro di contrasto da utilizzare per mettere in evidenza gli elementi come link etc.
Bene siamo arrivati alla fine, spero che questo articolo ti sia utile per migliorare le tue landing page.
Se hai dubbi ci vediamo nei commenti.
A presto.
