Dlaždice na úvodní stránce
20. 11. 2015
Na mnoha webech je vidět unikátní rozložení úvodní stránky s dlaždicemi odkazujícími na další články nebo služby. Dnes si ukážeme, jak tyto dlaždice pomocí CSS stylů a hotového frameworku Bootstrap vytvoříme v šablonách SLIDE a ONE.
Styl a rozložení dlaždic vychází z již zmiňovaného frameworku Bootstrap s vytvořeným tzv. mřížkovým systémem (grid system), který jednotlivé prvky svazuje do nastavené šířky. Šířka jednotlivých prvků se mění v závislosti na velikosti zobrazovacího zařízení. V našich responzivních šablonách je tato mřížka použita pro rozložení webu, a to na levý a pravý sloupec.
Mřížkový systém funguje podobně jako tabulka. Tedy je tu řádek, ve kterém se nacházejí buňky/sloupce, které mají přidělenu vlastnost, a ta jim říká, jakou mají mít šířku na různých zařízeních. Použití mřížkového systému je popsáno v článku Grid - rozdělte si stránku do sloupců.
Zdrojový kód dlaždic
Pro tvorbu dlaždic využijeme níže uvedený kód, který vložíme do zdrojového kódu úvodní stránky, a uložíme. Poté je možné texty a obrázky dále upravovat v grafickém editoru. Jednoduše na ně klikneme a upravíme. Při opětovných úpravách musíme dávat pozor, abychom zdrojový kód neodmazali nebo nějak neupravili.
Pro usnadnění využijte zobrazení textu s bloky. Nastavení provedete v editoru pod položkou Zobrazit > Ukázat bloky. S tímto zobrazením uvidíte ve které části upravujete text a zda nedošlo k narušení kódu.
<div class="row sluzby">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="/obrazek/2/obrazek1-jpg/" alt="" />
<div class="caption">
<h2>Nadpis </h2>
<p>Krátký popis</p>
<p><a class="btn btn-primary" href="/inpage/sluzba1/">Více informací</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="/obrazek/2/obrazek2-jpg/" alt="" />
<div class="caption">
<h2>Nadpis </h2>
<p>Krátký popis</p>
<p><a class="btn btn-primary" href="/inpage/sluzba2/">Více informací</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="/obrazek/2/obrazek3-jpg/" alt="" />
<div class="caption">
<h2>Nadpis </h2>
<p>Krátký popis</p>
<p><a class="btn btn-primary" href="/inpage/sluzba3/">Více informací</a></p>
</div>
</div>
</div>
</div>
Použití dlaždic na webu
Níže vidíme, jak vypadají námi vytvořené tři dlaždice na webu. Jejich responzivní chování vyzkoušíme zmenšením a zvětšením okna prohlížeče.
Změna barvy pozadí, tlačítek a textu
Dlaždice lze dále upravovat v rámci CSS stylů. Níže přidáváme stylopisy na změnu barvy pozadí dlaždic, tlačítek a textů. Stylopisy stačí zkopírovat, vložit do vlastních CSS stylů (VZHLED > Vlastní CSS) a upravit hexa kód barev (#000000). U každé vlastnosti je komentář s popisem, co ovlivňuje.
Barva pozadí a ohraničení dlaždice
.sluzby .thumbnail {
background-color:#ffffff; /* barva pozadí */
border:1px solid #eeeeee; /* tloušťka ohraničení, styl čáry, barva ohraničení */
border-radius:0px; /* oblé rohy, hodnota 0px znaméná ostré rohy */
}
Barva textu a nadpisů
.sluzby .thumbnail .caption {color:#252525;} /* barva textu */
.sluzby .thumbnail .caption h2{color:#006197;} /* barva nadpisu */
Barva tlačítka
U tlačítek jsou dvě možnosti změny barvy. Můžeme využít již nastavených tlačítek, které použijeme a změníme u nich třídu tlačítka.
Nyní je tlačítko nastaveno takto: <a class="btn btn-primary" href="/inpage/sluzba3/">Více informací</a>
Jeho třída je class="btn btn-primary", jehož barevné nastavení se mění dle barvy šablony. Stačí třídu btn-primary změnit na např. btn-success a přebarví se nám na zelenou. Další možnosti přednastavených tlačítek naleznete na stránkách Bootstrapu.
Pro ty, kteří si nevyberou z barevných variací, je další možností přímá úprava tlačítka v CSS stylech s níže uvedeným stylopisem.
.sluzby .thumbnail .caption .btn-primary {
color:#ffffff; /* barva textu */
background-color:#006197; /* barva pozadí */
border:1px solid #006197; /* barva ohraničení */
}
.sluzby .thumbnail .caption .btn-primary:hover {
color:#ffffff; /* barva písma při najetí myši na tlačítko */
background-color:#0e8cf7; /* barva pozadí po najetí myši na tlačítko */
border:1px solid #0e8cf7; /* barva ohraničení po najetí myši na tlačítko */
}
Při úpravě pozadí prvků můžete zvolit jinou barvu, barevný přechod i vlastní obrázek. Vše je již popsáno v článcích: Vylepšete si pozadí stránek s online generátory a Jak změnit pozadí webových stránek.
Poznámka pro šablonu Hanami
Zdrojový kód je shodný s jedním rozdílem. Třídy thumbnail přepište na cardbox.
Tým inPage
info@inpage.cz
Přidat komentář
Přehled komentářů
Změna počtu dlaždic - správné stylování
18. 2. 2017 18:59:14 | Jiří Herian
Dobrý den, můžete poradit co vše nastavit ve stylování, když například změním počet dlaždic ze 3 na 4. Nemohu to přeprat...
Děkuji
Odpovědět | Zobrazit odpovědi
Re: Změna počtu dlaždic - správné stylování
20. 2. 2017 12:42:27 | Tým inPage
Dobrý den,
postup by byl následující:
1) zkopírujete a ještě jednou vložíte celý prvek div
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
....
</div>
2) a poté ve všech těchto 4 prvcích změníte počet sloupců pro md a lg následovně: col-md-4 col-lg-4 upravíte na col-md-3 col-lg-3
Sloupců je na šířku 12, tedy pokud máte 3 prvky, dáte je po 4 sloupcích. Pokud 4 prvky, dáte je po 3 sloupcích.
Odpovědět
RE:TOP Produkty
11. 3. 2016 8:16:41 | tým inPage
Dobrý den Jáne,
stačí když si v menu E-Shop v Nastavení e-shopu vyberete v roletce Náhodný TOP produkt počet zobrazovaných produktů. TOP produkty jsou ty produkty, které si v nastavení produktu označíte jako Oblíbený. Můžete tak jednoduše ovlivnit, který výběr produktů se vám na webu objeví.
Odpovědět
TOP Produkty
10. 3. 2016 20:58:50 | Ján Mažgút
Prosím o radu:
Jak udělat dlaždice TOP produktů v šablone ONE na uvodní stránce, tak jak máte v ukázce na http://www.one.inpage.cz/ "Top produkty našeho E-shopu"
Děkuji za odpověď.
Odpovědět
RE:Zmena parametru dlazdic
17. 12. 2015 9:51:09 | tým inPage
Dobrý den,
pro správné zobrazení v responzivních verzích doporučujeme spíše volit obsah tak, aby byl všude stejně dlouhý. Popř. můžete k třídě: .sluzby .thumbnail přidat vlastnost min-height: 200px; V tomto případě dlaždice nikdy nebude menší než 200px a v případě potřeby se vytáhne.
Odpovědět
Zmena parametru dlazdic
17. 12. 2015 9:02:33 | Petr
Děkuji za doplnění. Ještě mám doplňující dotaz, jestli je možné nastavit pevnou výšku dlaždic, resp. funkci sjednocující jejich výšku, když je např. v jednotlivých dlaždicích rozdílné množství textu/řádků. Děkuji.
Odpovědět
RE: Zmena parametru dlazdic
11. 12. 2015 11:00:35 | Tým inPage
Dobrý den,
ano je to možné. Tyto úpravy lze provést v rámci CSS stylů nebo použitím již přednastavených stylů. Postup, jak na to jsme do článku doplnili pod nadpisem "Změna barvy pozadí, tlačítek a textu".
Odpovědět
Zmena parametru dlazdic
10. 12. 2015 13:10:15 | Petr
Dobrý den,
je možné doplnit kódy měnící parametry vzhledu dlaždic - např. barvu pozadí nebo tlačítka?
Děkuji.
Odpovědět | Zobrazit odpovědi
Aktuálnost
18. 1. 2022 14:33:32 | Vlastimil
Tento článek již zřejmě není aktuální, že? Poté, co byly implementovány obsahové šablony... díky
Odpovědět
Dlaždice
24. 11. 2015 15:37:54 | Tomas
Super, funguje, tenhle článek mě posunul, dík.
Odpovědět