Cum se utilizează noile efecte de animație ale lui Divi

Bine ați venit la prima parte 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ției Divi.

Animația poate da viață unei pagini. Dacă este realizat eficient, utilizatorul poate deveni angajat și mai înclinat să exploreze conținutul de pe pagina dvs. Dacă sunt făcute prost, animațiile pot distrage complet utilizatorul și îl pot alunga într-o stare de dezamăgire uimită. Viteza, sincronizarea și intensitatea animației joacă un rol semnificativ în această simfonie a mișcării pe măsură ce utilizatorul derulează pagina.

Funcțiile avansate de animație ale Divi vă permit să adăugați animație la orice element al site-ului dvs. web. Și puteți combina aceste elemente animate pentru a crea nenumărate combinații de mișcare care fac ca secțiunile dvs. să prindă viață.

În prima parte a acestei serii, vă voi arăta cum să utilizați constructorul vizual pentru a construi și a anima primele două secțiuni ale paginii noastre demo live, prezentând puterea caracteristicilor de animație ale lui Divi.

Să începem.

Iată o scurtă privire asupra a ceea ce vom construi în această serie

Partea 1 a Seriei

Sectiunea 1

Sectiunea 2

Partea 2 a seriei

Secțiunea 3

Secțiunea 4

Partea 3 a Seriei

Secțiunea 5

Partea 4 a Seriei

Secțiunea 6

Partea 5 a Seriei

Secțiunea 7

Partea 6 a Seriei

Secțiunea 8

Secțiunea 9

Pregătirea elementelor de proiectare

Pentru prima secțiune, veți avea nevoie de două imagini. Prima este imaginea de fundal pe ecran complet, cu dimensiuni de aproximativ 1280 × 800. Iată-l pe cel pe care îl folosesc:

A doua imagine este o versiune editată a aceleiași imagini care a fost răsturnată vertical și estompată spre partea de jos. Această a doua imagine va servi drept fundal pentru titlul dvs. principal și ar trebui să fie în jur de 800 × 400.

Pentru a crea imaginea inversă, fie deschideți imaginea în Previzualizare și selectați Instrumente> Flip Vertical sau deschideți imaginea în Photoshop, selectați Image> Rotire imagine> Flip Canvas Vertical. Pentru a adăuga efectul de estompare în partea de jos a imaginii, am folosit instrumentul de șters în modul pensulă cu o dimensiune de 800 px și o duritate de 0%. Apoi am ținut schimbarea și am tras peria de-a lungul marginii de jos.

Asigurați-vă că îl exportați ca fișier PNG.

Dacă nu aveți Photoshop, puteți încerca o soluție gratuită de editare a fotografiilor, cum ar fi gimpshop, pentru a realiza multe dintre aceleași editări de proiectare. Dacă nu știți cum să utilizați un software de editare a fotografiilor (și nu vă pasă să învățați în acest moment), nu ezitați să lăsați a doua imagine deocamdată sau utilizați-o pe cea de mai jos (faceți clic și trageți-o pe desktop).

Pentru a doua secțiune, veți avea nevoie de două imagini. Primul ar trebui să fie în jur de 730 × 490 ca acesta.

Iar al doilea ar trebui să fie în jur de 525 × 660 ca cel de mai jos.

Înțelegerea terminologiei animației

Dacă nu ați făcut-o deja, continuați și citiți postarea de actualizare a caracteristicilor, introducând animații avansate. La sfârșitul postării, Nick oferă o definiție / descriere utilă a fiecărei caracteristici de animație pe care le veți găsi în întregul constructor. Înțelegerea a ceea ce fac de fapt aceste caracteristici de animație este importantă pentru procesul de creare.

Odată ce ați înțeles ce sunt aceste caracteristici de animație, să ne scufundăm.

Cum se utilizează noile efecte de animație ale lui Divi

Abonați-vă la canalul nostru Youtube

Adăugați noile setări ale paginii

Din tabloul de bord WordPress, accesați Pagini> Adăugați un nou. Apoi adăugați un titlu pe pagina dvs. Apoi, găsiți Setările paginii Divi în caseta din dreapta sus a paginii și selectați Navigare punct „ACTIVAT”. În caseta Atribute pagină, selectați Pagină goală pentru șablonul paginii dvs. În cele din urmă, faceți clic pe butonul „Utilizați Divi Builder” și implementați Visual Builder pentru a începe să vă construiți aspectul.

Secțiunea 1 a clădirii: Design și animație a antetului pe ecran complet

