Blokov je 53 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. 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 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.
🔴 Pri rade kariet nastavte zvislé zarovnanie na 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í.
- Výzva na akciu — sekcia, ktorá pýta jeden konkrétny krok. Patrí na koniec stránky a pokojne aj do jej stredu.
- Ukazovateľ prečítaného — tenký prúžok postupu pri dlhom článku. Drobnosť, ktorá zvyšuje dočítanosť.
Vysvetliť, čo ponúkate
- Výhody (a jednotlivá výhoda) — mriežka bodov, ktoré predávajú. Typicky tri alebo šesť.
- Ikonový box — ikona, nadpis a text. Najpoužívanejšia stavebná jednotka celého webu.
- Číselný box — veľké číslo s popisom. „12 rokov na trhu“, „400 spokojných klientov“.
- Karta — univerzálny obdĺžnik s obrázkom, textom a odkazom.
- Ikonový zoznam (a jeho položka) — odškrtnuté body. Číta sa lepšie než odsek a pôsobí konkrétnejšie.
- 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.
- Tím — ľudia za firmou. Na weboch služieb má nadpriemerný účinok.
- Prehliadka log (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čet — čas do konca akcie alebo do začiatku podujatia.
- Postup a kruhový postup — vyjadrenie miery: naplnenosť kurzu, priebeh zbierky, úroveň zručnosti.
Zmestiť veľa obsahu do malého miesta
- Rozbaľovací zoznam (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 textu — dlhý text skrátený s možnosťou „čítať viac“.
Obrázky a galéria
- Kolotoč (a jeho snímka) — posuvná galéria alebo posuvné referencie.
- Vrstvené obrázky — fotky poskladané na seba, keď má sekcia vyzerať živšie než mriežka.
- Pred a po — dve fotky s posuvníkom. Pre remeslá, kozmetiku, rekonštrukcie a všade, kde je zmena hlavným argumentom.
- Preklápacia karta — otočí sa a ukáže rub. Dobré na otázky, ceny alebo skrytý detail.
- Vodorovný posun (a jeho snímka) — obsah, ktorý sa posúva do strany pri scrollovaní.
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
- Výpis príspevkov — č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 — časť stránky viditeľná len prihlásenému, len členovi alebo len držiteľovi konkrétneho balíka. Vďaka nemu sa členská zóna dá postaviť priamo v stránke, nie ako samostatný svet.
Upozorniť
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č.
Pohyb pri scrollovaní
- Pripnutý scroll, pripnutá položka, rám a scéna — 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.
Vzory: nemusíte to skladať sami
Väčšinu z týchto blokov nikdy nebudete vkladať po jednom. V editore je knižnica 87 hotových sekcií v 21 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 a záhlavie.
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. Je to najčastejšie miesto, kde sa niečo nezmestí.
- 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.