Opi luomaan tahmea valikko WordPress-verkkosivustosi päänavigointia varten! Tarravalikot parantavat käyttökokemusta tuomalla verkkosivustosi valikon helpommin sivuston vierailijoiden saataville. Lisäksi se voi auttaa parantamaan sivustosi yleisilmettä. Mennään asiaan!

Sisällysluettelo

1. Siirry Sivustoeditoriin

Ensimmäinen askel tässä prosessissa on siirtyä "Sivustoeditoriin" WordPressin hallinta-alueella. Sivustoeditori on saatavilla "Block Themes" -sovellukselle WordPressissä, jos käytät WordPressin versiota 5.9 tai uudempaa.

Siirry sivustoeditoriin siirtymällä kohtaan Ulkonäkö> Toimittaja (punainen nuoli yllä olevassa kuvassa) WP Admin -alueen päänavigaatiosta.

Napsauta näytön oikealla puolella olevaa pääsisältöaluetta (piirretty vaaleansinisellä ja merkitty sinisellä nuolella yllä olevassa kuvassa). Tämä vie sinut sivustoeditorin lohkoeditoriin.

Oikealla puolella "Sivu"-välilehden alla näet rivin "Malli" (yllä olevassa kuvassa linjattu sinisellä). Napsauta mallin nimeä/linkkiä (punainen nuoli). Napsauta sitten "Muokkaa mallia" (vihreä nuoli – joskus "Muokkaa mallia" on pieni sininen tekstilinkki avattavan valikon alla, joka näyttää mallin nimen).

2. Muokkaa malliasi

Olet nyt verkkosivustosi etusivun mallieditorissa. (Jos sinulla ei ole sivustollesi kotisivua, voit tarkistaa tämä opetusohjelma staattisen kotisivun asettamisesta WordPress-verkkosivustollesi).

Mallin yläosassa on sivusi päänavigaattori – jota kutsutaan myös verkkosivusi otsikoksi. Kun viet hiiren tämän elementin päälle, näet sen ääriviivat violetin laatikon (punainen nuoli yllä olevassa kuvassa). Tämä osoittaa, että tämä elementti on a "synkronoitu malli", mikä tarkoittaa, että muutoksen tekeminen mallin yhteen esiintymään ottaa muutokset käyttöön kaikissa esiintymissä koko sivuston alueella. Napsauta tätä aluetta valitaksesi otsikon synkronoitu kuvio.

Jos tämä on sivustosi pääotsikkoelementti, sinun pitäisi nyt nähdä, että synkronoitu kuvio on merkitty "Otsikko" estotyökalurivillä.

3. Lisää otsikkosi ryhmään

Napsauta valitun otsikkokuvion lohkotyökalupalkissa "Asetukset"-kuvaketta (punainen nuoli yllä olevassa kuvassa) ja valitse "Ryhmä" (vihreä nuoli). Tämä liittää synkronoidun kuvion ryhmälohkoon.

Huomaat, että lohkotyökalurivillä on nyt ryhmän estokuvake (sininen nuoli yllä olevassa kuvassa), ja päänavigointialueen ääriviivat ovat nyt siniset violetin sijaan (punainen nuoli).

Huomaa, että tämä voi muuttaa päänavigointivalikon leveyttä. Säädä leveyttä viemällä hiiren osoitin otsikon synkronoidun kuvion päälle ja valitsemalla se napsauttamalla (punainen nuoli).

Napsauta Header-synkronoidun kuvion lohkotyökalupalkissa Tasaa-kuvaketta (vihreä nuoli) ja vaihda se takaisin haluttuun leveyteen (sininen nuoli – valitsin tapauksessani "Leveä leveys").

Palataksesi takaisin ryhmälohkoon, napsauta "Valitse ryhmä" -kuvaketta Otsikkolohko-työkalupalkissa (vaaleanpunainen nuoli).

Yksinkertaistettu WordPress: Tehokkaiden verkkosivustojen rakentaminen Davies Media Designin kurssi

4. Aseta ryhmäksi "Sticky"

Kun ryhmä on valittuna, siirry "Estä"-välilehteen Asetukset-sivupalkin alla näytön oikealla puolella (punainen nuoli yllä olevassa kuvassa).

Napsauta valikkokohtaa "Sijainti" (vihreä nuoli). Näet nyt avattavan valikon "Oletus" (vaaleanpunainen nuoli). Napsauta avattavaa valikkoa ja valitse "Sticky" -vaihtoehto (sininen nuoli).

Siirry editorin yläosaan ja napsauta "Tallenna" -painiketta (punainen nuoli) ja napsauta sitten "Tallenna" uudelleen. Sinulla on nyt tikkuvalikon päänavigointi WordPress-verkkosivustollesi!

5. Muokkaa Sticky Menu -valikkoa

Voit muokata/tyylitellä monia uuden tahmea valikon elementtejä, mutta tätä opetusohjelmaa varten lisään vain taustan ryhmälohkon taakse varmistaaksesi, että valikko kattaa koko verkkosivun leveyden.

Kun ryhmälohko on valittuna, siirryn asetusten sivupalkin "Tyylit" -välilehteen (punainen nuoli yllä olevassa kuvassa).

Napsauta "Väri"-kohdassa "Tausta"-vaihtoehtoa (sininen nuoli) ja valitse sitten valkoinen värimalli ja asetan taustavärin valkoiseksi (vihreä nuoli).

Jälleen kerran napsautan "Tallenna" kahdesti tallentaakseni muutokset.

Huomaa, että voit aina säätää verkkosivustosi otsikon leveyttä, korkeutta tai väliä Mitat-osiossa käyttämällä Täyte- ja Marginaali-liukusäätimiä.

Voit esikatsella sivustoasi napsauttamalla laitekuvaketta (punainen nuoli) ja napsauttamalla sitten "Näytä sivusto" (vihreä nuoli).

Voit vierittää verkkosivustoasi ja katsella, että tahmea navigointivalikko pysyy paikallaan yläreunassa (vihreä nuoli)!

Kun olet muokannut tarravalikkoa, napsauta "Takaisin" -painiketta editorin yläosassa (punainen nuoli). Tämä palauttaa sinut verkkosivullesi Side Editorissa.

Voit palata WP Admin -alueelle napsauttamalla vasemmassa yläkulmassa olevaa logoa.

Siinä se tälle opetusohjelmalle! Jos pidit siitä, voit Opi WordPress Udemy-kurssillani. Tai voit katsoa muita ilmaisia WordPress-video-opetusohjelmat ja WordPressin ohjeartikkelit verkkosivustolleni.

Davies Media Design ilmainen luovien sovellusten sähköpostiuutiskirje

Tilaa DMD-uutiskirje

Rekisteröidy saadaksesi uusia opetusohjelmia, kurssipäivityksiä ja viimeisimmät uutiset ilmaisista luovista suosikkisovelluksistasi!

Tilaaminen onnistui!

Pin Se Pinterest