Elementor: la gestione dei colori

Iscriviti…. resta sempre aggiornato sui nuovi articoli e scarica la guida gratuita “Elementor Semplice” 

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!

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

Elememtor: la gestione dei colori

poi clicca su Colori Predefiniti

Elementor: la gestione dei colori

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.

Elementor la guida definitiva

Se ti piacciono i miei articoli ho scritto un eBook per te

“Elementor: la Guida Completa”

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.

Ho un favore da chiederti, se questo articolo ti è piaciuto, condividilo.
Elementor la guida definitiva

Ti è piaciuto questo articolo?

Scopri l’eBook che ho scritto su Elementor.

Sei vuoi imparare ad utilizzare Elementor questo è l’eBook che fa per te!

Potrebbe anche piacerti

Elementor la guida completa

Ultimi articoli

Categorie
Passa a Elementor Pro
Per il tuo hosting
Per creare la tua Privacy Policy
Copyright © 2020 WP Semplice - Privacy Policy

Inizia col piede giusto
Iscriviti alla newsletter

In regalo per te la Guida Gratuita per scoprire come funziona Elementor!

guida elementor

Gli articoli ti sono stati utili?

Iscriviti alla newsletter per restare sempre aggiornato! 

Grazie ti contatteremo a breve