Osztályok az Elementorban

Az Elementor szerkesztő az atomi tervezés elveit követi: kicsi, újrahasználható elemekből dolgozik. Az Elementorban ezeket az elemeket osztályoknak hívják, ahogy a CSS-ben is. A megfelelően használt osztályok az oldal teljesítményét is javíthatják.

Mi az osztály?

Az osztály közös stílusjellemzők gyűjteménye. Ha például az oldalon a szokásos szöveg legyen Arial betűtípusú, 12 pontos, létrehozhatsz egy Fő szöveg nevű osztályt ezekkel a jellemzőkkel. Ezután minden elem, amelyik a Fő szöveg osztályt használja, Arial 12 pontos lesz.

A helyi osztály

Az Elementorban minden elemnek van legalább egy osztálya: a helyi osztály. Ez az adott elemet írja le. Fontos, hogy bár minden elemnek van helyi osztálya, az elemenként más lehet: az egyik szövegelem helyi osztályában lehet Arial, egy másikéban Calibri.

Az osztályok hierarchiája

Az osztályok hierarchia szerint működnek. Ha két osztály ellentmond egymásnak, a szerkesztő tudja, melyik jellemző élvez elsőbbséget. Ha egy elemen két osztály van, az egyik Arial, a másik Calibri betűtípust ad, a szerkesztőnek el kell döntenie, melyik nyer. Ezt a prioritást az osztálykezelőben állítod be (lásd: Osztálykezelő). A helyi osztálynak azonban mindig a legmagasabb a prioritása: ha a helyi osztály New Times Roman betűtípust ad meg, az elem azt használja.

Tipp

Úgy építsd az osztályaidat, hogy minél kevesebb ütközés legyen közöttük. Az ütközések nemcsak időt vesznek el, hanem lassíthatják az oldalt is.

Osztály létrehozása

Osztályt automatikusan létrehozol minden alkalommal, amikor elemet adsz a vászonhoz: az elem beállításai megjelennek a bal oldali panelen. A Stílus fül tetején az Osztályok mezőben már ott áll a helyi osztály.

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

Új osztály hozzáadása:

1. Írd be az osztály nevét a szövegmezőbe. Megjelenik egy legördülő menü.
2. A legördülő menüben válaszd ki az osztály nevét az új osztály létrehozását felkínáló sorban.

Globális osztály készítése a helyi osztályból

Ha egy elemet csak a helyi osztállyal hoztál létre, és később újra szeretnéd használni a tulajdonságait, a helyi osztályt globális osztállyá alakíthatod.

1. Hozz létre egy elemet, és adj neki több tulajdonságot. Például hozz létre egy címsort, és állíts be igazítást, betűtípust és színt.
2. Kattints a helyi osztály melletti hárompontos menüre.
3. Válaszd az Átalakítás globális osztállyá menüpontot.

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

Létrejön a globális osztály. A nevét az osztálykezelőben módosíthatod.

Osztály szerkesztése

Az osztály létrehozása után be kell állítanod a tulajdonságait. Ehhez:

1. Hozd létre az osztályt.
2. Nézd meg az Osztályok mezőt: a szerkesztett osztály rózsaszín, ha helyi osztály, egyébként zöld. Ha az osztály rózsaszín vagy zöld, éppen azt szerkeszted.

Példa: két gombosztály

Ebben a példában egy olyan oldalt készítesz, amelyen több gomb van. Hogy időt spórolj, és javítsd a teljesítményt, két osztályt hozol létre: az egyik a fontos, a másik a másodlagos gombokat írja le.

1. Hozz létre egy oldalt az Elementor szerkesztőben.
2. Húzz egy Gomb widgetet a vászonra. A beállítások megjelennek a panelen.
3. Kattints a Stílus fülre.
4. Az Osztályok mezőben a helyi mellé írd be: Main_button.
5. A legördülő menüben válaszd a „Main button” osztály létrehozását. A Main_button megjelenik az Osztályok mezőben. Az osztály neve zöld: ezt az osztályt szerkeszted.
6. Nyisd meg a Méret szekciót.
7. A gomb szélessége legyen 200 PX, a magassága 50 PX.
8. Nyisd meg a Háttér szekciót.
9. Válassz a gombnak színt.

Most készítsd el a másodlagos gombok osztályát.

