# Flex Hero widget

> Nyitó (hero) rész gyors elkészítése: bevezető, cím, alcím, gombok és kép, két előbeállítással.

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](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

## 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](https://hub.hellowp.io/hu/plugins/elementor/stilus-betutipus-meret-es-szin/).
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](https://hub.hellowp.io/hu/plugins/elementor/widgetek-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](https://hub.hellowp.io/hu/plugins/elementor/stilus-arnyek/).
- **Padding**: belső térköz. Lásd: [Térköz, margó, padding](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-terkoz-margo-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](https://hub.hellowp.io/hu/plugins/elementor/stilus-hatterkep-pozicionalas/).
- **CSS-szűrők**: **Elmosás**, **Fényerő**, **Kontraszt**, **Telítettség**, **Árnyalat**. Lásd: [Keverési módok és szűrők](https://hub.hellowp.io/hu/plugins/elementor/stilus-keveresi-modok-es-szurok/).
- **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](https://hub.hellowp.io/hu/plugins/elementor/stilus-hatter-tipusok/).

**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.