Mi az a Rich Text elem a Bricks Builderben
A Bricks Builder Rich Text elem mögött egy teljes WYSIWYG szerkesztő áll, hasonló ahhoz, amit a WordPress klasszikus szerkesztőjéből ismersz. Ez az egyetlen szövegelem a builderben, ami egyszerre több bekezdést, felsorolást, számozott listát, idézetet, táblázatot, beágyazott képet, linket és belső címsort is kezel egyetlen elemen belül. Ahol összefüggő, formázott szövegtörzs van – egy blogbejegyzés teste, egy ÁSZF vagy adatvédelmi tájékoztató, egy hosszabb szolgáltatásleírás – , ott ez a helyes választás.
A többi szövegelemtől a kimenete különbözteti meg. A Basic Text egyetlen, általad választott taget ír ki, a Heading egyetlen H1–H6-ot, a Rich Text viszont egy wrapperbe teszi mindazt a HTML-t, amit a szerkesztőben összeraktál. Ez egyszerre az ereje és a buktatója: a szerkesztő szabadsága miatt ide csúszik be a legtöbb felesleges markup és a legtöbb elrontott címsor-hierarchia.
Rich Text, Basic Text vagy Heading. Melyik mire való?
| Rich Text | Basic Text | Heading | |
|---|---|---|---|
| Mire való | Formázott szövegtörzs | Rövid, egybefüggő szöveg | Címsor |
| Szerkesztő | Teljes WYSIWYG | Szövegmező + inline eszköztár | Egyszerű szövegmező |
| Kimenet | div wrapper + a szerkesztő markupja | Egyetlen tag | Egyetlen H-tag |
| Választható HTML tag | Nincs | div, p, span, figcaption, address, figure, egyedi | h1–h6, egyedi |
| Bekezdés, lista, kép, táblázat | Igen | Nem | Nem |
| Type: Hero / Lead | Igen | Nem | Igen |
| Szólimit és Read more | Igen | Igen | Nem |
| Link | Szövegen belül, tetszőleges helyen | A teljes elem linkké válik | A teljes elem linkké válik |
A választás egyetlen kérdésen múlik: hány darabból áll a szöveg. Ha egyetlen mondat vagy egy rövid felirat, a Basic Text a takarékosabb, mert pontosan egy taget ír ki wrapper nélkül. Ha cím, akkor Heading, mert csak az ad valódi H-taget önmagában. Ha viszont több bekezdés, felsorolás, kiemelés és link kerül egymás mellé, akkor Rich Text, mert öt Basic Text elem egymás alá pakolása helyett itt egyben szerkeszthető és karbantartható a szöveg. Egy dolgot érdemes fejben tartani: a Rich Textbe írt címsor is valódi H-taget ad ki, tehát ugyanúgy beleszámít az oldal címsor-hierarchiájába, mint egy külön Heading elem.
Hozzáadása
E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „rich”, és a kívánt szülőbe, egy Container-be vagy Block-ba húzod. Egy minta bekezdéssel jön létre, amit a vásznon duplán kattintva közvetlenül szerkeszthetsz, formázósorral együtt, vagy a bal oldali panel szerkesztőmezőjében – a kettő ugyanazt a tartalmat mutatja. Az első dolgod mindig a minta szöveg törlése legyen: kész oldalakon meglepően gyakran marad bent egy „Here goes your text …” kezdetű bekezdés. A Ctrl+Shift+Z az utolsó módosítást vonja vissza.
Amit be tudsz állítani hozzá
Tartalom. A Content fül szerkesztőmezőjébe kerül a szöveg, és minden működik benne, amit egy WYSIWYG-tól elvársz: bekezdés, félkövér, dőlt, aláhúzott, áthúzott, link, felsorolás és számozott lista, idézet, táblázat, igazítás, kép és belső címsorok. A kimenetet a tartalom szerkezete adja, tehát itt nem te választasz taget, hanem a szerkesztő markupja kerül ki egy
wrapperbe.
Type. Két előre definiált szövegtípus választható: Hero és Lead. A Lead a bevezető bekezdéshez való, a Hero a hangsúlyos, nyitó szövegblokkhoz. A Bricks ilyenkor egy bricks-type-lead vagy bricks-type-hero osztályt tesz az elemre, amihez a téma stílusa tartozik. Ha egyiket sem választod, a szöveg a normál törzsstílust kapja.
Style. A Bricks beépített színstílusai közül választ (bricks-color-… osztályként kerül az elemre). Egységes felületnél ez kényelmesebb, mint elemenként színt állítani, mert a Theme Styles változásait automatikusan követi.
Szólimit és Read more. A Words limit mezőben megadott szónál a Bricks levágja a szöveget, a Read more mezőbe írt kiegészítést pedig a végére teszi. A vágás a HTML tagekre is figyel, tehát nem hagy nyitva félbevágott bekezdést vagy listát. Elsősorban Query Loopban hasznos, ahol a kivonatok hossza egységes kell legyen.
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 igazítást, nézetenként külön is. Egy fontos részlet: a Rich Textnél a tipográfia a szövegben lévő linkekre is vonatkozik, tehát az itt megadott betűtípus és -méret felülírja a téma link-stílusát. A belső bekezdések, címsorok és listák eltérő stílusát viszont ne elemenként kezeld: azt a Bricks → Theme Styles → Typography alatt érdemes globálisan beállítani, mert az elem maga egyetlen tipográfia-csoportot ad a teljes tartalomra.
Háttér, keret, CSS ID. A háttér és a keret az elem gyökerére kerül, tehát egy Rich Text önmagában is lehet kiemelt, dobozszerű szövegblokk, például egy tipp vagy egy jogi megjegyzés. A Style fülön adott egyedi CSS class vagy ID a teljes wrapperre vonatkozik, amivel egy adott szövegblokk célzottan stílusozható. Nagyobb, összetettebb dobozhoz viszont továbbra is a Block a helyes elem, a Rich Text pedig annak a tartalma.
Dinamikus tartalom és a beillesztés csapdái
A Rich Text a legjobb hely a formázott dinamikus tartalomnak. A szerkesztő eszköztárában a {} ikonnal szúrhatod be a dynamic tageket a kurzor pozíciójába, és a , , valamint az ACF vagy Pods WYSIWYG mezők a saját HTML-jükkel együtt jelennek meg. A leggyakoribb felhasználás a Single Post sablon, ahol egyetlen Rich Text elem tartalommal kiteszi minden bejegyzés teljes törzsét, címsorokkal és listákkal együtt, anélkül hogy a sablont bejegyzésenként piszkálnád. Ehhez viszont post-kontextus kell: sablonban vagy Query Loopban, mert egy sima, statikus oldalon a tag nem old fel. A Bricks a szerkesztő tartalmát a WordPress tartalomszűrőin átengedi, ezért a shortcode-ok lefutnak benne, és a külön sorba tett videó- vagy közösségimédia-URL-ek automatikusan beágyazódnak.
A másik oldalról pont a szabadsága a veszélye. Ha Wordből vagy Google Docsból másolsz be szöveget, a beillesztéssel együtt jön egy csomó felesleges markup is: inline style attribútumok, span-ek, rögzített betűméretek és -színek, amiktől a szöveg kilóg az oldal tipográfiájából. A megoldás egyszerű, csak szokássá kell tenni: Ctrl+Shift+V (Cmd+Shift+V) a formázás nélküli beillesztéshez, és a formázást már a Bricksben add hozzá. Ha a kár megtörtént, a kijelölt szövegen a szerkesztő „Clear formatting” gombja, vagy a forráskód-nézet takarítja ki a legbiztosabban.
Amivel a leggyakrabban bajlódnak
A leggyakoribb panasz, hogy a bemásolt szöveg nem veszi fel az oldal stílusát: más a betűtípus, fix a betűméret, néhol színes marad. Ez szinte mindig a Wordből vagy Google Docsból hozott inline stílus, ami felülírja a globális tipográfiát. Illeszd be újra formázás nélkül, használd a „Clear formatting” gombot, vagy takarítsd ki a markupot a forráskód-nézetben.
Ha az oldalon több H1 vagy összekeveredett címsor-hierarchia jelenik meg, gyakran a Rich Text az ok: a szerkesztő szabadon engedi bármelyik szint beszúrását, és egy hosszabb szövegblokkban ez könnyen elkerüli a figyelmet. A tartalmi részen belül a Rich Text címsorai is maradjanak H2 vagy lejjebb, és ne ugorjanak szintet. Chrome DevTools → Elements → Ctrl+F, rákeresel a h1 tagre, és két perc alatt látszik, hol csúszott el.
Ha a linkek nem úgy néznek ki, mint a site többi részén, annak az az oka, hogy a Rich Text tipográfiája a szövegen belüli linkekre is vonatkozik. Ha ez nem szándékos, vedd ki a felesleges tipográfia-beállítást az elemről, és hagyd, hogy a Theme Styles döntsön.
Ha a bekezdések és címsorok között nincs megfelelő térköz, az a belső tagek margóján múlik. Ezt ne elemenként pótold: a Bricks → Theme Styles → Typography alatt állítsd be egyszer a bekezdés és a címsorok alsó margóját, és onnantól minden Rich Text egyformán viselkedik.
Ha a dynamic tag nem old fel, csak nyersen látszik a neve, az elem nincs post-kontextusban. Nézd meg, hogy sablonon (Single Post template) vagy Query Loopban van-e, mert statikus oldalon a nem tud mihez kapcsolódni.
Mielőtt élesbe teszed az oldalt, érdemes végigfutni ezeken: kitörölted-e a minta szöveget, nincs-e beragadt inline stílus a bemásolt tartalomban, jó szinten vannak-e a belső címsorok és nem ugranak-e, nem maradt-e felejtett szólimit, a linkek a téma stílusát követik-e, és tényleg Rich Text kell-e oda, ahol egyetlen mondat vagy egyetlen cím áll. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.
Gyakori kérdések (FAQ)
Mikor használjak Rich Textet Basic Text helyett?
Ha a szöveg több darabból áll: több bekezdés, felsorolás, táblázat vagy beszúrt kép. Egyetlen mondathoz vagy rövid felirathoz a Basic Text a takarékosabb, mert pontosan egy taget ír ki, míg a Rich Text egy
<div>wrappert és a szerkesztő teljes markupját hozza magával.Beilleszthetek shortcode-ot a Rich Textbe?
Igen. A Bricks a szerkesztő tartalmát a WordPress tartalomszűrőin engedi át, így a shortcode-ok lefutnak, és a külön sorba tett videó- vagy közösségimédia-URL-ek automatikusan beágyazódnak. Ha egy shortcode mégsem oldódna fel, a dedikált Shortcode elem a biztos megoldás.
Használhatok dynamic taget Rich Textben?
Igen, és ez a leggyakoribb felhasználása. Egy Single Post sablonban egyetlen Rich Text elem
tartalommal kiteszi minden bejegyzés teljes törzsét. Feltétel, hogy legyen post-kontextus: sablonban vagy Query Loopban működik, statikus oldalon nem old fel.Tehetek képet a Rich Text szerkesztőbe?
Igen, a szerkesztő kezeli a beszúrt képet, ami hosszabb szövegtörzsben (blogbejegyzés, tájékoztató) kényelmes. Ha viszont a képet külön kell méretezni, lazy loadolni, linkelni vagy lightboxba tenni, arra a Image elem ad több beállítást.
Beszúrhatok címsort a Rich Text szerkesztőbe?
Igen, és az valódi H-taget ad ki — ezért ugyanúgy beleszámít az oldal címsor-hierarchiájába, mint egy külön Heading elem. A tartalmi részen belül ezek is maradjanak H2 vagy lejjebb, mert a H1-et a sablon adja a bejegyzés címéből.
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.