Se volete creare un sito WordPress visivamente gradevole, cambiare i colori di sfondo può aiutarvi a mettere in evidenza i contenuti importanti, a creare una chiara gerarchia visiva e a rendere il vostro sito più accattivante. Tuttavia, con così tanti blocchi disponibili nell'editor di blocchi di WordPress, può essere difficile capire come cambiare il colore di sfondo per ognuno di essi.
Mentre alcuni blocchi sono dotati di impostazioni integrate per il colore di sfondo, altri richiedono un approccio leggermente diverso. La buona notizia è che la maggior parte dei blocchi del nucleo di WordPress supporta la personalizzazione nativa del colore di sfondo e, per quelli che non lo fanno, esistono semplici soluzioni come il blocco Gruppo e il blocco Copertina.
In questa guida, vi illustreremo tre semplici metodi per poter creare con sicurezza lo stile di qualsiasi blocco del vostro sito. Tratteremo i blocchi che supportano la modifica diretta del colore, mostreremo come utilizzare il blocco Gruppo ed esploreremo il blocco Copertina per progetti avanzati come le sezioni eroe e i banner. Iniziamo.
Metodo 1: Colore di sfondo diretto (supporto nativo)
Molti blocchi del nucleo di WordPress sono dotati di un supporto nativo per la modifica del colore di sfondo. Ciò significa che è possibile applicare direttamente i colori senza aggiungere blocchi aggiuntivi o codice personalizzato.
Passo 1: selezionare il blocco
Iniziare facendo clic sul blocco che si desidera personalizzare all'interno dell'editor. In questo modo si attiverà il blocco e le sue impostazioni appariranno nella sezione Impostazioni del blocco pannello a destra.
Passo 2: aprire la barra laterale delle impostazioni del blocco
Se il pannello delle impostazioni non è ancora visibile, fare clic sul pulsante Impostazioni situato nell'angolo in alto a destra dell'editor. Sotto il pulsante Impostazioni del blocco pannello, individuare la voce Stili sezione.
Fase 3: Regolazione del colore di sfondo
Nel pannello delle impostazioni degli stili, si trova la voce Colore sezione. Sotto Impostazioni del colore, trovare Sfondo. A questo punto, è sufficiente scegliere un colore dalla tavolozza, lavorare con il selezionatore di colori o inserire un codice HEX/RGB/HSL personalizzato.
Si applica a
- Blocchi di testo e contenuto: Paragrafo, Titolo, Elenco, Citazione, Citazione, Codice, Preformattato, Versi
- Blocchi di layout: Gruppo, colonne, copertina, media e testo
- Blocchi interattivi/Widget: Pulsanti, Calendario, Ultimi messaggi, Categorie, Tag Cloud, Icone sociali, Navigazione, File, Audio, Video, RSS, Ricerca, Accesso/Uscita, Elenco delle pagine
- Blocchi sito/post: Titolo del sito, Tagline del sito, Titolo del post, Contenuto del post, Estratto del post, Data del post, Autore del post, Categorie del post, Tag del post, Commenti, Post successivo/precedente, Leggi tutto
- Blocchi di utilità: Distanziatore (limitato), Separatore (limitato), Tavolo (solo l'intero tavolo).
Note
- Blocco di copertura: Al posto dello sfondo si trova l'opzione Sovrapposizione. È possibile regolare il colore della sovrapposizione e le impostazioni di opacità per ottenere effetti a strati.
- Blocco pulsanti: Il colore di sfondo si applica al pulsante stesso, mentre l'opzione del colore del testo modifica il testo del pulsante.
- Icone sociali: Il colore di sfondo influisce solo sul contenitore dell'icona.
- Blocco Tabella:
- Per modificare il colore di sfondo dell'intera tabella, selezionare il blocco Tabella e applicare il colore nel pannello delle impostazioni.
- È possibile avere colori diversi per le righe, ma è limitato all'opzione predefinita. Andare alla sezione Stili e scegliere la sezione Strisce ma il colore della striscia è predefinito e non può essere personalizzato in modo nativo.
Metodo 2: Avvolgere in un blocco di gruppo
Per i blocchi che non hanno opzioni native per il colore di sfondo, come i blocchi media, legacy o di utilità, si può usare un elemento Blocco di gruppo per fungere da contenitore flessibile. Avvolgendo il contenuto all'interno del blocco Gruppo, è possibile applicare i colori di sfondo all'intera sezione.
Fase 1: Identificare e indirizzare il blocco specifico
Fare clic sul blocco che non supporta direttamente il colore di sfondo. Una volta fatto ciò, apparirà la barra degli strumenti del blocco sopra quel particolare blocco.
Fase 2: raggruppare il blocco
A questo punto, fare clic sul pulsante Menu Opzioni (tre punti) all'estrema destra nella barra degli strumenti del blocco e selezionare Gruppo dal menu a discesa. Il blocco selezionato viene avvolto all'interno di un blocco Gruppo.
Passo 3: selezionare il blocco gruppo
Fate clic sul bordo esterno del blocco Gruppo e, quando appare la barra degli strumenti, selezionate il blocco gruppo padre all'estrema sinistra. In questo modo si evidenzierà l'intera sezione.
Fase 4: Applicazione del colore di sfondo
Subito dopo, navigare nella sezione Pannello Impostazioni blocco, scorrere fino alla voce Colore e scegliere un colore di sfondo, oppure utilizzare il selezionatore di colori per ottenere tonalità personalizzate.
Fase 5: regolazione della spaziatura (facoltativa)
Se il contenuto del blocco di gruppo occupa l'intera larghezza del blocco, potrebbe essere necessario regolare la larghezza del contenuto per rendere visibile il colore di sfondo. Selezionare il campo Gruppo (come abbiamo fatto al punto 3), passare al blocco Impostazioni del blocco, scorrere fino a Larghezza del contenutoe impostare una larghezza personalizzata per creare spazio tra il contenuto e lo sfondo colorato.
Si applica a
- Blocchi multimediali senza supporto diretto: Immagine (se non convertita in copertina), Video, Audio
- Blocchi Legacy/Utility: Shortcode, Classic, More, HTML personalizzato, Legacy Widget, Template Part, Interruzione di pagina, Archivi, Embed (YouTube, Twitter, ecc.), Avatar, Comments Query Loop, Spacer (per un controllo avanzato), Separator (per una maggiore flessibilità)
Note
- Il blocco Gruppo è ideale per creare sezioni con colori di sfondo uniformi.
- È possibile annidare più blocchi all'interno di un blocco Gruppo per creare una sezione coesa.
- Regolare le impostazioni di layout (come l'allineamento e il padding) per un migliore controllo della spaziatura e del flusso dei contenuti.
Metodo 3: utilizzare un blocco di copertura
Quando si ha bisogno di opzioni di progettazione avanzate, come effetti di sovrapposizione o sfondi stratificati, l'opzione Blocco di copertura è la soluzione perfetta. Permette di aggiungere colori o immagini di sfondo con opacità personalizzabile, rendendole perfette per le sezioni hero, i banner o le aree di contenuto in evidenza.
Passo 1: Aggiungere un blocco di copertura
È sufficiente iniziare facendo clic sul pulsante + nell'editor, cercare Copertinae inserirlo nel contenuto.
Passo 2: Scegliere un colore di sfondo
Dalla configurazione iniziale, selezionare un colore di sfondo o aggiungere un'immagine. Sia che si utilizzi un'immagine o un colore, è possibile modificare il colore di sovrapposizione e regolare l'opacità della sovrapposizione. A tale scopo, accedere alla sezione Colore sezione sotto il Stili nella scheda Impostazioni del blocco.
Passo 3: inserire il contenuto all'interno del blocco di copertina
Per inserire il contenuto all'interno del blocco di copertina, è sufficiente utilizzare l'opzione barra degli strumenti di blocco per trascinare il blocco (o i blocchi) che si desidera stilizzare (come paragrafi, titoli o immagini) nel blocco Copertina o aggiungere nuovi blocchi direttamente al suo interno utilizzando il pulsante inseritore di blocchi (pulsante +).
Si applica a
- Per esigenze di progettazione avanzate: Qualsiasi blocco che richieda effetti di sfondo a strati, come paragrafi, titoli, immagini, pulsanti o anche blocchi multipli combinati.
Note
- Il blocco Cover è perfetto per sezioni di eroi, aree call-to-action, e banner.
- È possibile sovrapporre il testo a colori o immagini di sfondo per ottenere effetti visivi di grande impatto.
- Regolate l'opacità per ottenere sovrapposizioni sottili o blocchi di colore decisi.
Tabella riassuntiva: Blocchi e metodi
Categoria di blocco |
Metodo |
|---|---|
Blocchi di testo/contenuto (ad esempio, paragrafo, intestazione, elenco) |
Metodo 1 |
Blocchi multimediali (ad esempio, immagini, video, audio) |
Metodo 2 o 3 |
Blocchi di layout (ad esempio, colonne, gruppo, copertina) |
Metodo 1, 2 o 3 |
Blocchi interattivi (ad esempio, pulsanti, icone sociali) |
Metodo 1 |
Blocchi di widget (ad esempio, Ricerca, Calendario) |
Metodo 1 |
Blocchi legacy/utility (ad esempio, Shortcode, Classic) |
Metodo 2 |
Conclusione
Il modo più semplice per avere un grande impatto sull'aspetto generale del vostro sito web è probabilmente quello di cambiare il colore di sfondo dei blocchi principali di WordPress che utilizzate. La scelta di presentare i contenuti con il giusto colore di sfondo attirerà sicuramente gli utenti del sito. È un trucco semplice ma potente per migliorare l'esperienza dell'utente e far risaltare il vostro sito. Sia che scegliate le impostazioni native del colore di sfondo, sia che utilizziate il metodo dei blocchi di gruppo, sia che scegliate l'approccio dei blocchi di copertina, in fin dei conti non si tratta solo di aggiungere colore, ma di creare un ambiente in cui i vostri contenuti parlino più forte. Sperimentate quindi con i colori e scoprite come piccoli cambiamenti possono trasformare il vostro sito web in una piattaforma più efficace.
