# Stílusok

> Az egész webhely és az egyes blokkok megjelenésének beállítása a Stílusokkal: stílusváltozatok, betűk, színek, elrendezés, egyéni CSS és visszaállítás.

A Stílusokkal a webhely teljes megjelenését és elrendezését globális szinten állíthatod, ahelyett hogy egyenként szerkesztenél blokkokat vagy oldalakat. A blokkos témák része, és legalább WordPress 5.9 kell hozzá.

Beállíthatod a színeket, a betűket, az elrendezést, a térközöket és sok mást az egész webhelyen, így a webhelyed egységes megjelenést kap. Az egyes blokkok alapértelmezett megjelenését is módosíthatod: adhatsz a Gomb blokknak saját színt, vagy beállíthatod a Címsor blokk kedvelt betűméretét.

## Hogyan működnek a stílusok?

A Stílusokban megadott beállítások az egész webhelyre hatnak. Ha például itt megváltoztatod a háttérszínt, az az összes bejegyzésed, oldalad és mintasablonod háttérszínét megváltoztatja.

A Stílusok panelen megtalálod a téma és a WordPress alapértelmezett beállításait. Ezeket felülbírálhatod a saját választásaiddal: például saját színeket vehetsz fel a palettára, vagy átállíthatod az elrendezés méreteit.

Az egyes blokkok megjelenését is testre szabhatod az egész webhelyen. Például az Idézet blokkoknak az összes helyen adhatsz háttérszínt, betűméretet és sormagasságot a **Stílusok → Blokkok** alatt.

## A Stílusok panel használata

A Stílusok használatához blokkos témát kell bekapcsolnod (lásd [Blokkos témák](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-blokk-temak/)).

1. Menj a **Megjelenés → Szerkesztő** oldalra.
2. Kattints a **Stíluslapok** menüpontra, vagy a jobb felső sarokban a félig árnyékolt kör ikonra a blokkbeállítások oldalsávja fölött.

A Stílusok ikon a Webhelyszerkesztőben, valamint a mintasablonok és sablonrészek szerkesztése közben is elérhető.

![A Stílusok panel](./kepek/webhelyszerkeszto-stilusok-panel.webp)

*A Stílusok panel* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles)

A panelen a **Betűkészlet**, **Színek**, **Háttér**, **Árnyékok** és **Elrendezés** szakaszok, majd a **Blokkok** szakasz látszik. A panelen végzett módosítások az egész webhelyre hatnak.

A **Blokkok** pontra kattintva az összes blokk listáját látod. Bármelyik blokktípust kiválaszthatod, és a webhely egészén testre szabhatod a megjelenését.

### Üdvözlő útmutató

Amikor először nyitod meg a Stílusok panelt, megjelenik egy üdvözlő útmutató. A lap alján lévő **Következő** és **Előző** hivatkozásokkal lapozhatsz benne, vagy az **X** ikonnal bezárhatod. Később a jobb felső sarokban lévő hárompontos menüből nyithatod meg újra az **Üdvözlő útmutató** pontot.

## Stílusváltozatok

A stílusváltozatok a blokkos témák funkciója. A téma alternatív változatait kínálják, más szín-, betű-, térköz- és blokkbeállítás-összeállítással. A stílusváltozatok cseréjével a webhely kinézete témaváltás nélkül megváltozik.

1. A Stílusok panelen az elejéről látod annak a stílusváltozatnak a bélyegképét, amelyet éppen használ a webhelyed.
2. A **Stílus keresése** sorra kattintva böngészheted a témád stílusváltozatait. Kiválasztasz egy másik összeállítást, és a szerkesztőben azonnal látod, hogyan néz ki vele a webhely.
3. A bal nyíllal térsz vissza a Stílusok panelre.

![A téma stílusváltozatai](./kepek/webhelyszerkeszto-stilusok-valtozatok.webp)

*A téma stílusváltozatai* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fvariations)

A listában a stílusváltozatok után **Színváriációk** és betűkészlet-változatok is vannak, amelyekkel csak a színeket vagy csak a betűket cserélheted.

