# Osztályok az Elementorban

> Osztály létrehozása, szerkesztése, helyi osztály átalakítása globálissá, prioritás, állapotok és az osztályok duplikálása.

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ő](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-osztalykezelo/)). 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.

![Az Osztályok mező a helyi osztállyal és két hozzáadott osztállyal](./kepek/stilus-osztaly-mezo.webp)

*Az Osztályok mező a helyi osztállyal és két hozzáadott osztállyal* (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.

![A helyi osztály menüje: Átalakítás globális osztállyá és az állapotok](./kepek/stilus-osztaly-helyi-menu.webp)

*A helyi osztály menüje: Átalakítás globális osztállyá és az állapotok* (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.

![A globális osztály menüje: Átnevezés, Duplikálás, Eltávolítás és az állapotok](./kepek/stilus-osztaly-globalis-menu.webp)

*A globális osztály menüje: Átnevezés, Duplikálás, Eltávolítás és az állapotok* (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 |