Miten lisätä otsikko WordPress? Käytä WordPress Customizeria tai Cover-lohkoa muokkaamaan otsikkokuvaa.

Miten lisätä otsikko WordPress? Käytä WordPress Customizeria tai Cover-lohkoa muokkaamaan otsikkokuvaa.

Voit olla kanssamme samaa mieltä siitä, että mikään verkkosivusto ei ole täydellinen ilman otsikkoa. Tiesitkö, että sinulla on kaksi eri vaihtoehtoa otsikon luomiseen WordPressissä? Tässä opetusohjelmassa selitämme yksittäiset erot.

Aito otsikkokuva

Klassista WordPress-otsikkoa käytetään tunnetusti kaikilla eri sivuilla. Se on yleensä leveä suorakaiteen muotoinen laatikko sivulta toiselle. Sen sisällä on logo tai sivuston nimi, slogan ja valikkokohdat. Voit myös lisätä sinne taustakuvan, jota kutsutaan otsikkokuvaksi. Otsikkokuvalla voidaan houkutella kävijöiden huomio ja luoda verkkosivuston yleinen ulkoasu ja tunnelma. Voit itse päättää, käytätkö huomaamatonta otsikkokuvaa vai hallitsevaa kuvaa, joka kiinnittää kävijöiden huomion sivuston navigointiin.

WordPress-otsikkokuva
Käytetyin otsikkotyyppi - otsikkokuva verkkosivuston yläosassa.

Kuinka muokata otsikkoa WordPress Customizerissa

Oletusarvoisesti otsikkokuvaa voidaan muuttaa WordPress Customizerin kautta. Voit käyttää sitä sekä WordPressin ylläpidosta että verkkosivustoltasi:

  • Suoraan WP:n ylläpidosta, siirry osoitteeseen Ulkonäkö -> Mukauta
  • Jos olet kirjautuneena sisään, napsauta yläpalkin "Mukauta".

Mukautusohjelma sisältää kaikki aktiivisen teeman perusasetukset. Siksi otsikkokuvan asetukset riippuvat aktiivisesta teemastasi. Citadela-teemassa voit lisätä ja muokata otsikkokuvaa kohdassa Mukauttaminen -> Ulkonäkö -> Otsikon tausta.

Lisää otsikko Customizerin kautta
Otsikon lisääminen mukauttimen kautta

Otsikkokuvan asetukset

Riippumatta siitä, minkä otsikkokuvan valitset, voit määrittää sen tarpeidesi mukaan. Mielenkiintoinen vaikutus voidaan saavuttaa käyttämällä "Header Image Repeat". Voit määrittää seuraavat vaihtoehdot:

  • Laatta
  • Laatoitus vaakasuoraan
  • Laatoitus pystysuoraan
  • Ei toistoa (jos et halua toistaa kuvaa).
Ottaa käyttöön otsikkokuvan toisto-ominaisuuden
Otsikkokuvan laattaefekti

Muut asetukset WordPressissä - Otsikkokuvan koko

Toinen vaihtoehto otsikon muokkaamiseen ja kuvan säätämiseen on sopivan koon asettaminen. Otsikkokuvan koossa on seuraavat kolme vaihtoehtoa:

  • Alkuperäinen - se säilyttää alkuperäisen kuvakoon
  • Kansi - ladattu kuva muutetaan kokoon sopivaksi sivulta toiselle, kuva voidaan myös leikata sopivaksi.
  • Sisältää - otsikkokuvan kokoa säädetään siten, että koko kuva on näkyvissä.
3 vaihtoehtoa otsikkokuvan koolle
Katso, miltä erilaiset otsikot voivat näyttää koon mukaan - alkuperäinen, kansi ja sisältökoko.

Voit myös asettaa kuvan sijainnin otsikon sisällä ja asettaa taustan kiinnityksen.

Cover block, joka toimii otsikkona

Kuten olemme jo maininneet alussa tämän artikkelin, on olemassa useita tapoja, miten muokata otsikkoa WordPress editor. Customizerin käytön lisäksi voit käyttää myös yhtä WordPressin ydinlohkoista nimeltä Cover-lohko. Mitä eroa siinä sitten on?

Customizerilla luotu klassinen otsikko koskee koko verkkosivustoa, kun taas Cover-lohkon avulla voit lisätä kansikuvan, joka periaatteessa toimii otsikkokuvana mille tahansa sivulle tai viestiin. Voit jopa käyttää sitä useita kertoja yhdellä sivulla tai postauksessa eri asetuksilla.

Missä käytetään Cover blockia

Kansilohkoa käytetään laajemmin eri verkkosivustoilla verrattuna klassiseen sivuston otsikkoon. Cover-lohko lisää laajan, koko leveydeltään otsikkokuvan sisältöön. Voit käyttää sitä erottamaan sisällön visuaalisesti toisistaan blogikirjoituksissa. Jokainen postausosio saa oman otsikkokuvansa, joka voidaan liittää seuraavaan sisältöön. Hieno ominaisuus on, että voit kirjoittaa tekstiä suoraan Cover-lohkon sisään. Tämä teksti näytetään kuvan päällä.