Această secțiune de antet se va comporta la fel ca un modul de antet cu lățime completă setat pe ecran complet. Cu alte cuvinte, atunci când site-ul se încarcă, secțiunea va umple întreaga lățime și înălțime a ferestrei browserului, indiferent de dimensiunea ferestrei. Dar, în loc să folosim modulul de antet cu lățime completă, vom folosi o secțiune standard și vom seta înălțimea la 100vh. Astfel putem adăuga un modul de text în interiorul acestuia.

Folosind Visual Builder, faceți clic pentru a edita setările secțiunii secțiunii standard deja afișate implicit la lansarea constructorului. Actualizați următoarele:

Sub fila Conținut ...

Imagine de fundal: [introduceți imaginea de fundal 1280 × 800]
Utilizați Efect Parallax: DA
Metoda Parallax: Parallax adevărat

Sub fila Proiectare ...

Căptușeală personalizată: 5% sus, 0 px dreapta, 5% jos, 0 px stânga

Sub fila Avansat ...

Adăugați următoarele CSS personalizate în caseta Element principal:

min-height: 100vh

Această linie de CSS spune secțiunii să afișeze 100% din înălțimea ferestrei.

Salvează setările

Apoi introduceți o structură cu o coloană în rândul dvs. și adăugați un modul de text în coloană. Actualizați setările modulului text după cum urmează:

Sub fila Conținut ...

Pur și simplu adăugați cuvântul „Divi” în caseta de conținut.

Sub fila Proiectare ...

Font text: Oswald, majuscule (TT)
Dimensiunea fontului textului: 14 px
Culoarea textului textului: # 08408e
Spațiere scrisoare text: 1,5em (va trebui să introduceți acest lucru)
Orientare text: centru
Marja personalizată: 2%
Stil de animație: Flip
Repetați animația: o dată
Direcția animației: Corect
Durata animației: 2000 ms
Întârziere animație: 1100 ms
Intensitate animație: 100%
Animație Opacitate de pornire: 0%
Curba de viteză a animației: ușurință-intrare-ieșire

Time Out ... Să facem o pauză pentru un minut, astfel încât să vă pot arăta ce ar fi nevoie pentru a adăuga manual această animație similară.

Iată html-ul cu stil inline necesar pentru animație:

<div class="et_animated flipLeft" style="position: absolute; animation-duration: 2000ms; animation-delay: 1100ms; opacity: 0; animation-timing-function: ease-in-out; transform: perspective(2000px) rotateY(-90deg);">
<div style="position:relative;">Divi</div>
</div>

Iată CSS-ul necesar animației:

@keyframes et_pb_flipLeft {
    from {
        transform-origin: center
    }

    to {
        opacity: 1;
        transform: rotateY(0)
    }
}

.et_animated.flipLeft {
    animation-name: et_pb_flipLeft
}

.et_animated {
    animation-fill-mode: both!important;
}

Și acest lucru nu include codul necesar pentru a activa animația atunci când devine vizibilă în fereastra browserului. Oricum, toate acestea pentru a spune că aceste caracteristici de animație încorporate sunt un economisitor de timp uriaș. Și posibilitatea de a vedea animația în timp ce editați opțiunile de animație este un bonus considerabil.

Acum, să continuăm cu actualizarea setărilor modulului nostru text:

Sub fila Avansat ...

Adăugați următoarea linie de CSS personalizat în caseta Element principal:

text-indent: 1.5em

Salvează setările

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

Sub fila Conținut ...

Adăugați următorul html în fila text a casetei de conținut:

<p><span>Believing</span><br />is  Seeing</p>

Sub fila Proiectare ...

Culoarea textului: deschis
Font text: Oswald, majuscule (TT)
Dimensiunea fontului textului: 8vw (trebuie să tastați acest lucru; aceasta face ca dimensiunea fontului să fie 8% din lățimea ferestrei)
Culoarea textului textului: rgba (255,255,255,0,79)
Înălțimea liniei de text: 1.4em
Orientare text: centru
Stil de animație: Fold
Direcția animației: sus
Durata animației: 1800 ms
Întârziere animație: 0 ms
Intensitatea animației: 60%

Salvează setările

Acest efect de animație va dezvălui titlul principal pliant (sau în picioare) în sus dintr-o poziție aparent plană. Acum, când am terminat cu textul principal al titlului, să adăugăm imaginea de fundal cu capul în jos la rând.

Acum accesați Setările rândului din rândul care conține cele două module text pe care tocmai le-ați creat și actualizați setările după cum urmează:

Sub fila Conținut ...

Imagine de fundal: [introduceți imaginea dvs. de 800 × 440]
Dimensiunea imaginii de fundal: potrivită
Poziția imaginii de fundal: Centrul de sus
Repetarea imaginii de fundal: fără repetare

