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).

Menj a Megjelenés → Szerkesztő oldalra.
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 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.

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.
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.
A bal nyíllal térsz vissza a Stílusok panelre.

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.

Kattints a Betűkészlet pontra.
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 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.

Kattints a Színek pontra.
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.

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

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 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.)
Megjelenik a paletta összes színe. Kattints arra, amelyiket szerkeszteni szeretnéd.
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.
A színek kiválasztása után a jobb felső sarokban kattints a Kész gombra a mentéshez.
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.

Kattints a + ikonra az Egyéni szakasz jobb felső sarkában új szín hozzáadásához.
Adj nevet az új színnek.
Válassz színt a színválasztóból, vagy írd be a HEX, RGB vagy HSL értéket.
A szín jobb oldalán lévő mínusz ikonnal eltávolíthatod a színt az egyéni palettáról.
Ha kész vagy, kattints a Kész gombra.
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.

Az alapértelmezett szakasz jobb felső sarkában a hárompontos menüben válaszd a színátmenetek szerkesztését.
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.)
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.
További színpontot a csúszkán a + ikonnal adhatsz hozzá, amely akkor jelenik meg, ha fölé viszed az egeret.
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.
Ha kész vagy, kattints a Kész gombra.
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.

A jobb felső sarokban kattints a + ikonra új színátmenet hozzáadásához.
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.
A színátmenet nevét átírhatod, hogy beszédesebb legyen.
A lista mellett a mínusz ikonnal törölhetsz egy egyéni színátmenetet.
A Kész gombbal mentheted az egyéni színátmeneteket.
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.

Kattints a módosítani kívánt elemre, és megnyílik annak színbeállítása.
A módosítások közben a bal oldali előnézetben látod a webhely változását.
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.

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 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 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 menüben a További CSS és a Stílusok visszaállítása pont van.

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:

font-style: italic;

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

.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:

:hover {
  background: #bb00bb;
}

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

.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.

Készült: 2026. november 2.