Cum să creați tranziții de pagini animate cu Divi's Theme Builder

În mod normal, când vizitatorii navighează de la o pagină la alta pe site-ul dvs. Divi, tranziția are loc instantaneu. Acum, dacă există o modalitate de a anima aceste tranziții de pagină? Cu Divi's Theme Builder există sigur, fără a fi nevoie de niciun cod personalizat! De îndată ce vizitatorii dvs. părăsesc o pagină pentru a intra în alta, puteți face aplicarea unei animații. În tutorialul de astăzi, vă vom arăta cum să creați aceste tranziții de pagini animate. Mai mult, vom împărtăși, de asemenea, trei exemple diferite pe care le puteți aplica imediat la următorul dvs. proiect. Veți putea descărca și șablonul JSON gratuit!

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.

Tranziție de pagină animată nr. 1

Desktop

Mobil

Tranziția paginii animate nr. 2

Desktop

Mobil

Tranziția paginii animate nr. 3

Desktop

Mobil

Descărcați șabloanele de pagină GRATUIT

Pentru a vă pune mâinile pe șabloanele de pagină gratuite, va trebui mai întâi să le 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!

1. Accesați Divi Theme Builder și adăugați un șablon de pagină nou

Accesați Divi Theme Builder și adăugați un șablon nou

Primul lucru pe care trebuie să-l faceți este să mergeți la Divi Theme Builder și să faceți clic pe „Adăugați un șablon nou”.

Utilizați șablonul în toate paginile

Utilizați noul șablon pe toate paginile (sau paginile la care doriți să se aplice tranziția).

• Utilizați pe: Toate paginile

Începeți să construiți corpul șablonului

Apoi, începeți să creați corpul personalizat al șablonului de pagină.

2. Creați corpul paginii utilizând modulul Conținut postat

Setări secțiune

Spațiere

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și eliminați toate căptușelile implicite de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Vizibilitate

Pentru a ne asigura că nu apare nicio bară de derulare orizontală atunci când se întâmplă animația, va trebui să ascundem ambele debordări de secțiuni în fila avansată a setărilor secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând 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 containerului secțiunii.

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

Spațiere

De asemenea, eliminăm umplutura implicită de sus și de jos a rândului. În acest moment, containerele pentru secțiuni, rânduri și coloane au exact aceeași dimensiune. Nu există niciun spațiu alb între containere. Acest lucru este important pentru ceea ce va urma în pasul următor; adăugarea conținutului dinamic al paginii.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de conținut pentru postare în coloană

Singurul modul de care avem nevoie pentru a face ca conținutul paginii să apară dinamic este modulul Post Content. Continuați și adăugați acest modul în coloana rândului dvs. Datorită setărilor de secțiune și rând pe care le-am aplicat în părțile anterioare ale acestei postări, conținutul dinamic al paginii va ocupa întreaga lățime și înălțime a containerului secțiunii.

3. Aplicați tranziția de pagină animată la alegere

Recreați tranziția de pagină animată nr. 1

Setări secțiune

Culoare de fundal

Este timpul să aplicați tranzițiile de pagini animate! Împărtășim trei exemple diferite, dar cu opțiunile integrate Divi, posibilitățile de animație sunt nelimitate. Pentru a aplica prima tranziție animată a paginii, deschideți containerul secțiunii și adăugați o culoare de fundal.

• Culoare fundal: # d8cdbe

Animaţie

De asemenea, aplicăm următoarele secțiuni de animație pentru secțiune:

• Stil de animație: Slide
• Direcția animației: Corect
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Setări rând

Culoare de fundal

Deschideți apoi setările rândului și adăugați următoarea culoare de fundal:

• Culoare fundal: # e2e2e2

Animaţie

Continuați aplicând următoarea animație pe rând:

• Stil de animație: Slide
• Direcția animației: Corect
• Întârziere animație: 500 ms
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Setări coloană

Culoare de fundal

La următorul container pe care îl vom anima, care este containerul coloană. Deschideți setările coloanei și adăugați o culoare albă de fundal.