### Szín- és betűváltozatok

A szín- és betűváltozatok a stílusváltozatok részhalmazai, és csak a színekre, illetve a betűkre vonatkoznak. Ha elérhetők, ugyanabban a panelben jelennek meg (a **Stílus keresése** oldalon, a **Színek** és a **Betűkészlet** szakaszokban).

## Betűkészlet

Itt kezelheted az egész webhelyen a különböző elemek (szöveg, hivatkozások, címsorok, gombok) betűbeállításait.

1. Kattints a **Betűkészlet** pontra.
2. Válaszd ki a testre szabni kívánt elemet (**Szöveg**, **Hivatkozások**, **Címsorok**, **Képaláírások**, **Gombok**), és megnyílik az elem betűbeállítása.

![A Betűkészlet szakasz](./kepek/webhelyszerkeszto-stilusok-betukeszlet.webp)

*A Betűkészlet szakasz* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Ftypography)

A panel tetején a téma betűkészlet-előbeállításait (a témába épített betűtípus-összeállításokat) választhatod, alattuk a **Betűtípusok** listája látszik, majd az **Elemek**.

Az előbeállítások egységes betű-, méret-, sormagasság- és más értékeket adnak, ezek segítenek a webhely egységes megjelenésében. A beállítások között megváltoztathatod a betűtípust, a betűméretet, a betűvastagságot és -stílust, a sormagasságot és a szövegdíszítést; közben előnézetet látsz.

- A betűtípusok legördülő listájában minden betűtípus előnézettel jelenik meg.
- A betűméretet az előbeállított méretek közül választhatod (S, M, L, XL, XXL), vagy megadhatsz egyéni méretet px, em vagy rem egységgel.
- A címsorok (H1-től H6-ig) betűbeállításait külön-külön is megadhatod. Ezek: betűtípus (előnézettel), betűméret (előbeállított vagy egyéni), betűstílus (Alapértelmezett, Normál, Félkövér, Dőlt vagy Félkövér dőlt; az alapértelmezett az általános betűbeállítást örökli), sormagasság és betűköz (egyéni mértékegységgel), szövegdíszítés (Nincs, Aláhúzott, Áthúzott), szövegirány és kis-/nagybetű-átalakítás.

### Betűméret-előbeállítások

A betűméret-előbeállítások előre meghatározott méretek, amelyeket egységesen alkalmazhatsz a blokkokon és elemeken. A téma adja őket, és a betűbeállításoknál feliratozott választékként jelennek meg (például Kicsi, Közepes, Nagy). Így nem kell kézzel beírnod az értékeket.

Egy előbeállítás módosításához kattints arra, amelyiket át akarod állítani, például a Kicsire. Élő előnézetet látsz, és egyéni értéket adhatsz meg px, em, rem, vw vagy vh egységben. A csúszkával vagy beírással állíthatod az értéket.

Ha bekapcsolod az egyéni **folyékony** értékeket, a szokásos méretbevitel kikapcsol. A folyékony értékeknél megadhatod a legkisebb és a legnagyobb méretet is, ugyanazokkal az egységekkel. Így a betűméret a képernyő méretéhez igazodik.

## Színek

Itt kezelheted a színpalettát és a webhely globális elemeinek alapértelmezett színét: a háttér-, szöveg-, hivatkozás-, címsor- és gombszíneket.

1. Kattints a **Színek** pontra.
2. A panel tetején a **Színpaletta** látszik: a bekapcsolt téma stílusváltozatának palettája. Alatta az **Elemek** listája, amelyeknek az alapértelmezett színét testre szabhatod.

![A Színek szakasz](./kepek/webhelyszerkeszto-stilusok-szinek.webp)

*A Színek szakasz* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fcolors)

Ha a témádban nincs színpaletta, az **Egyéni színek hozzáadása** gombbal kezdhetsz saját palettát készíteni.

### A téma palettájának színeinek módosítása

1. A **Színek** panelen kattints a **Paletta szerkesztése** sorra. Itt állíthatod be, milyen színek legyenek alapból elérhetők a blokkokhoz. A **Sablon** színeit a téma beállításai használják, az alapértelmezett (**Default**) színek a bejegyzéseidben és oldalaidon használt blokkokban érhetők el.

