# Gombok blokk

> Egy vagy több gomb a tartalomban: hozzáadás, eszköztár, elrendezés, egyes gombok stílusa és állapotai.

A **Gombok** blokk egy vagy több gombot tesz a bejegyzésbe vagy oldalra. A blokk egy külső keret, a benne lévő gombok pedig önálló **Gomb** blokkok, mindegyiknek saját szöveggel, hivatkozással és stílussal.

## A blokk hozzáadása

Kattints a **+** (blokkbeszúró) gombra, és válaszd a **Gombok** blokkot. Vagy írd be egy üres Bekezdés blokkba, hogy `/gombok` (vagy `/buttons`), és nyomj entert.

A blokk egy gombbal indul, ennek megadhatod a szövegét, a hivatkozását és a stílusát. Újabb gombot a Gombok blokkon belül a **+** gombbal veszel fel; az új gomb az előzőhöz hasonló stílusú lesz.

![A Gombok blokk kijelölve: eszköztár és a Lista nézet fül](./kepek/blokkok-gombok-szerkeszto.webp)

*A Gombok blokk kijelölve: eszköztár és a Lista nézet fül* (https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit)

A képen az eszköztár és az oldalsáv három füle látszik: a **Lista nézet** a két gombbal (**Jelentkezem**, **Részletek**) és a hozzáadás gombbal, a **Beállítások** és a **Stílusok**.

## A teljes blokk eszköztára

Ha a külső blokk van kijelölve, az eszköztár ezeket kínálja:

- **Átalakítás:** Csoport, Részletek vagy Oszlopok blokká.
- **Húzás** és **Mozgatás fel / le:** áthelyezés a tartalomban.
- **Elemek igazításának módosítása:** a gombok balra, középre vagy jobbra igazítása, illetve az elemek közötti tér elosztása: ilyenkor a gombok egyenlő távolsággal szétosztva töltik ki a sort.
- **Függőleges igazítás módosítása:** felülre, középre, alulra igazítás, vagy **Kitöltés** (a gombok kitöltik a sor magasságát).
- **Igazítás:** alapértelmezett, széles vagy teljes szélesség, ha a téma támogatja.
- **Beállítások** (három pont): másolás, kettőzés, törlés.

## Egy gomb eszköztára

![Egy Gomb blokk kijelölve: eszköztár és stílusok](./kepek/blokkok-gomb-szerkeszto.webp)

*Egy Gomb blokk kijelölve: eszköztár és stílusok* (https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit)

A képen az első gomb van kijelölve; az oldalsávban a **Stíluslapok** (**Kitöltés** és **Körvonal**), a **Betűkészlet**, a **Háttér** és a **Méretek** panel látszik.

Egyetlen gomb kijelölésekor az eszköztár a következőket tartalmazza:

- **Blokkstílus módosítása:** az adott gomb stílusa (például kitöltött vagy körvonalas).
- **Húzás** és **Mozgatás:** a gomb sorrendjének módosítása a blokkon belül.
- **Igazítás:** a gombok igazítása a blokkban; a szöveg igazítása a gombon belül.
- **Hivatkozás:** hivatkozást ad a gombhoz, beállítható, hogy új lapon nyíljon meg.
- **Félkövér** és **Dőlt:** a gomb szövegének formázása; Ctrl+B és Ctrl+I (Macen Cmd+B és Cmd+I).
- **További szövegformázás:** kiemelés, beágyazott kód, áthúzás és más formázások.
- **Beállítások** (három pont): másolás, kettőzés és törlés.

## A teljes blokk beállításai

Az oldalsáv három füle:

- **Lista nézet:** a gombok sorrendjét itt módosíthatod húzással.
- **Beállítások:** az **Elrendezés** a gombok igazítását és a tájolást adja meg (vízszintes vagy függőleges). A sortörést engedélyező kapcsolót kikapcsolva a gombok kis kijelzőn, például mobilon is egy vízszintes sorban maradnak. A **Haladó** részben HTML-horgony, további CSS-osztályok és további CSS adható meg.
- **Stílusok:** a háttérszín, a betűkészlet (betűtípus, méret, megjelenés, sormagasság, kis- és nagybetű, betűköz, díszítés), a méretek (belső és külső margó) és a keret (vastagság, lekerekítés) beállításai a teljes blokkra.

![A Gombok blokk Beállítások füle a Haladó panellel](./kepek/blokkok-gombok-beallitasok.webp)

*A Gombok blokk Beállítások füle a Haladó panellel* (https://minta-bolt.hu/wp-admin/post.php?post=20&action=edit)

A képen a **Beállítások** fül **Haladó** panelje látszik a **HTML horgony (anchor)**, a **További CSS osztály(ok)** és a **További CSS** mezővel.

## Egy gomb beállításai

Egy gomb kijelölésekor az oldalsáv a gomb saját beállításait mutatja:

- **Stíluslapok:** a gomb stílusa. A témádtól függ, mik érhetők el; ha egy stílusra viszed az egeret, előnézetet látsz. Ezen a témán a **Kitöltés** és a **Körvonal** választható.
- **Betűkészlet:** betűtípus, méret, megjelenés, sormagasság, kis- és nagybetű, betűköz, díszítés.
- **Háttér** és szín: a szöveg és a háttér színe, illetve háttérszínátmenet.
- **Méretek:** belső és külső margó, valamint a gomb szélessége.
- **Keret és árnyék:** a keret vastagsága és lekerekítése, illetve árnyék.
- **Haladó:** HTML-horgony, további CSS-osztályok, további CSS, HTML-elem és **Hivatkozás kapcsolata**. Ez utóbbival a hivatkozásra `rel` tulajdonságot adhatsz (például `nofollow`, `noopener` vagy `noreferrer`), amely a böngészőnek és a keresőknek jelzi, milyen kapcsolatban áll az oldalad a hivatkozott oldallal.

### Állapotok: lebegtetés, fókusz, aktív

Egy gombnak saját lebegtetett (hover), fókuszált és aktív kinézetet adhatsz, anélkül hogy a többi gombot módosítanád. Ha egy gomb ki van jelölve, az oldalsáv fejlécében megjelenik az állapotválasztó. Az állapotok:

- **Lebegtetés:** a gomb kinézete, amikor a látogató az egérmutatót fölé viszi.
- **Fókusz:** a gomb kinézete, amikor fókuszba kerül, például billentyűzettel lépked rá a látogató.
- **Aktív:** a gomb kinézete a megnyomás alatt.

Egy állapot beállítása:

1. Jelöld ki a gombot.
2. Az oldalsáv fejlécében nyisd le az állapotválasztót, és válaszd ki az állapotot, például a lebegtetést.
3. Állítsd be az állapot stílusát: szín, háttér, betűkészlet, keret és méretek állíthatók állapotonként.
4. Válts vissza az alapállapotra vagy egy másik állapotra a szerkesztés folytatásához.

A beállított stílus csak az adott állapotra és csak arra a gombra érvényes. Egy állapot visszaállítása nem érinti a gomb többi állapotát. Az állapot megjelenítését a szerkesztővászonon külön kapcsoló vezérli, amely alapból be van kapcsolva: ilyenkor a szerkesztő élőben mutatja a kiválasztott állapot kinézetét, így nem kell magadnak a gombra vinned az egeret. Kikapcsolva a gomb alapállapotát látod szerkesztés közben.