# Hero szakasz készítése konténerrel

> Kép és szöveg 50/50 elrendezésben egy szülő és egy gyermek konténerrel, reszponzív ellenőrzéssel és dinamikus címkékkel.

A hero az oldal egyik leggyakoribb része: nagy kép és szöveg, általában 50/50 arányban. Lehet bemutatkozás, életrajz, küldetés vagy egy termék ajánlója. Itt a legegyszerűbb, kevés elemből álló módon építed meg konténerrel.

Ha több képre vagy további tartalomra van szükség, a képeket egy külön konténerbe teheted. Ebben a példában erre nincs szükség, és csak felesleges burkolót eredményezne.

## Szülő konténer

1. Hozz létre vagy nyiss meg egy oldalt az Elementorral.
2. Kattints a **+** jelre, és válaszd az egyoszlopos elrendezést.
3. Az **Elrendezés** fülön a **Magasság** legyen 60 VH.
4. A **Tételek** résznél az **Irány** legyen vízszintes sor.
5. Az elemek igazítása legyen **Középre**.
6. A **Haladó** fülön adj a konténernek paddinget (például 21 PX).

## Kép

1. Húzz egy **Kép** widgetet a konténerbe.
2. Válassz képet a médiatárból. A kép legyen előre előkészítve és optimalizálva.
3. A **Haladó** fülön a **Szélesség** értéke legyen 50%.
4. A **Stílus** fülön további hatásokat is megadhatsz, a példában doboz árnyéka látszik.

## Gyermek konténer

1. Húzz egy új konténert a kép jobb (vagy bal) oldalára.
2. Az **Elrendezés** fülön válaszd a **Teljes szélesség** lehetőséget.
3. A konténer **Szélessége** legyen 50%.
4. A **Minimális magasság** igazodjon a képhez (például 55 VH).
5. A **Stílus** fülön adhatsz további beállításokat, a példában egy 2 PX-es szegély segít a tájékozódásban.

## Tartalom

1. Húzz egy **Címsor** widgetet a gyermek konténerbe, és szerkeszd a szövegét.
2. Alá húzz egy **Szövegszerkesztő** widgetet: ez a hero szövege. A gyorsabb munkához készítsd elő a szöveget, hogy csak beilleszteni kelljen.
3. Adj cselekvésre hívást: tegyél alá egy **Gomb** widgetet, amely oldalra, bejegyzésre vagy termékre mutathat.
4. A végső finomhoz térj vissza a konténer elrendezéséhez.
5. A **Tartalom igazítása** mezőben válaszd az **Egyenletes térköz** értéket, így a tartalom egyenletesen oszlik el.
6. Ha szegélyt használsz, a gyermek konténer **Haladó** fülén adhatsz neki még paddinget (például 13 PX).

## Reszponzív nézetek

1. Nyisd meg a reszponzív nézeteket a panel alján lévő ikonnal.
2. Nézd meg a tablet és a mobil nézetet.
3. Kisebb módosításokkal (a szöveg méretével és a kép szélességével) igazítsd a tervhez.

## Dinamikus tartalom

A legtöbb widget használhat dinamikus címkéket kiemelt képhez, metaadatokhoz, egyéni mezőkhöz és WooCommerce-termékekhez. Ezzel a hero a termék adataiból töltődik fel: a kép lehet a termék kiemelt képe hivatkozással, a címsor, a szöveg és a gomb pedig szintén automatikusan frissülhet. A **Gomb** widgetet egyedi kosárba helyező gombra is cserélheted, így rögtön vásárolni lehet belőle. Ha a terméket szerkeszted a WooCommerce-ben, a hero is követi a változást.

A többi elrendezést az [Alapelrendezések konténerekkel](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-alapelrendezesek/) fejezet foglalja össze.