Utilizarea animațiilor Divi pentru a flota și a respinge imaginea

Bine ați venit la partea 6 a acestei serii din 6 părți, care vă va învăța cum utilizați noile opțiuni de animație Divi pentru a proiecta secțiuni de pagină minunate. Vă voi prezenta cum să construiți diferitele secțiuni ale paginii noastre demo live pentru a vă arăta tehnici pentru adăugarea de animații pe site-ul dvs. web. Funcțiile de animație sunt cu adevărat distractive și ușor de utilizat. Și cu Visual Builder, puteți vedea creația dvs. prind viață în fiecare etapă a drumului. Vino și alătură-te mie în timp ce explorăm puterea animațiilor Divi.

În ultima postare am construit secțiunea 7 a paginii noastre de demonstrație de animație, unde v-am arătat cum să animați imagini folosind stilul de animație cu rolă pentru a adăuga mișcări de viață la conținutul dvs.

Astăzi, vom aborda secțiunile 8 și 9 din pagina noastră de demonstrație de animație. Secțiunea 8 este un exemplu excelent de cum să scoți în evidență un articol prezentat folosind o combinație de animație de diapozitive și efecte de estompare. Secțiunea 9 este o modalitate simplă și elegantă de a adăuga animație la o secțiune a echipei care prezintă fotografiile echipei tale.

Să începem.

Iată o scurtă privire asupra a ceea ce vom construi în Postarea de astăzi

Pregătirea elementelor de proiectare

Veți avea nevoie de patru imagini pentru acest tutorial. Veți avea nevoie de o imagine de fundal personalizată și de trei imagini de card de rețetă. Imaginea de fundal este de 1280 × 936 și are un fundal galben cu 6 dreptunghiuri semi-transparente albe cu umbrire adăugată pentru adâncime. Odată ce fundalul este utilizat în secțiunea cu paralaxă, acesta va da impresia că cărțile de rețetă plutesc în fundal. Imaginile cardului de rețetă sunt fiecare 375 × 667. Iată imaginile folosite în acest tutorial.

Imagine de fundal

Imagine # 1 a cardului de rețetă

Imagine a cardului de rețetă # 2

Imagine a cardului rețetei # 3

Utilizarea animațiilor Divi pentru a flota și a respinge imaginea

Abonați-vă la canalul nostru Youtube

Secțiunea 8 a clădirii

Înainte de a începe procesul de construcție, iată o privire asupra vederii wireframe a aspectului secțiunii pe care îl vom crea folosind constructorul vizual.

Folosind Visual Builder, Să începem prin a adăuga o altă secțiune regulată la aspectul nostru. Apoi adăugați un rând cu trei coloane (o treime o treime o treime) în secțiunea dvs.

Actualizați setările rândului

Înainte de a adăuga primul nostru modul, accesați setările rândului și actualizați următoarele:

Sub fila Proiectare ...

Utilizați lățimea personalizată: DA
Lățime personalizată: 1366 px
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1

Coloana 1 Împletire personalizată: 6% dreapta
Coloana 3 Împletire personalizată: 8% la stânga

Adăugați fundal la secțiunea dvs.

În continuare, să punem imaginea de fundal principală în secțiunea noastră. Accesați setările secțiunii și actualizați următoarele:

Sub fila Conținut ...

Imagine de fundal: [inserați imaginea 1280 × 936]
Utilizați metoda Parallax: DA
Metoda Parallax: Parallax adevărat

Adăugați imaginea # 1

Acum suntem citiți pentru a adăuga modulele noastre la rândul nostru. În prima coloană (stânga), adăugați un modul de imagine.

Apoi actualizați setările după cum urmează:

Sub fila Conținut ...

Adresa URL a imaginii: [introduceți imaginea nr. 1 a cardului de rețetă]

Sub fila Proiectare ...

Forțează lățimea completă: DA

Stil de animație: Slide
Direcția animației: sus
Intensitatea animației: 20%

Sub fila Avansat ...

Aici vom adăuga câteva CSS personalizate pentru a oferi imaginii cardului o margine rotunjită, o umbră de cutie și un filtru de estompare. Introduceți următorul CSS în caseta Elemente principale:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(2px) opacity(.75);

Salvează setările

Adăugați două module de text în coloana din mijloc

Apoi, adăugați un modul text în a doua (sau mijloc) coloană și actualizați setările după cum urmează:

Sub fila Conținut ...

Introduceți următorul antet h1 în fila text a casetei de conținut:

<h1>The Best Recipes for Success</h1>

