0 Kč s DPH

Jak vytvořit stránku se záložkami

05. 02. 2018

V tomto článku vám ukážeme postup, jak vytvořit stránku se záložkami. Využití těchto záložek na stránce je vhodné v případě velkého množství textu, který bychom rádi vložili na jednu stránku. Návštěvníkům stránky tak dopřejete přehledný seznam informací, aniž by museli dlouze scrollovat k požadovaným informacím. 

 

Příklad záložek na webu welko.cz

Příklad na webu welko.cz

 

Postup vytvoření nové stránky

1) Vytvořte novou stránku, u které vyplníte pouze název stránky a nadpis. Následně nastavte typ editoru na HTML editor. Stránku uložte. 

2) Vložte následující kód do stránky za hlavní nadpis.

 

<h1>Hlavní nadpis</h1>

První část - samotné záložky, které je třeba propojit s obsahem přes id

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#zalozka1">Název záložky 1</a></li>
<li class=""><a data-toggle="tab" href="#zalozka2">Název záložky 2</a></li>
<li class=""><a data-toggle="tab" href="#zalozka3">Název záložky 3</a></li>
<li class=""><a data-toggle="tab" href="#zalozka4">Název záložky 4</a></li>
<li class=""><a data-toggle="tab" href="#zalozka5">Název záložky 5</a></li>
</ul>

 Druhá část - obsah jednotlivých záložek

<div class="tab-content">
 <div id="zalozka1" class="tab-pane fade active in">
<h2>Nadpis záložky 1</h2>
<p>Obsah záložky 1</p>
</div>

<div id="zalozka2" class="tab-pane fade">
<h2>Nadpis záložky 2</h2>
<p>Obsah záložky 2</p>
</div>

<div id="zalozka3" class="tab-pane fade">
<h2>Nadpis záložky 3</h2>
<p>Obsah záložky 3</p>
</div>

<div id="zalozka4" class="tab-pane fade">
<h2>Nadpis záložky 4</h2>
<p>Obsah záložky 4</p>
</div>

<div id="zalozka5" class="tab-pane fade">
<h2>Nadpis záložky 5</h2>
<p>Obsah záložky 5</p>
</div>
</div>

 

3) Přepněte editor zpět na výchozí (v případě, že máte jako výchozí nastaven WYSIWYG editor).

4) Zobrazte si tzv. bloky, abyste viděli, kde jsou jaké bloky.

Náhled záložek v administraci

5) Do jednotlivých polí, která představují obsah záložek, můžete standardním způsobem vkládat text.

6) Úpravy uložte.

Na co si dát pozor

  • Pouze první tag <li> v seznamu <ul> musí mít přiřazenu třídu active. Další položky seznamu již tuto třídu mít nesmí.
  • Obdobně je to také u obsahu záložek. První element <div> musí mít přiřazenu třídu active a třídu in.
  • Ze seznamu voláme konkrétní záložku pomocí její deklarace, např. #zalozka1. Tato deklarace odpovídá identifikátoru záložky id="zalozka1".
  • Pojmenování id je vhodné volit tematicky. Podle pravidel HTML5 musí obsahovat alespoň jeden znak a nesmí obsahovat mezeru.
  • Při vkládání obsahu přes WYSIWYG editor je nutné mít zapnuté tzv. bloky. Je to přehledné a zároveň vidíte, že nezasahujete do dalších prvků.
  • Pamatujte na to, že v administraci inPage se můžete kdykoliv vrátit k dřívější záloze dané stránky.

Tip pro vás

V tomto článku jsme vám představili jeden z mnoha typů záložek. Jak si vytvořit jiné variace záložek, naleznete například na webu w3school.com

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

inPage - webové stránky, doménawebhosting snadno.