Sub fila Proiectare ...

Utilizați lățimea personalizată: DA
Unitate: %
Lățime personalizată: 50%
Căptușeală personalizată: 12% sus, 0% dreapta, 5% jos, 0% stânga
Stil de animație: Slide
Direcția animației: sus
Întârziere animație: 300 ms
Intensitatea animației: 20%

Acest efect de animație alunecă imaginea în sus, aproape ca și cum ar crește din spatele munților.

Gata pentru prima secțiune. Să verificăm designul și animația finală.

Cele trei elemente animate aici includ Rândul (care alunecă în sus), modulul de text cu textul „A crede este a vedea” (care se pliază din centrul său) și modulul de text cu textul „Divi” (care este întârziat să se deschidă spre dreapta după ce celelalte elemente s-au oprit). Combinația implică într-adevăr vizitatorul prin dezvăluirea diferitelor conținuturi într-un mod intenționat și în timp util.

Secțiunea 2 a clădirii

Această a doua secțiune a paginii noastre demo de animație prezintă un mod subtil, dar extrem de interesant de a dezvălui conținut pe pagina dvs. De fapt, este aproape imposibil să recunoaștem toate mișcările la prima vedere.

Pentru a construi a doua secțiune, adăugați o secțiune obișnuită în secțiunea anterioară. În secțiune adăugați un rând cu două coloane (jumătate jumătate).

În coloana din stânga, adăugați un modul text cu următoarele setări:

Sub fila Conținut ...

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

<h1>Time is money</h1>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit pretium felis, sit amet sollicitudin eros dignissim at. Cras molestie nisl enim.</span></p>

Sub fila Proiectare ...

Culoarea textului: deschis
Font text: Montserrat
Dimensiunea fontului textului: 18 px
Înălțimea liniei textului: 1,8em
Font antet: Montserrat, Bold (B), majuscule (TT)
Dimensiune font antet: 39 px (desktop)
Înălțimea liniei antetului: 2.2em
Marja-fund: 50 px
Stil de animație: Slide
Direcția animației: sus
Intensitatea animației: 10%

Acest efect de animație va dezvălui blocul de text prin glisarea acestuia în sus.

Salvează setările

Apoi adăugați un modul buton sub modulul Text pe care tocmai l-ați creat. Actualizați setările modulului buton după cum urmează:

Sub fila Conținut ...

Text buton: Aflați mai multe
Adresa URL a butonului: # (sau orice vrei să fie)

Sub fila Proiectare ...

Aliniere buton: stânga
Culoarea textului: deschis
Utilizați stiluri personalizate pentru buton: DA
Dimensiune text buton: 15 px
Raza chenarului butonului: 0
Distanța dintre litere și butoane: 3 px
Buton Font: Montserrat, Bold (B), majuscule (TT)
Afișează pictograma butonului: DA
Căptușeală personalizată: 10 px sus, 30 px dreapta, 10 px jos, 30 px stânga
Stil de animație: Slide
Direcția animației: Jos
Întârziere animație: 100 ms
Intensitatea animației: 10%

Pentru a contrabalansa efectul textului anterior de mai sus, acest efect de animație va dezvălui butonul glisându-l în jos cu o ușoară întârziere.

Nu puteți vedea încă textul și butonul, deoarece este în prezent text alb pe fundal alb. Este în regulă. Vom adăuga fundalul nostru în curând.

Apoi adăugați un modul divizor în coloana din dreapta.

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

Sub fila Proiectare ...

Înălțime: 260 px

Sub fila Avansat ...

Dezactivați vizibilitatea pe desktop

Adăugarea unui separator aici va ajuta imaginea de fundal să rămână vizibilă pe dispozitivele mobile.

Salvează setările

Acum, să adăugăm fundalurile noastre la fiecare dintre coloanele noastre. Accesați Setările rândului și actualizați următoarele:

Sub fila Conținut ...

Coloana 1 Culori de gradient de fundal: # fe8840, rgba (238,78,78,0.9)
Coloana 1 Direcție gradient: 135deg
Coloana 2 Imagine de fundal: [introduceți imaginea dvs. de 730 × 490]
Coloana 2 Poziția imaginii de fundal: stânga sus
Coloana 2 Repetare imagine de fundal: Fără repetare

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
Egalizați înălțimile coloanei: DA
Împletire personalizată: 0 px sus, 0 px dreapta, 0 px jos, 0 px stânga
Coloana 1 Căptușeală personalizată: 5% sus, 7% dreapta, 5% jos, 7% stânga
Stil de animație: Fold
Direcția animației: sus
Durata animației: 800 ms

