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

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.

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.

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.

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.