# Változók és a Változókezelő

> Betűtípus-, szín- és méretváltozó létrehozása, szerkesztése, duplikálása, törlése és használata osztályokban.

A változó egy érték beceneve. Ha például a szöveged Roboto betűtípusú, létrehozhatsz egy „Szoveg_betu" nevű változót, amelynek értéke Roboto. A webhelyen mindenhol a változót használod a betűtípus helyett. Ha később mégis Arialra váltanál, elég a változó értékét átírnod, és a módosítás az egész webhelyen érvényesül.

A változók a V4 (atomikus) elemek **Stílus** fülén használhatók. A típusuk: **Color** (szín), **Font** (betűtípus) és **Size** (méret), a méretváltozó csak Pro felhasználóknak.

## Változó létrehozása az elem paneljéről

Az alábbi példában betűcsalád-változót hozol létre.

1. Nyisd meg az Elementor szerkesztőt.
2. Add hozzá a vászonhoz a **Címsor** vagy a **Bekezdés** elemet, és jelöld ki.
3. Kattints a **Stílus** fülre.
4. Nyisd ki a **Tipográfia** szekciót.
5. A **Betűcsalád** mező fölé víve az egeret megjelenik a **Változók** ikon. Kattints rá.
6. Ha ez az első változód, kattints a **Változó létrehozása** gombra. Ha már van változód, kattints a + ikonra a felugró ablakban.
7. A **Név** mezőbe írd be a változó nevét, például „Szoveg_betu".
8. Az **Érték** listában válaszd ki a betűtípust, például az Arialt. A lista keresőjébe is gépelhetsz.

   ![Az Érték mezőben a Betűcsalád választó: keresőmező és a rendszer betűtípusai](./kepek/stilus-valtozok-betucsalad-valaszto.webp)

   *Az Érték mezőben a Betűcsalád választó: keresőmező és a rendszer betűtípusai* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

9. Kattints a **Létrehozás** gombra.

![A Változó létrehozása ablak kitöltve: Név, Érték és a Létrehozás gomb](./kepek/stilus-valtozok-letrehozas.webp)

*A Változó létrehozása ablak kitöltve: Név, Érték és a Létrehozás gomb* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

> **Megjegyzés**
>
> Ha a változó létrehozása előtt már megadtál értéket (például 100 képpontos betűméretet), az lesz a változó alapértéke.

A változó létrejön, és azonnal rákerül az elemre. A **Betűcsalád** mezőben a változó neve látszik.

![A Betűcsalád mezőben a Szoveg_betu változó látszik](./kepek/stilus-valtozok-alkalmazva.webp)

*A Betűcsalád mezőben a Szoveg_betu változó látszik* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A változó mentése azonnal megtörténik: az oldalakkal ellentétben nem kell hozzá a **Közzététel** gombra kattintanod.

## Változó szerkesztése

A változót szerkesztheted a vászonról és a Változókezelőből is. Ha az értéket módosítod, az a változót használó összes helyen megváltozik.

### Szerkesztés az elem paneljéről

1. Nyisd ki a **Tipográfia** szekciót.
2. Vidd az egeret a **Betűcsalád** mező fölé, és kattints a **Változók** ikonra.
3. Vidd az egeret a szerkeszteni kívánt változóra.
4. Kattints a változó neve melletti ceruza ikonra.
5. Módosítsd a nevet és/vagy az értéket, például az értéket állítsd Robotóra.
6. Mentsd a módosítást. A változót használó helyeken a betűtípus Robotóra vált.

### Szerkesztés a Változókezelőből

1. Kattints a felső sávban a **Tervezési rendszer** ikonra, és válaszd a **Változók** fület.
2. Kattints a módosítani kívánt változó értékére, vagy kattints rá duplán.
3. Módosítsd az értéket, például a legördülő listából válaszd ki a Robotót.

## Változó duplikálása

1. Kattints a felső sávban a **Tervezési rendszer** ikonra, és nyisd meg a **Változók** fület.
2. Kattints a duplikálni kívánt változó melletti hárompontos menüre.
3. Válaszd a **Duplikálás** menüpontot. A változó másolata később szerkeszthető.

## Változók és osztályok

