# Equal Height: egyenlő magasságú kártyák és elemek

> Az Equal Height kiterjesztés két módja (egyedi osztály és Div Level), beállításai, működése, korlátai és hibaelhárítása.

Egy sorban álló kártyák szövege ritkán egyforma hosszú, így a gombok és a dobozok különböző magasságban végződnek. Az **Equal Height** kiterjesztés a megfelelő elemeknek a legmagasabb elem magasságát adja, CSS írása nélkül. Az ingyenes bővítmény része, Pro mellett is ugyanúgy működik.

## Előkészületek

- Az Elementor legyen telepítve és aktív.
- Kapcsold be az **Equal Height** kapcsolót a **The Plus Addons → Extensions** oldalon. Alapból ki van kapcsolva.
- Kell egy tároló, szekció vagy widget, amelyben az egyeztetendő elemek vannak, például három kártya egy sorban.

## Bekapcsolás

1. A WordPress vezérlőpultján nyisd meg a **The Plus Addons → Extensions** oldalt.
2. Keresd meg az **Equal Height** kiterjesztést, és kapcsold be.

## Hol vannak a beállítások

Az **Equal Height** szakasz minden tároló, szekció, oszlop és widget **Haladó** fülén megjelenik. Azon az elemen állítsd be, amely az egyeztetendő elemeket tartalmazza, általában a szülő tárolón. Csak a saját belsejében keres egyező elemeket.

![Az Equal Height szakasz egy tároló Haladó fülén, egyedi osztály módban](./kepek/kiterjesztesek-3-egyenlo-panel.webp)

