Tükröződés – szöveg design elemként a Diviben

A Divi Átalakítás / Átméretezés opcióját használva külső képszerkesztő nélkül tudsz dekoratív tükröződéseket létrehozni szövegekkel és képekkel is. Különleges, figyelemfelkeltő elem.

Ennek a designnak az elkésztését mutatom meg:

Egy új vagy már meglévő oldalon hozz létre egy rendes Szakaszt, majd benne egy osztatlan Sort, abban pedig egy Szöveg modult.

 

Szöveg modul formázása:

 

Tartalom / Szöveg: Balaton

Tervezés / Szöveg:
Szöveg betűtípus: Oswald
Szöveg stílus másolása: TT
Szöveg szövegszín: #0c71c3
Szöveg betűméret: 10vw
Szöveg sorköz: 0.9em

Tervezés / Kiterjedés:
Margó Lent: 0px
Kitöltés Fent: 4vw           Bal: 15vw

Sor beállítások:

 

Tartalom / Háttérkép: tölts fel egy kb. 1920 X 600 px-es képet

Tervezés / Méretezés:

Egyéni margószélesség használata: igen
Margó szélesség: 1
Maximális szélesség: 100%
Max.Szélesség: 100%

Tervezés / Kiterjedés:

Kitöltés Fent: 0px            Lent: 0px

Duplikáld a Sort! A második Sorban állítsd be a következőt:

Tervezés / Átalakít:

Átméretezés: Y tengely: -100% (válaszd szét az X tengelytől!)

Hogy a tükröződés elmosódottabb legyen, teszünk rá egy overlay-t, Szöveg modult használva ehhez.

A második Sorba a tükröződés alá tegyél egy Szöveg modult és töröld ki a tartalmát.

 

Szöveg modul beállítások:

 

Tartalom / Háttér:

Színátmenet 1. szín: #ffffff
Színátmenet 2. szín: rgba(255,255,255,0.13)
Kezdő pozíció: 38%

Tervezés / Méretezés:

Maximális szélesség: 100%
Magasság: 100%

 

Mivel az alsó sort fejre állítottuk, a színátmenetes Szöveg modul az álló és a fordított Balaton szöveg közé került. Azt szeretnénk, hogy kitöltse az egész második Sort és a fejen álló Szöveg modul fölé kerüljön, ezért a

Haladó / Egyéni CSS alatt a Fő elem dobozba beírjuk:

position: absolute !important;
top: 0;