10. Az Osztályok mezőből töröld a Main button osztályt. A gomb visszatér az alapbeállításokra.
11. Az Osztályok mezőbe írd be: Secondary_button.
12. A legördülő menüben válaszd a „Secondary button” osztály létrehozását. Az osztály neve zöld, tehát ezt szerkeszted.
13. Nyisd meg a Méret szekciót.
14. A gomb szélessége legyen 100 PX, a magassága 50 PX.
15. Nyisd meg a Tipográfia szekciót.
16. A betűméret legyen 12.
17. Nyisd meg a Háttér szekciót.
18. Válassz háttérszínt. Ügyelj rá, hogy más legyen, mint a Main button háttere.

Most próbáld ki az eredményt.

19. Adj egy új Gomb elemet a vászonhoz.
20. Nyisd meg a Stílus fület.
21. Kattints az Osztályok mezőre, és a legördülő menüből válaszd a Main button osztályt. A gomb felveszi a Main button osztály jellemzőit.
22. Kattints az Osztályok mezőre, és válaszd a Secondary button osztályt. A gomb jellemzőinek többsége a Main button osztályból származik, mert a Main button magasabb a hierarchiában. A betűtípus viszont a Secondary button szerint alakul, mert a Main buttonban nem adtad meg a tipográfiát, így a Secondary button határozza meg a betű stílusát.
23. Az Osztályok mezőben kattints a Secondary button melletti három pontra.
24. Válaszd az Eltávolítás menüpontot. Az Osztályok mezőben most csak a helyi és a Main button osztály marad. A betűméret visszaáll az alapértelmezettre, mert a Secondary_button osztály már nincs ott.

Tegyük fel, hogy ezt az egy gombot úgy szeretnéd testre szabni, hogy főgombnak nézzen ki, de legyen egy további tulajdonsága: színt váltson, ha a látogatók fölé viszik az egeret.

25. Kattints a helyi osztály melletti három pontra, és válaszd a Rámutatás állapotot.
26. Nyisd meg a Háttér szekciót.
27. Válassz másik háttérszínt. Ha az egeret a gomb fölé viszed, a gomb színt vált.

A helyi osztály szerkesztésével úgy módosítod ennek az egy gombnak a stílusát, hogy a többi Main button osztályú gomb nem változik. A Rámutatás egy állapot: azt adja meg, hogyan nézzen ki a gomb, ha a látogatók fölé viszik az egeret. A menüből további állapotok is választhatók: Normál, Fókusz és Aktív.

Osztály duplikálása

Ha egy meglévő osztályhoz hasonló osztályt szeretnél, gyakran könnyebb duplikálni, majd szerkeszteni.

1. Keresd meg az osztályt az elem paneljén.
2. Kattints az osztály neve melletti három pontra.
3. Válaszd a Duplikálás menüpontot.
4. Az osztály megkettőződik, és készen áll a szerkesztésre.

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

Az osztály menüjében az Átnevezés és az Eltávolítás menüpont is megtalálható.

Felhasználói szerepkörök és az osztályok

A webhely biztonsága és stabilitása érdekében az osztályokkal kapcsolatos funkciókhoz való hozzáférés a felhasználó szerepköre szerint korlátozott. Egy rendszergazda például mindent megtehet az osztályokkal, a szerkesztő viszont használhatja a Stílus fül funkcióit, de nem hozhat létre új osztályt.

Művelet	Rendszergazda	Szerkesztő	Szerző	Közreműködő	Feliratkozó	Boltkezelő
Hozzáférés a Stílus fülhöz	igen	igen	igen	igen	nem	igen
Hozzáférés az Osztálykezelőhöz	igen	nem	nem	nem	nem	nem
Új osztály létrehozása	igen	nem	nem	nem	nem	nem
Osztály törlése	igen	nem	nem	nem	nem	nem
Osztály tulajdonságainak szerkesztése	igen	nem	nem	nem	nem	nem
Osztály átnevezése	igen	nem	nem	nem	nem	nem
Osztályok sorrendjének módosítása	igen	nem	nem	nem	nem	nem
Helyi osztály szerkesztése	igen	igen	igen	igen	nem	igen
Osztály eltávolítása az elemről	igen	igen	igen	igen	nem	igen
Osztály alkalmazása az elemre	igen	igen	igen	igen	nem	igen