Színátmenetes szövegszín a Divi-ben



Divi Builder | kinézet

A Divi programban egyszerű olyan szövegblokkot létrehozni, amely valamilyen színátmenetet használ, vagy akár olyan képet is használhat, amely bizonyos színeket ad a szövegnek.

Annak ellenére, hogy számos prémium Divi-kiterjesztés létezik, amelyek ezt megvalósítják, ezekre nincs szükséged elképesztő szövegeffektusok létrehozásához. Ma megvizsgáljuk, hogyan hozhatunk létre ilyen hatásokat egyszerűen a Divi segítségével, anélkül, hogy CSS-t kellene írnunk.

Gradiens szín hozzáadása a szöveghez

gradient text 1 Színátmenetes szövegszín a Divi-ben — 1. minta: Lineáris gradiens (fentről lefelé)

gradient text 2 Színátmenetes szövegszín a Divi-ben — 2. minta: Radiális gradienssel

gradient text 3 Színátmenetes szövegszín a Divi-ben — 3. példa: Háttérkép

A harmadik példa háttérképet használ a helyett színátmenet. És igen, még használhatod is Divis Parallax effektus ehhez a képhez így a kép fel-le mozog, miközben görgeti az oldalt!

A koncepció

Használjuk a Szöveg modul ban ben Divi hogy hozzon létre egy címsort némi szöveggel alatta.
A gradiens az egészre vonatkozik Sor.
A hatás a beállításával érvényesül Oszlopok Keverési mód a „Képernyő”-re.

Útmutató lépésről lépésre

1. lépés

Kezdje ezzel az elrendezés létrehozása Divi-ben – például adjon hozzá egy két oszlopos sort, és szúrjon be szövegmodulokat a címsorral és a tartalommal.

gradient text step 1 Színátmenetes szövegszín a Divi-ben — *A sor elrendezése az 1. lépés után*

2. lépés

Ezután alkalmazza a színátmenetet a sorra: Nyissa meg a Sorbeállítások és állítson be egy háttérszínt, egy háttérszínátmenetet vagy egy háttérképet a teljes sorhoz.

gradient text step 2 1 Színátmenetes szövegszín a Divi-ben — Állítsa be a Sorok hátterét

gradient text step 2 Színátmenetes szövegszín a Divi-ben — *A sor elrendezése a 2. lépés után*

3. lépés

A következő lépés a „mágikus összetevő” a folyamatban. Szerkessze az elsőt Oszlopbeállítások sorból, és keresse meg a „Tervezés > Szűrők > Keverési mód” részt. Állítsa „Képernyő”-re.

gradient text step 3 1 Színátmenetes szövegszín a Divi-ben — Szerkessze az első oszlopot

gradient text step 3 2 1 Színátmenetes szövegszín a Divi-ben — Szerkessze az első oszlopot

gradient text step 3 Színátmenetes szövegszín a Divi-ben — *A sor elrendezése a 3. lépés után*

Mit csinál ez?
A Keverési mód beállítása azt mondja meg a böngészőnek, hogy hogyan keverje össze az aktuális elemet a mögötte lévő elemekkel. Az alapértelmezett keverési mód csak a legfelső elemet jeleníti meg, vagyis a szöveget a szöveg színével jeleníti meg. Más keverési módok elvégzik a számításokat a megjelenítendő szín meghatározásához. A „Képernyő” mód a fekete képpontokat átlátszóvá teszi, a fehér képpontokat pedig fehéren tartja. Bármi, ami közöttük van, félig átlátszó, amint azt a fenti képernyőképen látható.

4. lépés

Ahhoz, hogy a keverési mód valódi hatásokat érjen el, kövesse ezeket a lépéseket:

Először állítsa be az Oszlop háttérszínét #fff-re (egyenletes fehérre).
Másodszor, szerkessze a Szöveg modult, és állítsa be a Szöveg színét #000-ra (fekete).

Ezzel a beállítással a fehér háttérrel és a fekete szöveggel együttesen a böngésző a megfelelő keverési móddal (például a „Képernyő” móddal) valósíthatja meg a kívánt vizuális hatásokat.

gradient text step 4 1 Színátmenetes szövegszín a Divi-ben — Állítsa az Oszlop háttérszínét fehérre

gradient text step 4 2 Színátmenetes szövegszín a Divi-ben — Állítsa az Oszlop háttérszínét fehérre

gradient text step 4 Színátmenetes szövegszín a Divi-ben — *A sor elrendezése a 4. lépés után*

5. lépés

Ezután be kell állítanunk a Sorok felső és alsó kitöltését 0 képpontra, valamint engedélyeznünk kell az Oszlopmagasság kiegyenlítését a „Tervezés > Méretezés” részben.

Ezzel a beállítással biztosíthatjuk, hogy a sorok között nincs felesleges tér, és az oszlopok magassága automatikusan kiegyenlítődik, ami segít abban, hogy a tartalom egyenletesen eloszoljon az oldalon.

gradient text step 5 1 Színátmenetes szövegszín a Divi-ben — Állítsa a Sorok kitöltést 0 képpontra

gradient text step 5 2 Színátmenetes szövegszín a Divi-ben — Állítsa a Sorok kitöltést 0 képpontra

gradient text step 5 Színátmenetes szövegszín a Divi-ben — *A sor elrendezése az 5. lépés után*

Megjegyzés: Ha a sornak csak egyetlen oszlopa van, akkor kész. Ellenkező esetben egy utolsó lépést kell végrehajtania.

6. lépés

Ha több oszlopa van, először be kell állítania az Ereszcsatorna szélességét soronként 1-re.

Ezután vagy (a) megismételheti a 3-4. lépést, hogy ugyanazt a hatást más oszlopokra is alkalmazza, vagy (b) csak a többi oszlop háttérszínét állítsa #fff-re (egyenletes fehérre), hogy a tartalom színátmenet hatás nélkül jelenjen meg.

gradient text step 6 1 Színátmenetes szövegszín a Divi-ben — Állítsa az ereszcsatorna szélességét 1-re

gradient text step 6 Színátmenetes szövegszín a Divi-ben — *A sor végső elrendezése a 6. lépés után*

Minta letöltése

gradient text sample layout Színátmenetes szövegszín a Divi-ben

Ötletek, Jegyzetek

Kísérletezzen a sor háttérbeállításaival: Használjon különböző színeket, színátmeneteket, képeket vagy akár videókat.
Engedélyezze a parallaxis hatást a háttérképekhez.
Adjon hozzá egy másik színt vagy színátmenetet a lebegtetési állapothoz, hogy módosítsa az egérérintkező szövegeffektusát.
Ez a hatás csak tömör fehér háttérrel működik.

A cikk eredeti nyelven itt érhető el: https://divimode.com/gradient-text-color-in-divi/

← Prev: Ingyenes Fenntartható energia elrendezési csomag a Divi számára Next: A webdesign -ban a könnyebb nem mindig jelent jobbat →