![A Paletta szerkesztése panel](./kepek/webhelyszerkeszto-stilusok-paletta.webp)

*A Paletta szerkesztése panel* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fcolors%2Fpalette)

2. A **Sablon** vagy az alapértelmezett csoport jobb felső sarkában a hárompontos ikonra kattintva válaszd a színek szerkesztését, hogy az egyes köröket módosítsd. (Az alapértelmezett színek nem jelennek meg, ha a téma kifejezetten kikapcsolja őket.)
3. Megjelenik a paletta összes színe. Kattints arra, amelyiket szerkeszteni szeretnéd.
4. A színválasztóból választhatsz színt, vagy beírhatod a HEX, RGB vagy HSL értéket. A színcsúszka melletti két téglalapra kattintva kimásolhatod a HEX, RGB vagy HSL értéket.
5. A színek kiválasztása után a jobb felső sarokban kattints a **Kész** gombra a mentéshez.
6. A módosítások visszavonásához kattints a hárompontos menüre, és válaszd a színek visszaállítását. A paletta visszatér a téma eredeti stílusváltozatának színeire.

### Egyéni szín hozzáadása a palettához

Az **Egyéni** szakaszban saját színeket is felvehetsz.

1. Kattints a **+** ikonra az **Egyéni** szakasz jobb felső sarkában új szín hozzáadásához.
2. Adj nevet az új színnek.
3. Válassz színt a színválasztóból, vagy írd be a HEX, RGB vagy HSL értéket.
4. A szín jobb oldalán lévő mínusz ikonnal eltávolíthatod a színt az egyéni palettáról.
5. Ha kész vagy, kattints a **Kész** gombra.
6. A jobb felső sarokban lévő hárompontos menüben az összes szín eltávolítását is kérheted.

### Előbeállított színpaletták

A színpaletták előre összeállított színkészletek, amelyek illenek a téma kialakításához. Egységes alapot adnak a színek használatához a blokkokban és a globális elemeken, és segítenek a megjelenés összhangjában és a hozzáférhetőségben. A **Paletta szerkesztése** panelen a **Paletták** szakaszban választhatsz közülük.

### A téma színátmeneteinek módosítása

A **Paletta szerkesztése** panel alapból a **Szín** fülön nyílik. A **Színátmenet** fülre kattintva a színátmeneteket kezelheted: szerkesztheted a téma alapértelmezett színátmeneteit, vagy hozzáadhatsz egyénieket.

1. Az alapértelmezett szakasz jobb felső sarkában a hárompontos menüben válaszd a színátmenetek szerkesztését.
2. Megjelenik az összes színátmenet; kattints arra, amelyiket módosítani akarod. (Az alapértelmezett színátmenetek nem jelennek meg, ha a téma kikapcsolja őket.)
3. Egy csúszka mutatja a színátmenetet alkotó két színpontot. Bármelyikre kattintva a színválasztóval vagy HEX, RGB, HSL értékkel megváltoztathatod.
4. További színpontot a csúszkán a **+** ikonnal adhatsz hozzá, amely akkor jelenik meg, ha fölé viszed az egeret.
5. A **Típus** alatt választhatsz: **Lineáris** (egyenes vonalú átmenet) vagy **Sugaras** (körben terjedő átmenet). A szögét is beállíthatod.
6. Ha kész vagy, kattints a **Kész** gombra.
7. A téma eredeti színeinek visszaállításához kattints a hárompontos menüre, és válaszd a színátmenet visszaállítását.

### Egyéni színátmenet hozzáadása

Az **Egyéni** szakaszban saját színátmenetet is létrehozhatsz.

1. A jobb felső sarokban kattints a **+** ikonra új színátmenet hozzáadásához.
2. A listában kattints a színátmenetre, és állítsd be a két színpontot, adj hozzá továbbiakat, és válaszd ki a típust és a szöget.
3. A színátmenet nevét átírhatod, hogy beszédesebb legyen.
4. A lista mellett a mínusz ikonnal törölhetsz egy egyéni színátmenetet.
5. A **Kész** gombbal mentheted az egyéni színátmeneteket.
6. A hárompontos menüben az összes egyéni színátmenetet is törölheted.