Acest efect de animație va dezvălui întregul rând pliant (sau în picioare) în sus în vizualizare.

Sub fila Avansat ...

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

box-shadow: -20px 0px 60px -20px rgba(255, 130, 65, 0.88);

Salvează setările

Apoi adăugați un rând cu două coloane (o treime două treimi) sub rândul pe care tocmai l-ați terminat de creat.

În coloana din stânga adăugați un modul divizor și actualizați setările după cum urmează:

Sub fila Proiectare ...

Înălțime: 400 px

Sub fila Avansat ...

Dezactivați vizibilitatea pe desktop

Adăugarea unui separator aici va ajuta imaginea de fundal să rămână vizibilă pe dispozitivele mobile.

Salvează setările

Pentru a economisi timp, faceți clic dreapta și copiați modulul de text din coloana din stânga a rândului de mai sus care conține textul „Timpul este bani”. Apoi lipiți-l în coloana din dreapta (două treimi) a rândului de mai jos.

Actualizați noile setări ale modulului text după cum urmează:

Sub fila Conținut ...

Schimbați textul antetului h1 la „Navigați ca un profesionist” în caseta de conținut.

Sub fila Proiectare ...

Culoarea textului textului: # a8a8a8
Culoarea textului antetului: # 414159
Stil de animație: Slide
Direcția animației: Jos
Intensitatea animației: 10%

Acest efect de animație dezvăluie blocul de text glisându-l în jos în vizualizare.

Acum faceți clic dreapta și copiați modulul buton din coloana din stânga a rândului de mai sus și lipiți-l sub modulul text pe care tocmai l-ați terminat de editat.

Actualizați setările modulului buton după cum urmează:

Culoarea textului butonului: # ff4823
Culoare margine buton: # ff4823
Culoare text buton deplasare: # ff2323

Salvează setările

Pentru ultimul pas, modificați setările rândului actualizând următoarele:

Sub fila Conținut ...

Culoare fundal: #ffffff
Coloana 1 Imagine de fundal: [introduceți imaginea de 525 × 660]
Coloana 1 Poziția imaginii de fundal: stânga sus
Coloana 1 Repetarea imaginii de fundal: Fără repetare
Coloana 2 Culori de gradient de fundal: rgba (255,255,255,0,91), #ffffff
Coloana 2 Direcție gradient: 135deg

Sub fila Proiectare ...

Utilizați lățimea personalizată: DA
Lățime personalizată: 1040 px
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA
Împletire personalizată: 0 px sus, 0 px dreapta, 0 px jos, 0 px stânga
Coloana 2 Căptușeală personalizată: 5% sus, 7% dreapta, 5% jos, 7% stânga
Stil de animație: Fold
Direcția animației: Jos
Durata animației: 800 ms

Acest efect de animație va dezvălui întregul rând pliant în jos în vizualizare.

Sub fila Avansat ...

Adăugați următorul CSS personalizat sub caseta Element principal:

box-shadow: 0 40px 90px -35px rgba(0,0,0,.3);

Gata pentru această secțiune. Verificați rezultatele.

Deoarece elementele de animație și design ale acestei secțiuni sunt subtile, cred că este un exemplu excelent al tipului de design și animație care ar putea fi utilizat pe majoritatea paginilor. Rândurile de sus și de jos se deschid ca și cum ai privi o carte care se deschide din spate. Textul și butoanele se mișcă ușor în sus pe rândul de sus și în jos pe rândul de jos. O combinație grozavă.

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 comprimat numit Animation_Effects_Part_1.zip în folderul nostru de descărcări. Dezarhivați-l pentru a dezvălui următoarele importuri.

Animation Effects Part 1 (secțiunea 1) .json

Animation Effects Part 1 (secțiunea 2) .json

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.

Încheierea

Sper că aceste două secțiuni vor servi drept inspirație pentru viitoarele versiuni folosind funcțiile de animație ale lui Divi. Numai conceptele de design sunt grozave, iar aspectele pot fi ușor adaptate oricărui site web cu doar câteva modificări minore. Rămâneți la curent, deoarece vom acoperi mult mai multe în această serie.

Venind

În următoarea parte a acestei serii, voi continua explorarea caracteristicilor avansate de animație ale lui Divi, construind secțiunile 3 și 4 ale paginii noastre demo de animație.

Iată ce vă puteți aștepta să construiți.

Secțiunea 3:

Secțiunea 4:

Vă rugăm să lăsați comentariile pe care le aveți mai jos.

Noroc!