Come creare uno sfondo sfumato in WordPress

Il codice di progettazione Web del foglio di stile a cascata include un'opzione sfumatura, quindi puoi aggiungere sfondi sfumati solo CSS ai tuoi siti Web WordPress senza bisogno di immagini suddivise. In WordPress, non puoi applicare il gradiente al tag body come faresti per gli sfondi a tinta unita, ma puoi utilizzare un contenitore div che avvolge l'intero sito web. Molti temi basati su framework CSS includono già un div di questo tipo, anche se puoi aggiungerne uno se il tuo tema non lo fa.

Passo 1

Vai al wp-admin directory del tuo sito web e accedi alla dashboard di WordPress. Navigare verso Aspetto e fai clic su Editor collegamento. Fare clic sul collegamento per header.php sotto l'intestazione Modelli per caricare il file HTML contenente il tag body del tuo sito web.

Passo 2

Cerca un div con un ID di "contenitore" direttamente sotto il tag body nel tuo file header.php. Se non ne trovi uno, aggiungine uno. Ecco come dovrebbe apparire:

Salva il file facendo clic sul pulsante blu **Aggiorna file**. Se hai aggiunto un div, carica **footer.php** nell'editor e aggiungi **

direttamente sopra ** per chiudere il div.

Passaggio 3

Caricare stile.css nell'editore. Aggiungi questo codice in fondo al file:

contenitore {

colore di sfondo: #038394; background-image: linear-gradient(top, #038394, #00CCCC); background-image: -webkit-linear-gradient(top, #038394, #00CCCC); background-image: -moz-linear-gradient(top, #038394, #00CCCC); }

Il codice precedente imposta un fallback per i browser che non supportano i gradienti. L'impostazione di "immagine di sfondo" su "gradiente lineare" crea lo sfondo sfumato. Come minimo, è necessario impostare una direzione in cui iniziare il gradiente e quindi due colori che si sbiadiscono l'uno nell'altro. Aggiungi di nuovo quella riga di codice due volte, aggiungendo i prefissi Webkit e Mozilla per i browser Chrome, Safari e Firefox.

Fare clic sul blu Aggiorna file pulsante per salvare il file style.css. Il tuo sfondo sfumato ora appare su ogni pagina del tuo sito WordPress.