[Ad_1]
Să mergem.
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.
Birou
Mobil
Descarcă aspectul GRATUIT
Pentru a pune mâna pe aspectul gratuit, va trebui să le descărcați mai întâi folosind butonul de mai jos. Pentru a accesa descărcarea, va trebui să vă abonați la lista noastră de corespondență Divi Daily folosind formă de mai jos. Ca nou abonat, vei primi și mai multe beneficii Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „reabonat” și nu veți primi e-mailuri suplimentare.
Să începem să ne recreăm!
Adăugați 2x secțiuni de substituent
Adăugați o secțiune nouă
Începeți prin adăugarea unei secțiuni de substituent la pagina la care lucrați.
dimensionarea
Deschideți setările secțiunii și modificați înălțimea în setările de dimensionare.
Secțiunea de clonare
Clonați secțiunea o dată. Acest lucru vă lasă cu două secțiuni de substituent pe pagina dvs. Aceste secțiuni substituente vă vor ajuta să vedeți efectul final după parcurgerea tutorialului. Pe un site web live, secțiunile de substituent vor fi înlocuite cu secțiuni normale pe care le utilizați pe toată pagina.
Adăugați o secțiune nouă între secțiunile de substituent
Odată ce secțiunile de substituent sunt la locul lor, adăugați o nouă secțiune între secțiunile de substituent.
Culoare de fundal
Deschideți setările secțiunii și utilizați o culoare de fundal alb.
- Culoare fundal: #ffffff
spaţierea
Comutați la fila de proiectare a secțiunii și modificați valorile de umplere de sus și de jos în consecință:
- Căptușeală superioară: 10vh
- Umplutura de fund: 10vh
Adăugați linia # 1
Structura coloanei
Continuați adăugând un nou rând la secțiune folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările rândului, accesați setările de dimensionare și modificați lățimea maximă și valorile lățimii.
- Lățime: 100%
- Lățime maximă: 100%
Adăugați un modul text la coloană
Adăugați o copie
Singurul modul de care avem nevoie pentru această linie este un modul text. Adăugați o copie la alegere.
Setări text
Treceți la fila de proiectare a modulului și modificați setările de text în consecință:
- Font text: Montserrat
- Greutatea fontului textului: Ultra Bold
- Stilul fontului textului: majuscule
- Culoarea textului: # fff2ea
- Dimensiune text: 11vw
- Înălțimea liniei textului: 1 em
- Aliniere text: centru
Adăugați linia # 2
Structura coloanei
Adăugați un alt rând la secțiune folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare după cum urmează:
- Utilizați lățimea jgheabului personalizată: Da
- Lățimea jgheabului: 2
- Lățime: 90%
- Aliniere linie: centru
Adăugați modulul de imagine în coloană
Încărcați o imagine
Adăugați un modul de imagine în coloana rândului. Încărcați o imagine la alegere.
aliniere
Comutați la fila de proiectare a modulului și modificați alinierea imaginii în consecință:
dimensionarea
Apoi accesați setările de dimensionare și forțați lățimea maximă pe modul.
Adăugați un modul buton la coloană
Adăugați o copie
Următorul și ultimul modul pe care îl vom adăuga în coloană este un modul buton. Folosiți o copie la alegere.
Aliniere butoane
Accesați fila Proiectare și modificați alinierea butonului.
Setări buton
Apoi stilizați butonul după cum urmează:
- Folosiți stiluri personalizate pentru buton: Da
- Dimensiune text buton: 16 px
- Culoarea textului butonului: # 000000
- Culoarea fundalului butonului: #ffffff
- Lățimea chenarului butonului: 0 px
- Distanța dintre litere pentru butoane: 2 px
- Font buton: Montserrat
- Greutatea fontului butonului: aldin
- Stilul fontului butonului: majuscule
spaţierea
De asemenea, utilizați valorile de umplere personalizate în setările de spațiere.
- Căptușeală superioară: 20 px
- Umplutura de fund: 20 px
- Umplutură stângă: 5%
- Umplutură dreaptă: 5%
Adăugați poziționare absolută la linia 1
După ce ați finalizat al doilea rând, reveniți la rândul # 1. Deschideți setările rândului, accesați fila avansată și faceți secțiunea absolută. Procedând astfel, linia și modulul de text din interior vor fi plasate sub linia care conține modulul de imagine.
- Poziție: Absolută
- Locație: centru
Clonați rândul nr. 1 și plasați duplicatul sub rândul nr. 2
Pentru a permite modulului text să apară deasupra imaginii, vom avea nevoie de un alt rând cu o valoare a indexului z mai mare. Clonați primul rând și plasați duplicatul sub al doilea rând.
Aplicați efecte la rândul 3
Creșteți indicele Z
Deschideți rândul duplicat și modificați indexul z în fila avansată.
Schimbați culoarea textului
Deschideți modulul text în rând și modificați culoarea textului.
Aplicați modul de amestecare pe linie
Apoi deschideți setările rândului și schimbați modul de amestecare în setările filtrelor.
Utilizați efectul de derulare pe modulul text din rândul nr. 3
Adăugați un efect de estompare și estompare
Completați tutorialul redeschizând textul, accesând efectele de derulare și activând efectul de fade in și fade out. Asta e!
- Activați fade in și fade out: Da
- Opacitate inițială: 0%
- Opacitate medie: 0% (până la 26%)
- Opacitate finală: 100% (la 28%)
- Declanșatorul efectului de mișcare: mijlocul elementului
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Birou
Mobil
Ultimele gânduri
În acest articol, ți-am arătat cum să devii creativ cu efectele de defilare încorporate ale Divi. Mai exact, v-am arătat cum să amestecați copierea cu defilare. La început, copia pare a fi sub imagine. După derulare, copia este dezvăluită deasupra imaginii și se îmbină cu imaginea. De asemenea, ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
Dacă doriți să aflați mai multe despre Divi și să obțineți mai multe gratuități Divi, asigurați-vă că vă abonați la site-ul nostru buletin informativ prin e-mail și către nostru Canalul YouTube astfel încât să fiți întotdeauna unul dintre primii oameni care cunoaște și profită de acest conținut gratuit.
[Ad_2]
