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