### Az elemek színe

A **Színek** panelen az **Elemek** alatt a webhely háttér-, szöveg-, hivatkozás-, címsor- és gombszínét állíthatod. A helyi felületen a lista ezeket mutatja: **Link**, **Képaláírások**, **Gomb**, **Címsor**.

1. Kattints a módosítani kívánt elemre, és megnyílik annak színbeállítása.
2. A módosítások közben a bal oldali előnézetben látod a webhely változását.
3. Az elem panelének jobb alsó sarkában a **Törlés** hivatkozással törölheted az elemre beállított színeket.

A beállítások elemenként:

- **Háttér**: egyszínű vagy színátmenetes.
- **Szöveg**: az egész webhelyen használt alapértelmezett szövegszín. A színválasztóból választhatsz, vagy HEX, RGB, HSL értéket írhatsz be.
- **Hivatkozás**: az alapértelmezett hivatkozásszín, és a hivatkozás színe egérráhúzáskor.
- **Címsor**: válaszd ki a címsorszintet (H1-től H6-ig), és állítsd be az adott szint alapértelmezett színét az egész webhelyen. A kiválasztott címsorszint háttere is lehet egyszínű vagy színátmenetes. Az **Összes** fülön az összes címsorszintet egyszerre módosítod.
- **Gomb**: a gombok alapértelmezett szövegének és hátterének színe az egész webhelyen.

## Elrendezés

Itt állíthatod be globálisan a webhely fő tartalmi területének szélességét.

![Az Elrendezés szakasz](./kepek/webhelyszerkeszto-stilusok-elrendezes.webp)

*Az Elrendezés szakasz* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Flayout)

A **Tartalom szélesség** és a **Nagy szélességű** értéket px, %, em, rem, vw vagy vh egységben adhatod meg. A tartalom szélessége az az alapértelmezett szélesség, amelyet a blokkok kapnak, ha a blokk eszköztárában az illesztés nincs beállítva. A nagy szélesség a blokkok szélessége, ha az illesztés a nagy szélesség.

A **Tartalom szélesség** vagy a **Nagy szélességű** érték visszaállításához kattints a hárompontos menüre, és válaszd ki az adott méretet: a módosítások visszaállnak.

### Helykitöltés

A **Helykitöltés** a webhely körüli üres hely. Beállíthatod mind a négy oldalra: felül, jobbra, alul és balra.

- Alapból a helykitöltés zárolt: egy érték módosítása mind a négy oldalra érvényes. A lánc ikonra kattintva feloldhatod a zárolást, és oldalanként külön adhatod meg az értéket.
- A helykitöltés px, %, em, rem, vw és vh egységben adható meg.
- Az értéket beírhatod vagy a csúszkával állíthatod.

A Stílusok előre megadott térközértékeket is kínálnak a helykitöltéshez. A téma szerzője alapértékeket állíthat be, és az előbeállított csúszkával egységes térközöket kaphatsz a webhely elemei között. A jobb oldali csúszka ikonnal (a lánc ikon mellett) jelenítheted meg az előbeállított csúszkát. A helykitöltés értékeinek visszaállításához kattints a hárompontos menüre, és válaszd a **Helykitöltés** pontot.

### Blokk távolság

A **Blokk távolság** a blokkok közötti függőleges térköz.

- px, %, em, rem, vw és vh egységben adható meg.
- Az értéket beírhatod vagy a csúszkával állíthatod.

A helykitöltéshez hasonlóan a téma szerzője alapértékeket adhat meg, és az előbeállított csúszkával egységes blokktávolságot érhetsz el. A csúszka ikonra kattintva jeleníted meg az előbeállított csúszkát. A visszaállításhoz kattints a hárompontos menüre, és válaszd a **Blokk távolság** pontot.

## Háttér

A **Háttér** szakaszban feltölthetsz és alkalmazhatsz egy háttérképet a webhelyen.

## Blokkok

A **Blokkok** panelen az összes olyan blokk listáját látod, amelyet az egész webhelyen testre szabhatsz. A keresőmezőben név szerint is kereshetsz blokkot. Egy blokkra kattintva megjelennek az adott blokk beállításai.

![A Blokkok lista a Stílusok panelen](./kepek/webhelyszerkeszto-stilusok-blokkok.webp)

*A Blokkok lista a Stílusok panelen* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fblocks)

A Stílusokban a blokkokon végzett módosítások minden olyan ugyanilyen típusú blokkra érvényesek, amelyen nincs egyéni módosítás. Ha például a kezdőoldalon egy Gomb blokk színét átállítottad, az megmarad, a többi gomb viszont a Stílusok szerinti színt kapja. Ha az összes Gomb blokkot ezzel egyezővé akarod tenni, a gomb blokk beállításaiban kattints a **Speciális → Alkalmazzuk globálisan** lehetőségre, és válaszd ki, mely beállításokat alkalmazza az egész webhelyen.

A módosítások közben élő előnézetet látsz. Minden blokknak megvannak a maga testreszabható beállításai. Például a Kép blokknál a szegélyt, a lekerekítést és a kéttónusú színezést, a Címsor blokknál a belső és külső margókat, a színeket és a betűket állíthatod.

### Blokkok margóbeállításai

A belső margó (helykitöltés) a blokk tartalma és szegélye közötti hely, a külső margó pedig a szegélyen kívüli hely.

A **Blokkok → Elrendezés** alatt a legtöbb szöveg-, média-, bejegyzés- és hozzászólás-blokknál (például Bekezdés, Címsor, Galéria, Lista, Archívumok, Audió, Címkefelhő, Webhely címe, Bejegyzés címe, Bejegyzés kiemelt képe) külön felső, jobb, alsó és bal margót állíthatsz. A szerkezeti blokkoknál (például Gombok, Kód, Borító, Csoport, Oszlopok, Elválasztó, Térköz) csak felső és alsó margó van.

Alapból a margó zárolt: egy érték módosítása minden oldalra érvényes. A lánc ikonnal feloldhatod a zárolást, és oldalanként külön állíthatod. A csúszka ikonnal váltasz az előbeállított csúszka és a beviteli mező között. Az érték px, %, em, rem, vw és vh egységben adható meg. A visszaállításhoz kattints a hárompontos menüre, és válaszd a **Margó** pontot.

### Szegély és lekerekítés

A **Blokkok → Elrendezés** alatt szegély- és lekerekítésbeállítás van például a Kép, a Kód, az Oszlopok, a Csoport, a Keresés, az Avatar és a Bejegyzés kiemelt képe blokknál.

A **Szegély** beállításával szegélyt adhatsz a blokknak. A színt a színválasztóból választhatod, a szegély vastagságát px, %, em, rem, vw vagy vh egységben beírhatod vagy csúszkával állíthatod. Alapból a szegély vastagsága zárolt: egy érték módosítása minden oldalra érvényes. A lánc ikonra kattintva oldalanként külön adhatod meg.

A **Lekerekítés** a blokk külső szegélyének sarkait kerekíti. Ez is megadható px, %, em, rem, vw vagy vh egységben, beírással vagy csúszkával. Alapból zárolt: egy módosítás mind a négy sarokra érvényes; a lánc ikonnal feloldva külön állíthatod a bal felső, jobb felső, bal alsó és jobb alsó sarkot.

### Vízszintes blokktávolság

A **Blokkok → Elrendezés** alatt az Oszlopok és a közösségi ikonokat tartalmazó blokknak van vízszintes blokktávolság-beállítása. Alapból zárolt: egy érték a vízszintes és a függőleges távolságra is érvényes. A lánc ikonnal feloldva a függőleges és a vízszintes távolságot külön adhatod meg.

### Blokkváltozatok szerkesztése

Egyes blokkokhoz beépített változatok tartoznak, ugyanannak a blokknak különböző kialakításai. Ezeket külön is testre szabhatod.

