Alapértelmezett stílusok az atomikus elemekhez

Az alapértelmezett stílusokkal egy helyen állíthatod be az atomikus (V4) elemek által használt HTML-címkék megjelenését az egész webhelyen. A beállítás a szerkesztő Tervezési rendszer paneljének Alapértelmezések fülén van.

Ha egy címkére (például a címsorokra, bekezdésekre, div-ekre, gombokra, űrlapelemekre, listákra vagy médiákra) alapstílust adsz, minden újonnan hozzáadott atomikus elem azonnal ezt a kiinduló megjelenést kapja. Nem kell elemenként módosítanod, és nem kell a téma alapértékeire támaszkodnod.

Követelmények

Elementor 4.3.0 vagy újabb, WordPress 6.8 vagy újabb.

Alapstílus beállítása

Példa: az összes H2 címsornak egységes betűvastagságot és kiemelő színt szeretnél adni.

1. Nyiss meg egy oldalt vagy sablont az Elementor szerkesztőben.
2. A felső sávon kattints a Tervezési rendszer ikonra.
3. A panelen válaszd az Alapértelmezések fület.
4. A Címke mezőben válaszd ki vagy írd be a stílusozni kívánt HTML-címkét (például h2, p, div, button).
5. A kiválasztott címke melletti három pontra (⋮) kattintva megnyílik az állapotok menüje. Itt választhatod ki a módosítandó állapotot: Normál, Hover, Fókusz vagy Aktív.
6. Állítsd be a kívánt stílust az alatta lévő szakaszokban: Elrendezés, Térközök, Méret, Pozíció, Tipográfia, Háttér, Szegély, Hatások.
7. Kattints a Módosítások mentése gombra.

https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor

A képen az Alapértelmezések fül látszik a Címke mezővel (itt h1 van kiválasztva) és a stílus szakaszokkal. A Módosítások mentése gomb a panel alján van.

Az eredmény: a kiválasztott HTML-címkét használó összes atomikus elem az egész webhelyen átveszi ezeket az alapstílusokat.

Melyik címkékre állíthatsz alapstílust?

Bármelyik szabványos HTML-címkére, amelyet az atomikus szerkesztő támogat. A címkét kiválaszthatod a legördülő listából, vagy beírhatod a Címke mezőbe.

• Címsorok és szöveg: h1-től h6-ig, p, span, a
• Elrendezés és szerkezet: div, header, section, article, aside, footer, main, nav
• Űrlapok és vezérlők: form, input, textarea, select, label, button
• Listák és dinamikus tartalom: ul, li, details, summary, hr
• Média: img, video

Hogyan viszonyulnak az alapstílusok a többi stílushoz?

Az alapértelmezett stílusok a stílusok sorrendjének legalján vannak:

• Címke-alapértékek és az elemek saját alapértékei: az alapértelmezett stílusok erősebbek, mint az elemek beépített alapértékei. Például a Flexbox elem a háttérben div címkét használ, ezért ha a div címkére 0 px belső margót állítasz, az felülírja a Flexbox elem szokásos 10 px belső margóját.
• Osztályok és változók: a tervezési rendszerben létrehozott CSS-osztályok és változók felülírják a címkéhez rendelt alapstílust.
• Az elem saját stílusa: a vásznon közvetlenül az elemre állított stílus a legerősebb, ez az alapstílust és az alkalmazott osztályokat is felülírja.

Gyakori kérdések

Beállíthatok hover vagy fókusz állapotot is a címkékhez? Igen. Bármelyik támogatott címkénél megadhatsz stílust a Normál, Hover, Fókusz és Aktív állapothoz.

Felülírhatom az alapstílust egy konkrét elemnél? Igen. Alkalmazz az elemre egyéni CSS-osztályt, vagy módosítsd közvetlenül az elem stílusbeállításait a szerkesztőben.

Mi történik, ha nem állítok be alapstílust? Az atomikus elemek az Elementor szokásos alapértékeit vagy az aktív WordPress-téma alap stíluslapját használják.