Nwlapcug.com


Come progettare una sfumatura di intestazione di WordPress

Come progettare una sfumatura di intestazione di WordPress


L'intestazione del vostro sito WordPress è fondamentale e invita i visitatori al tuo blog. Esso contiene una rapida istantanea del nome del sito, logo e spesso alcuni link di navigazione. Perché è così importante, si potrebbe voler renderlo più attraente con uno sfondo sfumato. Questo può essere più interessante di solo uno sfondo normale, colore unico. È possibile utilizzare colori dalla combinazione di colori principali del tuo sito, complessivamente di colori diversi per rendere l'intestazione si distinguono, o si potrebbe utilizzare il gradiente di fondere il colore di sfondo al colore dell'area di contenuto.

Istruzioni

1

Visita tools.dynamicdrive.com/gradient/. Questo strumento gratuito ti aiuta a fare un'immagine del gradiente per l'intestazione. Selezionare il tipo di sfumatura desiderato (su/giù o destra/sinistra) e impostare la larghezza e l'altezza per la stessa intestazione. Impostare "Alto/sinistra colore" e "Bottom/Right" per i colori desiderati il gradiente a svanire in. Al termine dell'operazione, fare clic su "Ottenere l'immagine full size", quindi fare clic destro sull'immagine che appare e salvarlo sul disco rigido del computer.

2

Accedi al tuo account di WordPress. Fai clic su "Media" e quindi fare clic su "Aggiungi nuovo". Fare clic su "Seleziona file" e quindi individuare l'immagine gradiente sul disco rigido. Quando si caricare, copiare negli Appunti l'URL accanto all'intestazione di "URL".

3

Fare clic su "aspetto", quindi "Editor". Questo è l'Editor di temi, che consente di modificare i file HTML per il vostro tema WordPress.

4

Fare clic su "header. php" dall'ampio elenco di file sulla destra. Il vostro obiettivo con questo file è di non apportare modifiche, ma per identificare l'ID del tag < div > che l'intestazione è in. Per farlo, guardando sotto il tag < body > e trovare gli elementi che sono anche nell'intestazione, ad esempio logo del tuo sito, o qualsiasi barre dei menu. Poi trovare il tag < div > che questi sono avvolti in, che può apparire come segue:

< div id = "topheader" >

< / div >

5

Fare clic su "Style. css" dall'elenco a destra. Scorrere il file fino a individuare l'intestazione. Appena prima della chiusura} staffa per questa sezione, aggiungere la seguente riga:

background-image: URL('http://yoursite.com/path/to/image/gradient.jpg');

Sostituire l'URL con quello copiato in precedenza.

6

Fare clic su "Aggiorna File". L'immagine gradiente apparirà ora nella testata del tuo sito.