Blokov je 55 a keby boli zoradené podľa abecedy, nikto by v nich nič nenašiel. Preto sú tu usporiadané podľa toho, čo chcete dosiahnuť — nie podľa toho, ako sa volajú.
Každý blok má vlastné nastavenia pozadia, odsadení, zaoblenia a správania na mobile, a farby si berie z palety webu. Každý sa dá navyše skryť na mobile, na tablete alebo na počítači — v pravom paneli v sekcii Viditeľnosť podľa zariadenia. Nižšie je pri každom napísané, na čo je dobrý a kedy siahnuť po ňom a nie po susednom.
Základ, z ktorého sa skladá všetko
- Nadpis — s nastaviteľnou úrovňou. Úroveň nie je veľkosť písma: je to poradie v štruktúre, ktoré čítajú vyhľadávače aj čítačky pre nevidiacich.
- Text — odsek s plnou kontrolou nad šírkou a odsadením.
- Tlačidlo a Tlačidlá (rad tlačidiel) — plné aj obrysové prevedenie.
- Obrázok — s popisom, zaoblením a rozmermi, takže obsah pod ním pri načítaní nepodskočí.
- Ikona — jedna zo sady 5 185 ikon.
- Oddeľovač — na oddelenie sekcií bez toho, aby ste vkladali prázdne odseky.
- Stĺpce a stĺpec — základ každého rozloženia. Nastavuje sa počet, pomer šírok, medzera, pozadie a zvislé zarovnanie. Sekcia sa dá vytiahnuť tak, aby prekryla tú nad ňou, a v stĺpci nastavíte jednu medzeru medzi všetkými blokmi naraz.
Pozor: pri rade kariet nastavte v bloku Stĺpce Vertikálne zarovnanie na Roztiahnuť, aby mali karty rovnakú výšku. Inak má každá karta výšku podľa dĺžky svojho textu a rad vyzerá rozhádzane.
Začiatok stránky
- Hero — úvodná sekcia s nadpisom, textom, tlačidlami a pozadím. Prvá vec, ktorú návštevník uvidí. Pre telefón jej nastavíte zvlášť výrez fotky, výšku aj umiestnenie textu.
- CTA (výzva na akciu) — sekcia, ktorá pýta jeden konkrétny krok. Patrí na koniec stránky a pokojne aj do jej stredu.
- Postup čítania — tenký prúžok postupu pri dlhom článku. Drobnosť, ktorá zvyšuje dočítanosť.
Vysvetliť, čo ponúkate
- Feature (a jednotlivá výhoda, Feature Item) — mriežka bodov, ktoré predávajú. Typicky tri alebo šesť.
- Ikona s textom — ikona, nadpis a text. Najpoužívanejšia stavebná jednotka celého webu.
- Štatistické číslo — veľké číslo s popisom. „12 rokov na trhu“, „400 spokojných klientov“.
- Karta — univerzálny obdĺžnik s obrázkom, textom a odkazom.
- Zoznam s ikonami (a jeho položka) — odškrtnuté body. Číta sa lepšie než odsek a pôsobí konkrétnejšie.
- Steps / Kroky (a jednotlivý Krok) — očíslovaný postup „ako to prebieha“. Na stránke služby patrí takmer vždy.
Získať dôveru
- Referencia — hodnotenie s menom, fotkou a funkciou. Bez mena to nefunguje.
- Citát — zvýraznená myšlienka v texte.
- Člen tímu — ľudia za firmou. Na weboch služieb má nadpriemerný účinok.
- Logá klientov (a jednotlivé Logo) — značky, s ktorými pracujete. Dá sa nastaviť ako pomalý posun.
- Časová os (a jej bod) — história firmy alebo priebeh projektu.
Predať
- Cenník a cenová karta — balíky vedľa seba, s možnosťou označiť jeden ako odporúčaný. Presne to je najúčinnejšia časť celého cenníka.
- Odpočítavanie — čas do konca akcie alebo do začiatku podujatia.
- Ukazovateľ postupu a Kruhový ukazovateľ — vyjadrenie miery: naplnenosť kurzu, priebeh zbierky, úroveň zručnosti.
Zmestiť veľa obsahu do malého miesta
- Akordeón (a jeho položka) — otázky a odpovede. Najlepší spôsob, ako predísť polovici e-mailov, ktoré dostávate.
- Záložky (a jedna záložka) — obsah rozdelený do kariet vedľa seba.
- Rozbalenie / Čítať viac — dlhý text skrátený s možnosťou „čítať viac“.
Obrázky a galéria
- Carousel (a jeho Slide carouselu) — posuvná galéria alebo posuvné referencie.
- Foto kôpka — fotky poskladané na seba, keď má sekcia vyzerať živšie než mriežka.
- Pred / Po — dve fotky s posuvníkom. Pre remeslá, kozmetiku, rekonštrukcie a všade, kde je zmena hlavným argumentom.
- Flip Card — otočí sa a ukáže rub. Dobré na otázky, ceny alebo skrytý detail.
- H-Scroll (vodorovný posun, a jeho H-Scroll Slide) — obsah, ktorý sa posúva do strany pri scrollovaní. Na telefóne sa panely poskladajú pod seba.
Obrázky v týchto blokoch zdieľajú spoločné zväčšovanie po kliknutí, takže sa galéria nesprává na každej stránke inak.
Vypísať obsah, ktorý spravujú iné časti webu
- Mriežka článkov — články, prípadové štúdie alebo vlastný typ obsahu ako mriežka kariet. Nemusíte ho udržiavať, dopĺňa sa sám.
- Video — prehrávač, ktorý sa vie spustiť až vtedy, keď je na obrazovke, a nezaťažuje načítanie stránky.
- Chránený obsah — súbor alebo prehrávač (PDF, audio, video), ktorý otvorí len ten, kto prejde pravidlom: prihlásený, s konkrétnou rolou, po odomknutí e-mailom (s Branike CRM) alebo po kúpe produktu. Ostatní uvidia ukážku s tlačidlom. Pravidlo „členstvo / klub“ potrebuje napojený členský plugin; bez neho pustí len administrátora.
- Médium v okne — fotka, video alebo schéma, ktorá sa otvorí v okne až po kliknutí na ikonu, tlačidlo alebo označené slovo v texte. Čitateľovi, ktorý ju nepotrebuje, nezavadzia a nič sa kvôli nej nesťahuje.
Upozorniť
Alert / Upozornenie je farebný rámik s ikonou pre informáciu, tip, varovanie alebo chybu. Používa sa na to, čo si musí čitateľ všimnúť, aj keď stránku len prebehne očami. V návodoch je to najužitočnejší blok vôbec — a zároveň ten, ktorý sa najľahšie prežene. Tri upozornenia na obrazovke znamenajú, že nie je dôležité nič.
Jemnejšia cesta je značka v texte: slovo vo vete označíte ako ukážku, vysvetlenie alebo upozornenie, dostane ikonu a po kliknutí otvorí okno s fotkou či vysvetlením. Upozorní, ale nevyruší.
Pohyb pri scrollovaní
- Pin Scroll, Pin Scene, Pin Frame a Pin Item — sekcia ostane stáť a jej obsah sa mení, kým sa okolo nej scrolluje. Používa sa na rozprávanie príbehu: postup, porovnanie, vývoj v čase.
Pohyb je koreninou, nie hlavným jedlom. Jedna takáto sekcia na stránke zapôsobí, tri z nej urobia púť. A platí, že pohyb sa nesmie diať na úkor rýchlosti — preto sa spúšťa až vtedy, keď je prvok na obrazovke. A kto má v systéme zapnuté obmedzenie pohybu, tomu sa animované prechody vrstiev ani posun do strany nespustia.
Menu
Mega panel — položka menu, ktorá namiesto úzkeho zoznamu otvorí široký panel so stĺpcami, ikonami či produktmi. Panel je obyčajný vzor a žije vnútri navigácie webu, nie na stránke. Postup je v článku Menu a navigácia.
Vzory: nemusíte to skladať sami
Väčšinu z týchto blokov nikdy nebudete vkladať po jednom. V editore je knižnica 130 hotových sekcií v 22 kategóriách s náhľadom — hero, výhody, cenník, otázky a odpovede, referencie, štatistiky, tím, kontakt, pätička, logá, galéria, časová os, video, výpis článkov, služby, záhlavie a panely pre mega menu. Otvoríte ju tlačidlom Knižnica vzorov v hornej lište editora. Každý blok, ktorý sa dá vložiť do stránky, má v nej aspoň jednu ukážku.
Vzor je poskladaný presne z týchto blokov, takže po vložení viete ktorúkoľvek jeho časť upraviť. Prídu aj s fotkami. A keď si nastavíte blok tak, ako ho chcete mať, uložíte si predvoľbu a použijete ju inde jedným kliknutím.
Na čo si dať pozor
- Nadpisy nepoužívajte na veľkosť písma. Úroveň nadpisu je štruktúra, nie vzhľad — a čítajú ju vyhľadávače aj asistenčné technológie.
- Rad kariet zarovnajte na rovnakú výšku. Bez toho vyzerá rozhádzane.
- Dlhý text na tlačidle skontrolujte na mobile. Tlačidlá sa síce zalomia na ďalší riadok namiesto orezania, ale dlhý nápis aj tak rozhodí rad.
- Skrytie na mobile nie je zrýchlenie. Skrytý blok sa návštevníkovi stiahne aj tak, vrátane obrázkov.
- Nemiešajte štýly ikon. Obrysové a plné ikony vedľa seba vyzerajú nedbalo.
- Upozornenia používajte striedmo. Keď je zvýraznené všetko, nie je zvýraznené nič.
- Farby berte z palety. Ručne zadaný odtieň sa pri zmene značky nezmení sám.
- Odsadenia sekcií držte jednotné. Je to najlacnejší spôsob, ako stránka pôsobí profesionálne.