# Elementor stílusütközések

> Hogyan írja felül az Elementor az űrlap megjelenését, hogyan azonosítod az ütközést, és hogyan oldod meg.

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](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-urlap-temak-es-stilusok/), a CSS-célzásról a [CSS-célzási példák fejezetben](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-peldak-es-betumeret/) 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.