# Az első oldal felépítése tárolókkal

> Lépésről lépésre egy nyitó (hero) rész elkészítése Flexbox tárolóval, címsorokkal és gombbal.

A tárolók (konténerek) váltották fel a régi szakasz-oszlop rendszert: rugalmasabbak, és könnyebb velük oldalt építeni. Ebben a fejezetben egy nyitó, úgynevezett „hero” részt építesz: nagy, feltűnő rész az oldal tetején, ami megragadja a látogató figyelmét.

Mielőtt nekilátsz, hozz létre egy új oldalt (**Oldalak → Új oldal hozzáadása**), és nyisd meg az Elementor szerkesztőben. A felső sávon találod az **Elem hozzáadása** gombot, az **Előzményeket**, az **Oldal beállításait**, a **Szerkezet** nézetet, az előnézetet és a **Közzététel** gombot.

## Az elrendezés kiválasztása

1. Az oldal üres részén kattints a **+** gombra. (A mappa ikon sablon importálását indítja, most nem az kell.)
2. A **Melyik elrendezést szeretnéd használni?** kérdésnél válaszd a **Flexbox** vagy a **Rács** elrendezést. Most a **Flexbox** kell.

![A Melyik elrendezést szeretnéd használni kérdés a Flexbox és a Rács lehetőséggel](./kepek/szerkeszto-uj-elrendezes.webp)

*A Melyik elrendezést szeretnéd használni kérdés a Flexbox és a Rács lehetőséggel* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

Az ablakban a **Flexbox** és a **Rács** közül választhatsz.

3. A **Válaszd ki a szerkezetedet** nézetben dönts a tároló szerkezetéről. Az első két lehetőség egyetlen tároló: az egyik **Oszlop irányú** (az elemek egymás alatt), a másik **Sor irányú** (egymás mellett). A többi egymás mellé tett, több részes szerkezet. A hero részhez az egy tárolós, oszlop irányú elrendezés kell, mert az elemek függőlegesen követik egymást.

![A Válaszd ki a szerkezetedet nézet a tároló szerkezeteivel](./kepek/szerkeszto-szerkezet-valasztas.webp)

*A Válaszd ki a szerkezetedet nézet a tároló szerkezeteivel* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

Az első sorban az egy tárolós szerkezetek vannak, a nyilak az irányt jelzik.

## A tároló beállítása

A tároló létrehozása után a bal oldali panel a **Flexbox szerkesztése** nézetre vált. Három füle van: **Általános**, **Stílus** és **Interakciók**. Ha a panel nem váltott át, kattints a tároló kijelölő sávjára a vásznon.

A **Stílus** fülön szekciók vannak: **Elrendezés**, **Térközök**, **Méret**, **Pozíció**, **Tipográfia**, **Háttér**, **Szegély**, **Hatások** és **Egyedi CSS**.

### Méret

A hero rész legyen legalább 540 képpont magas.

1. Nyisd ki a **Méret** szekciót.
2. A **Minimális magasság** mezőbe írd be: 540 (PX).

![A Méret szekció a Minimális magasság mezőbe írt 540 értékkel](./kepek/szerkeszto-flexbox-meret.webp)

*A Méret szekció a Minimális magasság mezőbe írt 540 értékkel* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

A szekcióban a **Szélesség**, **Magasság**, **Minimális** és **Maximális** szélesség és magasság mezők és a **Túlcsordulás** is itt van.

### Elrendezés

A hero szövege a tároló közepén legyen: ehhez a tartalmat és az elemeket középre igazítod.

1. Nyisd ki az **Elrendezés** szekciót.
2. A **Megjelenítés** értéke **Flex**, az **Irány** pedig a lefelé mutató nyíl (oszlop).
3. A **Tartalom igazítása** és az **Elemek igazítása** sorban válaszd a középre igazítást.

![Az Elrendezés szekció a Megjelenítés, Irány, Tartalom igazítása, Elemek igazítása és Hézagok beállításaival](./kepek/szerkeszto-flexbox-elrendezes.webp)

*Az Elrendezés szekció a Megjelenítés, Irány, Tartalom igazítása, Elemek igazítása és Hézagok beállításaival* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

A szekcióban beállíthatod a **Hézagokat** (**Oszlop** és **Sor**) és a **Tördelést** is.

### Háttér

