Il Prelievo colore include cinque strumenti integrati, tra cui tonalità, saturazione, luminosità, opacità e una ruota di colori. Queste impostazioni rendono facile la configurazione veloce della selezione dei colori per soddisfare ogni esigenza.
Utilizzando il Prelievo colore
Il Prelievo colore di Gantry 5 include quattro principali schede, ognuna con il proprio strumento per aiutarvi a trovare e perfezionare il colore desiderato. Queste schede sono:
Scheda | Descrizione |
HUE | Questo strumento ti dà la possibilità di selezionare un colore in base alla tonalità, utilizzando il cursore arcobaleno nella parte destra per selezionare un colore generale e successivamente l'area principale per perfezionare questa selezione. |
BRI | Questo è lo strumento Luminosità, dando la possibilità di perfezionare ulteriormente la selezione del colore regolando la luminosità utilizzando il cursore del colore sulla destra. L'area principale qui serve per consentire di navigare rapidamente tra i colori. |
SAT | Lo strumento Saturazione è un modo rapido e semplice per regolare la saturazione del colore. Spostare il cursore verso il basso per rimuovere il colore, e fino ad aggiungere al suo livello di saturazione. Come lo strumento Luminosità, l'area principale viene utilizzata per selezionare rapidamente tra i colori dell'arcobaleno. |
WHEEL | Questo strumento è una semplice ruota di colori, un metodo preferito di selezione un colore tra quelli esistenti. |
Oltre a questi strumenti, si ha anche la possibilità di regolare l'impostazione opacità del colore utilizzando il cursore della trasparenza che si trova sul lato destra del Prelievo colore. Il pulsante trasparente nella parte inferiore del Prelievo colore vi dà la possibilità di impostare 0% di opacità all'istante, pur mantenendo la tonalità originale se si sceglie di riportarla in seguito facendo scorrere il cursore della trasparenza.
Aggiungere strumento Prelievo colore al tuo sito
Il Prelievo colore è un tipo di campo in Gantry 5. Se si desidera aggiungerlo ad un vostro template o ad una particella, si dovrebbe fare assegnando nel file YAML associato il campo amministrativo input del tipo input.colorpicker .Ecco un esempio di implementazione di questo campo nel file YAML di una sezione del template. In questo esempio, il file
feature.yaml
si trova in g5_hydrogen/blueprints/styles/
.name: Feature Colors
description: Feature colors for the Hydrogen theme
type: section
form:
fields:
background:
type: input.colorpicker
label: Background
default: "#ffffff"
text-color:
type: input.colorpicker
label: Text
default: "#666666"
Questo esempio realizza due cose. Prima, si crea la sezione Feature Colors nel pannello amministrativo Styles che contiene dei campi Background (colore di sfondo) e Text (colore del testo), campi che possono essere configurati facilmente dal pannello Gantry Admin.Secondo, essa fornisce dei campi collegati al template, fornendo la variabile colore utilizzata quando la pagina viene renderizzata.
Ulteriori informazioni su come utilizzare i file YAML in Gantry 5 sono disponibili nella guida Tipo di campi YAML.