Cum să conduci în mod persuasiv vizitatorii pe pagină cu setările de animație încorporate ale lui Divi

Unul dintre principalele scopuri ale secțiunilor eroi este de a convinge oamenii să deruleze în continuare pe pagină și să descopere mai mult conținut și informații pe care le-ați partajat. Cu opțiunile de animație încorporate ale Divi, puteți adăuga animații interactive la pagina dvs., care vă vor ajuta să conduceți persuasiv vizitatorii în josul paginii. În acest tutorial, vom motiva vizitatorii să deruleze în jos la secțiunea de servicii folosind pictograme săgeată care îi vor conduce la secțiunea de servicii.

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

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați secțiunea nr. 1

Culoare de fundal

Creați o pagină nouă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoare fundal: # 0f0f0f

Separator inferior

Continuați adăugând un separator inferior în secțiune.

• Stil divizor: Găsiți în listă
• Culoare divizor: #ffffff
• Înălțimea împărțitorului: 30 px
• Repetare orizontală a separatorului: 10x (desktop), 4x (tabletă și telefon)

Spațiere

Adăugați și câteva valori de umplere personalizate.

• Căptușeală superioară: 269 px (desktop), 100 px (tabletă și telefon)
• Căptușeală inferioară: 674 px (desktop), 200 px (tabletă și telefon)

Adăugați rând

Structura coloanei

Apoi, adăugați un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările de rând, accesați setările de dimensionare și activați opțiunea „Make This Row Fullwidth”.

• Faceți acest rând lățime completă: Da

Adăugați un modul de text

Adauga continut

Singurul modul de care avem nevoie în acest rând este un modul de text. Continuați și adăugați un conținut H1 la alegere.

Setări text antet

Schimbați apoi setările pentru textul antetului.

• Font de titlu: Didact Gothic
• Greutatea fontului de titlu: Bold
• Alinierea textului de antet: centru
• Culoare text antet: #ffffff
• Dimensiune text antet: 170 px (desktop), 50 px (tabletă și telefon)
• Înălțimea liniei de direcție: 0.8em

• Textul antetului Umbra Lungime verticală: 1,5em
• Culoare umbră text antet: rgba (0,0,0,0.11)

Adăugați secțiunea 2

Culoare de fundal

Continuați adăugând a doua secțiune la pagină. Schimbați culoarea de fundal în setările secțiunii.

• Culoare fundal: # 0f0f0f

Divizor de top

Adăugați și un separator superior la secțiune.

• Stil divizor: Găsiți în listă
• Culoare divizor: #ffffff
• Înălțimea împărțitorului: 30 px
• Repetare orizontală a separatorului: 10x (desktop), 4x (tabletă și telefon)

Spațiere

Și măriți valorile spațierii în setările de spațiere.

• Căptușeală superioară: 245 px
• Căptușeală inferioară: 245 px

Adăugați rând

Structura coloanei

Continuați adăugând un nou rând cu următoarea structură de coloane în secțiune:

Dimensionare

Deschideți setările rândului, accesați setările de dimensionare și efectuați câteva modificări.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2

Adăugați modul Blurb

Selectați pictograma

Primul modul de care vom avea nevoie în prima coloană este un modul Blurb. Singura parte a elementului Blurb Module de care avem nevoie este pictograma. Selectați pictograma săgeată care indică în jos.

Setări pictograme

Apoi, accesați fila Design și modificați setările pictogramei.

• Culoare pictogramă: # 4ffcff
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 150 px

Spațiere

Pentru a crește acoperirea pictogramei, va trebui să adăugăm o marjă superioară negativă. Acest lucru va permite modulului Blurb să se suprapună cu secțiunea anterioară și va permite ca animația dintre două secțiuni să se desfășoare fără probleme. Pentru a compensa marja personalizată, vom adăuga și umplutura personalizată de sus. Acest lucru vă va asigura că pictograma rămâne exact în aceeași poziție ca înainte. Singurul lucru care se schimbă este dimensiunea și acoperirea întregului modul.

• Marja superioară: -550 px
• Căptușeală superioară: 550 px

Animaţie

Nu în ultimul rând, adăugați o animație la modulul Blurb folosind următoarele setări:

• Stil de animație: Slide
• Direcția animației: Jos
• Durata animației: 3000 ms
• Întârziere animație: 1200 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire
• Animație imagine / pictogramă: fără animație

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

Adauga continut

Următorul modul de care avem nevoie în prima coloană este un modul de text. Adăugați un conținut la alegere.

Setări text

Continuați modificând setările de text.