A hero rész jellemzően háttérképet kap, hogy kitöltse az egész tárolót. A **Háttér** szekcióban a háttér átfedését (**Szín**) és a **Vágást** állítod. Képet a WordPress Média könyvtárából választasz: ha még nincs feltöltve, kattints a **Fájlok feltöltése**, majd a **Fájlok kiválasztása** gombra, válaszd ki a fájlt, adj neki alternatív szöveget és feliratot (ez segíti a keresőoptimalizálást és az akadálymentességet), végül kattints a **Média beszúrása** gombra.

A háttérkép elhelyezésénél a jellemző beállítás: középre igazított pozíció, nem ismétlődő, a tárolót kitöltő (borító) méret. Így egyetlen nagy kép fedi az egész részt.

## Szövegek és gomb hozzáadása

A hero szövege két külön stílusú címsorból áll, alattuk egy gomb van. Mindhárom elem az **Elemek** panelről kerül a tárolóba: előbb jelöld ki a tárolót, aztán kattints az elemre (lásd az [Elemek hozzáadása](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/) fejezetet), vagy húzd a tárolóba.

### Az első címsor

1. Jelöld ki a tárolót, nyisd meg a felső sáv **Elem hozzáadása** gombját, és kattints a **Címsor** elemre.
2. Az **Általános** fül **Tartalom** részén a **Cím** mezőbe írd be a szöveget, például: „Teljes testedzés”.
3. A **Beállítások** részen a **Címke** mezőben a címsor szintjét (például **H2**) választhatod ki.

![A Címsor szerkesztése panel a Cím mezővel és a Címke beállítással](./kepek/szerkeszto-cimsor-panel.webp)

*A Címsor szerkesztése panel a Cím mezővel és a Címke beállítással* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

A **Cím** mező kis szövegszerkesztő: félkövér, dőlt, áthúzott, felső és alsó index, és link is beállítható benne.

A címsor megjelenését a **Stílus** fülön állítod: itt a szöveg színe, a betűtípus, a méret, a vastagság, a sormagasság és a többi tipográfiai beállítás van.

### A második címsor

1. Húzz egy újabb **Címsor** elemet az első alá (vagy jelöld ki az elsőt, és kattints a **Címsor** elemre).
2. Írd be a szöveget a **Cím** mezőbe, például: „Told át a határaidat”.
3. A **Stílus** fülön a nagyobb betűméret, a vastagabb betű és a nagybetűs átalakítás kiemeli a mondatot.

### A gomb

A gomb a látogatót egy következő oldalra, például az árak oldalára viszi.

1. Kattints a **Gomb** elemre az **Elem hozzáadása** panelen.
2. Az **Általános** fül **Tartalom** részén a **Gomb szövege** mezőbe írd be a feliratot, például: „Árak megtekintése”.
3. A **Beállítások** részen a **Link** mezővel megadhatod, hova vigyen a gomb.
4. A **Stílus** fülön a színt, a háttérszínt, a betűtípust és a térközöket (belső margót) állíthatod.

![A Gomb szerkesztése panel a Gomb szövege mezővel](./kepek/szerkeszto-gomb-panel.webp)

*A Gomb szerkesztése panel a Gomb szövege mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

A **Gomb szövege** mezőben írd át a feliratot; a **Link** mezővel adhatod meg a célt.

## Az eredmény

A kész tároló a két címsort és a gombot függőlegesen egymás alatt tartalmazza.

![Az elkészült tároló két címsorral és egy gombbal a szerkesztő vásznán](./kepek/szerkeszto-elso-oldal-kesz.webp)

*Az elkészült tároló két címsorral és egy gombbal a szerkesztő vásznán* (https://minta-bolt.hu/wp-admin/post.php?post=8&action=elementor)

A vásznon a két címsor és a gomb egymás alatt látszik, a panel a gomb beállításait mutatja.

Az oldal mentéséhez és élesítéséhez kattints a **Közzététel** gombra.

## Merre tovább

Az oldal további részeit új tárolókkal építheted a hero alá. Használhatsz kész webhelykészletet is (kitet), és azt a saját igényeidre szabhatod; a készletet akár csak azért is alkalmazhatod, hogy lásd, hogyan építenek vele a szakemberek. Ha az egész webhely szerkezetét a nulláról szeretnéd megtervezni, ahhoz a Téma építőt (Theme Builder) használd.