# Használat

> Hol találod a blokkok stílusbeállításait, és hogyan működnek a közös vezérlők.

## Hol találod a stílusbeállításokat

A beállítások a blokk oldalsávjában vannak. Ha az oldalsáv nem látszik, a szerkesztő jobb felső sarkában kapcsold be az oldalsáv ikonjával.

1. Jelöld ki a blokkot a szerkesztőben.
2. Az oldalsávban válaszd a **Blokk** lapot.
3. A blokk neve alatt két ikon van: a fogaskerék a tartalmi beállításokat, a fél kör a stílusbeállításokat nyitja (**Stíluslapok**).
4. A fél kör ikonra kattintva a blokk stílusszakaszai jelennek meg. A szakaszok neve blokkonként más.

Az űrlapmezők (JetFormBuilder) szakaszai például: **Text Input**, **Content**, **Label**. A Range szűrő szakaszai: **Diavetítés**, **Értékek**, **Beviteli mezők**, **Gomb**. A Listing Grid blokké: **Oszlopok**, **Betöltésjelző**, **Nincs találati üzenet**.

![A JetFormBuilder szövegmező blokkjának Stíluslapok füle](./kepek/urlap-stilus-ful.webp)

*A JetFormBuilder szövegmező blokkjának Stíluslapok füle* (https://minta-bolt.hu/wp-admin/post.php?post=4&action=edit)

A képen az űrlap szövegmezőjének stílusszakaszai láthatók: a **Text Input** szakaszban a beviteli mező, a **Content** és a **Label** szakaszban a mező burkolója és a felirata állítható.

![A Listing Grid blokk Stíluslapok füle](./kepek/listaracs-stilus.webp)

*A Listing Grid blokk Stíluslapok füle* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=edit)

A Listing Grid blokknál a vízszintes és függőleges hézag, a betöltésjelző és a „nincs találat” üzenet kinézete állítható.

## Közös vezérlők

A legtöbb stílusbeállítás ugyanazokat a vezérlőket használja.

### Csúszka és számmező

A távolságokat, méreteket a csúszka húzásával vagy a mellette lévő mezőbe írt számmal adhatod meg. Az alapértelmezett mértékegység a pixel (**px**). Ahol a mezőn mértékegység-választó van, átválthatsz másikra is (például **em**, **rem**, **%**, **vw**, **vh**).

### Színválasztó

A színmezők kis négyzetként látszanak, a kijelöletlen állapotot áthúzott kör jelzi. A mezőre kattintva egy ablak nyílik a színválasztóval.

![A Szöveg színe mező színválasztó ablaka](./kepek/szinvalaszto.webp)

*A Szöveg színe mező színválasztó ablaka* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=edit)

Az ablakban a színt a színmezőből és a színcsúszkákból is kiválaszthatod, vagy beírhatod a kódját a **Színkód hexában** mezőbe. A **Hex** feliratra kattintva a színkód formátuma **RGB** vagy **HSL** is lehet. Az ablak alján az alapszínek sora van. A színpaletta kezeléséhez az ablak alján a hivatkozásra kattints.

Egy színt a mező melletti nyíl ikonnal (visszaállítás) vagy a beállítás **Visszaállít** gombjával vehetsz vissza az alapértékre.

Egyes szakaszokban fülek is vannak, például **Normál** és **Rámutatás**: a **Rámutatás** fülön azt a színt adod meg, amelyre az elem akkor vált, ha az egérmutatót fölé viszed.

### Térközök: Padding és Margó

A **PADDING** a tartalom és a blokk széle közötti hely, a **MARGÓ** a blokk széle és a környező elemek közötti hely. A nagyobb padding nagyobbra teszi a látható hátterű elemet is.

Alapból az összes oldal össze van kapcsolva, ezért egy érték mind a négy oldalra érvényes. Ha oldalanként eltérő értéket szeretnél:

1. Kattints a beállítás jobb szélén lévő lánc ikonra (oldalak szétkapcsolása).
2. Négy külön mező jelenik meg. A mező melletti kis négyzet mutatja, melyik oldalt állítod.
3. Írd be az oldalankénti értékeket.

A **Visszaállít** gombbal az érték az alapértelmezettre áll vissza.

![A Padding beállítás szétkapcsolt oldalakkal](./kepek/padding-szetkapcsolva.webp)

*A Padding beállítás szétkapcsolt oldalakkal* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=edit)

A képen a **PADDING** négy külön mezője látszik, miután szétkapcsoltad az oldalakat. A **SZEGÉLY** vastagságát és a **RÁDIUSZ** értékét ugyanígy lehet oldalanként beállítani.

### Szegély és rádiusz

A **SZEGÉLY** sorban a bal oldali mezővel a szegély színét és stílusát választod ki, mellette a vastagságot adod meg csúszkával vagy számmal. A **RÁDIUSZ** a sarkok lekerekítése: minél nagyobb az érték, annál kerekebb az elem.

### Tipográfia

A **TYPOGRAPHY** mellett az **Default** gombra kattintva a betűbeállítások ablaka nyílik meg.

![A tipográfia beállításai](./kepek/tipografia.webp)

*A tipográfia beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=edit)

Az ablak mezői a [Beállítások](https://hub.hellowp.io/hu/plugins/jet-style-manager/beallitasok/#tipográfia) fejezetben vannak leírva.

## Példa: egy szűrőgomb átszínezése

1. Jelöld ki a szűrőblokkot, és nyisd meg a **Stíluslapok** fület.
2. Nyisd ki a **Gomb** szakaszt.
3. A **Normál** fülön állítsd be a **SZÖVEG SZÍNE** és a **HÁTTÉRSZÍN** értékét.
4. A **Rámutatás** fülön add meg a színeket, amelyekre az egér fölé vitelekor váltson.
5. Állítsd be a **RÁDIUSZ**t a lekerekítéshez, majd mentsd az oldalt.

![A Gomb szakasz beállításai a Range szűrőblokkon](./kepek/filter-stilus-gomb.webp)

*A Gomb szakasz beállításai a Range szűrőblokkon* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=edit)

A **Gomb** szakaszban a betűtípus, a két állapot színei, a szegély, a rádiusz, a padding, a margó és az igazítás állítható.