Pomocí tříd můžete změnit vzhled nebo chování jednotlivých elementů na stránce nebo v e-shopu. Stačí je pouze vložit do Nastavení bloku, Vlastností stránky nebo Vlastností produktové kategorie. Třídy můžete většinou také kombinovat, stačí je oddělit mezerou.
Seznam tém:
Bloky #
Obecně pre bloky
__bw-light-accent – nastaví pozadí bloku na Nastavovanou barvu Jemné zvýraznění.
__bw-part-accent – nastaví pozadí bloku slabším odstínem Nastavované barvy Zvýraznění (Accent). Je to jako oblast Nad patičkou.
__bw-full-accent – nastaví pozadí bloku na Nastavovanou barvu Zvýraznění (Accent) a mění zbarvení prvků (včetně textu) na kontrastní.
scrollAnimOff – vypíná animace při posunu (scrollování) pro všechny prvky v daném bloku.
blockCenter – ve relevantních blocích (ty, které mají textovou šířku v oblasti Obsah), zarovnává prvky bloků na střed.
Produktové bloky
Jsou to bloky Produkt z, Obsah kategorie, Nejprodávanější produkty, Nedávno navštívené produkty a Nejnovější produkty.
productBlockCart – přidává do produktů, které nemají varianty a jsou skladem, malé tlačítko Vložit do košíku.
productBlockSlick – zobrazuje seznam produktů jako posuvný seznam. Takový seznam nemá stránkování ani řazení (relevantní pro bloky Obsah kategórie a Produkt z).
altImageOff – vypíná používání alternativního obrázku (zobrazeno při najetí myší) produktu v bloku.
Obsah kategorie
blockCategoryList – zobrazit jako jednoduchý seznam produktů, pokud je v bloku vložena pouze jedna kategorie (nastavuje zobrazení, které by bylo, pokud by jich bylo více).
Text
blockTextTable – Chcete-li vložit tabulku s více sloupci, pro zobrazení na mobilech je nutně přidat horizontální posuvník na blok Text, který ji obsahuje. Oddělte proto tabulku do vlastního bloku Text a tomu přiřaďte tuto třídu.
blockTextNarrow - Chcete-li mít blok Text užší.
floxTextAccordion - Odrážkový obsah, po kliknutí na ikonku plus se otevře více obsahu.
Postup: v textovém editoru, přes ikonku HTML
vložte tento kód:
<div class="floxTextAccordion">
<span class="ftaTitle">NADPIS</span>
<div class="floxTextAccordionWrapper">
<div class="ftaContent">
<p>OBSAH TEXTU</p>
</div>
</div>
</div>
Alternativou k floxTextAccordion je podpora pro HTML elementy <details> a <summary> v textovém editoru, což je prakticky totéž jako floxTextAccordion, také se zapisuje pomocí HTML. Atribut open lze použít, má-li být při načtení obsah otevřen (tj. ekvivalent pro ftaOpen).
Postup: Kód opět vkládejte do Textového editoru přes ikonu HTML (viz obrázek výše).
<details><summary>Live ukázka pro vysouvací box</summary>
<p>Lorem ipsum dolor sít amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor v reprehenderit v voluptate velit esse cillum dolor eu fugiat nulla pariatur.</p>
</details>
S použitím atributu open:
<details open="">
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus varíus erat, quis scelerisque ante tempus nec. Maecenas et nibh dui.</p>
</details>
Galerie
blockGalleryCols - Responzivní zobrazení stránky činí nastavení "Počet sloupců" jako méně důležité, jelikož se mění v závislosti na velikosti zařízení / obrazovky. Standardně se počet sloupců mění mezi 2 až 4. Tato třída "znovuobnoví" nastavení počet sloupců z nastavení bloku, ale použije se jako MAXIMÁLNÍ počet sloupců, tzn. pokud nastavíte 5, tak na nejširších monitorech v širokých oblastech jako například Hlavní obsah se zobrazí blok Galerie s 5 sloupci (no na mobilech se stále zobrazí ve 2 sloupcích)
galleryContain – Blok Galerie standardně zobrazuje obrázky zarovnané na přesný poměr stran a obrázek se zobrazí tak, aby "pokryl" (cover) vymezený prostor, tzn. se mu mohou „uříznout“ boky nebo vrch a spodek. Tato třída zajistí, že budou viditelné celé obrázky, tedy jsou ohraničené (contain) okrajemi vymezeného prostoru. Toto může mít vliv na estetiku zobrazení bloku. Pozn.: obrázky se ani v jednom způsobu zobrazení nedeformují.
galleryMasonry - Alternativní uspořádání obrázků v galerii do sloupců (no ne do řádků), vhodné, pokud blok obsahuje obrázky s různými poměry stran a zároveň je nechceme mít oříznuté. K tomuto zobrazení není vhodné číselné stránkování, proto je vhodné zobrazit větší počet obrázků najednou nebo se spolehnout na tlačítko "Načíst další". Samozřejmě, v závislosti na vybrané skupině obrázků, sloupce s obrázky nebudou stejně dlouhé. Počet sloupců se mění podle responzivity na 4, ale umíte to ovlivnit přidáním třídy "blockGalleryCols" a nastavením Počet sloupců.
Pozn.: Důležitý rozdíl pro toto zobrazení od základní mřížky je, že pořadí obrázků (z administrace) je po sloupcích, ne po řádcích (kromě zatím experimentálních verzí prohlížečů Firefox a Safari - tato se bude zobrazovat v budoucnosti v závislosti na vývoji prohlížečů).
Galerie základ
Galerie Masonry
Galerie Masonry experimentálni verzeČlánky
newsBlockGrid – Blok Články je v základním rozložení na desktopu v prvním řádku zobrazen s 3 články a v dalších řádcích s 4 články. Tato třída přepne zobrazení, aby i první řádek měl 4 články.
Výzva k akcii (CTA)
blockCTAHideButton –skryje tlačítko v bloku. Stejné se stane i bez třídy, pokud nastavíte Přesměrování na "#".
Navigace
iconOnly – zobrazuje pouze nastavené ikony, text odkazů je skrytý.
Rozcestník
blockDirectorySquare – pro zobrazení Obrázkové odkazy a Boxy změní poměr stran obrázku na 1:1. Bez změny má poměr 5:3 šířka:výška.
blockDirectoryContain - pro zobrazení Obrázkové odkazy a Boxy zobrazí obrázek bez oříznutí, ale ne přesně v určeném poměru stran.
hideTitle - pro zobrazení Obrázkové odkazy a Boxy skryje nadpis. Vhodné, pokud je nadpis součástí obrázku.
altHover - alternativní zvýraznění položky při přechodu myší, místo přiblížení obrázku je použito zesvětlení.
Výhody
counter – Udělá z bloku Výhody počítadlo. Do názvu vložte číslo do kterého se má počítat. Pokud číslo na konci obsahuje znaménka +, x nebo ., zobrazí se po dokončení počítání za číslem. U třídy counter doporučujeme zapnout v bloku Výhody i text, aby bylo možné uvést popisek.
counterBig – Všechno jako counter, ale čísla mají větší velikost písma.
highlightsIcons25 – Změní ikony a velikost obrázku na 25 x 25px.
highlightsIcons50 – Změní ikony a velikost obrázku na 50 x 50px. Toto je základní velikost pro většinu zobrazení bloku Výhody.
highlightsIcons75 – Změní ikony a velikost obrázku na 75 x 75px. Toto je základní velikost pro zobrazení Pás a Mřížka (včetně titulku).
highlightsIcons100 – Změní ikony a velikost obrázku na 100 x 100px.
highlightsIcons150 – Změní ikony a velikost obrázku na 150 x 150px.
highlightsIcons200 – Změní ikony a velikost obrázku na 200 x 200px.
highlightsIcons300 – Změní ikony a velikost obrázku na 300 x 300px.
iconOnly – zobrazuje pouze nastavené ikony, text odkazů je skrytý.
Dynamický banner
newWindow – otevře odkaz v Přesměrování v novém okně.
Sociální sítě
iconOnly – zobrazí pouze nastavené ikony, text odkazů je skrytý.
socialsIcons25 – Změní ikony a velikost obrázku na 25 x 25px
socialsIcons50 – Změní ikony a velikost obrázku na 50 x 50px.
socialsIcons75 – Změní ikony a velikost obrázku na 75 x 75px.
socialsIcons100 – Změní ikony a velikost obrázku na 100 x 100px.
Stránky #
pageCenter – zzarovná všechny relevantní bloky na střed (jako by měly blockCenter). Také zarovná na střed hlavní nadpis stránky.
Kategorie produktů #
categoryCart – přidává do produktů, které nemají varianty a jsou skladem, malé tlačítko Vložit do košíku v Kategorii produktů.
altImageOff – vypíná používání alternativního obrázku (zobrazeno při najetí myší) produktu v bloku.
hideSizeTable – skrývá v detailu produktu této kategorie záložku Tabulka velikostí.