*Az Equal Height szakasz egy tároló Haladó fülén, egyedi osztály módban* (https://minta-bolt.hu/wp-admin/post.php?post=365&action=elementor)

## 1. mód: egyedi osztály (ajánlott)

Példa: három ártábla-kártya van egy tárolóban, mindegyikben cím, különböző hosszúságú szöveg és gomb.

1. Jelöld ki a szülő tárolót, és nyisd meg a **Haladó → Equal Height** szakaszt.
2. Kapcsold be az **Equal Height** kapcsolót.
3. A **Mode Based on** legördülő listában válaszd a **Unique Class** értéket.
4. Az **Enter Unique Class** mezőbe írd be az egyeztetendő elemek osztályát ponttal kezdve. Például a `.elementor-widget-text-editor` a tárolóban lévő összes Szövegszerkesztő widgetet egyezteti. A példaképen a saját `.terv-szoveg` osztály szerepel.
5. Kattints a **Közzététel** vagy **Frissítés** gombra, és nyisd meg az oldalt. A szerkesztőben a hatás nem látszik, csak a nyilvános oldalon.

Előtte: a szövegek különböző magasak, ezért a gombok nem egy vonalban vannak.

![Három kártya egyenlő magasság nélkül, a gombok különböző magasságban](./kepek/kiterjesztesek-3-egyenlo-elotte.webp)

*Három kártya egyenlő magasság nélkül, a gombok különböző magasságban* (https://minta-bolt.hu/k3-egyenlo-elotte/)

Utána: minden szöveg a legmagasabb szöveg magasságát kapja, a gombok egy vonalba kerülnek.

![Ugyanaz a három kártya egyenlő magassággal, a gombok egy vonalban](./kepek/kiterjesztesek-3-egyenlo-utana.webp)

*Ugyanaz a három kártya egyenlő magassággal, a gombok egy vonalban* (https://minta-bolt.hu/k3-egyenlo/)

### Saját osztály használata

Ha csak néhány widgetet akarsz egyeztetni, adj nekik saját osztályt:

1. Jelöld ki az egyeztetendő widgeteket egyenként, nyisd meg a **Haladó → Elrendezés** részt, és írj egy osztályt a **CSS-osztályok** mezőbe, például `terv-szoveg` (itt nincs pont).
2. A szülő tárolón az **Enter Unique Class** mezőbe ugyanezt írd be ponttal: `.terv-szoveg`.

### Egy elem osztályának megkeresése

Egy widget egy részének egyeztetéséhez a nyilvános oldalon kattints jobb gombbal a részre, válaszd az **Vizsgálat** (Inspect) parancsot, és másold ki az egyik osztálynevét. Illesztéskor tegyél elé pontot. Például három The Plus Addons Ártáblázat widget esetén a `.pricing-content-wrap` a funkciók területét, a `.plus-pricing-table` a teljes táblázatot egyezteti.

## 2. mód: Div Level

A **Mode Based on** értéke legyen **Div Level**. A **Select Nested Level** dönti el, mi egyeztetődik:

- **Widgets** (alap): a tárolóban lévő összes widget a legmagasabb widget magasságát kapja. Ide tartoznak a címek és a gombok is, ezért a köztük lévő hely megnő.
- **Nested Level 2** és **Nested Level 10** között, a **Select Sub Nested Level** értékkel együtt: a widgeten belüli `div` szinteket számold meg az `elementor-widget-container` burkolótól kezdve.

Ha a widgetek az `elementor-widget-container` burkolóval készülnek, a szintes mód működik: például egy Ártáblázat belső dobozát a **Nested Level 2** és a **Level 1** találta el, a funkciók területét a **Nested Level 3** és a **Level 4**. Az Elementor **Optimized Markup** funkciója ezt a burkolót eltávolítja (a The Plus Addons widgetekről is), és ez az Elementor újabb változataiban alapból aktív lehet. Ilyenkor egyik szint sem talál semmit: használd az egyedi osztály módot.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Equal Height** | Bekapcsolja a funkciót ennél az elemnél. | Ki |
| **Mode Based on** | **Div Level** vagy **Unique Class**. | **Div Level** |
| **Select Nested Level** | Csak Div Level módban: **Widgets** vagy **Nested Level 1** és **Nested Level 10** között. | **Widgets** |
| **Select Sub Nested Level** | Csak Div Level módban: **Level 1** és **Level 10** között. | **Level 1** |
| **Enter Unique Class** | Csak Unique Class módban: az egyeztetendő elemek osztálya ponttal az elején. | Üres |

## Hogyan viselkedik

- Minimális magasságot állít be a belsejében lévő minden egyező elemre, a legmagasabb találat magasságával.
- Az elemen belüli összes találat közös magasságot kap akkor is, ha több sorba törnek.
- Az ingyenes bővítményben és Pro mellett is ugyanúgy működik, tárolón és oszlopos szekción egyaránt.
- Telefonon, ahol a kártyák egymás alá kerülnek, az egymás alatti elemek is ugyanazt a magasságot kapják.
- Az eredmény csak a nyilvános oldalon látszik, a szerkesztőben nem.

## Korlátozások

- Az ablak átméretezésekor a magasságok nem számolódnak újra rendesen. Ha az ablakot szűkíted, az elemek megtartják a nagyobb asztali magasságot, ha szélesíted, egyenetlenek maradhatnak. Az oldal újratöltése megoldja.
- Nincs eszközönkénti kapcsoló. Telefonon az egymás alatti elemek is a legmagasabb magasságot kapják, ami üres helyet hagyhat.
- A **Nested Level 1** a jelenlegi felületen nem csinál semmit.
- A **Nested Level 2** és **10** közötti szintek semmit nem talál, amíg az Elementor **Optimized Markup** funkciója aktív.
- A pont nélkül beírt osztály nem talál semmit.
- A **Widgets** a tároló minden widgetét egyezteti, nem csak azokat, amelyeket szeretnél.

## Hibaelhárítás

**A szerkesztőben nem történik semmi.** Ez normális: tedd közzé vagy frissítsd az oldalt, és nézd meg a nyilvános oldalon.

**A nyilvános oldalon sem történik semmi.**

- Ellenőrizd, hogy a kiterjesztés be van kapcsolva a **The Plus Addons → Extensions** oldalon.
- Ellenőrizd, hogy az **Equal Height** be van kapcsolva az elemen.
- Győződj meg arról, hogy az osztály ponttal kezdődik, és az egyeztetendő elemek a beállítást tartalmazó elemen belül vannak.
- Ha szintes módot használsz, váltsd át az egyedi osztály módra.

**A címek és a gombok eltávolodnak egymástól.** A **Select Nested Level** értéke **Widgets**, ami minden widgetet egyeztet. Használd az egyedi osztály módot, és csak a kívánt elemek osztályát add meg.

**Átméretezés után egyenetlenek az elemek.** Töltsd újra az oldalt. A magasságok csak betöltéskor számolódnak helyesen.