Elementor stílusütközések

Az Elementor saját CSS-t alkalmaz a bemeneti mezőkre, címkékre és gombokra azokon az oldalakon, amelyeket épít, azokat az űrlapokat is beleértve, amelyeket nem ő hozott létre. Ha ez a stílus felülírja a Gravity Forms témáját, az űrlap továbbra is működik, csak nem úgy néz ki, ahogy szeretnéd.

Tünetek

• A mezők, címkék vagy gombok nem egyeznek a Gravity Formsban beállított stílussal.
• Ugyanaz az űrlap másképp néz ki egy Elementor-oldalon, mint a webhely más részein.
• A betűtípusok, színek vagy térközök az Elementor Pro aktiválása után megváltoztak.
• Az űrlapszerkesztőben módosított stílusbeállításoknak nincs látható hatása az oldalon.
• Az egyéni CSS csak az !important hozzáadásával érvényesül.

Mi okozza

Hogyan van beágyazva az űrlap

Magában az Elementorban nincs Gravity Forms widget. Az űrlap az alábbi módok egyikén kerül az Elementor-oldalra, és a mód meghatározza, mi stílusozhatja:

1. Az Elementor Shortcode widgetje egy [gravityform] shortcode-dal. Ez a leggyakoribb mód, és nincs saját űrlapstílus-beállítása.
2. Külső Gravity Forms widget. A GravityKit ingyenes Gravity Forms Widget for Elementor bővítménye a widget dobozát stílusozza (háttér, térköz, keret), és az űrlap témáját is kiválaszthatod vele. Az Elementor kiegészítőcsomagokból és stílusozó bővítményekből származó widgetek saját vezérlőket adnak a mezőkhöz, címkékhez és gombokhoz, ami újabb CSS-réteget jelent.
3. Elementor felugró ablak (popup). A popup jelölését gyakran nem az oldal többi részével azonosan kezeli a rendszer, ezért a stílusok és a szkriptek máshogy viselkedhetnek benne.

Elementor-stílusok

Az Elementor globális betűtípusai, színei és a Theme Style › Form Fields beállításai az egész oldal mezőit, címkéit és gombjait célozzák, függetlenül attól, melyik bővítmény jelenítette meg őket. A Gravity Forms-űrlap ezeket a saját témája mellett örökli.

Szelektor-specifikusság

Ha mindkét stíluslap ugyanazt a tulajdonságot állítja, a specifikusabb szabály nyer. Az Elementor szabályai gyakran specifikusabbak az űrlaptéma szabályainál, így az űrlaptéma helyesen betöltődik, a böngésző mégis az Elementor értékét használja, és a Gravity Forms beállításának módosítása nem látszik.

Stílusozó widgetek

A stílusozó widget a saját stílusbeállításait az űrlaptéma és az Elementor CSS-e fölé teszi. A GravityKit widgetje ezt nem teszi, mert a stílusvezérlői csak a widget tárolóját érintik.

Elavult generált CSS

Az Elementor minden oldal CSS-ét fájlba írja, és újra felhasználja, ezért egy módosítás úgy tűnhet, hogy nem csinált semmit. A gyorsítótár ürítése nem építi újra azonnal a fájlt: az oldal következő megtekintésekor készül el.

Hol találod: Elementor › Tools › General.

A Gravity Forms No-Conflict Mode módja ezt nem oldja meg. Azt akadályozza meg, hogy külső stílusok és szkriptek betöltődjenek a Gravity Forms admin oldalain, ami segíthet, ha az űrlapszerkesztő viselkedik furcsán, de nincs hatása arra, hogyan néz ki az űrlap a látogatóknak.

A hiba megerősítése

1. Tedd ugyanazt az űrlapot egy olyan oldalra, amely az alapértelmezett WordPress-szerkesztőt használja. Ha ott helyesen néz ki, a különbséget az Elementor vagy egy külső Elementor-bővítmény stílusai okozzák.
2. Kattints jobb gombbal egy hibásnak látszó mezőre, és válaszd az Inspect (vizsgálat) menüpontot. A Styles panelen keresd meg a hibás tulajdonságot, és nézd meg, melyik stíluslap szabálya nyer. Ebből kiderül, hogy az Elementort, egy widgetet vagy az űrlaptémát kell módosítanod.
3. Ellenőrizd, melyik űrlaptéma van használatban: Űrlapok → Beállítások → Alapértelmezett űrlaptéma, vagy az adott űrlap blokkjának, shortcode-jának, illetve widgetjének beállításaiban. A CSS API az Orbital témára vonatkozik, a Gravity Forms 2.5 Theme-re nem. Az Orbital vizuális stílusbeállításai (mezőméret, színek, címkék, gombok) csak az űrlapblokk oldalsávjában jelennek meg, ezért Elementorban épített oldalon nem érhetők el.
4. Ürítsd az Elementor gyorsítótárát az Elementor › Tools › General oldalon, majd töltsd újra a nyilvános oldalt. A fájlok ennél a látogatásnál épülnek újra. Ha a megjelenés változik, a tárolt CSS elavult volt.

A hiba elhárítása

Az !important használata azt jelenti, hogy rossz szinten küzdesz. Az Inspect segítségével keresd meg, melyik stíluslap nyer, és a beállítást ott módosítsd.

1. Ha az Elementor szabálya nyer, szerkeszd a Site Settings › Theme Style › Form Fields beállításait vagy a widget saját stílusbeállításait ahelyett, hogy a szelektort írnád felül.
2. Ha a Gravity Forms szabálya nyer, használd a CSS API-t. Az egyéni tulajdonságokat a .gform-theme--framework osztályon add meg, amelyet az űrlap burkolója már tartalmaz, és ha nem az egész webhelyre kell vonatkozniuk, egy űrlapra szűkítsd a #gform_wrapper_{id} szelektorral. A globális tulajdonságok így néznek ki: --gf-color-primary, a specifikusabbak pedig a --gf-{terület}-{tulajdonság}-{állapot} mintát követik, például --gf-ctrl-bg-color-focus.
3. Ha külső stílusozó widgetet használsz, mielőtt bármilyen CSS-t írnál, nézd át a stílusbeállításait.
4. Szelektorszintű CSS-t csak olyan esetekre írj, amelyeket a CSS API nem fed le, és az űrlap burkolójára szűkítsd, ne általában a bemeneti elemekre, hogy a webhely más űrlapjait ne érintse.
5. Minden módosítás után ürítsd az Elementor gyorsítótárát az Elementor › Tools › General oldalon, töltsd újra az oldalt a fájl újraépítéséhez, majd ürítsd a webhely előtt álló gyorsítótár-bővítményt, a tárhely gyorsítótárát és a CDN-t.
6. Ha a gond megmarad, fordulj az Elementor ügyfélszolgálatához vagy az Elementor-widgetbővítmény fejlesztőjéhez, mert az űrlapot felülíró Elementor-stílusokban ők tudnak segíteni.

Az űrlaptémákról a Űrlaptémák és stílusbeállítások fejezetben, a CSS-célzásról a CSS-célzási példák fejezetben olvashatsz.

A külső bővítményeket csak javaslatként említjük: nem teszteljük és nem támogatjuk őket, ezért a megfelelőségükről neked kell meggyőződnöd.