Az osztályok több stílust fognak össze egyetlen osztályba, ami gyorsítja az oldalépítést. Az osztályokról lásd: [Osztályok az Elementorban](https://hub.hellowp.io/hu/plugins/elementor/stilus-osztalyok/). A változók az osztályok részei lehetnek.

A példában egy változót használó osztályt hozol létre.

1. Nyisd meg az Elementor szerkesztőt.
2. Hozz létre egy „Bekezdes_betu" nevű változót Roboto betűcsaláddal.
3. Húzz egy **Címsor** elemet a vászonra.
4. A **Stílus** fülön hozz létre egy „Cimsor_szoveg" osztályt. Ügyelj arra, hogy ezt az osztályt szerkeszd.
5. Nyisd ki a **Tipográfia** szekciót.
6. Állítsd a betűméretet 72 képpontra.
7. A **Betűcsalád** mezőnél kattints a **Változók** ikonra, és hozz létre egy „Cimsor_betu" nevű változót Arial betűcsaláddal.
8. Adj a vászonhoz egy második címsort, és add neki a „Cimsor_szoveg" osztályt. Mindkét címsor 72 képpontos Arial betűvel jelenik meg.
9. A második címsornál kattints a „Cimsor_szoveg" osztályra, hogy ezt az osztályt szerkeszd, és a betűcsaládot cseréld a „Bekezdes_betu" változóra. Mindkét címsor Roboto betűvel jelenik meg, mert a változó az osztály része.

## A Változókezelő

A Változókezelő nagyobb kontrollt ad a változók fölött. Minden létrehozott változó bekerül ide, és itt szerkesztheted vagy törölheted őket.

![A Tervezési rendszer panel Változók füle: Név és Érték oszlop, keresőmező és a + gomb](./kepek/stilus-valtozok-kezelo.webp)

*A Tervezési rendszer panel Változók füle: Név és Érték oszlop, keresőmező és a + gomb* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

### A Változókezelő megnyitása

A Változókezelőt kétféleképpen érheted el:

- a felső sávból,
- az elem paneljéről.

A felső sávból:

1. Kattints a felső sávban a **Tervezési rendszer** ikonra.
2. A **Tervezési rendszer** panel megnyílik, és a **Változók** fül a kiválasztott.

Az elem paneljéről:

1. Kattints a **Változók** ikonra a mezőnél.
2. A változók ablakában kattints a Változókezelő ikonra. Megnyílik a Változókezelő.

### Változó létrehozása a Változókezelőben

1. Nyisd meg a Változókezelőt.
2. Kattints a **Változó létrehozása** gombra, ha ez az első változód, vagy a + ikonra.
3. Válaszd ki a változó típusát:
   - **Color** (színváltozó)
   - **Font** (betűtípus-változó)
   - **Size** (méretváltozó)

   ![A + gomb menüje: Color, Font, Size](./kepek/stilus-valtozok-tipus-menu.webp)

   *A + gomb menüje: Color, Font, Size* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

4. Létrejön egy alapértelmezett változó.
5. Add meg a változó értékét.

### Változó törlése a Változókezelőben

1. Nyisd meg a Változókezelőt.
2. Vidd az egeret a törölni kívánt változóra.
3. Kattints a változó melletti hárompontos menüre, és válaszd a **Törlés** menüpontot.

   ![A változó hárompontos menüje: Duplikálás és Törlés](./kepek/stilus-valtozok-sor-menu.webp)

   *A változó hárompontos menüje: Duplikálás és Törlés* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

4. Erősítsd meg a törlést.

### Változó szerkesztése a Változókezelőben

1. Nyisd meg a Változókezelőt.
2. Kattints duplán a szerkeszteni kívánt változóra.
3. Módosítsd az értéket.

### Változó használata a Változókezelőből

A változók használata időt takarít meg, és egységessé teszi a webhelyet.

1. Az elem paneljén kattints a **Változók** ikonra.
2. A változók ablakában a lista az adott mezőhöz illő változókat tartalmazza.
3. Válaszd ki az egyik változót a listából.

A változók szinkronizálásáról a globális színekkel és betűtípusokkal a [Változók szinkronizálása a globális színekkel és betűkkel](https://hub.hellowp.io/hu/plugins/elementor/stilus-valtozok-szinkronizalasa/) fejezet szól, az exportálásról és importálásról pedig a [Tervezési rendszer exportálása és importálása](https://hub.hellowp.io/hu/plugins/elementor/stilus-tervezesi-rendszer-import-export/) fejezet.