Egyedi CSS: stílusszabály közvetlenül egy elemhez

Az Elementor saját beállításai a stílusozás nagy részét lefedik, de előbb-utóbb kell egy szabály, amit nem kínálnak: például színátmenet egyetlen címsoron, vagy térköz, amely csak egy kártyán belül él. Az Egyedi CSS kiterjesztés minden elemhez ad egy CSS-mezőt, így a szabályt ott írhatod meg, ahová tartozik.

CSS-t tehetsz tárolóra, belső tárolóra, szekcióra, belső szekcióra, oszlopra és bármely widgetre. Ha a szabály elé írod a selector szót, csak az adott elemre vonatkozik. Ha kihagyod, a szabály az egész oldalra érvényes.

Előkészületek

• A kiterjesztés csak a bővítmény teljes (Pro) változatában érhető el. Az ingyenes bővítménnyel az Egyedi CSS szakasz egyetlen elemen sem jelenik meg.
• Kapcsold be a Custom CSS kiterjesztést a The Plus Addons → Extensions oldalon, a Plus Special csoportban. Alapból ki van kapcsolva.
• Az Elementornak és a bővítménynek is aktívnak kell lennie.
• A beállítás helye: a tároló, szekció, oszlop vagy widget Haladó füle.

CSS hozzáadása egy elemhez

1. Nyisd meg az oldalt az Elementorban, és jelöld ki az elemet: tárolót, szekciót, oszlopot vagy widgetet.
2. Nyisd meg a Haladó fület, és bontsd ki az Egyedi CSS szakaszt. A fül felső részén van, a bővítmény többi kiterjesztése között.
3. Írd a szabályt az Egyedi CSS mezőbe. Ahol az elem saját osztályát írnád, oda a selector szót írd. A vászon még mentés előtt, élőben frissül.
4. Frissítsd az oldalt, és nyisd meg a nyilvános oldalt. Csak a szerkesztett elem változik, a hasonló elemek máshol az oldalon érintetlenek maradnak.

selector h2 {
  background-color: #0F2C5C;
  color: #FFFFFF;
  padding: 14px 20px;
  border-radius: 6px;
}

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

A képen a tároló Haladó fülén megnyitott Egyedi CSS szakasz látszik. A szerkesztőmező a CSS-t színezve mutatja.

https://minta-bolt.hu/ke4-egyedi-css/

A képen az első tárolón belüli címsor kapta a szabályt. A második tárolóban lévő, azonos fajtájú címsor változatlan.

Elementor Pro nélkül az Elementor saját Egyedi CSS szakasza is megjelenik a Haladó fül alján, de abban csak egy tájékoztató üzenet van a Pro-ról. A használható mező a fül felső részén lévő, a bővítményhez tartozó szakaszban van.

Használat widgeten

Ugyanez a szakasz minden widgeten ott van a Haladó fülön, a The Plus Addons widgetjein is. Ha kijelölsz egy Gomb widgetet, és ezt írod bele, csak annak az egy gombnak változik a betűköze:

selector .elementor-button {
  letter-spacing: 1px;
}

Mivé alakul a selector

A CSS mentése előtt a bővítmény a selector szó minden előfordulását az elem saját CSS-választójára cseréli.

Hol	Mire cseréli
Nyilvános oldal	.elementor-<oldalazonosító> .elementor-element.elementor-element-<elemazonosító>
Szerkesztő előnézete	body.elementor-page-<oldalazonosító> .elementor-element-<elemazonosító>

Mindkettő ugyanarra az elemre mutat, ezért ami a szerkesztőben működik, az általában az élő oldalon is. A kettő mégsem azonos, ezért a kész munkát mindig a nyilvános oldalon is nézd meg. Előfordulhat például, hogy egy szabály a szerkesztőben más erősséggel érvényesül, mint az élő oldalon.

Hol tárolódik a CSS

• Az oldal saját Elementor-stílusfájljának végére kerül (wp-content/uploads/elementor/css/post-<oldalazonosító>.css), az Elementor saját szabályai után. Az oldal HTML-jébe semmi nem kerül.
• Mivel az oldal stíluslapjába kerül, a selector nélküli szabály az oldal minden elemére hat, de nem a webhely többi oldalára.
• A szerkesztőben ugyanez a CSS közvetlenül az előnézetre kerül, ezért gépelés közben látod az eredményt.

Korlátozások

• A selector szót a bővítmény mindenhol lecseréli, nemcsak a szabály elején. Egy .my-selector nevű osztály értelmetlenné válik, és a szabály csendben nem működik. Ugyanez igaz az értékekre és a megjegyzésekre. Ne használd a selector szövegrészletet másra a mezőben.
• A {{WRAPPER}} nem támogatott. Úgy kerül a stíluslapba, ahogy beírtad, a böngésző pedig kihagyja a hibás részt. Tesztünkben a szabály többi része ilyenkor az egész oldalra érvényesült. Használj helyette selector szót.
• A hiányzó záró kapcsos zárójel elnyeli a utána következő szabályokat. Nincs ellenőrzés és figyelmeztetés, a CSS többi része egyszerűen nem érvényesül.
• Semmi nem ellenőrzött: amit beírsz, az kerül a stíluslapba. A böngésző kihagyja az érvénytelen tulajdonságot, a szabály többi része él, de hibaüzenetet nem kapsz.
• Pro funkció. Az ingyenes bővítménnyel a szakasz nem jelenik meg, és a korábban mentett CSS sem érvényesül. A szöveg az oldalban marad, ezért a Pro és a kiterjesztés bekapcsolása után újra működik.
• Nincs webhely-szintű mező: a kiterjesztés elemenként működik. A teljes webhelyre szóló kód a The Plus Addons → Custom CSS & JS oldalon van, az egy külön funkció.

Hibaelhárítás

Két Egyedi CSS szakaszt látok a Haladó fülön. Az Elementor is hozzáad egyet. Az Elementor ingyenes változatában az csak egy üzenetet mutat az Elementor Pro-ról. A használható mező a fül felső részén lévő szakasz, nem az alsó.

Nincs Egyedi CSS szakasz. Ellenőrizd, hogy a bővítmény Pro kiadása aktív-e, és a Custom CSS kiterjesztés be van-e kapcsolva a The Plus Addons → Extensions oldalon. Ha bármelyik ki van kapcsolva, a szakasz egyetlen elemhez sem kerül.

A szerkesztőben jó, az élő oldalon nem. Frissítsd az oldalt, hogy a stíluslap újra elkészüljön, majd töltsd újra a nyilvános oldalt. Ha egy szabály még mindig nem érvényesül, nézd meg, hiányzik-e előle egy záró zárójel, vagy szerepel-e a selector szó egy osztálynévben vagy értékben.

A szabály olyat is átállított, amit nem jelöltem ki. A selector nélküli szabály az egész oldalra érvényes. Írj elé selector szót.

A korábban írt CSS nem működik. Valószínűleg a kiterjesztést vagy a Pro bővítményt kapcsoltad ki. Kapcsold vissza mindkettőt: a CSS az elemen megmaradt, és újra érvényesül.