Hvordan Design en WordPress Header Gradient
Overskriften på din WordPress nettstedet er avgjørende for å oppfordre besøkende til bloggen din. Den inneholder et øyeblikksbilde av nettstedet ditt navn, logo og ofte noen navigeringskoblinger. Fordi det er så viktig, kan det være lurt å gjøre det mer attraktivt med en gradient bakgrunn. Dette kan være mer interessant enn bare en vanlig, ensfarget bakgrunn. Du kan bruke farger fra nettstedets viktigste farge-ordningen, forskjellige farger sammen for å gjøre toppteksten skiller seg ut, eller du kan bruke gradient å blande bakgrunnsfargen til fargen på innholdsområdet.
Bruksanvisning
1 Besøk tools.dynamicdrive.com/gradient/. Dette gratis verktøy gjør deg til en gradient bilde for spissen. Velg gradient typen du ønsker (opp / ned eller til venstre / høyre), og angi bredden og høyden til det samme som din spissen. Sett "Topp / Venstre farge" og "Bottom / Høyre farge" til de fargene du vil at gradient å visne inn. Når du er ferdig, klikk på "Get bildet i full størrelse", høyreklikk på bildet som vises, og lagre det på harddisken på datamaskinen.
2 Logg inn på din WordPress-konto. Klikk på "Media" og deretter "Legg til ny". Klikk på "Velg filer", og finn deretter gradient bildet på harddisken din. Når du laster den, kopiere URL-adressen ved siden av "URL" header til utklippstavlen.
3 Klikk "Utseende" og deretter "Editor". Dette er tema Editor, som lar deg endre HTML-filer for din WordPress tema.
4 Klikk "header.php" fra den store listen over filer til høyre. Ditt mål med denne filen er ikke å gjøre noen endringer, men å identifisere ID-en <div> tag at overskriften din er i. Du kan gjøre dette ved å se under <body> -taggen og finne de elementene som også er i header, som for eksempel nettstedets logo, eller noen menylinjer. Deretter finner den <div> tag at disse er pakket inn i, noe som kan se ut som dette:
<Div id = "topheader">
</ Div>
5 Klikk "style.css" fra listen til høyre. Bla gjennom filen til du finner spissen. Like før stengetid} braketten for denne delen, legg til følgende linje:
background-image: URL ( 'http://yoursite.com/path/to/image/gradient.jpg');
Bytt ut URL med den du kopierte tidligere.
6 Klikk "Oppdater fil." Stigningen Bildet vil nå vises på nettstedets spissen.