Sekce - Tři sloupce s obrázkem

Velice populární obsahovou sekci se za poslední dobu stala sekce s názvem Tři sloupce s obrázkem. V tomto článku si podrobněji představíme tuto sekci a ukážeme si, jak ji lze vhodně na webu použít a jaké nabízí možnosti pro zobrazení a jak ji můžete jednoduše upravit pro své specifické potřeby.

Co je obsahová sekce Tři sloupce s obrázkem

Jedná se o blok s předpřipraveným obsahem, který tvoří tři samostatné bloky s obrázkem v horní či dolní části a textem. Můžete jej jednoduše přidat do stránky a tím jí dát jedinečný vzhled a funkce. Jak používat naše obsahové sekce je podrobně popsáno v samostatném článku >Jak vytvořit stránku se sekcemi.

Obsahová sekce Tři sloupce s obrázkem se nejčastěji používá např. jako grafický rozcestník přehledu vašich služeb, jako blok s ceníkem, anebo jako karty zaměstnanců či na cokoli co váš napadne, že by bylo třeba nějak samostatně v bloku zvýraznit návštěvníkům vašeho webu..

Obsahová sekce Tři sloupce s obrázkem disponuje dvěma variantami a to Tři sloupce s obrázkem nahoře a Tři sloupce s obrázkem dole.

Jak přidat obsahovou sekci Tři sloupce

Obsahovou sekci Tři sloupce s obrázkem přidáte jednoduše a to kliknutím na oddělovač mezi jednotlivými bloky ve stránce. Po rozkliknutí oddělovače se vám zobrazí ikona s razítkem.

Po rozkliknutí se Vám otevře dialog výběrem obsahové sekce. Zde pak vyberete sekci - v tomto konkrétním případě vyberete sekci Tři sloupce s obrázkem nahoře/dole.

Následně se daná sekce vloží do vaší stránky a můžete upravit její obsah. Kliknutím myší na obrázek můžete obrázek změnit. Kliknutím do textu přepíšete přednastavený text. Poté, co si texty a obrázky upravíte, tak stránku uložte.

Možnosti úprav sekce Tři sloupce s obrázkem

Sekci Tři sloupce s obrázkem můžete jednoduše upravit. Možnosti úprav se vám zobrazí po kliknutí do sekce pravým tlačítkem myši.

V kontextovém menu, které se vám po rozkliknutí zobrazí, máte na výběr z několika možností úpravy sekce Tři sloupce s obrázkem. Užitečné jsou například tyto funkce:

• Zkopírovat buňku sekce - Zkopírujete buňku šablony a tím přidáte další buňku, která se vloží na nový řádek.
• Odstranit buňku sekce - Odstraníte existující buňku sekce
• Přesunout buňku sekce - Přesunete buňku sekce doleva, či doprava
• Zkopírovat sekci - Vytvoříte duplikát celé sekce.
• Odstranit sekci - Odstraníte celý blok sekce
• Nastavení sekce - Zde můžete provést pokročilé nastavení sekce, jako je nastavení pozadí bloku a nastavení ohraničení jednotlivých buněk.

Základní úpravy sekce Tři sloupce s obrázkem

Nastavení ohraničení buněk sekce

Při vložení sekce do stránky nejsou jednotlivé buňky nijak ohraničeny a splývají s pozadím. Pokud chcete buňky sekce více zvýraznit, můžete zde nastavit ohraničení buněk.

1) Klikněte pravým tlačítkem myši na blok sekce a vyberte možnost /Nastavení/.

2) Zde pak v kontextovém okně vyberte možnost Ohraničení a zde zvolte variantu "Ohraničení sloupce"

Dialog výběru uložte. Následně dojde k ohraničení jednotlivých buněk (sloupců) sekce a ty pak budou na webu více výrazné.

Pokročilé úpravy sekce Tři sloupce s obrázkem

Pokročilé úpravy již vyžadují alespoň základní znalosti úpravy zdrojového kódu stránky a nastavení vlastních CSS stylů. Před prováděním úprav zdrojového kódu či vlastních CSS stylů doporučujeme stránku uložit a případně provést i kompletní zálohu webu, abyste si nepatřičným zásahem zbytečně nerozbili vaši webovou stránku.

Pokud si na danou úpravu sami nevěříte, tak nás neváhejte kontaktovat a úpravu šablony provedeme za vás.

Úprava počtu buněk zobrazených na jednom řádku

Jak už název sekce Tři sloupce s obrázkem napovídá, tak šablona disponuje třemi sloupci (buňkami) v jednom řádku. Pakliže chcete v jednom řádku zobrazit více buněk, je třeba provést úpravu ve zdrojovém kódu stránky.

Buňky (sloupce) jsou tvořeny v HTML pomocí mřížkového systému, který se běžně označuje jako Grid. Pro úpravu počtu sloupců na řádku bude tedy potřeba zápis pro Grid ve zdrojovém kódu upravit.

Zkusíme si na konkrétním případu ukázat, jak ze šablony tři sloupce s obrázkem udělat sekci čtyři sloupce s obrázkem.

1) Do bloku sekce přidáme další buňku.

Klikněte pravým tlačítkem myši na daný blok a vyberte možnost Kopírovat buňku sekce. Následně se vám do sekce přidá nová buňka.

2) Zobrazte si zdrojový kód stránky, kde provedete úpravu

Pro zobrazení zdrojového kódu daného prvku klikněte na konkrétní místo ve stránce myší, tak aby zde zůstal umístěn kurzor a následně rozklikněte ikonu < > kterou najdete v editoru stránky.

Zobrazí se vám zdrojový kód stránky v HTML s označeným prvkem.

Zde je pak potřeba upravit rozměry jednotlivých buněk, abychom ze tří buněk na jednom řádku udělali čtyři buňky na jednom řádku. Každý sloupec v daném bloku je v HTML kódu definován pomocí zápisu:

<div class="section-cell-item col-xs-12 col-sm-6 col-md-4">

V zápisu nás zajímá jen poslední položka a to col-md-4, která definuje počet sloupců na řádek v "desktopovém" zobrazení. Pro zobrazení 4 sloupců pak upravíme zápis na col-md-3 u všech vytvořených sloupců.

Poté co rozměr upravíte u všech sloupců v dané sekci (šabloně) tak úpravy zdrojového kódu uložte a máte hotovo!

Pro přidání např. šesti sloupců postupujte totožně. Tedy dvakrát zkopírujte buňku sekce a ve zdrojovém kódu upravte rozměr buněk na col-md-2.