### Dobozárnyék a Gomb blokkhoz

A Gomb blokknál négy árnyék-előbeállítás közül választhatsz: természetes, éles, kemény és lágy.

## A webhely mottójának stílusa

A Stílusokban a webhely mottóját (a felületen **Honlap elnevezése**) be- és kikapcsolhatod, és megváltoztathatod a betűtípusát, illetve a színét. Ez egy választható beállítás, használd, ha szükséges.

## Változtatások előnézete a Stílusok könyvével

Amikor megváltoztatod a webhely stílusait, akár más stílusváltozatra váltasz, akár egy blokkot módosítasz, fontos látnod a hatását az egész webhelyen. A **Stíluskönyv** nézetben egyszerre látod a webhely összes blokkját; ezt bármikor be- és kikapcsolhatod. A blokkok külön változatait is mutatja, amelyeket aztán testre szabhatsz: ezek akkor láthatók, ha a Stílusok fő nézetében bekapcsolod a Stíluskönyvet.

A Stílusok panel tetején a szem ikonnal kapcsolod be.

![A Stíluskönyv nézet](./kepek/webhelyszerkeszto-stilusok-stilusok-konyve.webp)

*A Stíluskönyv nézet* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&preview=stylebook)

A képen a szemikon aktív, és a jobb oldalon a színpaletta és a betűtípus mintái látszanak.

## Egyéni CSS

A Webhelyszerkesztő a testreszabást minden szinten lehetővé teszi, de egyes dolgokra még nincs kész beállítás. Érdemes először a Stílusok lehetőségeit használni, és csak azután CSS-t írni. A CSS-módosításokat a téma frissítése nem írja felül, de témaváltáskor törlődnek.

### Az egész webhelyre érvényes CSS

A Stílusokban beépített egyéni CSS-szerkesztő van. Kattints a hárompontos menüre, és válaszd a **További CSS** pontot. Az itt megadott CSS az egész webhelyen érvényes.

![A Stílusok panel hárompontos menüje](./kepek/webhelyszerkeszto-stilusok-menu.webp)

*A Stílusok panel hárompontos menüje* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles)

A menüben a **További CSS** és a **Stílusok visszaállítása** pont van.

![A További CSS szerkesztő](./kepek/webhelyszerkeszto-stilusok-css.webp)

*A További CSS szerkesztő* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fcss)

### Blokkonkénti CSS

Ha a **Stílusok → Blokkok** alatt egyes blokkokat nyitsz meg, ott találsz egy **További blokk CSS** szakaszt. Az itt megadott CSS csak az adott blokktípusra érvényes az egész webhelyen.

Mivel a CSS egy meghatározott blokktípushoz tartozik, ne írj szelektort és kapcsos zárójelet, csak `tulajdonság: érték` formátumban add meg. Például, ha az Idézet blokk idézetét dőlten akarod megjeleníteni, az Idézet blokk CSS-szerkesztőjébe ezt írd:

```css
font-style: italic;
```

A WordPress automatikusan hozzáteszi a blokk szelektorát. A weboldalon ez így jelenik meg:

```css
.wp-block-quote {
  font-style: italic;
}
```

CSS-kombinátorokkal (szóköz, `<`), álosztályokkal és álelemekkel bonyolultabb hatásokat is készíthetsz, például egérráhúzásos állapotot. Beágyazott elemre az `&` jellel is hivatkozhatsz, mint a SASS-ban és a LESS-ben.

Például a Gomb blokk CSS-szerkesztőjébe ez kerülhet, hogy egérráhúzáskor megváltozzon a háttér:

```css
:hover {
  background: #bb00bb;
}
```

Ebben az esetben a kapcsos zárójelet is ki kell írnod. A weboldalon ebből ez lesz:

```css
.wp-block-button .wp-block-button__link:hover {
  background: #bb00bb;
}
```

## A módosítások visszaállítása

Ha vissza akarsz térni a téma módosítás előtti stílusaihoz, kattints a Stílusok panel jobb felső sarkában a hárompontos menüre, és válaszd a **Stílusok visszaállítása** pontot.