Sub fila Proiectare ...

Font antet: Playfair Display, Bold (B)
Dimensiune font antet: 60 px
Înălțimea liniei antetului: 1.3em

Marjă personalizată: 20 px jos

Stil de animație: Fold
Direcția animației: sus

Salvează setările

Adăugați un alt modul de text sub cel pe care tocmai l-ați creat și actualizați setările după cum urmează:

Sub fila Conținut ...

Conținut: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur.

Sub fila Proiectare ...

Dimensiunea fontului textului: 18 px
Culoarea textului textului: rgba (0,0,0,0.56)
Înălțimea liniei textului: 1.9em
Marjă personalizată: 40 px

Stil de animație: Fold
Direcția animației: Jos
Întârziere animație: 150 ms

Salvează setările

Adăugați imaginea # 2

Adăugați un modul de imagine sub cele două module text pe care tocmai le-ați creat.

Apoi actualizați setările după cum urmează:

Sub fila Conținut ...

Adresa URL a imaginii: [introduceți imaginea cardului nr. 2]

Sub fila Proiectare ...

Forțează lățimea completă: DA

Stil de animație: Slide
Direcția animației: sus
Intensitatea animației: 10%

Sub fila Avansat ...

Aici vom adăuga CSS personalizat (similar cu prima imagine a cărții, cu excepția faptului că nu există efectul de estompare) pentru a da imaginii cărții o margine rotunjită și o umbră de cutie. Introduceți următorul CSS în caseta Elemente principale:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);

Salvează setările

Adăugați imaginea nr. 3

Să adăugăm a treia și ultima imagine a cărții noastre în a treia (sau dreapta) coloană, inserând un modul de imagine:

Apoi actualizați setările după cum urmează:

Sub fila Conținut ...

Adresa URL a imaginii: [introduceți imaginea cardului nr. 3]

Sub fila Proiectare ...

Forțează lățimea completă: DA

Marjă personalizată: 20% Top

Stil de animație: Slide
Direcția animației: sus
Intensitatea animației: 30%

Salvează setările

Sub fila Avansat ...

Adăugați acest CSS personalizat în caseta Element principal:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(8px) opacity(.4);

Salvează setările

Grozav! Aceasta încheie secțiunea 8 a paginii noastre demonstrative. Verificați rezultatul final.

Animația este surprinzător de realistă și folosește foarte bine caracteristica de paralaxă care mișcă fundalul în jos cu o viteză diferită de modulele așezate deasupra când derulați. Faptul că cărțile sunt animate în sus cu fundalul în jos dă impresia că cărțile plutesc. Trebuie să spun, conținutul apare într-adevăr în această secțiune.

Construirea secțiunii 9 din Demo

În secțiunea noastră finală, vom construi o secțiune simplă „Echipa noastră” cu o mică animație care literalmente „apare”. Iată ce vom construi:

Iată o privire asupra aspectului din vizualizarea wireframe.

Adăugați un antet de secțiune

Mai întâi, adăugați o secțiune obișnuită cu un rând cu o coloană. apoi adăugați un modul text în coloană.

Actualizați setările pentru text după cum urmează:

Sub fila Conținut ...

Conținut: Echipa noastră

Sub fila Proiectare ...

Font text: Raleway, Bold (B), majuscule (TT)
Dimensiunea fontului textului: 15 px
Culoarea textului textului: rgba (0,0,0,0.32)
Spațiere scrisoare text: 5 px
Înălțimea liniei textului: 1.9em

Marjă personalizată: 20 px

Stil de animație: Slide
Direcția animației: sus
Durata animației: 500 ms
Întârziere animație: 1000 ms

Sub fila Avansat ...

Salvează setările

Adăugați un alt modul text sub cel pe care tocmai l-ați creat și actualizați setările după cum urmează:

Sub fila Conținut ...

Introduceți următoarea etichetă h1 în fila text a casetei de conținut:

<h1>Highly Skilled Ninjas</h1>

Sub fila Proiectare ...

Font antet: Raleway Light
Aliniere text antet: centru
Dimensiune font antet: 48 px
Culoarea textului antetului: # 3a3830
Înălțimea liniei antetului: 1.3em

Marjă personalizată: 20 px jos

Stil de animație: Slide
Direcția animației: Corect
Intensitate animație: 12%

Salvează setările

Acum, pentru a adăuga linia mică de separare verde, adăugați un modul divizor sub modulul text.

Apoi actualizați setările divizorului după cum urmează:

Sub fila Conținut ...

