Gombok blokk

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.

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

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.

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.