Effektek alkalmazása a Divi szakasz háttérképére

Divi Filter Effect tervezési beállítások

A szűrőeffektusok hatása túlmutat a háttereken

A szűrőeffektusok alkalmazásának egyik fő problémája a Divi-ban az, hogy ezek a hatások a teljes szekcióra vagy sorra kiterjednek, beleértve a benne található szövegeket, képeket és egyéb modulokat. Ez nem ideális, hiszen gyakran szeretnénk, hogy ezek az effektusok kizárólag a háttérképekre hatjanak. Például, ha elmosódási effektust alkalmazunk a háttérre, nem kívánjuk, hogy a szekcióban lévő szövegek vagy egyéb tartalmak is elmosódjanak. Ez a korlátozás megnehezítheti a kívánt vizuális hatás elérését anélkül, hogy befolyásolná a tartalom olvashatóságát vagy tisztaságát.

Testreszabás CSS-sel: Egyéni CSS-osztály hozzárendelése a szakaszhoz vagy sorhoz

Ha elmosódást vagy egyéb szűrőeffektust szeretne hozzáadni egy szakasz vagy sor háttérképéhez a Divi-ban, először egy egyéni CSS-osztályt kell hozzárendelnie. Ez az osztály segít az adott szekció vagy sor célzott megjelölésében, amikor az effektusokat alkalmazzuk. Íme a lépések:

1. Nyissa meg annak a szakasznak vagy sornak a beállításait, ahol az effektust alkalmazni kívánja.
2. Lépjen a „Speciális” fülre.
3. Keresse meg a „CSS ID és osztályok” kapcsolót, és aktiválja a beviteli mező megjelenítését.
4. Írja be a „dc-background-filter” osztálynevet (idézőjelek nélkül) a „CSS-osztály” feliratú beviteli mezőbe.

Az egyéni CSS-osztály hozzáadásával beállíthatjuk a szekciót vagy sort az elmosódási vagy más szűrőeffektusokra. Ez a lépés kulcsfontosságú annak biztosításához, hogy a CSS-kód csak a kívánt elemekre vonatkozzon. Az osztály alkalmazása után továbbléphetünk a következő lépésekkel, amelyekben ténylegesen hozzáadjuk a kívánt effektusokat a CSS-kóddal.

szakasz beállításai

A parallaxis effekt engedélyezése

A következő lépésben lépjen a szakasz vagy sor háttérbeállításaihoz. Egyszerűen válassza ki a „Háttér” opciót, majd kattintson a háttérkép fülre. Ezen a lapon aktiválja a „Parallaxis effektus használata” jelölőnégyzetet, amely egy ügyes görgetési effektust ad a háttérképhez. Ezenkívül válassza a „CSS” opciót a parallaxis módszerként. Ez biztosítja a hatás sima és zökkenőmentes alkalmazását. Miután beállította ezeket az opciókat, készen áll a Divi szekció hátterének további testreszabására.

A parallaxis effektus engedélyezése

A CSS-kód használata a parallax hatás letiltásához

 .dc-background-filter .et_pb_parallax_css { background-attachment: inherit !important; background-position: 50%; }

Egyéni css kód hozzáadása a Divi vezérlőpultján

A fent említett kód működése részletesen:

Amikor használjuk a „.dc-background-filter” osztályt, célunk az adott szekció vagy sor, amelynek hátterét módosítani szeretnénk. Ez lehetővé teszi, hogy konkrét hatásokat kizárólag erre a területre alkalmazzunk. Továbbá, a „.et_pb_parallax_css” osztályt a Divi-ben a parallaxis háttérhatású elemekhez használjuk, amely segít azonosítani azokat az elemeket, amelyekre ez a különleges vizuális hatás vonatkozik.

Most pedig térjünk át a CSS tulajdonságokra:

• background-attachment: inherit !important; Ez a sor lényegében arra utasítja a hátteret, hogy örökölje a szülőelem tulajdonságait. Ez fontos, mert felülír minden parallaxis effektre vonatkozó különleges beállítást. A „!important” rész biztosítja, hogy ez az utasítás elsőbbséget élvezzen ellentmondásos beállításokkal szemben.
• background-position: 50%; Itt a háttér pozícióját úgy állítjuk be, hogy középen legyen. Ez segít megőrizni a vizuális megjelenést, amikor a parallaxis hatás nem aktív.

Egyszerűbben fogalmazva, ezek a kódrészletek segítenek nekünk szabályozni és beállítani webhelyünk kialakításában meghatározott szakaszok vagy sorok háttérmegjelenését, biztosítva, hogy azok úgy nézzenek ki, ahogyan szeretnénk, különösen a parallaxis hatások kezelésekor.

A CSS-kód használata az elmosódás effektus vagy más szűrőeffektus alkalmazása a Divi háttérképekre

Miután eldöntötte, hogy milyen elmosódást vagy szűrőeffektust szeretne a Divi szakasz háttérképéhez, a következő lépés az, hogy ezt CSS segítségével alkalmazza. Az alábbiakban talál egy példát arra a kódra, amelyet hozzá kell adnia webhelyéhez. Ezt a kódot testreszabhatja saját preferenciáinak és stílusának megfelelően:

Illessze be ezt a kódot a Divi > Témabeállítások > Egyéni CSS kóddobozba.

 .dc-background-filter .et_pb_parallax_css {  filter: blur(10px);  -webkit-filter: blur(10px);  }

Előtte:

Háttérkép az elmosódási effektus alkalmazása előtt

Utána:

Háttérkép az elmosódási effektus alkalmazása után

Következtetés

Összefoglalva, a háttérképek elmosódási és szűrőeffektusainak alkalmazása a Divi szekciókban jelentősen javíthatja webhelye vizuális vonzerejét. Bár a Divi tervezési beállításai kényelmesen teszik lehetővé ezeknek az effektusoknak az alkalmazását, gyakran az egész szekcióra, beleértve a szövegeket és más modulokat is kiterjednek, ami nem mindig ideális.

Az egyéni CSS-osztályok és a rafinált kódolási technikák segítségével azonban áthidalhatja ezeket a korlátokat, és pontosan csak a háttérképeket célozhatja meg, anélkül, hogy a többi elemet befolyásolná. Az itt bemutatott, lépésről lépésre haladó útmutatások világos stratégiát kínálnak ennek megvalósítására, lehetővé téve, hogy látványos terveket hozzon létre, amelyek magukhoz vonzzák a közönség figyelmét.

Akár egy finom elmosódást szeretne elérni, akár különböző szűrőket próbál ki a mélység és dimenzió fokozása érdekében, a Divi rendszerének sokoldalú testreszabási lehetőségei szinte korlátlanok. Ezeket a technikákat felhasználva tovább finomíthatja webhelye esztétikáját, és mély benyomást kelthet látogatóiban.

Ne habozzon tovább kísérletezni különböző beállításokkal, hogy megtalálja a Divi szekció hátterének ideális megjelenését. A kreativitás és némi szakértelem segítségével weboldalát egy vizuálisan lenyűgöző alkotássá alakíthatja át.