CSS Grid az atomikus szerkesztőben

A Rács elem a CSS Grid sor- és oszlopalapú elrendezését hozza az atomikus szerkesztőbe, az ingyenes Elementorban is. Pontosan szabályozhatod vele az elemek helyét és méretét, így galériákat, kártyás szakaszokat és funkciórácsokat is felépíthetsz. Mivel natívan működik együtt az Elementor osztályaival és változóival, a tervezési rendszeredet külön beállítás nélkül is egységesen tarthatod.

A funkció bekapcsolása

A Rács eléréséhez az atomikus szerkesztőnek aktívnak kell lennie a webhelyen:

1. Menj az Elementor → Szerkesztő → Beállítások oldalra.
2. Keresd meg az Atomic szerkesztő kártyát.
3. Kattints az új élmény bekapcsolására szolgáló gombra.

Az Elementor 4.x verziókban az atomikus elemek alapértelmezetten be vannak kapcsolva. Az Atomikus elemek csoportban találod a Rács elemet. A Atomic szerkesztő fejezet részletesen leírja a bekapcsolást.

A Rács beállításai

Jelöld ki a Rács elemet, és nyisd meg a Stílus fület, majd az Elrendezés szakaszt. A Megjelenítés mezőben a Rács van kiválasztva (a többi lehetőség: Blokk, Flex, Nincs).

https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor

A képen az Elrendezés szakasz látszik a Rácskörvonal megjelenítése kapcsolóval, az Oszlopok és Sorok mezőkkel (FR egységben) és az Automatikus elhelyezés gombokkal.

Szülő Rács beállításai

• Oszlopok és Sorok: megadod a rács oszlopainak és soraiban lévő sávok számát vagy méretét. Bármilyen szabványos CSS-egységet használhatsz, köztük az FR (törtrész) egységet is, amellyel rugalmas elrendezést készíthetsz.
• Automatikus elhelyezés: a rács kitöltési irányát adja meg. A Továbbiak megjelenítése gomb további beállításokat nyit, itt található a sűrű automatikus elhelyezés is.
• Hézagok: az oszlopok (Oszlop) és sorok (Sor) közötti távolság pixelben.
• Rácskörvonal megjelenítése: ha bekapcsolod, a rács vonalai láthatók a vásznon. Ez csak szerkesztői segédlet, a webhelyen nem jelenik meg.

A Rácsba tett elemek beállításai

Ha egy elemet egy Rács elembe teszel, annak a Stílus fülén külön rácselem-beállítások jelennek meg:

• Rács oszlop és Rács sor: egyetlen elemet több sávra is kiterjeszthetsz (például egy kiemelt bejegyzés két oszlopot foglal el).
• Saját igazítás és Sorrend: felülírja az alapértelmezett pozíciót, így a függőleges igazítást és a forrás szerinti sorrendet a többitől függetlenül szabályozhatod.
• Sűrű automatikus elhelyezés: speciális algoritmus, amely a kisebb elemeket automatikusan a nagyobb, kiterjesztett elemek után maradt üres cellákba tolja, így nem maradnak hézagok az elrendezésben.

Reszponzív termékgaléria készítése

1. Nyisd meg az Elementor szerkesztőt egy új vagy meglévő oldalon.
2. Húzd a Rács elemet az elempanelről a vászonra.
3. Tegyél a Rácsba több gyermekelemet (például Kép, Címsor, Bekezdés vagy Gomb).
4. Jelöld ki a szülő Rács elemet, és nyisd meg az Elrendezés szakaszt.
5. Állítsd be az oszlopokat, sorokat, hézagokat és az automatikus elhelyezést a galéria szerkezetének megfelelően. Használhatsz bármilyen CSS-egységet, az FR-t is.
6. Kapcsold be a Rácskörvonal megjelenítése kapcsolót, hogy lásd a rácsvonalakat a vásznon.
7. Jelölj ki egy gyermekelemet, és a rácselem-beállításokban állítsd be az oszlop- és sorkiterjesztést, hogy több sávot foglaljon el.
8. Kapcsold be a sűrű automatikus elhelyezést a szülő Rács beállításai között, és ellenőrizd, hogy az elrendezés kitölti az üres cellákat.
9. Alkalmazz meglévő osztályokat és változókat a Rácsra és a gyermekelemekre, hogy egységes maradjon a dizájn.
10. Mentsd az oldalt, és ellenőrizd az elrendezést a szerkesztőben és a webhelyen is.

Teljesítmény a szerkesztőben

A több száz egymásba ágyazott tárolót tartalmazó elrendezések lassíthatják a böngészőt. Az Elementor kifejezetten a mélyen egymásba ágyazott Rács elrendezések szerkesztői megjelenítését optimalizálta.

Megjegyzés

Ez csak a szerkesztővászon gyorsítása, a webhely betöltési sebességét nem érinti: azt a CSS Grid kimenete már eleve gyorsan kezeli.

Gyakori kérdések

Átalakíthatok egy meglévő Flexbox tárolót Rácsá? Igen. Jelölj ki egy meglévő atomikus Flex tárolót, és az Elrendezés szakasz Megjelenítés mezőjében válts Rács értékre.

Mi az a sűrű automatikus elhelyezés? Olyan beállítás, amelynél a rács algoritmusa aktívan kitölti a kiterjesztett elemek után maradt üres cellákat. Így az elrendezés kézi átrendezés nélkül is tömör marad.