# Div-blokk és Flexbox elem

> A két atomikus tároló elem: felvétel, törlés, HTML-címke, hivatkozás és a Stílus fül szakaszai, lépésről lépésre mintával.

A **Div-blokk** és a **Flexbox** az atomikus szerkesztő két tároló eleme. Mindkettő más elemeket tartalmaz, akár egymást is.

- **Div-blokk:** általános tároló. A Flexbox konténerhez hasonló, de könnyebb, és gyorsabban betöltődik. Egyszerű tervekhez kiváló.
- **Flexbox:** rugalmas elrendezésű tároló összetett, pontos tervekhez.

A Div-blokk kísérleti funkció, ezért előbb be kell kapcsolnod az Elementor kísérleti funkcióinál.

## Elem hozzáadása és törlése

1. A szerkesztőben kattints a **+** jelre. Megjelenik az összes elérhető elem.
2. Kattints az elemre, vagy húzd a vászonra.
3. Törléshez jelöld ki az elemet a vásznon, és nyomd meg a **Delete** billentyűt.

## Beállítások

Mindkét elemnek van **Általános**, **Stílus** és **Interakciók** füle.

![A Flexbox elem Általános füle: HTML-címke, Link, ID, Attribútumok és Megjelenítési feltételek](./kepek/kontenerek-flexbox-elem-altalanos.webp)

*A Flexbox elem Általános füle: HTML-címke, Link, ID, Attribútumok és Megjelenítési feltételek* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A képen a **Beállítások** rész látszik.

| Beállítás | Mit csinál |
|---|---|
| HTML-címke | A tartalomnak megfelelő címke. A helyes címke segíti a keresőket is. Választható: Div, Header, Section, Article, Aside, Footer |
| Link | A **+** jelre kattintva megadhatsz egy hivatkozást: a látogató a blokkra kattintva megnyitja. Ha a tárolónak van hivatkozása, a benne lévő elemek már nem lehetnek kattinthatók. |
| Megnyitás új lapon | Hivatkozásnál jelenik meg, az új lapon nyitást kapcsolja be. |
| ID | Egyéni azonosító a tárolónak |

Az **Attribútumok** és a **Megjelenítési feltételek** Pro funkció, ezek koronával jelennek meg.

### Stílus fül

A **Stílus** fülön a következő szakaszok találhatók: **Elrendezés**, **Térközök**, **Méret**, **Pozíció**, **Tipográfia**, **Háttér**, **Szegély**, **Hatások** és **Egyedi CSS** (utóbbi Pro).

![A Flexbox elem Stílus füle a megnyitott Pozíció szakasszal](./kepek/kontenerek-flexbox-elem-pozicio.webp)

*A Flexbox elem Stílus füle a megnyitott Pozíció szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A képen a **Pozíció** szakasz látszik a **Pozíció**, **Z-index** és **Horgonyeltolás** mezőkkel.

## Példa: Div-blokk háttérképpel

1. Adj egy Div-blokkot a vászonhoz.
2. Kattints a **Stílus** fülre, és nyisd meg a **Méret** szakaszt.
3. Állítsd be: szélesség 1000 PX, magasság 500 PX.
4. Nyisd meg a **Háttér** szakaszt, és adj hozzá háttérképet.

![A Div-blokk Stílus füle zárt szakaszokkal](./kepek/kontenerek-div-blokk-panel.webp)

*A Div-blokk Stílus füle zárt szakaszokkal* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A képen a Div-blokk szerkesztőpanelje látszik, az osztályok és a Stílus fül szakaszaival.

## Példa: Flexbox kétoszlopos hero

1. Adj egy Flexbox elemet a vászonhoz.
2. A **Stílus** fül **Elrendezés** szakaszában az **Irány** legyen **Sor**.
3. Tegyél két gyermek Flexboxot az elsőbe, egymás mellé.
4. Jelöld ki a bal oldalit, nyisd meg az **Elrendezés** szakaszt, és az **Irány** legyen **Oszlop**.
5. A **Méret** szakaszban a minimális magasság 600 PX, a minimális szélesség 60%.
6. A **Háttér** szakaszban adj hozzá háttérszínt.
7. Adj hozzá két **Címsor** elemet és egy **Gomb** elemet, és formázd őket.
8. Jelöld ki a jobb oldali Flexboxot, és az **Elrendezés** szakaszban állítsd a magasságot 600 PX-re, a szélességet 40%-ra.
9. A **Háttér** szakaszban adj hozzá háttérképet.

Az elrendezés pontos beállításairól további részleteket a [Rács beállításai](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-racs-beallitasai/) és a [Flexbox konténerek működése](https://hub.hellowp.io/hu/plugins/elementor/kontenerek-flexbox-mukodese/) fejezetekben olvashatsz.