0 Kč s DPH

Boxy v postranním sloupci

Počet boxů v postranním sloupci v šablonách ONE a SLIDE je závislý na počtu zobrazených prvků. Tento článek je pro ty z vás, kterým nevyhovuje jejich maximální počet.

Do postranního sloupce si můžete přidat dva boxy v rámci vlastních boxů, ale co když jich potřebujete více? Pomůže vám náš návod.

Boxy v postranním sloupci

K této úpravě budeme potřebovat níže připravený css styl a stránku s vytvořenými boxy nastavenou v prvcích stránky jako vlastní box 1.

Úprava stylu pro vlastní box

Prvním krokem je vložení níže uvedeného stylu do vlastních CSS stylů (Vzhled > Vlastní CSS styl). Stylopis upraví formátování vlastního boxu 1 tak, že zruší jeho ohraničení a zobrazení nadpisu. Zkopírujeme tedy níže uvedený kód a vložíme jej do vlastního CSS stylu.

#panel-custom-1.panel {border:0; padding:0; margin:0; box-shadow:none; background-color:transparent;}
#panel-custom-1.panel > .panel-heading {display:none;}
#panel-custom-1.panel > .panel-body {padding:0; margin:0; border:0;}

Kód vytvořených boxů

Dále si vytvoříme stránku, kterou nazveme např. Vlastní box 1, nastavíme ji jako neaktivní, vypneme WYSIWYG editoruložíme. Znovu ji otevřeme a vložíme níže uvedený HTML kód.

<!-- začátek boxu 1 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Nadpis prvního boxu</h3>
</div>
<div class="panel-body">
<p>Text boxu</p>
<p><a class="btn btn-primary" href="/">Tlačítko boxu</a></p>
</div>
</div>
<!-- konec boxu 1 -->
<!-- začátek boxu 2 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Nadpis druhého boxu</h3>
</div>
<div class="panel-body">
<p>Text boxu</p>
<p><a class="btn btn-primary" href="/">Tlačítko boxu</a></p>
</div>
</div>
<!-- konec boxu 2 -->

Přidání dalšího boxu

V připraveném zdrojovém kódu jsou dva boxy a každý je ohraničen komentářem pro lepší přehlednost. Pro přidání dalšího boxu stačí zkopírovat celý box od začátku komentáře po jeho konec.

Úprava nadpisů a textů v boxu

Nadpis boxu je vepsán mezi tagy <h3 class="panel-title"></h3>, kde stačí text jen upravit. Nadpis je také možné smazat a použít box bez nadpisu. Stačí smazat tuto část: 

   <div class="panel-heading">
<h3 class="panel-title">Nadpis druhého boxu</h3>
</div>

Další text se poté nachází mezi <div class="panel-body"></div> a opět ho stačí jen upravit. V případě že si nepřejeme použít tlačítko smažeme celou tuto část:

<p><a class="btn btn-primary" href="/">Tlačítko boxu</a></p> 

 

Příklad použití:

Nadpis boxu

Box s použitím nadpisu, vlastního textu a tlačítka.

Více informací

Nadpis boxu

Box bez tlačítka s vlastním textem

Box bez nadpisu a bez tlačítka, vhodný například pro umístění obrázkové reklamy.

Úpravu textu v boxech je možné provádět i při zapnutém WYSIWYG editoru. Doporučujeme při těchto úpravách nastavit verzi editoru 4.2.3 a zapnout v editaci stránky možnost Ukázat bloky (Zobrazit > Ukázat bloky). V editoru se pak zobrazí ohraničené jednotlivé bloky a nemělo by se nám stát, že přepíšeme nějakou důležitou hodnotu.

Barva boxu, nadpisu a tlačítka

Barvy boxů, nadpisů a tlačítek odpovídají barvě šablony díky přidané třídě .panel-primary pro box a .btn-primary pro tlačítko. Pokud byste si přáli použít jinou barvu pro box nebo jinou barvu tlačítka, lze využít dalších možností frameworku bootstrap. Stačí upravit .panel-primary na např .panel-default (šedý nadpis) nebo jinou možnost. 

 

Příklad použití:

Nadpis boxu

Text boxu

Tlačítko boxu

Nadpis boxu

Text boxu

Tlačítko boxu

Nadpis boxu

Text boxu

Tlačítko boxu

Zobrazení na webu

Posledním krokem je uložení stránky a její nastavení jako vlastní box 1 pod záložkou Vzhled > Prvky stránek výběrem v roletkovém menu Vlastní box 1 a uložit.

Výsledek pak zkontrolujeme v náhledu webu.

 

Příklad použití:

Dokumenty ke stažení

Reference

Již realizované akce jsou důkazem toho, že víme jak na to!

Více informací

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

inPage.cz - webové stránky, doména a webhosting snadno.