Cum se creează culori animate de fundal cu Divi

Opțiunile de animație ale lui Divi pot transforma rapid o pagină deja frumoasă și într-una captivantă. Până acum, ne-am obișnuit cu toții cu diferitele animații care sunt încorporate în diferitele elemente de design cu care Divi vă oferă. Dar știați că puteți utiliza aceste animații pentru a evidenția și o opțiune de design specifică?

În acest tutorial, ne vom concentra pe crearea de culori de fundal animate. Pentru a obține rezultatul dorit, vom folosi un modul divizor pentru culoarea de fundal și vom plasa un modul text deasupra acestuia. Sperăm că acest tutorial vă va inspira să adăugați culori de fundal animate la viitoarele proiecte de design web.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați aspectul animat de culoare de fundal GRATUIT

Pentru a pune mâinile pe aspectul gratuit de culoare animată de fundal, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Să începem să recreăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Spațiere

Primul lucru pe care va trebui să-l faceți este să adăugați o nouă secțiune la pagina pe care lucrați. Deschideți setările secțiunii și adăugați câteva valori de umplere personalizate.

• Căptușeală superioară: 5vw
• Căptușeală inferioară: 17vw

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Adăugați modulul divizor # 1 în coloană

Vizibilitate

Este timpul să începem să adăugăm diferitele module de care avem nevoie, începând cu un modul divizor. Acest modul divizor va fi utilizat pentru culoarea de fundal, dimensiunea și animația sa. Asigurați-vă că opțiunea „Afișează divizorul” este dezactivată.

• Show Divider: Nu

Culoare de fundal

Accesați setările de fundal și adăugați următoarea culoare de fundal:

• Culoare fundal: # 212121

Spațiere

Treceți la setările de spațiere și dați modulului forma dorită folosind unitatea de înălțime a ferestrei.

• Căptușeală superioară: 30vh
• Căptușeală inferioară: 30vh

Animaţie

Permitem animarea culorii de fundal prin adăugarea unei animații personalizate cu o întârziere a animației.

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: Corect
• Întârziere animație: 1000 ms
• Intensitatea animației: 88%
• Animație Opacitate de pornire: 100%

Adăugați modulul de text nr. 1 în coloană

Adauga continut

Următorul modul de care avem nevoie este un modul de text. Adăugați conținut H2 și paragraf la alegere.

Setări text

Apoi, accesați setările de text și modificați valorile în consecință:

• Font de text: Didact Gothic
• Culoarea textului: #ffffff
• Dimensiune text: 1.1vw (desktop), 1.7vw (tabletă), 2.5vw (telefon)
• Înălțimea liniei textului: 2.1em
• Orientare text: justificați

Setări implicite ale textului antet 2

Apoi faceți câteva modificări la setările de text H2.

• Titlul 2 Font: Abril Fatface
• Rubrica 2 Culoarea textului: # 1c1c1c
• Titlul 2 Dimensiune text: 3vw (Desktop), 5vw (tabletă), 7vw (telefon)
• Titlul 2 Înălțimea liniei: 1,8em

Plasați cursorul pe setările pentru textul antet 2

De asemenea, modificăm culoarea textului la trecerea cu mouse-ul.

• Rubrica 2 Culoarea textului: #ffffff

Clonați ambele module

După ce ați terminat adăugarea și personalizarea ambelor module, le puteți clona. În următorii pași ai acestei postări, vom modifica toate cele patru module pentru a crea o animație de culoare de fundal care vine din ambele părți. De asemenea, vom adăuga o suprapunere la modulele de text pentru a face să pară că modulele de divizare și modulele de text sunt create în același container.

Modificați duplicatul modulului divizorului

Schimbați culoarea de fundal

Deschideți modulul divizor duplicat și schimbați culoarea de fundal.

• Culoare fundal: # 0bbfa1

Schimbați animația

Pentru ca animația de fundal să apară din cealaltă parte, schimbăm direcția animației. De asemenea, vom adăuga o întârziere de animație puțin mai mare pentru a obține rezultatul dorit.

• Direcția animației: Stânga
• Întârziere animație: 1500 ms

Modificați duplicatul modulului text

Schimbați conținutul

Continuați deschizând modulul de text duplicat și schimbând conținutul.

Schimbați setările textului antet 2

Treceți la fila de proiectare și modificați și setările de text H2.

• Titlul 2 Alinierea textului: dreapta
• Rubrica 2 Culoarea textului: # 0cc9ad

Poziționarea divizorului

Modul divizor # 1

Pentru a permite un spațiu alb să apară în partea dreaptă a primului modul divizor, vom adăuga o margine dreaptă folosind unitatea de lățime a ferestrei.

• Marja dreaptă: 20vw

Modul divizor # 2

Deschideți și al doilea modul divizor și permiteți ocuparea aceluiași spațiu, dar în partea stângă a paginii.

• Marja superioară: 2vw
• Marja stângă: 20vw

Adăugați suprapuneri

Modul text # 1

Acum că am personalizat toate modulele din rândul nostru, putem începe să creăm suprapuneri, începând cu primul modul de text. Adăugați următoarele valori de marjă personalizate la setările de spațiere ale modulului:

• Marja superioară: -49vh
• Marja dreaptă: 20vw (desktop), 15vw (tabletă), 10vw (telefon)

Modul text # 2

Utilizați următoarele valori de marjă personalizate și pentru modulul de text duplicat:

• Marja superioară: -49vh
• Marja stângă: 20vw (desktop), 15vw (tabletă), 10vw (telefon)

Ieșiți din Visual Builder pentru a vedea rezultatul

Odată ce ați creat suprapunerile, va trebui să ieșiți din Visual Builder pentru a vedea rezultatul!

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

Căutăm întotdeauna modalități de a vă ajuta să depășiți limitele în designul web și să creați site-uri web frumoase și captivante. În această postare, am combinat creativ diferite elemente de design și suprapuneri pentru a crea culori de fundal animate. Acesta este un mod excelent de a adăuga o dimensiune suplimentară oricărei pagini la care lucrați și de a face site-ul dvs. să se potrivească perfect cu tendințele actuale de design. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.