Blokk-katalógus
Találd meg a megfelelő blokkot abból, amit az oldalon el szeretnél érni.
Ne blokknevekből indulj. Válaszd ki előbb a feladatot – nyitás, magyarázat, vizuál, történet, bizalom vagy konverzió –, aztán nézd meg a hozzá illő élő példákat.
Mit szeretnél megoldani?
Indulj a célból. Innen közvetlenül ahhoz a blokkcsoporthoz ugorhatsz, amelyik valószínűleg a legjobb kiindulópont.
Erős oldalnyitást szeretnék →
Fő üzenet, első benyomás és egyértelmű következő lépés.
El akarok magyarázni valamit →
Címek, szöveg, kiemelt doboz, idézet és kép–szöveg párosítás.
Meg akarom mutatni →
Kép, videó, galéria, diavetítés vagy interaktív vizuál.
Végigvezetném egy történeten →
Kártyák, idővonal, fülek és vezetett, egymásra épülő elrendezések.
Bizalmat szeretnék építeni →
Számok, ügyfélvélemények, logók, értékelések és csapat.
Cselekvésre szeretném ösztönözni →
CTA-k, kapcsolatfelvétel, árak, határidők és letölthető anyagok.
Nyitóblokkok
Az oldal első benyomása: fő üzenet, vizuál és következő lépés.
Nyitókép · középre zárt →
Tiszta, fókuszált nyitás erős címmel és CTA-val. Akkor jó, ha az üzenet önmagában viszi a figyelmet.
Nyitókép · kép mellett →
Szöveg az egyik oldalon, kép a másikon. Jó, ha a fő ígéret mellett rögtön meg akarod mutatni a terméket vagy eredményt.
Nyitókép · háttérképpel →
A fő üzenet egy nagy háttérképre kerül. Helyszínhez, termékhez és erős vizuális márkaélményhez.
Nyitókép · videóval →
Mozgó videóháttér fölött jelenik meg a cím és a CTA. Akkor erős, ha maga a folyamat vagy élmény látványosan bemutatható.
Szöveg és szerkesztői tartalom
Az alapvető szöveges elemek a rövid címtől a képpel kísért történetig.
Cím →
Főcímhez, szekciócímhez vagy alcímhez. Segít világos hierarchiát és könnyen átfutható oldalt építeni.
Formázott szöveg →
Formázott bekezdésekhez, listákhoz, alcímekhez és hosszabb magyarázatokhoz.
Kiemelt doboz →
Fontos szabály, figyelmeztetés vagy kulcsmondat négy stílusban: jegyzetként, kártyán, nagy betűs állításként vagy színes panelen.
Idézet →
Valódi idézet vagy kulcsmondat hangsúlyos kiemelése kísérőszöveggel: mellette, középre igazítva vagy kártyán.
Kép szöveggel →
Kép és formázott szöveg egy szerkesztői elrendezésben. Bemutatkozáshoz, történethez vagy részletes magyarázathoz.
Kiemelt mondat →
Egy-két nagy betűs mondat, amely görgetés közben rajzolódik ki: szavanként, kiemelő tollvonással vagy becsúszó sorokban.
Futó szöveg →
Rövid szavak és kifejezések folyamatosan gördülő, megállítható sávban – szolgáltatásokhoz, témákhoz, hangulathoz.
Képek és média
Ha nem elég elmondani: mutasd meg képpel, videóval vagy interaktív vizuállal.
Kép →
Egy önálló kép nagyobb vizuális súllyal, opcionális képaláírással.
Videó →
YouTube- vagy Vimeo-videó lejátszóként vagy képes előzetesként termékbemutatóhoz, interjúhoz, útmutatóhoz.
Galéria →
Összetartozó képek rácsban, kőfal-elrendezésben vagy vízszintes görgetéssel, nagyítással.
Diavetítés →
Több kép vagy rövid üzenet ugyanazon a helyen, lapozva: öt elrendezés – klasszikus, osztott, hero, magazin, kártyák – és hat átmenet.
Előtte / utána →
Két összehasonlítható kép húzható nézetben. Átalakulások és valódi változások bemutatására.
Kép jelölőpontokkal →
Kattintható magyarázó pontok egy kép részletein, négy elrendezésben: kártyákkal, listával, nagyító túraként vagy címkékkel a képen.
Képpár →
Két egymásra csúszó fotó lágy árnyékkal: átfedve, döntve vagy lépcsőzetesen – szöveg mellé, például egy Rólunk szakaszba.
Fotókupac →
Polaroidszerű fotók pakliban, asztalra szórva vagy legyezőben, amelyeket a látogató lapozhat, odébb tolhat és kinagyíthat.
Nagyuló kép →
Egy kép vagy rövid videó, amely görgetésre betölti a képernyőt: kitágul, körablakként nyílik ki, vagy egy óriási szóból bukkan elő.
Elrendezés és történetmesélés
Amikor nem csak tartalmat mutatsz, hanem annak sorrendjét és ritmusát is megtervezed.
Kártyák →
Saját kártyák vagy meglévő oldalak, hírek rácsban, lapozós sorban, kiemelt kártyával vagy mozaikban.
Egymásra csúszó kártyák →
Görgetés közben egymásra rétegződő kártyák egymásra épülő lépésekhez vagy rövid történethez, négy elrendezésben.
Görgetős történet →
A vizuál a helyén marad, miközben a történet lépései mellette gördülnek.
Oszlopok →
Két vagy három oszlopba más blokkokat is rendezhetsz egyedibb elrendezésekhez.
Fülek →
Kapcsolódó tartalmi csoportokat rendez kattintható fülek alá, hogy ne kelljen mindent egyszerre megmutatni.
Idővonal →
Mérföldkövek, projektfázisok vagy cégtörténet időrendben: függőlegesen, vízszintesen, kanyargó vonalon vagy cikcakkban.
Kinyíló panelek →
Képes panelek, amelyek kinyílnak: szélesre nyíló sor, megforduló kártyák vagy az egeret követő fényfolt.
Oldalra görgetős tartalom →
Lépések, képek vagy fejezetek egy sorban, amely görgetésre oldalra halad: kártyákkal, filmszalagként vagy fejezetenként.
Lista felbukkanó képekkel →
Nagy betűs lista, amelynek sorai felfedik a képüket: a kurzort követve, osztott nézetben vagy lenyílva.
Történetek →
Rövid, képes történetek kerek buborékokban vagy álló kártyákon, amelyek teljes képernyőn nyílnak meg, és maguktól lapoznak.
Oldalszerkezet és navigáció
Kisebb blokkok, amelyek rendezettebbé és könnyebben bejárhatóvá teszik az oldalt.
Lenyíló szakaszok →
Részleteket rejt összecsukható panelekbe, amikor nem kell mindent egyszerre látni – listaként vagy oldalkártyákként.
Útvonal (morzsamenü) →
Megmutatja, hol jár a látogató az oldalhierarchiában, és segít visszalépni magasabb szintekre.
Oldalfejléc →
Hír, cikk vagy esemény címét és metaadatait rendezi egységes nyitóblokkká.
Elválasztó →
Látható vizuális határt ad két tartalmi rész közé.
Üres hely →
Függőleges üres teret ad két blokk közé, amikor csak több levegőre van szükség.
Linkek listája →
Külső cikkek, sajtómegjelenések és hasznos hivatkozások rendezett listában, forrással és dátummal.
Bizalom és bizonyíték
Számok, vélemények és emberek — amikor alá is akarod támasztani, amit állítasz.
Számok →
Valódi, ellenőrizhető számok tíz elrendezésben: számlálóval, gyűrűkkel, óriás számokkal, sávokkal, mozaikban vagy fotókon.
Partnerlogók →
Valódi ügyfelek, partnerek logói rendezetten: rácsban, egy sorban, futószalagon, reflektorfényben, bélyegként vagy egy nagy számmal.
Egy vélemény →
Egy valódi ügyfélidézet kiemelésére névvel, szereppel és opcionális médiával, háromféle elrendezésben.
Vélemények →
Sok rövid ügyfélvélemény egyszerre, névvel, fotóval és csillagokkal: kártyákban, egy kiemelttel, összesítővel, mozgó falon vagy futó sorokban.
Google-vélemények →
Külső Google-értékelések megjelenítésére, amikor a forrásnak is egyértelműnek kell maradnia.
Csapatrács →
A vállalkozás mögött álló emberek kártyákon, kerek portrékkal, sorokban, kiemelt taggal, görgetve vagy megforduló kártyákon.
Konverzió és kapcsolat
Blokkok, amelyekből a nézelődésből egyértelmű következő lépés lesz.
Gomb →
Egyetlen hangsúlyos gomb egy konkrét következő lépéshez.
Felhívás (CTA) sáv →
Nagyobb, cselekvésre ösztönző szakasz főcímmel, magyarázattal és akár két gombbal.
Kapcsolatfelvételi űrlap →
Beállítható mezőkkel, adatvédelmi hozzájárulással és sikerüzenettel fogad érdeklődéseket – klasszikusan, kártyán vagy osztott elrendezésben.
Hírlevél-feliratkozás →
Rövid feliratkozási pont a hírleveledhez: e-mail-cím, opcionálisan név, saját szövegek és adatvédelmi megjegyzés.
Űrlapépítő (egyedi űrlap) →
Saját űrlap feltételes mezőkkel, lépésenkénti kitöltéssel és fájlfeltöltéssel — ajánlatkéréshez, jelentkezéshez, igényfelméréshez.
Időpontfoglaló →
Online időpontfoglalás az oldaladon: a látogató szolgáltatást, szakembert és szabad időpontot választ, a foglalás a Demona naptárába kerül.
Nyitvatartás →
Heti nyitvatartás, ünnepnapok és „Most nyitva” jelzés üzletnek, rendelőnek vagy bármilyen helynek, ahová személyesen lehet betérni.
Árazási táblázat →
Több valódi csomag vagy konstrukció árainak és fő különbségeinek összehasonlítására.
Árlista →
Szolgáltatások és tételek árai jól olvasható listában: szekciókkal, rövid leírásokkal és kiemelésekkel.
Visszaszámláló →
Valódi eseményig vagy határidőig számol vissza: dobozokban, gyűrűkkel, óriás számokkal, naptárlapként vagy lebegő kapszulában.
Fájlletöltés →
Árlista, katalógus, adatlap vagy más valóban letölthető dokumentum kiemelésére.
Strukturált tartalom
Olyan elemek, amelyek sok információt rendeznek gyorsan áttekinthető formába.
Szolgáltatások / funkciók →
Néhány egyenrangú funkció vagy előny rövid, egységes bemutatására.
GYIK →
Valódi ügyfélkérdések hét elrendezésben – kártyák, két oszlop, rács, nagy sorszámok, beszélgetés vagy kiemelt kérdés –, igény szerint keresővel.
Táblázat →
Sorok és oszlopok mentén összehasonlítható adatokhoz, specifikációhoz vagy mérettáblához; mobilon kártyákká is alakulhat.
Címkék →
Kapcsolódó témák és kulcsszavak rövid, linkelhető jelölésére.
Megosztógombok →
Az aktuális oldal gyors továbbküldéséhez közösségi platformokra, e-mailben vagy linkmásolással.
Előnyök és hátrányok →
Két rövid lista egymás mellett: előnyök és hátrányok, kinek való és kinek nem, három elrendezésben.
Beágyazások és haladó elemek
Speciális tartalmakhoz, amikor külső szolgáltatást vagy célzott egyedi megoldást kell beemelni.
Beágyazott térkép →
Fizikai helyszín megtalálását segítő beágyazott térképhez.
Közösségi poszt →
Facebook-, Instagram-, X- vagy LinkedIn-poszt közvetlen megjelenítésére.
Saját kód (HTML) →
Egyedi HTML-kódhoz vagy olyan beágyazáshoz, amelyre nincs megfelelő beépített blokk.
Lapozható kiadvány (Issuu) →
Katalógus, magazin vagy prospektus lapozható formában: Issuu-kiadványból vagy saját PDF-ből.
Hírek és események
Dinamikus tartalmi blokkok egy konkrét hír vagy esemény kiemeléséhez, illetve automatikusan frissülő listákhoz.
Kiválasztott hír →
Egy konkrét, kézzel kiválasztott hír stabil kiemelésére.
Hírlista →
Több hír automatikus vagy kézi összeállítására kategória-, kiemelés- és sorrendszabályokkal.
Kiválasztott esemény →
Egy konkrét esemény kiemelésére, akár akkor is, ha az már lezajlott.
Eseménylista →
Közelgő, korábbi vagy kézzel válogatott események dinamikus listájához.
Nem kell az összes blokkot végignézned, mielőtt elkezded az oldalt. Az első weboldalverziódhoz már induláskor összeállhat egy használható szerkezet. Ez a katalógus akkor a leghasznosabb, amikor egy konkrét részt szeretnél lecserélni, finomhangolni vagy tudatosabban felépíteni.
Indulj a tartalomból, ne a komponenslistából
Mondd el, milyen weboldalra van szükséged — a blokkokat ráérsz később finomhangolni.
Készíts egy első verziót, nézd meg működés közben, majd alakítsd tovább ugyanabban a szerkesztőben.