# Hero képgaléria készítése

> Szöveges hero rész képgalériával, két gyermek konténerrel: tördelés, hézag, szélesség és képkitöltés.

Ebben a fejezetben a konténer rugalmas tulajdonságaival építesz képgalériás hero részt. Egy szülő konténerben két gyermek konténer áll: az egyikben a tartalom (a bal vagy jobb oldalon), a másikban a képgaléria. A feladat jó gyakorlat a rugalmas tulajdonságok megértéséhez.

**Miért nem Galéria widgetet használok?** Használhatnád azt is, de a most tanult technikák segítenek a haladóbb tervekben, és a Galéria widgettel ellentétben itt az egyes képekhez külön hivatkozás is megadható.

## Kezdés

Hozz létre egy új oldalt, vagy nyiss meg egy meglévőt. A példában az oldal sablonja **Vászon**.

## Új konténer két résszel

1. Kattints a **+** jelre, és adj hozzá egy új konténert.
2. Válaszd a kétkonténeres szerkezetet.
3. A szülő konténeren a **Haladó** fülön adhatsz margót, hogy legyen „fehér hely” körülötte.

## A tartalom konténer

1. Húzz egy **Címsor** widgetet a bal oldali gyermek konténerbe, és írd át a szöveget.
2. A **Stílus** fülön a **Tipográfia** beállításaival módosíthatod a betűméretet, vagy választhatsz előre beállított globális stílust.
3. Húzz alá egy **Szövegszerkesztő** widgetet, és szerkeszd a tartalmát (egyelőre maradhat a minta szöveg).
4. Adj hozzá két **Gomb** widgetet, és írd át a szövegüket. Ha kész a cél, hivatkozást is adhatsz nekik. A példában két gomb azért van, hogy az **Irány** és a **Tördelés** is látható legyen.

### A tartalom igazítása rugalmas tulajdonságokkal

1. Jelöld ki a tartalom konténerét. Az **Elrendezés** fülön a **Szélesség** és a magasság maradjon alapértelmezett.
2. Kapcsold be a **Tördelés** beállítást.
3. Állítsd az **Irány** értékét vízszintes sorra, hogy a gombok egymás mellé kerüljenek.
4. A **Haladó** fülön adj a konténernek egy kis paddinget (például 21 PX).

## A galéria konténer

1. Jelöld ki a jobb oldali gyermek konténert.
2. Az **Elrendezés** fülön a konténer szélessége és magassága maradjon alapértelmezett.
3. A **Tételek** részben állítsd az **Irány** értékét vízszintes sorra.
4. A **Hézagok** értéke legyen 0 px, mert a képeknél paddinget használsz. Így egyszerűbb a 50/50 vagy 33,3% szélességű képek használata (hacsak nem szeretsz számolni).
5. Kapcsold be a **Tördelés** beállítást.
6. A tördelés bekapcsolása után megjelenik a **Tartalom igazítása**. Válaszd az **Indítás** értéket.

### Képek hozzáadása

1. Húzz egy **Kép** widgetet a galéria konténerbe.
2. A hivatkozás beállításainál a médiafájlra mutató hivatkozással a kép lightboxban nyílik meg, de bármilyen címre is mutathat.
3. A **Haladó** fülön a **Szélesség** legyen 50% (a widget burkolójának szélessége).
4. A képre adj paddinget (például 5 PX). Ezt használod a hézag helyett, mert gyorsabb a munka.
5. Nyisd meg a **Stílus** fület, és állítsd be a képet úgy, hogy a másolatok is egységesek legyenek.
6. A **Szélesség** csúszkát húzd 100%-ra, vagy írd be az értéket.
7. A **Magasság** beállítással tartsd egyforma méretűre a képeket.
8. A magasság megadása után megjelenik az objektumillesztés (Object Fit) beállítás: válaszd a kitöltés (Cover) lehetőséget. Ez a képek méretétől függően levághat belőlük egy részt, de a galéria egységes marad, anélkül hogy minden képet külön kellene szerkesztened.

#### Képek másolása

1. Kattints jobb gombbal a képre, és másold le. A példában négy kép van.
2. Válaszd ki a médiatárból a képeket, vagy tölts fel újakat. Mivel a szélesség, a magasság és a padding már be van állítva, a képek magukat illesztik, átméretezés nélkül.

### További képsorok

1. Másold le még egyszer az utolsó képet a jobb gombos menüvel.
2. A **Haladó** fülön a widget burkolójának **Szélessége** legyen 33,3%.
3. A **Stílus** fülön állítsd át a kép magasságát is (például 125 PX).

#### További képek másolása

1. Másold a képet jobb gombbal. A példában három ilyen kép van.
2. Válaszd ki a kívánt képeket a médiatárból, vagy tölts fel újakat.

## Reszponzív mód

Nyisd meg a reszponzív töréspontokat, és igazítsd a kisebb eltéréseket. Gyakran a konténer rugalmas tulajdonságai maguktól elvégzik a munka nagy részét.

## Egy lépéssel tovább

A képeket keverheted videóval és más elemekkel, így még látványosabb elrendezéseket hozhatsz létre.

A kész rész a [többi alapelrendezéssel](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-alapelrendezesek/) együtt jól használható.