Ogni colore in Smart Image può essere fisso oppure controllato da uno Smart Message. Un colore fisso è lo stesso su ogni post. Un colore dinamico viene ricalcolato per ogni post, quindi un articolo di politica e uno di sport possono avere colori diversi partendo da un unico modello.
1. Quali campi accettano un colore dinamico#
Sei campi lo accettano: Overlay color, Text color, Text shadow color, Highlight, Underline e Decoration. Ognuno è configurato in modo indipendente, quindi puoi controllare l'overlay con i colori delle tue sezioni lasciando il testo bianco.
L'opzione compare solo se il tuo brand ha almeno un modello di Smart Message. Se non ne hai nessuno, il campo resta un semplice selettore di colore.
2. Scrivi uno Smart Message che restituisce un colore#
Apri il menu hamburger, vai su Brands, seleziona il tuo brand, poi la sezione Smart message templates e crea un modello. Le variabili che puoi testare, come le categorie normalizzate in organic.category, sono elencate in Quali variabili Twig sono disponibili in Nonli?.
La regola deve restituire un colore esadecimale e nient'altro. Nessun testo intorno, nessun ritorno a capo, nessuno spazio finale. Usa le forme {%- ... -%} e {{- ... -}} così Twig rimuove gli spazi per te.
Ecco una regola che assegna a ogni sezione il suo colore:
1{%- set categories = organic.category ?? [] -%}2{%- if 'politique' in categories -%}3{{- '#E50032' -}}4{%- elseif 'international' in categories -%}5{{- '#2377FA' -}}6{%- elseif 'rugby' in categories -%}7{{- '#16A34A' -}}8{%- elseif 'hippisme' in categories -%}9{{- '#9333EA' -}}10{%- elseif 'sports' in categories -%}11{{- '#F97316' -}}12{%- else -%}13{{- '#6F819D' -}}14{%- endif -%}I nomi delle categorie provengono dalla tassonomia del tuo sito, quindi usa gli slug che i tuoi articoli riportano davvero.
Termina sempre con un ramo {%- else -%}. Una regola che non restituisce nulla per un articolo senza categoria lascerebbe il campo vuoto.
Una convenzione di denominazione aiuta: aggiungi il prefisso [COLOR] a questi modelli, ad esempio [COLOR] Section color. Il menu a tendina della regola del colore elenca tutti gli Smart Message del brand, quindi un prefisso rende facile riconoscere quelli dedicati ai colori.
3. Imposta il campo su Dynamic#
Un campo colore parte come un semplice campione, senza alcun selettore di modalità visibile.
Clicca il campione di colore del campo che vuoi controllare. Si apre il popover del colore con due schede, Static e Dynamic. Clicca Dynamic.
Il popover resta aperto e mostra subito la regola che è stata selezionata per te, così puoi correggerla immediatamente.
4. Scegli la regola e un colore di riserva#
Color rule è lo Smart Message che restituisce il colore. Fallback color è ciò che Smart Image usa se la regola fallisce, non restituisce nulla o restituisce qualcosa che non è un colore esadecimale valido.
Scegli un colore di riserva che resti leggibile da solo. È ciò che vede il tuo pubblico quando un articolo non ha categoria, quindi trattalo come il colore neutro del tuo brand e non come un ripensamento.
Una volta configurata, la riga del modulo mostra il campione, un indicatore {} e il nome della regola. Quella riga ti indica a colpo d'occhio che il campo è dinamico e non fisso.
Per tornare a un colore fisso, riapri il popover e clicca Static. Il colore di riserva diventa il nuovo colore fisso.
5. Altri esempi di regole#
Un colore per ogni social network
1{%- if social_network == 'facebook' -%}2{{- '#1877F2' -}}3{%- elseif social_network == 'linkedin' -%}4{{- '#0A66C2' -}}5{%- elseif social_network == 'instagram' -%}6{{- '#C13584' -}}7{%- else -%}8{{- '#111827' -}}9{%- endif -%}Un colore più forte sui post con link
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Un colore d'accento quando il titolo segnala urgenza
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Due colori che si alternano per giorno
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Buone pratiche#
Mantieni una regola per ogni scopo. Un unico modello che decide l'overlay, il testo e la sottolineatura insieme non può essere riutilizzato, perché una regola del colore restituisce esattamente un colore.
Controlla il contrasto prima di pubblicare. Un overlay dinamico cambia lo sfondo dietro il testo, quindi un colore che si legge bene con il testo bianco in una sezione potrebbe non funzionare in un'altra. Visualizza l'anteprima di qualche articolo di sezioni diverse prima di salvare la configurazione.
Riutilizza la stessa regola su più campi quando vuoi che cambino insieme. Collegare sia l'evidenziazione sia la sottolineatura allo stesso Smart Message le mantiene coerenti senza duplicare la logica.
7. Se il colore non cambia#
Controlla che la regola restituisca un valore esadecimale puro. Uno spazio o un ritorno a capo di troppo è la causa più comune, ed è il motivo per cui gli esempi qui sopra usano i tag Twig che rimuovono gli spazi.
Controlla che l'articolo contenga davvero i dati letti dalla tua regola. Una regola basata su organic.category usa il tuo colore di riserva su un post creato manualmente, senza un articolo alle spalle.
Se lo Smart Message è stato eliminato, il campo mostra Rule to be chosen e Smart Image usa il colore di riserva. Apri il popover e seleziona una regola esistente.