Afișați divizorul: DA

Sub fila Proiectare ...

Culoare: # 7cda24

Greutatea divizorului: 3 px
Înălțime: 3 px
Lățime: 60 px (introduceți acest lucru)
Alinierea modulului: centru

Stil de animație: Slide
Direcția animației: Jos
Durata animației: 500 ms
Întârziere animație: 1000 ms
Intensitate animație: 200%

Salvează setările

Adăugarea celor patru imagini ale echipei

Pentru a adăuga imagini ale membrilor echipei noastre, adăugați un rând cu patru coloane sub rândul care conține antetul pe care tocmai l-am creat.

Adăugați un modul de persoană în prima coloană și actualizați setările după cum urmează:

Sub fila Conținut ...

Nume: Nick
Adresa URL a imaginii: [introduceți fotografia de 150 × 150]

Sub fila Proiectare ...

Font antet: Raleway Light, Bold (B), majuscule (TT)
Dimensiune font antet: 13 px
Culoare text antet: rgba (0,0,0,0.71)
Distanța între litere antet: 3 px

Sub fila Avansat ...

Adăugați următorul CSS în caseta Imagine membru:

border-radius: 100%;
overflow: hidden;
width: 180px;
margin: auto auto 20px auto;

Acest lucru va oferi imaginii noastre un chenar frumos.

Adăugați următorul CSS personalizat la descrierea membrilor:

text-align: center;
display: block;

Aceasta centrează numele.

Salvează setările

Acum puteți duplica modulul persoană pe care tocmai l-ați creat pentru a adăuga următoarele trei pentru a completa următoarele trei coloane. Tot ce trebuie să faceți este să actualizați imaginea și numele pentru fiecare dintre modulele pe care le copiați.

Odată ce ați adăugat toate cele patru module de persoană, sunteți gata pentru pasul final din această secțiune, care este stilarea și animarea rândului. Pentru aceasta, actualizați setările rândului după cum urmează:

Sub fila Proiectare ...

Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 2

Căptușeală personalizată: 60px Top

Stil de animație: Bounce
Durata animației: 700 ms
Întârziere animație: 1000 ms

Ei bine, aceasta încheie secțiunea 9 a paginii noastre demo de animație. Și, de asemenea, încheie seria din 6 părți despre utilizarea animației cu Divi.

Încheierea seriei

Sper că v-a plăcut să construiți pagina noastră Demo de animație. Designul singur este o mare inspirație. Și utilizarea animației pe tot parcursul va servi, fără îndoială, ca ghid de referință pentru viitoarele compilări de pagini. Mulțumiri speciale lui Kenny Sing, directorul nostru, pentru crearea acestui aspect. Suntem atât de mândri de asta, încât vrem să vă oferim acest aspect gratuit pentru a vă ajuta să începeți următorul proiect.

Bonus: Descărcați aceste secțiuni pentru import ușor

Ca un bonus bonus, am împachetat secțiunile incluse în tutorialul de astăzi într-o descărcare gratuită pe care o puteți obține utilizând formularul de înscriere prin e-mail de mai jos. Pur și simplu introduceți adresa de e-mail și va apărea butonul de descărcare. Nu vă faceți griji cu privire la „re-abonare” dacă faceți deja parte din buletinul nostru informativ Divi. Reintroduceți adresa de e-mail nu va avea ca rezultat mai multe e-mailuri sau duplicate. Va dezvălui pur și simplu descărcarea.

Bucurați-vă!

Descărcați pachetul de aspect

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!

Pentru a utiliza aceste descărcări, începeți prin localizarea fișierului zip numit All_Animation_Effects_1.zip în folderul nostru de descărcări. Dezarhivați-l pentru a dezvălui toate importurile din această serie - inclusiv ultimele două pentru această postare.

Navigați în administratorul dvs. WordPress la Divi> Biblioteca Divi> Import & Export. Când apare modul de portabilitate, faceți clic pe fila Import și pe butonul etichetat alegeți fișierul.

Selectați fișierul json pe care îl preferați și faceți clic pe „Importați machete Divi Builder”. Odată ce importul este finalizat, navigați la postare sau la pagina în care doriți să adăugați una dintre secțiunile de mai sus.

Activați constructorul vizual. Navigați la partea de pagină la care doriți să adăugați una dintre secțiunile de mai sus. Când faceți clic pe pictograma Adăugați o secțiune nouă, vi se va prezenta opțiunea „Adăugați din bibliotecă”. Alegeți această opțiune și selectați aspectul dorit.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!