Video passo dopo passo
Introduzione
Crea il tuo sistema di design con colori globali e stili di testo che possono essere facilmente assegnati agli elementi del tuo sito.
Colori globali
Imposta colori globali predefiniti (colori primari, secondari, del testo e di accento), colori personalizzati in linea o crea nuovi colori globali dalle impostazioni globali di Elementor.
Globale
Colori globali predefiniti
Per impostazione predefinita, i colori predefiniti (primario, secondario, testo e accento) vengono precompilati dal CSS del tuo tema. Modificali qui per sovrascrivere le impostazioni del tuo tema. Quali elementi sono influenzati dalla palette di colori predefinita:
- I colori primari sono usati per titoli e icone.
- I colori secondari sono usati per sfondi di elementi di lista, sottotitoli, intestazioni animate e tabelle prezzi.
- I colori del testo sono usati per paragrafi e elementi di menu.
- I colori di accento sono usati per link, sfondi di pulsanti, intestazioni di tab e fisarmonica e badge.
Ciascuno dei colori verrà utilizzato in vari widget in modo simile agli esempi precedenti. Di seguito sono riportati alcuni esempi di colori per aiutare a visualizzare le aree in cui viene utilizzato ogni colore.
Nuovi colori globali
Oltre ai 4 colori globali predefiniti (primario, secondario, testo e accento), puoi aggiungere qualsiasi colore tu scelga alla palette globale, da usare in qualsiasi opzione di colore di Elementor.
Colori personalizzati in linea
Puoi anche selezionare qualsiasi colore personalizzato da usare in linea senza aggiungerlo alla palette di colori globali.
Da qualsiasi pagina o post di Elementor, fai clic sul menu hamburger nell’angolo in alto a sinistra del Pannello widget, quindi fai clic su Impostazioni del sito > nella sezione DESIGN DEL SISTEMA > fai clic su Colori Globali.
- Modifica colore: fai clic sul campione di colore per selezionare un nuovo colore per qualsiasi colore esistente. I nomi possono anche essere modificati. Fai clic sul nome del colore per cambiarlo. Ad esempio, puoi cambiare Principale in Titoli, Accento in Evidenziato, ecc.
- Aggiungi colore: fai clic sul pulsante Aggiungi colore per aggiungere un nuovo colore personalizzato globale o in linea.
- Elimina colore: posiziona il cursore sul campione di colore e fai clic sull’icona del cestino che appare.
Sistema di colori Esadecimale
In HTML si usa il codice Hex o esadecimale per definire i colori. Per capire un po’ meglio come si trascrive questo codice, vediamo questo grafico:
Come possiamo vedere nell’immagine, seguito dal simbolo cancelletto o hashtag # i codici Hex per definire un colore hanno altri 6 cifre, che definiscono un colore RGB (Red Green Blue o Rosso Verde Blu) tutti i colori dello spettro sono composti dalla miscela di questi tre colori base. Nel codice Hex le prime due cifre corrispondono al colore Rosso, le due centrali al Verde e le ultime due al Blu.
Immagina di avere tre barattoli di vernice, uno di colore rosso, un altro di colore verde e un altro di colore blu, e di mescolare questi colori in un recipiente aggiungendo una certa quantità di ciascuno, il risultato sarà un colore determinato. In questo caso è esattamente lo stesso, a seconda della quantità di ogni colore che aggiungiamo otterremo un colore specifico.
Fin qui tutto bene, ma… nei codici Hex non ci sono solo numeri, ma anche lettere, vediamo perché. Noi siamo abituati a lavorare con il sistema decimale, cioè con una base di 10 cifre (0, 1, 2, 3, 4, 5, 6, 7, 8 e 9) usando queste cifre componiamo qualsiasi quantità numerica. Nel caso dei codici per colori Hex lavoriamo con base esadecimale, cioè, invece di 10, usiamo 16 cifre (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E e F).
Usando solo due cifre il valore esadecimale minore è 00 (equivale in decimale a 0) e il maggiore FF (equivale in decimale a 255), cioè possiamo aggiungere alla miscela di ogni colore tra 0 e 255. Vediamo alcuni esempi rappresentati in forma esadecimale:
- #000000 (Nero: in decimale 0 unità di rosso, 0 di verde e 0 di blu)
- #FFFFFF (Bianco: in decimale 255 unità di rosso, 255 di verde e 255 di blu)
- #FF0000 (Rosso: in decimale 255 unità di rosso, 0 di verde e 0 di blu)
- #00FF00 (Verde: in decimale 0 unità di rosso, 255 di verde e 0 di blu)
- #0000FF (Blu: in decimale 0 unità di rosso, 0 di verde e 255 di blu)
- #999999 (Grigio: in decimale 153 unità di rosso, 153 di verde e 153 di blu)
Con questo sistema un computer a 24 bit può riprodurre fino a 16.777.216 colori diversi, una quantità più che sufficiente, considerando che l’occhio umano può distinguere solo 10 milioni di colori.
Link utili
- Teoria del colore: Guida base al colore
- Estensione per browser con cui potrai catturare il colore Hex di qualsiasi parte di una pagina web: