Bricks Builder Heading

A Bricks Builder Heading elem egyetlen dolgot csinál: kirak egy önálló H1–H6 taget a HTML-be. Ennyi a teljes trükkje, és pontosan ez okozza a legtöbb galibát is. Sokan úgy nyúlnak hozzá, mintha egy nagyobb betűs szövegdoboz lenne: kell egy hangsúlyosabb sor, hát rábillentik a H1-et, mert az „a legnagyobb”. Csakhogy a heading szint nem a méretről szól, hanem arról, hogy a böngésző, a képernyőolvasó és a Google is ebből olvassa ki, mi az oldal gerince és mi csak alcím rajta.

A gyakorlatban ez két hibát szül folyamatosan. Az egyik, hogy egy oldalon több H1 landol: a sablon már generál egyet a Bricks Builder Heading taggel, aztán valaki berak még egy saját H1-et is, mert nagyobb betű kellett. A másik, hogy a szintek ugranak, valaki H2 után egyből H4-re vált, mert vizuálisan úgy nézett ki jobban. Egyik sem dobja ki az oldalt a Google-ből egy csapásra, de mindkettő elmossa azt a világos vázat, amiből egy kereső vagy egy AI-összefoglaló megérti, miről szól ténylegesen az oldal. A Section a vizuális blokkokat választja el, a Heading pedig a tartalmi vázat rajzolja meg ugyanazon az oldalon.

E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Heading”, és a kívánt szülőbe, egy Container-be vagy Block-ba húzod. Az egyetlen dolog, amire tényleg figyelni kell, a Content fülön található Tag legördülő: ez dönti el, H1, H2 vagy H6 lesz-e a végeredmény. A vizuális méretet soha ne ezzel állítsd be, arra ott a Typography panel Font Size mezője. Ha a sablonod már elhelyez egy H1-et a Bricks Builder Heading taggel, a tartalmi részen minden újabb Heading maradjon H2 vagy lejjebb. Ez az egyetlen szabály, amit tényleg érdemes fejben tartani.

Tag. A Content fülön található Tag mező adja a szemantikai szintet, H1-től H6-ig. Ez a legfontosabb beállítás az egész elemen, és kizárólag a tartalmi hierarchia dönti el, semmi köze a betűmérethez. Egy H3 nyugodtan lehet nagyobb betűs, mint egy H2, ha a tartalmi logika azt kívánja.

Tipográfia. A Style → Typography panelen állítod a betűtípust, méretet, vastagságot, sortávolságot, betűközt, színt és a szövegtranszformációt. Reszponzív méretnél két út van: vagy nézetenként adsz meg külön Font Size értéket (desktop, tablet, mobil), vagy egyetlen clamp() értékkel oldod meg, például clamp(28px, 4vw, 48px), és akkor minden köztes szélességen folyamatosan skálázódik. Ha a site-on globálisan egységes címstílust akarsz, azt a Bricks → Theme Styles → Typography alatt érdemes beállítani, és csak indokolt esetben felülírni elem szinten.

Link. Ha a heading maga is kattintható kell legyen, például egy kategóriacím, ami tovább visz az archívumra, a Content fülön simán megadható neki egy URL, és a teljes elem linkké válik. Így nem kell külön Text Link elemet tenni mellé.

CSS ID és horgonylink. A Style fülön adott egyedi CSS ID-vel az adott heading oldalon belüli ugróponttá válik: a menüből vagy egy tartalomjegyzékből a #azonosito hivatkozással pontosan oda görget az oldal. Ugyanez az ID arra is jó, hogy célzottan stílust adj egyetlen headingnek anélkül, hogy a globális osztályt piszkálnád.

Dinamikus tartalom. A Heading az egyik legjobb hely a dynamic tageknek: Bricks Builder Heading, 2026.06.17., ACF- vagy Pods-mezők mind közvetlenül beilleszthetők a szövegmezőbe. Egy feltétel van, hogy működjenek: sablon- vagy Query Loop-kontextusban kell lenniük, mert csak ott van mihez kapcsolódniuk.

Ha valaki a Rich Text elemben ír egy bekezdést, aztán a szerkesztőben megjelöli félkövérnek és nagyobb betűméretűnek, az attól még nem lesz cím, csak nagybetűs bekezdés marad. Sem a Google, sem egy vak felhasználó képernyőolvasója nem fogja címként kezelni, mert a HTML-ben ott továbbra is egy áll. A Heading elem ezzel szemben mindig valódi, önálló H-taget ad ki, elszigetelve minden mástól.

Az ökölszabály innentől egyszerű. Ha a szöveg egy szekció vagy alszekció címe, Heading kell neki. Ha bekezdés, felsorolás vagy vegyes, formázott tartalom, az a Rich Text dolga, rövid, egyszerű bekezdéshez pedig ott a Basic Text. Fordítva is igaz: a Heading elembe ne írj bekezdésnyi szöveget csak azért, mert a stílusa tetszik, mert a keresők egy háromsoros H2-t nem címként, hanem zajként fognak olvasni.

A leggyakoribb eset, amivel találkozom, hogy valaki egy H3-at szeretne vizuálisan nagyobbnak, mint egy H2-t. A megoldás nem az, hogy feltornázza a taget H2-re vagy H1-re: a szemantikai szintet a tartalmi hierarchia adja, a méretet meg a Typography panel. A kettő teljesen független egymástól.

Ha egy dynamic tag, mondjuk a Bricks Builder Heading, nem old fel, csak a tag neve látszik nyersen, annak szinte mindig az az oka, hogy az elem nem sablon- vagy Query Loop-kontextusban van, hanem egy sima oldalon. Dynamic tag csak ott működik, ahol van mihez kapcsolódnia.

Ha a horgonylink nem ugrik a helyére, két dolgot nézz meg: tényleg CSS ID van-e a headingen (nem osztály), és a hivatkozásban szerepel-e a kettőskereszt. Sticky fejlécnél ráadásul a heading gyakran becsúszik a fejléc alá, erre egy scroll-margin-top érték a megoldás a Custom CSS fülön.

Mielőtt élesítesz egy oldalt, érdemes végigfutni a Chrome DevTools Elements fülén, Ctrl+F-fel rákeresve a h1 tagre: két perc, és azonnal látszik, ha valahol duplán szerepel, vagy ha épp egy sincs. Ugyanígy fusd át, hogy a szintek nem ugranak-e, a H1 tartalmazza-e az oldal fő kulcsszavát, nem heading-elemben van-e egy bekezdésnyi szöveg, és minden hivatkozott horgonyhoz tartozik-e valódi CSS ID. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.

Vörös László WordPress fejlesztő és Bricks Builder szakértő. Több mint 20 éve webfejlesztőként, 18 éve WordPress fejlesztőként dolgozom. Specialitásom a Bricks Builder, SEO és a biztonságos weboldalak fejlesztése.