Hero blokk – Illusztratív referencia carousel
Ügyfélspecifikus, böngészőkeretes Magnolion Web referencia hero carousel bal és jobb oldali élő preview kártyákkal.
Hero blokk – Illusztratív referencia carousel
A bal oldali fő üzenet mellett egy böngészőkeretes, kattintható referencia carousel jelenik meg. A slide felső title bar-ja a weboldal címét/domainjét mutatja, a képre bal oldali overlay kerül címkével, címmel, leírással, tagekkel és link-jelzéssel. Új, üres blokknál 3 minta referencia slide indul külön desktop és mobil képpel.
Mire érdemes használni?
Ügyfélspecifikus referencia herohoz, amikor a nyitó szakaszban weboldal-preview keretben szeretnénk bemutatni valós referenciákat.
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
- Fő üzenet, rövid leírás és legfontosabb cselekvési gombok megjelenítése.
- Kapcsolható, szerkeszthető bizalmi sor a CTA-k alatt.
- Kép, képsorozat, teljes szélességű háttérkép vagy háttérvideó használata.
- Kép-ALT, igazítás, parallax, magasság és videóviselkedés kezelése a választott változattól függően.
- FFmpeg elérhetőség esetén a feltöltött Hero videókból – külön desktop és mobil videóág esetén mindkét videóból – automatikusan 360p/480p/720p/1080p MP4 és WebM lépcsők, hangos/némított kimenetek és poster kép készülnek; az admin mutatja az eredeti és generált fájlok méretét, a csere/törlés után pedig a nem használt videógenerátumok is takaríthatók.
- Böngészőkeretes referencia-preview felső title sávval.
- Slide-onként külön desktop kép, opcionális mobil kép, ALT, weboldal cím, címke, cím, leírás, link, gombfelirat és tagek.
- A teljes slide valódi hivatkozásként kattintható, ezért JavaScript nélkül is működik.
- Az első slide LCP-barát képként tölthető célzott desktop/mobil preload támogatással, a további slide-ok lazy képet kapnak.
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.
Gombok megjelenése
Gombok megjelenése
A gombok láthatósága, színei és megjelenési módja.
- Elsődleges 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 gombháttérszíne marad. Egyedi háttérszínnél a gomb ehhez igazított színátmenetet kap. A Default visszaállítása gomb visszaállítja az alap színeket.
- Elsődleges gomb feliratának szí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. Egyedi színnél a gomb szövege és ikonja ezt a színt kapja. A Default visszaállítása gomb visszaállítja az alap színeket.
- Másodlagos 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 gombháttérszíne marad. Egyedi háttérszínnél a gomb ehhez igazított színátmenetet kap. A Default visszaállítása gomb visszaállítja az alap színeket.
- Másodlagos gomb feliratának szí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. Egyedi színnél a gomb szövege és ikonja ezt a színt kapja. A Default visszaállítása gomb visszaállítja az alap színeket.
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ásFormázott, Tiptap-alapú tartalom. Kompakt formázott leírás: félkövér, dőlt, aláhúzás, felsorolás, számozott lista és link meglévő blokkhoz vagy egyedi URL-hez.
- Gomb- vagy linkfeliratRövid szöveg vagy felirat. Opcionális: ha a feliratot üresen hagyod, a teljes gomb vagy CTA nem jelenik meg a frontoldalon.2 hasonló mező
Hivatkozások
Gombok és hivatkozások
Belső és külső linkek, gombcélok és kapcsolódó feliratok.
- Hivatkozás URLBelső 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.2 hasonló mező
CTA és bizalom
CTA és bizalom
A blokk ehhez a tartalmi csoporthoz tartozó beállításai.
- Kockázatcsökkentő sor megjelenítéseBe- és kikapcsolható funkció. Bekapcsolva a CTA-gombok alatt egy rövid, szerkeszthető bizalmi sor jelenik meg. A teljes képes carouselben a slide szövege alatt látható.
- Kockázatcsökkentő sorRövid szöveg vagy felirat. Rövid, egy soros bizalmi üzenet. Kikapcsolt megjelenítésnél nem kerül ki a publikus oldalra.
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
Referencia slide-ok
Böngészőkeretes, kattintható referencia hero carousel. Minden slide-hoz külön desktop és mobil kép, title bar felirat, címke, cím, leírás, link és tagek adhatók meg. Ha nincs külön mobil kép, a rendszer a desktop képre esik vissza. Új, üres blokknál 3 minta referencia slide jelenik meg, hogy a változat azonnal látható tartalommal induljon.
maximum 20 elem.
Egy „Referencia” szerkeszthető adatai
- Desktop referencia kép (16:9)Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Javasolt méret: 1920×1080 px vagy legalább 1600×900 px. A feltöltött képet a rendszer ehhez a blokkhoz külön kezeli, és automatikusan elkészíti a reszponzív változatokat.
- Mobil referencia kép (9:16)Kép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Javasolt méret: 1080×1920 px vagy legalább 900×1600 px. Ha üres, a desktop kép jelenik meg mobilon is. A feltöltött mobilképet a rendszer szintén ehhez a blokkhoz külön kezeli.
- Régi / közös fallback képKép feltöltése vagy cseréje; a rendszer reszponzív képváltozatokat készít. Kompatibilitási mező régi adatokhoz. Új slide-oknál a Desktop/Mobil képet használd.
- Kép alt szövegeRövid szöveg vagy felirat.
- Weboldal címe a felső sávbanRövid szöveg vagy felirat.
- CímkeRövid szöveg vagy felirat.
- Slide címeRövid szöveg vagy felirat. Maximum 60 karakter.
- Rövid leírásTöbbsoros szövegmező. Maximum 240 karakter.
- Weboldal linkjeBelső blokkazonosító, belső URL, külső URL, e-mail- vagy telefonhivatkozás.
- Gomb / link felirataRövid szöveg vagy felirat.
- Tagek (soronként vagy vesszővel)Többsoros szövegmező.
- Új ablakban nyíljonBe- és kikapcsolható funkció.
- Weboldal címe a felső sávban színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- Címke színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- Slide címe színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- Rövid leírás színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- Gomb / link felirata színeEgyedi szín választása; üres/Default értéknél a téma alapstílusa marad.
- Tagek (soronként vagy vesszővel) 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
- A slide leírása legyen rövid, mert az overlaynek mobilon is olvashatónak kell maradnia.
- Desktopra 1920×1080 px, mobilra 1080×1920 px képet használj; ha a mobil kép üres, a rendszer a desktop képre esik vissza. A feltöltött képeket a rendszer ehhez a blokkhoz külön kezeli és optimalizálja; a korábbi közös kép nem írja felül az új desktop/mobil mezőket.
- Az első slide legyen a legerősebb referencia, mert ez adja a nyitó vizuális élményt és az LCP-képet; a carousel JavaScript a kezdeti render után indul, ezért az első slide-nak önmagában is jól kell mutatnia.
- A rendszer a hero, galéria, kártya és blog képeknél a tényleges blokk-szélességhez igazított responsive sizes értéket használ, hogy ne töltsön le feleslegesen túl nagy képet.
- A főcím legyen konkrét, a leírás pedig legfeljebb néhány rövid mondat.
- A nyitóképet optimalizáld webre, mert ez gyakran az oldal LCP-eleme.
- Az elsődleges gomb a legfontosabb üzleti célra vezessen.