Kártyás blokk – 4 oszlopos előnyblokk, bővíthető carousel
Kártyás blokk választható változat.
Kártyás blokk – 4 oszlopos előnyblokk, bővíthető carousel
Bővíthető carousel témaszínű gradiens csempékkel, amely a képernyőmérethez igazodó számú elemet mutat. Elemenként választható ikonos vagy képes kártya, opcionális szöveges kártyalink; képes módban Borító vagy Teljes kép illesztés, valamint „Nincs link” vagy teljes csempehivatkozás állítható.
Mire érdemes használni?
Négy vagy több előny bemutatására, amikor desktopon több elem látszódjon, mobilon pedig lapozható maradjon.
Blokk működése
Blokk beállításai
Ezek a beállítások minden blokk szerkezeti és navigációs működését egységesen vezérlik.
- Megjelenési változat: meghatározza a blokk elrendezését és az elérhető tartalmi mezőket. Változatváltás után ellenőrizd az előnézetet.
- Dobozos háttér megjelenítése: alapból bekapcsolt V1 megjelenési kapcsoló. Kikapcsolva az adott blokk fő háttér/doboz/keret/árnyék rétege eltűnik, miközben a tartalom, a gombok, az űrlapmezők, a Blog- és árkártyák funkcionális belső kártyái megmaradnak.
- Dekoráció: a Sablon, vizuális stílus, színtéma és betűtípus panelen globálisan kapcsolható, és itt globális dekorációtípus, bal/jobb oldali alaphely, valamint Egyedi kép esetén saját logó/ikon is választható. Bekapcsolva a legtöbb nem-Hero blokk Megjelenés csoportjában külön felülírható az Alapértelmezett, Nincs dekoráció, az öt vizuális profilhoz igazított dekoráció vagy az Egyedi kép. A kiválasztott profil egy fő háttérdekorációként jelenik meg, nem ad külön másodlagos after díszítést. Egyedi képhez SVG, áttetsző PNG vagy WEBP logó/ikon ajánlott; fotók és részletgazdag képek dekorációként kevésbé mutatnak jól.
- Aktív blokk: kikapcsolva a blokk nem jelenik meg a nyilvános oldalon, de a beállításai megmaradnak és később visszakapcsolható.
- Megjelenés a menüben: a „Menüben jelvény” a blokk saját szakaszához görgető normál menüpontot ad. A „Menü csak mobilon” ettől függetlenül is bekapcsolható: a menüpont neve mező feliratát használja, desktopon nem látszik, és külön mobil cél slugot is kaphat.
- Menünév és mobil menüikon: a menüben látható felirat és a mobilnézetben használható ikon. A menünév legyen rövid és egyértelmű.
- Kiemelt menüpont: ahol elérhető, külön vizuális hangsúlyt ad a főmenüben az adott blokk linkjének.
- Főmenü és almenük: a menüben lévő aktív blokkokból opcionálisan főmenü/almenü kapcsolat építhető. Ha nincs ilyen kapcsolat, a régi egyszerű, egyszintű menü változatlan marad.
- Mobilos menütérkép: mobilon a főmenük és almenük egy közös hierarchikus nézetben láthatók. A Főmenüvé és Almenüvé műveletek külön gombot kaptak; almenü csak a főmenü kiválasztása után menthető, sorrendje fel/le gombbal módosítható, és másik főmenü alá is áthelyezhető.
- Sorrend: az Elhelyezett blokkok listában látható szám mutatja a tényleges oldalbeli pozíciót. Bezárt állapotban a fogantyúval átrendezhető; az új sorrend automatikusan mentődik.
- Menüsorrend: ha több blokk megjelenik a menüben, azok menüpozícióját is az oldalon beállított blokksorrend határozza meg. A Menüstruktúra panel bal oldali „Menüben lévő blokkok” listája a tényleges menü- és oldalsorrendet mutatja: ha itt sorrendezel, a menüpont helye és a blokk oldalbeli pozíciója is változik. Ugyanez fordítva is igaz: az Elhelyezett blokkoknál rendezett menüben lévő blokk a főmenü/almenü panelen is frissül. Normál menüpont innen húzható főmenünek vagy egy meglévő főmenü alá almenünek. A középső Főmenük oszlopban a főmenük kiválaszthatók, de a főmenük sorrendjét a bal oldali Menüben lévő blokkok lista és az Elhelyezett blokkok tényleges oldalsorrendje határozza meg. Már főmenü/almenü szerepű elemet előbb vissza kell állítani az X ikonnal; az almenük csak a lenyílóban jelennek meg.
- Duplikálás és törlés: a blokk másolható, ha a változat darabszámkorlátja engedi; törléskor a blokk és a hozzá tartozó mentett tartalom eltávolításra kerül.
Tartalmi mezők
Tartalom szerkesztése
Az alábbi funkciók a kiválasztott változat tényleges, jelenlegi mezősémájából származnak.
A változat fő funkciói
- Címek, leírások, ikonok és ismételhető kártyák kezelése.
- Kártyánként opcionális szöveges link jobbra nyíllal; a link célja meglévő blokkot tartalmazó listából, horgonyból vagy egyedi URL mezőből választható.
- Három- és négyoszlopos, carousel, kártyás és számozott változat.
- A Kártyás előnyök változatnál a Teljes oldalszélesség kapcsoló bekapcsolva eltünteti a külső doboz hátterét, borderét és árnyékát, és desktopon 4–6 kártyát is egy sorba tud rendezni.
- Az elemek sorrendje módosítható, új elem hozzáadható vagy törölhető.
- Ismételhető carousel elemek.
- Ikon vagy kártyakép, cím és leírás.
- Opcionális szöveges kártyalink jobbra nyíllal.
- Borító vagy automatikus magasságú Teljes kép illesztés.
- Képes csempénél a teljes képes csempe linkelése megmarad: Nincs link vagy teljes kártyára kattintható URL.
- Lapozható, reszponzív megjelenés és blokk alatti CTA-gomb.
Megjelenés
Elrendezés és megjelenés
A blokk elrendezése, igazítása és vizuális működése.
- Dobozos háttér megjelenítéseBe- és kikapcsolható funkció. Alapból bekapcsolt. Kikapcsolva a blokk fő doboz/háttér/keret/árnyék rétege eltűnik, így kevésbé csempés, nyitottabb megjelenést kap. A tartalom, az elrendezés, a gombok, az űrlapmezők, a Blog- és árkártyák belső működése megmarad.
- Dekoráció típusaElőre meghatározott lehetőségek közül választható beállítás. Alapértelmezett értéknél a blokk megtartja a jelenlegi vizuális stílushoz tartozó dekorációját. A Nincs dekoráció csak ennél a blokknál kapcsolja ki a dekorációt; a profil-dekorációk a kiválasztott karaktert használják.
- Dekoráció helyeElőre meghatározott lehetőségek közül választható beállítás. Alapértelmezett értéknél a blokk a globális dekorációhelyet követi. Egyedi választással balra vagy jobbra tehető a fő dekoráció. Mobilon a dekoráció kisebb és kevésbé hangsúlyos.
- Dekorációs képKép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Egyedi kép dekorációhoz. Legjobb eredményt SVG, áttetsző PNG vagy WEBP logó/ikon ad. A fájl legfeljebb 1 MB és 1200 × 1200 px lehet.
- Egyedi kép megjelenítéseElőre meghatározott lehetőségek közül választható beállítás. Alapértelmezett esetén a globális egyedi dekoráció módját követi. A Lágy háttérelem halványabb, dekoratívabb megjelenést ad.
- Egyedi kép átlátszóságaElőre meghatározott lehetőségek közül választható beállítás. Alapértelmezett esetén a globális átlátszóságot követi. Logókhoz általában a 10–20% közötti érték ad finom háttérhatást.
- Egyedi kép méreteElőre meghatározott lehetőségek közül választható beállítás. Alapértelmezett esetén a globális méretet követi.
- Egyedi kép forgatásaElőre meghatározott lehetőségek közül választható beállítás. Alapértelmezett esetén a globális forgatást követi. A kisebb döntés dekoratívabb, de nem zavaró hatást ad.
Gombok megjelenése
Gombok megjelenése
A gombok láthatósága, színei és megjelenési módja.
- Gomb egyedi háttérszíneEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad. Default állapotban a téma elsődleges gombszíne marad.
- Gomb feliratszíneEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad. Default állapotban a téma gombfelirat-színe marad.
Szövegek
Szövegek és leírások
Címek, leírások, feliratok és egyéb szöveges tartalmak.
- CímRövid szöveg vagy felirat.
- LeírásTöbbsoros szövegmező.
Gomb
Gomb
A kiemelt műveleti gomb felirata és hivatkozása.
- Blokk alatti gomb hivatkozásaBelső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás. Használható #blokk-azonosító, /belső-url, https://, mailto: vagy tel: érték. A gomb csak akkor jelenik meg, ha a felirat is ki van töltve.
- Blokk alatti gomb felirataRövid szöveg vagy felirat. Üresen hagyva a blokk alatti középre rendezett gomb nem jelenik meg.
Ikonok
Ikonok
A blokkban megjelenő ikonok kiválasztása és beállítása.
- Ikon classBootstrap ikon választása az ikonválasztóból vagy class megadásával. Bootstrap Icons class, például: bi bi-star-fill Bootstrap Icons class kézzel is megadható, vagy kiválasztható az ikonválasztóból.2 hasonló mező
Bővíthető elemek
Ismételhető tartalmi elemek
Az elemek hozzáadhatók, törölhetők és a fogantyúval átrendezhetők. A sorrend a nyilvános oldalon is érvényesül.
Ismételhető elem
Carousel elemek
Desktopon négy elem látszik, az ötödik elemtől a blokk automatikusan lapozható. Elemenként ikonos vagy képes kártya választható; minden elemhez opcionális szöveges hivatkozás adható meg jobbra nyíllal, képes módban pedig a meglévő teljes csempehivatkozás is megmarad.
minimum 1 elem, maximum 30 elem.
Egy „Előny” szerkeszthető adatai
- Megjelenés típusaElőre meghatározott lehetőségek közül választható beállítás. Ikonos módban a kártya ikonja jelenik meg. Képes módban a kártya tetején teljes szélességű kép látszik.
- IkonBootstrap ikon választása az ikonválasztóból vagy class megadásával.
- KártyaképKép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít.
- Kép alt szövegeRövid szöveg vagy felirat.
- Kép megjelenéseElőre meghatározott lehetőségek közül választható beállítás. Borító módban a kép kitölti a képterületet, szükség esetén vágással. Teljes kép módban a teljes kép látszik, automatikus magassággal.
- Teljes képes csempe URL / slugBelső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás. A „Nincs link” választásnál a csempe nem kattintható. Más célpont választásakor a teljes képes csempe linkként működik. Ez a meglévő képes csempe-linkelés megmarad; az új szöveges kártyalinktől külön működik, és a kártya alján külön szöveges link is megadható.
- CímRövid szöveg vagy felirat.
- LeírásTöbbsoros szövegmező.
- Kártyalink szövegeRövid szöveg vagy felirat. Opcionális szöveges link a kártya alján, például: Megnézem, Miért más? vagy Hogyan segítünk?
- HivatkozásBelső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás. Válassz meglévő blokkot a listából, vagy adj meg egyedi URL-t, horgonyt, e-mailt vagy telefonszámot. A szöveges link csak akkor jelenik meg, ha a link szövege és a hivatkozás is ki van töltve.
- Külső link új ablakban nyíljonBe- és kikapcsolható funkció. Csak külső http(s) hivatkozásoknál érvényes. Belső blokkhorgonyoknál és belső oldalaknál nincs hatása.
- Cím színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- Leírás színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
Mozgás és megjelenés
Animáció
A blokk belépési animációja külön kapcsolható. Az első két aktív helyen választható LCP-védelem csak a frontend futást függeszti fel, az adminban elmentett animációt, effektet és sebességet nem törli. A blokk harmadik vagy későbbi helyre mozgatva automatikusan újra animálódik. A rendszer kompozit tulajdonságokra épülő effektet használ, és tiszteletben tartja a csökkentett mozgás beállítást.
- Kapcsold be vagy ki az animációt az adott blokknál. A fejléc badge-e már összecsukott állapotban is mutatja az animáció állapotát.
- Válaszd ki az effektet, a sebességet, a késleltetést és – ahol elérhető – az elemek lépcsőzetes sorrendjét.
- Az első két aktív blokknál az LCP-védelem az ajánlott állapot. Sorrendváltáskor a rendszer Igen / Nem kérdéssel felajánlja, de az első két blokk Animáció részében később manuálisan is be- vagy kikapcsolható. Az animáció adminbeállítása minden esetben megmarad; harmadik vagy későbbi helyen automatikusan újra működik, és az „Animáció aktív” badge jelenik meg.
- A rendszer nem tiltja globálisan a hover/transition effekteket: csak az LCP-védett első két blokk belépő animációja szünetel a gyorsabb első renderelés miatt.
- Az animáció nem változtatja meg a blokk tartalmát vagy sorrendjét, csak a megjelenés módját.
Használati javaslatok
- Az elemek szöveghossza legyen hasonló, hogy a carousel ne ugráljon.
- Képes carouselben azonos képarányú képek adják a legegységesebb megjelenést.
- Egy elem egyetlen, jól érthető előnyt vagy lépést mutasson be.
- A kártyák szöveghossza legyen közel azonos.