# Szolgáltatások szakasz készítése konténerrel

> Egy cím és négy ikondoboz egyetlen konténerben: irány, tördelés, igazítás és reszponzív beállítások lépésről lépésre.

A szolgáltatások rész egyszerű, de nagyon gyakran használt elrendezés. A hagyományos szakasz, belső szakasz és oszlop felépítést konténerrel egyszerűsítheted, ami az oldal teljesítményének is jót tesz. Az elején szokatlan lehet, de ha egyszer megismered a konténer tulajdonságait, gyorsan elkészíted.

Két widgetre van szükséged: **Címsor** és **Ikondoboz**. Ha a szerkesztő panelen felvetted őket a kedvencek közé, gyorsan elérhetők.

## A konténer

Kattints a vásznon a **+** jelre, és válaszd az egyetlen konténeres elrendezést. A példa beállításai:

1. Konténer szélessége: **Dobozos** (alapértelmezetten 1140 px).
2. Minimális magasság: 55 VH.
3. Túlcsordulás: **Rejtett**.
4. HTML-címke: **section**.

A **Tételek** részre később, a widgetek felvétele után térsz vissza.

## Címsor

1. Húzz be egy **Címsor** widgetet, és írd be a szöveget, például „Szolgáltatásaink”.
2. Mivel ez egy új szakasz címe, a HTML-címke maradhat H2.
3. Az igazítás legyen **Középre**.
4. A **Stílus** fül **Tipográfia** részében a betűméretet előre beállított globális stílussal is megadhatod. A színeket és a többi formázást a végén is átírhatod.
5. A **Haladó** fülön a **Szélesség** legyen egyéni, 100%, hogy a cím a konténer teljes szélességét kitöltse. Más módszerek is vannak, de ez a legegyszerűbb.

## Ikondoboz

1. Húzz be egy **Ikondoboz** widgetet.
2. Az alapértelmezett csillag ikont cseréld Font Awesome ikonra, vagy tölts fel saját SVG-t.
3. Az ikon legyen **Halmozott** nézetű, így jobban kiemelkedik.
4. A cím legyen például „Szolgáltatás 1”, a leírást rövidítsd egy mondatra. Hivatkozást is megadhatsz.
5. További stílus most nem kell, a végén személyre szabhatod.
6. A **Haladó** fülön a **Szélesség** legyen egyéni, 20%. Így a négy ikondoboz a konténer szélességének 80%-át foglalja el.
7. Kattints jobb gombbal az ikondobozra, és másold háromszor, így négy lesz. Szerkeszd meg a címeket. Ekkor a widgetek még egymás alatt állnak.

Összefoglalva a widgetek beállításai:

| Widget | Beállítás |
|---|---|
| Címsor | H2, középre igazítva, 100% szélesség a **Haladó** fülön |
| Ikondobozok (4 db) | 20% szélesség a **Haladó** fülön |

## A konténer rugalmas tulajdonságai

Mivel az elemek még egymás alatt vannak, szerkeszd újra a konténert (jobb gomb, majd a konténer szerkesztése), és nyisd meg a **Tételek** részt.

| Beállítás | Érték | Mit csinál |
|---|---|---|
| Irány | Sor (vízszintes) | Az elemek egymás mellé kerülnek. Az iránynak lehet oszlop, fordított sor és fordított oszlop értéke is. Az egyéni szélesség addig nem érvényesül, amíg a tördelést be nem kapcsolod. |
| Elemek igazítása | Középre | A sor elemeit függőlegesen középre teszi. A **Tartalom igazítása** (tördelésnél) felülbírálja, ezért ki is kapcsolhatod. |
| Hézagok | 0 | Az elemek közötti térköz. A reszponzív nézeteknél lesz fontosabb. |
| Tördelés | Tördel | Az elemek az egyéni szélességük szerint új sorba törnek. A cím a négy ikondoboz fölé kerül, de az ikondobozok még balra tömörülnek. |
| Tartalom igazítása | Térköz az elemek körül | Sor irányánál az elemeket vízszintesen osztja el. Lehetőségek: kezdő, középre, záró, térköz az elemek között, körül és egyenletes. |
| Tartalom igazítása (tördelésnél) | Egyenletes térköz | A sorokat függőlegesen osztja el a konténerben. Csak bekapcsolt tördelésnél jelenik meg. |

Ha elkészültél, mentsd az oldalt, és nézd meg egy új böngészőfülön az előnézetet.

## Reszponzív beállítások

A tablet és mobil nézethez elég az ikondobozok szélességét és a konténer magasságát módosítani.

- **Tablet:** az ikondobozok maradhatnak négyen egymás mellett, vagy beállíthatod 50%-ra is. A konténer magasságát növeld (a példában 89 VH).
- **Mobil:** az ikondobozok szélessége legyen 100% a **Haladó** fülön, és a **Hézagok** értékével adj térközt közéjük.

Ellenőrizd mindhárom nézetet, majd formázd tetszés szerint: színek, háttér, a szövegek, további padding.

A tördelés és igazítás részleteit az [Elrendezés fül](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-elrendezes-beallitasai/) fejezet írja le.