Kansikuva otsikkokuvana blogipostauksessa
Blogpost otsikkokuvalla, joka on lisätty Cover-lohkon kautta

Kotisivun otsikko

Kansilohkoa voidaan käyttää myös sivuston otsikon sijasta, jos haluat saada aikaan alkuperäisen ulkoasun. Koska Cover-lohko tarjoaa erilaisia kohdistusvaihtoehtoja, voit asettaa sen sisällön leveyteen tai tehdä siitä koko leveyden. Täysleveää otsikkoa voidaan käyttää myös suurena taustakuvana. Mutta älä unohda Sivun otsikon kytkemistä pois päältä Citadela-teemassa. Tämä vaihe on välttämätön, jos haluat käyttää Cover-lohkoa verkkosivuston otsikkona.

Otsikko koko leveydeltä taustakuvana
Täysleveä otsikko etusivulla

Kuinka luoda otsikko käyttämällä Cover blockia

Ensimmäiseksi sinun on lisättävä Cover block. Voit lisätä sen mihin tahansa sivuun tai viestiin seuraavalla tavalla:

Napsauta "+"-merkkiä yläpalkissa tai "+"-merkkiä missä tahansa sisällössä. Sen jälkeen yksinkertaisesti etsi Cover block.

Lisää kansilohko klikkaamalla "+"
Peitelohkon lisääminen käyttämällä "+"

Toinen nopea tapa on lisätä lohko käyttämällä "/" lohkon nimen perässä.

Vinoviivan käyttäminen peitelohkon lisäämiseen
Lisää vinoviiva ja kirjoita Cover block lisätäksesi tämän lohkon sisältöalueelle.

Kun olet lisännyt Cover-lohkon, saat tilaa kuvan tai videon lataamiseen. Voit myös valita kuvan mediakirjastosta. Valittua kuvaa tai videota käytetään otsikkona.

Otsikon otsikko

Mielenkiintoista Cover blockin avulla lisätyssä otsikossa on se, että voit kirjoittaa tekstin otsikon kuvan päälle. Tätä otsikkoa voidaan käyttää myös osion otsikkona, esimerkiksi blogikirjoituksissa. Siihen voi myös lisätä minkä tahansa URL-osoitteen.

Otsikkokuvan otsikko
Otsikkokuvan otsikko

Kohdistaminen Cover block

Kansilohko voidaan kohdistaa lohkon työkalupalkin avulla. Se voidaan kohdistaa sisältöalueen sisällä vasemmalle, oikealle tai keskelle. Se voidaan myös asettaa leveäksi tai täysleveäksi. Näiden vaihtoehtojen on oltava aktiivisen teeman tukemia, jota käytät sivustosi rakentamiseen.

Kannen lohkon kohdistaminen
Voit kohdistaa Cover-lohkon monella eri tavalla saadaksesi täydellisen ulkoasun otsikkoon.

Kansikuvan asetukset

Kansikuvan ulkoasua voidaan muokata Inspectorissa. Jos asetat sille kiinteän taustan, kuva ei rullaa sivun muun sisällön mukana, vaan se pysyy koko ajan paikallaan.

Focal Point Pickerin avulla voit valita, mikä osa kuvasta näytetään otsikossa. Voit työstää kuvaa vielä pidemmälle. Voit esimerkiksi asettaa päällekkäisvärin ja taustan läpinäkyvyyden. Molemmat asetukset auttavat sinua viimeistelemään otsikon. Jos käytät Cover-lohkoa blogipostauksen sisällä, voit oikealla värimaailmalla ja läpinäkyvyydellä lisätä haluamasi tunnelman postaukseesi. Ole varovainen näiden asetusten kanssa, sillä otsikkotekstin on oltava selvästi näkyvissä.

Aseta värin päällekkäisyys ja läpinäkyvyys
Valitsemalla oikean värin päällekkäisvärin voit luoda silmäänpistävän otsikon.

Videon otsikon tekeminen

Cover-lohkoa voidaan käyttää myös videon toistamiseen sivuston otsikon sisällä. Voit kiinnittää kävijöiden huomion tai mainostaa tuotetta tai palvelua. On olemassa useita tuettuja videoformaatteja, yleisin käyttämäsi tiedostomuoto on .mp4.

Hienoa on, että voit myös kirjoittaa otsikon videon päälle, kohdistaa sen, tehdä siitä täysleveän tai asettaa värin päällekkäisyyden. Cover-lohkon asetukset ovat samat kaikille mediatyypeille.

Mitä kokemuksia teillä on otsikoista? Oletko jo kokeillut Cover blockia otsikon luomiseen? Pidätkö enemmän klassisesta verkkosivuston otsikosta WordPressin muokkausohjelmalla? Kerro meille alla olevissa kommenteissa.