Možnosti a úpravy třísloupcové obsahové šablony

V editoru stránek máte možnost vkládat do stránek již přednastavené prvky, které nazýváme obsahové šablony. Jednou z nich je i šablona se třemi sloupci. K dispozici je ve dvou variantách - s obrázkem nahoře a s obrázkem dole. Tuto šablonu lze upravit a udělat z ní šablonu s jiným počtem sloupců. Zdatnějším uživatelům také ukážeme, jak je možné jednotlivé sloupce podbarvit a vytvořit tak dlaždice. 

Třísloupcová šablona je tvořena s pomocí mřížkového systému Bootstrap, na kterém jsou postaveny i naše responzivní šablony. Mřížkový systém pracuje s 12ti dílky na jeden řádek. Pro více informací doporučujeme přečíst článek Grid - rozdělte si stránku do sloupců.

Úprava velikosti buněk v šabloně

Vytvořte si stránku s obsahovými šablonami a vložte šablonu Tři sloupce s obrázkem dole. Umístěte kurzor do jednoho ze sloupců a podívejte se do zdrojového kódu. V HTML kódu vyhledáme div s třídou .col- což jsou již samotné sloupce. U každého .col- je uveden "bod zlomu" (md, sm, xs ...) a číslo zastupující šířku sloupce. Pro zobrazení čtyř sloupců v jednom řádku upravíme hodnotu col-md-4 na col-md-3 . Po provedené úpravě v HTML kódu lze již s šablonou pracovat klasicky v grafickém editoru inPage.

Html zápis

<section class="section-container section-3-col-top-text">
    <div class="section-cell-parent row">
        <div class="section-cell-item col-xs-12 col-sm-6 col-md-3">
           ...
        </div>
        <div class="section-cell-item col-xs-12 col-sm-6 col-md-3">
           ...
        </div>
        <div class="section-cell-item col-xs-12 col-sm-6 col-md-3">
           ...
        </div>
        <div class="section-cell-item col-xs-12 col-sm-6 col-md-3">
          ...
        </div>
    </div>
</section>

Ukázka

První titulek

Váš text začíná právě zde. 

Druhý titulek

Váš text začíná právě zde. 

Třetí titulek

Váš text začíná právě zde. 

Čtvrtý titulek

Váš text začíná právě zde.

Dlaždice z třísloupcové šablony

Úpravu si ukážeme na šabloně tři sloupce s obrázkem nahoře, využijeme třídu pro podbarvení bloku .section-bg a třídu šablony  .section-3-col-top-text.

Vytvořte si stránku s šablonami a přidejte šablonu tři sloupce s obrázkem nahoře. Nastavte světlé pozadí pravým kliknutím myši do šablony a výběrem Nastavení šablony  > barva pozadí např. bílá. Stránku uložte a přejděte do Vlastních CSS stylů (Vzhled > vlastní CSS styly). Zkopírujte níže uvedený CSS styl a vložte do vlastních CSS stylů. Uložte a je hotovo. Barvu pozadí upravíte v části background-color:#F2F2F2;

Při použití šablony tři sloupce s obrázkem dole vyměňte ve stylopisu třídu .section-3-col-top-text na .section-3-col-bottom-text.
Pro použití na např. čtyřsloupcovou je nutné ve stylopisu upravit část pro responzivní chování a to .col-md-4 na .col-md-3 a šířku na 25%.

Zápis CSS stylů

/*odebere pozadi a vnitrni odsazeni celeho bloku*/
.section-bg.section-3-col-top-text{
  background-color:transparent!important;
  padding:0;
}
/*obarvi jednotlive sloupce a prida vnejsi a vnitrni odsazeni*/
.section-bg.section-3-col-top-text .section-cell-item {
  background-color:#F2F2F2; /*podbarvení sloupců*/
  margin:15px;
  padding:15px;
}
/*=== responzivita ===*/
/*protoze jsme pridali vnejsi odsazeni na kazdy blok, je treba upravit velikost sloupce*/
/*styl je pripraveny pro trisloupcovou sablonu, pokud jste upravili velikost sloupcu*/
/*je treba upravit i hodnoty sloupcu zde, vcetne hodnoty sirky ve vlastnosti width*/
.section-bg.section-3-col-top-text .col-xs-12 {
  width: calc(100% - 30px);
}
@media (min-width: 768px) {
  .section-bg.section-3-col-top-text .col-sm-6 {
    width: calc(50% - 30px);
  }
}
@media (min-width: 992px) {
  .section-bg.section-3-col-top-text .col-md-4 {
    width: calc(33.333333% - 30px);
  }
}

Ukázka

První titulek

Váš text začíná právě zde. 

Druhý titulek

Váš text začíná právě zde. 

Třetí titulek

Váš text začíná právě zde. 

Závěrem

Doufáme, že pro vás bude tento návod přínosný a s jeho pomocí si dokážete ještě lépe přizpůsobit webové stránky vašim individuálním potřebám. Pokud byste potřebovali s úpravou pomoci, tak nás neváhejte kdykoli kontaktovat buď e-mailem na info@inpage.cz, anebo nám zanechte zprávu níže v komentáři.