Blog.jirivanek.eu      Digitální zápisník

Jak v Elementoru používat kotvy (anchor menu)

Poslední dobou se staly velmi populární jednostránkové weby, případně takové weby, které většinu informací koncentrují na hlavní stránku. Říká se jim také onepage weby. Menu takových webů se řeší jiným způsobem, než znáte u webových stránek, které mají jednotlivé informace umístěné na jednotlivých WordPressových stránkách s vlastním odkazem. Menu v headeru se zde řeší pomocí tzv. kotev. 

Co je to kotva?

Nejprve si pojďme něco málo říct o tom, co je to kotva. Budu se snažit funkci kotvy popsat jednoduše a pro lajky. Kotva je označení místa na stránce, na které se lze poté dostat pomocí odkazu. Velmi často se používá, jak jsem již uvedl, právě na jednostránkových webech v horním menu s odkazy. Hned uvedu příklad. 

Finanční poradce Jaroslav a jeho web

Máme jednostránkový web, který bude určený jako osobní prezentace finančního poradce. V horní části (headeru) bude menu, které bude obsahovat položky O mně, Co dělám, Ceník a Kontakt. Web bude mít jednu stránku, na které budou všechny tyto informace napsané. Váš úkol bude, aby, pokud někdo klikne v menu na Kontakt, sjela stránka přesně na místo, kde jsou informace o kontaktu na našeho finančního poradce. Jenže jak to provést, když jde pouze o jednu stránku a tedy žádný odkaz na stránku s kontaktem neexistuje? Tušíte správně, dělá se to pomocí kotvy. K části, která bude obsahovat informace o kontaktu se přidá kotva, která bude mít svoje jedinečné ID. A právě toto ID nám potom poslouží pro vytvoření odkazu. To si ukážeme níže.

Nejprve vytvoříme informace o kontaktu pomocí widgetu text.

kotva_1

Kotva pomocí Anchor menu

Nyní budeme chtít, aby stránka webu, pokud uživatel  v horním menu klikne na odkaz pro zobrazení kontaktu, sjela přesně na to místo, kde bude tato část s informacemi. Tedy s adresou, e-mailem a telefonem. Vytvoříme si tedy v bloku kotvu. Tu najdeme v menu widgetů pojmenovanou jako “Anchor menu“.

V následujícím kroku si tuto kotvu si pojmenujeme s dopomocí znaménka # (klávesová zkratka ALT+X). Tedy pro náš příklad jako #kontakt. Pokud posléze využijete tuto kotvu a v horním menu vytvoříte odkaz https://nejlepsiporadce.cz/#kontakt, po kliknutí na takovýto odkaz se stane přesně to, co jsme požadovali. Prohlížeč sám sjede na stránce na místo, kde máme umístěnou kotvu s tímto ID a návštěvníkovi se zobrazí ta část stránky, kde jsou kontakty na našeho finančního poradce.

kotva_3

Kotva pomocí CSS ID sekce

Druhým způsobem, jak používat v Elementoru kotvy je pomocí CSS ID sekce. Použiji stejný příklad jako výše. Opět budu potřebovat použít v menu odkaz na informace o kontaktu. Tento kontakt budu ale mít v samostatné sekci.

Zde nemusím použít widget “Anchor menu“, ale můžu si pomocí CSS ID pojmenovat celou sekci, která ale nesmí pro náš příklad obsahovat nic jiného, než informace o kontaktu na našeho finančního poradce.

Zde pak postupujete následovně:

  • klikněte si na upravit sekci
  • klikněte na tlačítko “Pokročilé
  • napište do položky CSS ID #kontakt

Takto se bude poté odkaz https://nejlepsiporadce.cz/#kontakt chovat úplně stejně jako ve výše uvedeném případě, kde jsme použili widget “Anchor menu“.

Díky tomu pak budete velmi jednoduše schopni vytvářet jednostránkové weby nebo vizitky s použitím horního menu jako rozcestníku na jednotlivé sekce s informacemi.

Více článků o Elementoru

Celá kategorie je zde

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

Odebírat
Upozornit na
guest
0 Komentáře/ů
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje