Ako zmeniť doplnkovú farbu za vlastnú
19.09.2024
Webnode: Ako nastaviť navigáciu pomocou kotiev
09.09.2022
Návod pre nastavenie tzv. anchor navigácie na webe, aby si si mohol*mohla vytvoriť obsah dlhého článku na základe podnadpisov.
Alebo preskočiť celú sekciu na jednostránkovom webe. ¡Vamos!
Čo je anchor navigácia?
Kotva je záložka na tvojom webe, ktorá ťa nepresunie na inú stránku, ale v rámci stránky na inú jej časť. Je to chytrý spôsob navigácie, ak si práve zo seba dostala mega dlhý článok na blog, alebo nastavuješ jednostránkový web.
Skús si to. Klikni sem a dostaň sa rovno na koniec návodu.
Skôr, než začneme
Princíp je veľmi jednoduchý. Prepokladám, že máš napísaný dlhší článok napr. s nadpisom, perexom, obsahom a s 3 podnadpismi a 3 odstavcami textu.
Skopíruj ho do Webnode tak, aby každý perex, obsah, podnadpis a každý odstavec boli vo vlastnom textovom poli.
1. V prvom rade je potrebné vytvoriť zoznam záložiek, ktoré chceš nastavovať. Ak začneš zoznam meniť uprostred procesu, zbytočne sa do toho zamotáš.
Teraz je ten správny čas otvoriť si v PC Poznámkový blok.
Pre príklad, ja budem nastavovať 3 podnapisy a toto sú ich reálne názvy, ktoré chcem mať aj v obsahu. Cieľom je, že keď kliknem na nadpis v tomto zozname, prenesie ma na danú časť článku.
- Časť 1: Suicide virtues
- Časť 2: Sea chaos hope
- Časť 3: Deceptions
2. Každej časti priradím vlastné ID, ktoré sa v kóde označuje heštegom. Hešteg = ID. Alebo inak: #cast1 je cieľ odkazu, kam nás odkaz zavedie.
- časť 1 - bude odkazovať na nadpis označený ako cast1, takže #cast1
- časť 2 - #cast2
- časť 3 - #casť3
Časť za heštegom nazvi bez diakritiky, medzier a veľkých písmem. Čím jednoduchšie ju nazveš, tým lepšie. Aby to bolo prehľadné a SEO friendly, jednoducho prepíš svoje nadpisy bez diakritiky a medzier, napr. podnadpis Ako nastaviť navigačné kotvy sa prepíše ako #ako-nastavit-navigacne-kotvy.
3. Pripravím si dva kódy pre každú časť článku.
Jeden kód bude odkaz (označený v HTML ako a) a druhý kód bude podnadpis (označený v HTML ako h3) s priradeným ID. Napr.:
Odkaz, ktorý bude v obsahu:
<a href="#cast1">Odkaz na časť 1: Suicide virtues</a><br>
Kód pre podnadpis, ktorý bude v texte:
<h3 id="cast1">Časť 1: Suicide virtues</h3>
<a href="#cast2">Odkaz na časť 2: Sea chaos hope</a><br>
<h3 id="cast2" >Toto je časť 2 Sea chaos hope</h3>
<a href="#cast3">Odkaz na časť 3: Deceptions</a><br>
<h3 id="cast3" >Toto je časť 3: Deceptions</h3>
Časť medzi tagmi, t.j. "Odkaz na časť 1: Suicide virtues" zameň na to svoje - tvoj skutočný podnadpis článku alebo skutočný názov sekcie.
3. Teraz sa presuniem do textu samotného a všetky existujúce podnapisy zamením za pripravené HTML kódy. To znamená, že postupne zmažem podnapisy a namiesto nich použijem prvok HTML, kam vložím pripravený kód.
Začnem od časti jedna, teda prvý kód bude tento:
<h3 id="cast1">Časť 1: Suicide virtues</h3>
U mňa to teda vyzerá takto:
namiesto podnadpis - text - podnadpis - text - podnadpis - text
sa strieda HTML - text - HTML - text - HTML - text:
Ešte si sa z toho nezbláznil? Dobre! Pretože ideme robiť obsah.
4. A teraz vytvoríme obsah (index) pomocou pripravených odkazov:
<h2>Obsah článku</h2> <a href="#cast1">Odkaz na časť 1: Suicide virtues</a><br> <a href="#cast2">Odkaz na časť 2: Sea chaos hope</a><br> <a href="#cast3">Odkaz na časť 3: Deceptions</a><br>
A šupneme ho do tiež prvku HTML niekam na začiatok článku - pod hlavný nadpis alebo perex.
5. Zmeny publikujeme a vyskúšame, či to funguje tak, ako má.
Toto je koniec návodu.
Príklad:
NIETZSCHE IPSUM
Burying sea faithful eternal-return endless ascetic pinnacle against endless. Ultimate will abstract passion truth derive snare truth justice. Society madness pinnacle horror good. Love madness joy sea will pious fearful christianity. Strong intentions fearful eternal-return of.
Toto je časť 1: Suicide virtues
Suicide virtues reason law contradict abstract superiority abstract war victorious convictions ultimate hope reason. Enlightenment derive society grandeur law derive dead insofar disgust insofar hatred christian. Superiority snare abstract pinnacle joy moral.
God noble disgust moral noble law overcome justice. Free hatred self convictions prejudice snare strong chaos. Derive noble christian ultimate value intentions value holiest. Overcome revaluation burying contradict truth love salvation spirit reason chaos decieve eternal-return convictions.
Prejudice gains marvelous against ascetic overcome selfish philosophy. Evil eternal-return philosophy against endless. Contradict superiority will decieve insofar pious disgust self will decrepit inexpedient disgust.
Inexpedient selfish pious against inexpedient gains decrepit. Sexuality christianity merciful sexuality inexpedient revaluation. Horror joy evil mountains love selfish deceptions hatred.
Toto je časť 2: Sea chaos hope
Sea chaos hope ubermensch snare strong will pious philosophy endless battle. Oneself convictions salvation virtues chaos revaluation noble contradict hope enlightenment sexuality selfish. Horror strong reason overcome deceptions decieve pinnacle madness eternal-return. Justice decieve ideal marvelous madness. Faithful dead virtues depths moral overcome grandeur truth deceptions eternal-return insofar dead. Play against free revaluation christian faith disgust hatred hope salvation deceptions hatred dead. Good disgust will abstract hatred chaos victorious free chaos hatred.
Toto je časť 3: Deceptions
Deceptions inexpedient chaos evil against of chaos. Intentions transvaluation law good sea free christian ocean love depths oneself morality noble. Oneself snare joy value free good justice reason holiest contradict burying.
Depths reason society convictions ultimate hope derive chaos. Good decrepit depths contradict holiest. Self snare love zarathustra evil depths. Law ultimate superiority law overcome battle suicide sexuality justice free christian.
Justice revaluation eternal-return prejudice christian sexuality evil free virtues truth. Derive of transvaluation philosophy passion eternal-return contradict.
Horror intentions sexuality revaluation virtues zarathustra deceptions transvaluation enlightenment chaos faithful ascetic. Truth against fearful self grandeur god ubermensch contradict noble love philosophy war. Salvation christian ocean reason good society law. Endless decieve holiest law strong ultimate oneself salvation horror hope ubermensch pious. Hope hatred evil burying morality gains. Christianity christian noble against good moral sea spirit self will abstract play hope.
Najnovšie kódy pre Webnode
Tipy, triky, kódy, návody pre lepší web
Webnode: Ako presmerovať odkazy v navigácii
10.09.2022
Tento návod sa hodí, ak chceš akúkoľvek záložku z menu presmerovať mimo svoj web. Napr. na inú tvoju stránku/e-shop, do inej služby, kde máš profil (Instagram, Facebook) a podobne.
Návod pre nastavenie tzv. anchor navigácie na webe, aby si si mohol*mohla vytvoriť obsah dlhého článku na základe podnadpisov.