• Font de text: Didact Gothic
• Greutatea fontului textului: Bold
• Culoare text: rgba (255.255.255,0.03)
• Dimensiune text: 350 px
• Orientare text: centru

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

Adauga continut

Adăugați un al doilea modul de text la prima coloană cu un conținut H3 la alegere.

Setări text antet

Și modificați setările pentru textul antetului din fila de proiectare.

• Rubrica 3 Font: Didact Gothic
• Titlul 3 Aliniere text: centru
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text: 40 px (desktop), 30 px (tabletă și telefon)
• Rubrica 3 Spațierea literelor: -1 px

Adăugați un modul divizor în coloana 1

Vizibilitate

Următorul modul necesar în prima coloană este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Continuați schimbând culoarea separatorului în fila de proiectare.

• Culoare: #ffffff

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 59%
• Alinierea modulului: centru

Animaţie

Și adăugați și o animație la modul.

• Stil de animație: Slide
• Regia de animație: Centru
• Durata animației: 2000 ms
• Intensitatea animației: 10%
• Curba de viteză a animației: ușurință-intrare-ieșire

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

Adauga continut

Următorul și ultimul modul de care avem nevoie în coloana unu este un alt modul de text. Adăugați un conținut la alegere.

Setări text

Continuați modificând setările de text.

• Fontul textului Greutate: ușor
• Culoarea textului: # b7b7b7
• Dimensiune text: 18 px
• Înălțimea liniei textului: 1,8em
• Orientare text: centru

Animaţie

Și adăugați o animație la modul.

• Stil de animație: Slide
• Direcția animației: sus
• Intensitatea animației: 20%
• Curba de viteză a animației: ușurință-intrare-ieșire

Clonați modulele de 3 ori și plasați duplicatele în coloanele rămase

Acum, după ce am terminat de modificat toate modulele din coloana 1, putem clona toate modulele din coloana 1 de 3 ori și plasa duplicatele în coloanele rămase.

Schimbați conținutul modulului

Schimbați conținutul duplicatelor.

Adăugați întârziere de animație la modulele de separare a duplicatelor

Adăugați o anumită întârziere a animației la fiecare dintre duplicatele modulului divizor.

• Modul divizor în coloana 2: 400ms
• Modul divizor în coloana 3: 800ms
• Modul divizor în coloana 4: 1200ms

Adăugați întârziere animație la modulul text # 3 Duplicați

Faceți același lucru pentru ultimul modul de text din fiecare coloană.

• Ultimul modul de text din coloana 2: 400 ms
• Ultimul modul de text din coloana 3: 800 ms
• Ultimul modul de text din coloana 4: 1200 ms

Personalizați pictograma Blurb # 2

Culoare pictogramă

De asemenea, modificăm culoarea și animația pictogramei blurb pentru fiecare dintre duplicate. Deschideți modulul Blurb din coloana 2 și schimbați culoarea pictogramei.

• Culoare pictogramă: # ff6b86

Animaţie

Modificați și setările de animație.

• Tipul de animație: Slide
• Direcția animației: Jos
• Durata animației: 2000 ms
• Întârziere animație: 800 ms
• Intensitatea animației: 62%
• Animație Opacitate de pornire: 100%
• Animație imagine / pictogramă: fără animație

Personalizați pictograma Blurb # 3

Culoare pictogramă

Continuați deschizând Blurb Module în coloana 3 și modificați culoarea pictogramei.

• Culoare pictogramă: # ffe500

Animaţie

Modificați și setările de animație.

• Tipul de animație: Slide
• Direcția animației: Jos
• Durata animației: 1000 ms
• Întârziere animație: 600 ms
• Intensitatea animației: 69%
• Animație Opacitate de pornire: 100%
• Animație imagine / pictogramă: fără animație

Personalizați pictograma Blurb # 4

Culoare pictogramă

Deschideți ultimul modul Blurb, în ​​coloana 4 și schimbați culoarea pictogramei.

• Culoare pictogramă: # 00ff9d

Animaţie

Și finalizați designul modificând setările de animație din fila Design.

• Tipul de animație: Slide
• Direcția animației: Jos
• Durata animației: 3000 ms
• Întârziere animație: 400 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%
• Animație imagine / pictogramă: fără animație

Gânduri finale

În această postare, v-am arătat cum să conduceți convingător vizitatorii în josul paginii folosind setările de animație ale Divi. Ideea de bază este că folosești Blurb Modules pentru pictogramele lor și le crești acoperirea animației la secțiunea erou. Puteți utiliza această abordare pe orice fel de site web pe care îl creați și deveniți la fel de creativi pe cât doriți. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!