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

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 fejezet írja le.