Navigaationappien ja -valikoiden tekeminen verkkosivuille
Luo yksittäisiä nappeja tai kokonainen navigaatiopalkki, johon voit lisätä myös pudotusvalikkoja.
KATSO VIDEO:
Sivujen linkittäminen päävalikkoon
Navigaatio-elementin luominen
Klikkaa tyhjää elementtiä lisätäksesi navigaatiosisällön (Navigation).
- Linjaa navigaatio sisältöelementtiin
- Lisää marginaalia yksittäisten linkkien sivuille
- Pienennä tai kasvata navigaation tekstin fonttikokoa
- Muokkaa navigaatiolinkkien tyyliä
- Lisää uusi linkki
- Näytä mobiilivalikko mobiililaitteilla. Mobiilivalikko on mahdollinen vain sivuston yläpalkkiin (header) tehdyssä navigaatio-elementissä.
- Navigaatio-elementin linkit
Näin käytät navigaatio-elementtiä
Klikkaa yhtä linkeistä valitaksesi sen muokattavaksi.
Yksittäiset linkit
Nimeä linkki ja valitse linkitysvaihtoehto
Sisäisiä linkkejä (Internal) käytetään linkittämään sivulta toiselle monisivuisilla nettisivuilla.
Element-linkin (ankkurilinkin) klikkaamisen jälkeen sivu skrollaa valittuun elementtiin (julkaistussa sivussa)
Pudotusvalikko
- Mikä tahansa navigaation linkki voidaan muuttaa pudotusvalikoksi vaihtamalla liukukytkin pudotusvalikko-asetukselle.
- Pidä vaihtoehto valittuna, mikäli haluat myös otsikon linkkittävän sivulle. (muussa tapauksessa otsikko ainoastaan avaa pudotusvalikon)
- Luo pudotusvalikko
a) manuaalisesti tai
b) käyttämällä tageja - Lisää uusi pudotusvalikon linkki manuaalisesti
a) Pudotusvalikko - manuaalisesti
Klikkaa Add
Klikkaa linkkiä aktivoidaksesi sen.
- Linkityksen asetukset
- Viimeistele pudotusvalikko klikkaamalla Link-nappia
b) Pudotusvalikko - tageilla
- Siirrä liukukytkin oikealle käyttääksesi tageja
- Valitse tagi, jonka perusteella sivuja listataan valikkoon
- Mukauta lajitteluasetukset
Kun tagi on valittu, linkit lisätään automaattisesti.
Jokainen pudotusvalikon linkki voidaan nimetä erikseen, jos valikossa näkyvän nimen halutaan poikkeavan sivun nimestä. Tätä voidaan hyödyntää silloin, kun sivun alkuperäinen nimi on liian pitkä valikkoon.
Navigaatiolinkkien tyyli
- Klikkaa Styling options -nappia yläpalkissa
- Käytä tyylejä samalla tavoin, kuin nappeja muokatessa.
Visuaalinen pudotusvalikko
Pudotusvalikosta voi tehdä näyttävän käyttämällä kuvia. Visuaalinen pudotusvalikko voi näyttää esimerkiksi tältä:
Pudotusvalikon kuvat ovat sivukohtaisia, page managerin sivun asetuksista asetettuja thumbnail / OG kuvia.
Valmisasetukset
Luo pudotusvalikko aiemmin esitellyllä tavalla.
Voit käyttää valmiita asetuksia.
- Kuva päällä, teksti alla
- Teksti päällä, kuva alla
- Palauta tyylit oletusasetuksiin.
Pudotusvalikon asetukset
Valmisasetusten sijaan, voit muokata pudotusvalikon ulkonäköä näillä asetuksilla.
- Säädä valikon taustaväri.
- Aseta valikon maksimikorkeus kuvapisteinä (px) tai suhteessa ikkunan korkeuteen (vh).
- Aseta valikon täyte (sisällön ja reunan väliin jäävä tyhjä tila).
- Säädä valikon reuna.
- Valitse liukukytkimellä, haluatko asettaa valikolle maksimileveyden vai käyttää koko ikkunan leveyttä.
- Aseta valikon maksimileveys kuvapisteinä (px).
- Valitse show page thumbnail images näyttääksesi sivujen thumbnail kuvat valikossa. Tämä on tärkeä vaihe! Ilman tätä valintaa kyseessä on tavallinen pudotusvalikko.
Thumbnail
- Valitse kuvan (thumbnail) ja tekstin esitystapa. Image top - text bottom näyttää kuvan tekstin päällä. Text top - image bottom näyttää kuvan tekstin alla.
- Aseta kuvan maksimikorkeus kuvapisteinä (px).
- Valitse, haluatko näyttää thumbnailin mobiililaitteen valikossa.
Linkkien tyyliasetukset
- Aseta linkin taustaväri.
- Aseta linkin taustaväri kun kursori on päällä.
- Linkin täyte (sisällön ja reunan väliin jäävä tyhjä tila).
- Säädä linkin reuna.
- Aseta marginaali (elementtien välinen tyhjä tila).
- Linkki-elementin maksimileveys kuvapisteinä (px).
- Valitse linkin tekstin väri.
- Valitse linkin tekstin väri kun kursori on päällä.
- Tekstin marginaali.
- Valitse tekstin asettelu.