• Culoare fundal: #ffffff

Animaţie

Adăugați și o animație personalizată în coloană.

• Stil de animație: Slide
• Direcția animației: Stânga
• Întârziere animație: 1200 ms
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Postați setările modulului de conținut

Animaţie

Nu în ultimul rând, vom anima modulul Post Content (care conține tot conținutul dinamic al paginii).

• Stil de animație: Fade
• Întârziere animație: 2500 ms
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Recreați tranziția de pagină animată nr. 2

Setări secțiune

Culoare de fundal

Doriți să creați a doua animație? Deschideți setările secțiunii și utilizați următoarea culoare de fundal:

• Culoare fundal: # d8cdbe

Animaţie

Apoi, aplicați o animație personalizată secțiunii.

• Stil de animație: Slide
• Direcția animației: Stânga
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Setări rând

Fundal de gradient

Deschideți apoi setările rândurilor și utilizați următorul fundal de gradient pentru aceasta:

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: liniar
• Direcția gradientului: 90 grade
• Poziția inițială: 50%
• Poziție finală: 50%

Animaţie

Adăugați și o animație personalizată la rândul dvs.

• Stil de animație: Slide
• Direcția animației: sus
• Întârziere animație: 800 ms
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință
• Repetați animația: o dată

Setări coloană

Culoare de fundal

Apoi, deschideți setările coloanei rândului și utilizați o culoare de fundal alb.

• Culoare fundal: #ffffff

Animaţie

Continuați adăugând o animație în coloană.

• Stil de animație: Slide
• Direcția animației: Corect
• Întârziere animație: 2000 ms
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Postați setările modulului de conținut

Animaţie

Nu în ultimul rând, deschideți setările Modulului de conținut Post și utilizați următoarele setări de animație:

• Stil de animație: Fade
• Întârziere animație: 3000 ms
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Recreați tranziția de pagină animată # 3

Setări secțiune

Fundal de gradient

La următoarea și ultima tranziție animată a paginii! Deschideți setările secțiunii și utilizați următorul fundal de gradient:

• Culoare 1: # d8cdbe
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 20%
• Poziție finală: 20%

Animaţie

Treceți la fila de proiectare a secțiunii și modificați setările de animație în consecință:

• Stil de animație: Slide
• Direcția animației: Jos
• Intensitatea animației: 10%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Setări rând

Fundal de gradient

Apoi, deschideți setările rândului și aplicați un fundal de gradient:

• Culoare 1: #ffffff
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 50%
• Poziție finală: 50%

Animaţie

Modificați și setările de animație ale rândului.

• Stil de animație: Slide
• Direcția animației: Jos
• Întârziere animație: 1000 ms
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință
• Repetați animația: o dată

Setări coloană

Culoare de fundal

Continuați deschizând setările coloanei. Schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Animaţie

Aplicați următoarele setări de animație și la coloană:

• Stil de animație: Slide
• Direcția animației: Jos
• Întârziere animație: 1500 ms
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Postați setările modulului de conținut

Animaţie

Și finalizați cea de-a treia tranziție de pagină animată prin aplicarea următoarelor setări de animație la modulul Conținut postat:

• Stil de animație: Fade
• Întârziere animație: 3000 ms
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

6. Salvați toate modificările și rezultatul previzualizării constructorului de teme

După ce ați construit corpul șablonului de pagină și ați adăugat tranziția de pagină animată la alegere, puteți salva toate modificările Theme Builder și puteți vedea rezultatul pe site-ul dvs. web!

previzualizare

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

Tranziție de pagină animată nr. 1

Desktop

Mobil

Tranziția paginii animate nr. 2

Desktop

Mobil

Tranziția paginii animate nr. 3

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați tranziții de pagini animate numai cu opțiunile încorporate ale Divi și numai cu Theme Builder. Acesta este un mod excelent de a adăuga un alt nivel de interacțiune pe site-ul dvs. web, fără a fi nevoie de cod suplimentar. Ați reușit să descărcați și exemplarul de fișiere JSON gratuit! 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ă 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.