Flex Hero widget

A Flex Hero widget gyors módja a nyitó (hero) rész elkészítésének, amely általában az oldal tetején áll. Egy hero rész jellemzően ezekből áll:

• Bevezető: pár szó az oldalról vagy a vállalkozásról.
• Cím: az oldal vagy a vállalkozás neve, vagy a legfontosabb tevékenysége.
• Alcím: rövid mondat arról, mire számíthat a látogató.
• Kép: feltűnő kép, amely felkelti a figyelmet.
• Cselekvésre ösztönző gomb (CTA): egy vagy két gomb, amelyekkel a látogató belép az oldal tartalmába.

A widgettel ezek közül bármennyit könnyen az oldalra teheted.

A widget hozzáadása

1. A szerkesztőben kattints a + gombra, hogy megjelenjen az összes widget.
2. Kattints a Flex Hero elemre, vagy húzd a vászonra. Lásd: Elemek hozzáadása az oldalhoz.

Példa: egy sportkocsma nyitóoldala

Az oldal tetején a kocsma neve, a szlogenje, egy kép, egy asztalfoglaló űrlapra vezető gomb és egy közelgő programokat mutató oldalra vezető gomb áll.

1. Húzd a Flex Hero widgetet a vászonra.
2. A panel Bevezető mezőjébe írd: „Sport és más”.
3. A Cím mezőbe a kocsma nevét írd, az Alcím mezőbe a szlogent.
4. Nyisd meg a Tartalom szekciót. Az Elsődleges CTA Szöveg mezőjébe írd: „Foglalok”, a Link mezőbe az űrlap URL-jét.
5. Kapcsold Megjelenítés állapotba a Másodlagos CTA-t, a szövegét írd: „Közelgő programok”, a linkje a programok oldala.
6. Nyisd meg a Kép szekciót, és adj hozzá képet.
7. A Stílus fülön az Előbeállítás listából válaszd a Storytelling elrendezést. Ha a cím és az alcím túl nagy helyet foglal, a Tartalom szekcióban kattints a cím melletti ceruza ikonra, és csökkentsd a betűméretet; ugyanígy az alcímnél. Lásd: Betűtípus, méret és szín.
8. A kép alakját a Kép szekció Alak listájával, például Ovális értékre állíthatod.

Tartalom fül

Beállítás	Mit csinál
Bevezető	Néhány szó arról, miről szól az oldal
Cím	Általában az oldal vagy a vállalkozás neve
Alcím	Rövid kiegészítés arról, mire számíthat a látogató. A hero részben kevés a hely, ezért legfeljebb tíz szó legyen
HTML-címke	A cím és az alcím HTML-címkéje, amely a keresőknek és a kisegítő technológiáknak segít felismerni az oldal fontos részeit. A cím alapból H2; ha így nincs rendben, a legördülő listából másikat választhatsz
Elsődleges CTA	A gomb Szövege (üresen hagyva nincs gomb), Linkje (URL, vagy a dinamikus címke ikonnal beszúrt dinamikus címke; e-mail- és telefonlinkek is lehetnek, lásd: Kattintható telefon- és e-mail-linkek) és Ikonja (nincs, saját SVG vagy az ikonkönyvtárból)
Másodlagos CTA	Megjelenítés esetén két gomb lesz a hero részben, ugyanazokkal a beállításokkal
Kép	A hero kép

Stílus fül

Beállítás	Mit csinál
Előbeállítás	Showcase (vízszintes elrendezés) vagy Storytelling (függőleges elrendezés)
Kép pozíciója	A kép balra vagy jobbra áll
Tartalom igazítása	A hero rész a konténer közepére, elejére vagy végére igazodik; a középre igazítás a leggyakoribb

Bevezető, Cím, Alcím: szöveg színe és tipográfia (betűtípus és méret).

Elsődleges CTA (a másodlagos ugyanígy állítható):

• Típus: gomb vagy egyszerű szöveglink.
• Tipográfia: a gomb vagy a link betűtípusa és mérete.
• Ikon pozíciója: az ikon a szövegtől jobbra vagy balra áll.
• Ikon térköze: az ikon és a szöveg távolsága.
• Normál és Rámutatás: a gomb megjelenése alapállapotban és az egér fölé vitelkor. Itt állítható a Szöveg színe, a Háttér típusa (klasszikus vagy színátmenetes, csak gombnál) és a Szín (csak gombnál, globális színt kell választani).
• Szegély: Igen esetén szegélyt kap, megadható a vastagsága és a színe.
• Alak: Alapértelmezett, Éles, Kerek vagy Lekerekített.
• Dobozárnyék: mélységet ad a gombnak. Lásd: Árnyék.
• Padding: belső térköz. Lásd: Térköz, margó, padding.

Kép:

• Nyújtás: Igen esetén a kép a lehető legszélesebbre nyúlik, a térközöket figyelmen kívül hagyva.
• Magasság és Szélesség: csúszkával vagy számmezővel.
• Pozíció: a kép melyik része látszik. Lásd: Háttérkép pozicionálása.
• CSS-szűrők: Elmosás, Fényerő, Kontraszt, Telítettség, Árnyalat. Lásd: Keverési módok és szűrők.
• Szegély: Igen esetén meg kell adni a vastagságát, a színét; árnyék is adható hozzá.
• Alak: Éles, Lekerekített, Kerek, Ovális vagy Egyéni (a sarkok külön állíthatók).

Háttér: a teljes hero rész háttere. Lásd: Háttér típusok.

Háttér-átfedés: a háttérhez hasonló, de átlátszóság csúszkával.

Elemek térköze: a cím, a gombok és a kép közti távolság.

Térköz: a kép és a többi elem közti távolság.

Szegély: a hero rész köré kerülő szegély; vastagság és szín adandó meg. Alak: Kerek, Lekerekített vagy Éles.

Dobozárnyék, Padding: árnyék és belső térköz a hero rész szélei és tartalma között.

Teljes képernyős magasság: Igen esetén a hero rész a teljes képernyőt kitölti.

Haladó fül

A Haladó fülön a widget pozícióját, térközeit és egyedi kódját állíthatod, mint a többi widgetnél.