Pomocou tried viete zmeniť dizajn alebo správanie jednotlivých elementov na stránke alebo e-shope. Stačí ich len vložiť do Nastavení bloku, Vlastností stránky alebo Vlastností produktovej kategórie. Triedy môžete väčšinou aj kombinovať, stačí ich oddeliť medzerou.
Zoznam tém:
Bloky #
Všeobecné pre bloky
__bw-light-accent – nastaví pozadie bloku na Nastavovanú farbu Jemné zvýraznenie.
__bw-part-accent – nastaví pozadie bloku slabším odtieňom Nastavovanej farby Zvýraznenie (akcent). Je to ako oblasť Nad pätičkou.
__bw-full-accent – nastaví pozadie bloku na Nastavovanú farbu Zvýraznenie (akcent) a mení zafarbenie elementov (aj textu) na kontrastné.
scrollAnimOff – vypína animácie pri scrollovaní pre všetky elementy v danom bloku.
blockCenter – v relevantných blokoch (tých, čo majú textovú šírku v Oblasti Obsah), zarovná elementy blokov na stred.
Produktové bloky
Sú to bloky Produkt z, Obsah kategórie, Najpredávanejšie produkty, Nedávno navštívené produkty a Najnovšie produkty.
productBlockCart – pridá do produktov, ktoré nemajú varianty a sú skladom, malé tlačidlo Vložiť do košíka.
productBlockSlick – zobrazí zoznam produktov ako posuvný zoznam. Takýto zoznam nemá stránkovanie ani radenie (relevantné pre bloky Obsah kategórie a Produkt z).
altImageOff – vypne používanie alternatívneho obrázka (zobrazený na prechod myši) produktu v bloku.
Obsah kategórie
blockCategoryList – zobraziť ako jednoduchý zoznam produktov, ak je v bloku vložená iba jedna kategória (teda nastaviť zobrazenie, aké by bolo, ak by ich bolo viac).
Text
blockTextTable – Ak chcete vložiť tabuľku s viac stĺpcami, pre zobrazenie na mobiloch je nutné pridať horizontálny posuvník na blok Text, ktorý ju obsahuje. Oddeľte preto tabuľku do vlastného bloku Text a tomu priraďte túto triedu.
blockTextNarrow - Ak chcete mať blok Text užší.
floxTextAccordion - Odrážkový obsah, po kliknutí na ikonku plus sa otvorí viac obsahu.
Postup: v textovom editore, cez 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>
Alternatívou k floxTextAccordion je podpora pre HTML elementy <details> a <summary> v textovom editore, čo je prakticky to isté ako floxTextAccordion, tiež sa zapisuje pomocou HTML. Atribút open sa môže použiť, ak má byť pri načítaní obsah otvorený (t.j. ekvivalent pre ftaOpen). Kód opäť vkladajte do Textového editoru cez ikonu HTML (viz obrázok vyššie).
<details><summary>Live ukážka pre vysúvací box</summary>
<p>Lorem ipsum dolor sit 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</details>
S použitím atribútu open:
<details open="">
<summary>Lorem ipsum</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus varius erat, quis scelerisque ante tempus nec. Maecenas et nibh dui.</p>
</details>
Galéria
blockGalleryCols - Responzívne zobrazenie stránky činí nastavenie "Počet stĺpcov" ako menej dôležité, keďže sa mení v závislosti od veľkosti zariadenia / obrazovky. Štandardne sa počet stĺpcov mení medzi 2 až 4. Táto trieda "znovuobnoví" nastavenie počet stĺpcov z nastavenia bloku, no použije sa ako MAXIMÁLNY počet stĺpcov, t.j. ak nastavíte 5, tak na najširších monitoroch v širokých oblastiach ako napr. Hlavný obsah sa zobrazí blok Galéria s 5 stĺpcami (no na mobiloch sa stále zobrazí v 2 stĺpcoch).
galleryContain – Blok Galéria štandardne zobrazuje obrázky zarovnané na presný pomer strán a obrázok sa zobrazí tak, aby "pokryl" (cover) vymedzený priestor, t.j. sa mu môžu "odrezať" boky alebo vrch a spodok. Táto trieda zabezpečí, že budú viditeľné celé obrázky, teda sú ohraničené (contain) okrajmi vymedzeného priestoru. Toto môže mať vplyv na estetiku zobrazenia bloku. Pozn.: obrázky sa ani v jednom spôsobe zobrazenia nedeformujú.
galleryMasonry - Alternatívne usporiadanie obrázkov v galérii do stĺpcov (no nie do riadkov), vhodné, ak blok obsahuje obrázky s rôznymi pomermi strán a zároveň ich nechceme mať orezané. Na toto zobrazenie nie je vhodné číselné stránkovanie, preto je vhodné zobraziť vačší počet obrázkov naraz alebo sa spoľahnúť na tlačidlo "Načítať ďalšie". Samozrejme, v závislosti od vybranej skupiny obrázkov, stĺpce s obrázkami nebudú rovnako dlhé. Počet stĺpcov sa mení podľa responzivity na 4, no viete to ovplyvniť pridaním triedy "blockGalleryCols" a nastavením Počet stĺpcov.
Pozn.: Dôležitý rozdiel pre toto zobrazenie od základnej mriežky je, že poradie obrázkov (z administrácie) je po stĺpcoch, nie po riadkoch (okrem zatiaľ experimentálnych verzii prehliadačov Firefox a Safari - táto se bude zobrazovať v budúcnosti v závislosti na vývoji prehliadačov).
Galéria základ
Galéria Masonry
Galéria Masonry experimentálna verziaČlánky
newsBlockGrid – Blok Články je v základnom rozložení na desktope v prvom riadku zobrazený s 3 článkami a v ďalších riadkoch s 4 článkami. Táto trieda prepne zobrazenie, aby aj prvý riadok mal 4 články.
Výzva k akcii (CTA)
blockCTAHideButton – skryje sa tlačídlo v bloku. To isté sa stane aj bez triedy, ak nastavíte Presmerovanie ako "#".
Navigácia
iconOnly – zobrazí iba nastavené ikonky, text odkazov je skrytý.
Rázcestník
blockDirectorySquare – pre zobrazenia Obrázkové odkazy a Boxy zmení pomer strán obrázka na 1:1. Bez zmeny má pomer 5:3 šírka:výška.
blockDirectoryContain - pre zobrazenia Obrázkové odkazy a Boxy zobrazí obrázok bez orezania, ale nie presne v určenom pomere strán.
hideTitle - pre rozloženia Obrázkové odkazy a Boxy skryje nadpis. Vhodné, ak je nadpis súčasťou obrázka.
altHover - alternatívne zvýraznenie položky pri prechode myšou, namiesto priblíženia obrázka je použité zosvetlenie.
Výhody
counter - Urobí z bloku Výhody počítadlo. Do názvu vložte číslo, do ktorého sa má počítať. Ak číslo na konci obsahuje znamienko +, x alebo ., zobrazí sa po dokončení počítania za číslom. Pri triede counter odporúčame zapnúť v bloku Výhody aj text, aby bolo možné uviesť popisok.
counterBig - Všetko ako counter, ale čísla majú väčšiu veľkosť písma.
highlightsIcons25 – Zmení ikonky a veľkosť obrázka na 25 x 25px
highlightsIcons50 – Zmení ikonky a veľkosť obrázka na 50 x 50px. Toto je základná veľkosť pre väčšinu zobrazení bloku Výhody.
highlightsIcons75 – Zmení ikonky a veľkosť obrázka na 75 x 75px. Toto je základná veľkosť pre zobrazenia Pás a Mriežka (aj s titulkom).
highlightsIcons100 – Zmení ikonky a veľkosť obrázka na 100 x 100px.
highlightsIcons150 – Zmení ikonky a veľkosť obrázka na 150 x 150px..
highlightsIcons200 – Zmení ikonky a veľkosť obrázka na 200 x 200px.
highlightsIcons300 – Zmení ikonky a veľkosť obrázka na 300 x 300px.
iconOnly – Zobrazí iba nastavené ikonky alebo obrázky, text odkazov je skrytý.
Dynamický banner
newWindow – otvárať odkaz v Presmerovaní snímku do nového okna
Sociálne siete
iconOnly – zobrazí iba nastavené ikonky, text odkazov je skrytý.
socialsIcons25 – Zmení ikonky a veľkosť obrázka na 25 x 25px
socialsIcons50 – Zmení ikonky a veľkosť obrázka na 50 x 50px.
socialsIcons75 – Zmení ikonky a veľkosť obrázka na 75 x 75px.
socialsIcons100 – Zmení ikonky a veľkosť obrázka na 100 x 100px.
Stránky #
pageCenter – zarovná všetky relevantné bloky na stred (ako by mali blockCenter). Taktiež zarovná na stred hlavný nadpis stránky.
Kategórie produktov #
categoryCart – pridá do produktov, ktoré nemajú varianty a sú skladom, malé tlačidlo Vložiť do košíka v Kategórii produktov.
altImageOff – vypne používanie alternatívneho obrázka (zobrazený na prechod myši) produktu v bloku.
hideSizeTable – skryje v detaile produktu tejto kategórie záložku Tabuľka veľkostí.