Moduri creative de a combina efectele de derulare a rotației cu elementele circulare din Divi

Căutăm întotdeauna modalități noi și creative de a prezenta elementele prezentate (cum ar fi produsele și serviciile) atunci când proiectăm un nou site web. Și, cu efectele de defilare ale lui Divi, au fost deschise noi uși pentru a vă dezvolta aspectele blurb la un nivel complet nou. În acest tutorial, vă vom arăta cum să creați un aspect de modul blurb cu elemente circulare rotative pe scroll. Acest aspect unic oferă o utilizare inteligentă a combinațiilor de culori cu mai multe elemente circulare care se rotesc în spatele blurbs atunci când utilizatorul derulează pagina în jos. Fără îndoială, acest design ar avea o mulțime de aplicații pentru aproape orice conținut.

Bucurați-vă!

Trage cu ochiul

Iată o privire rapidă asupra aspectului blurb cu elemente circulare rotative pe care le construim în acest tutorial.

Descărcați GRATUIT aspectul rotativ al elementelor circulare rotative

Pentru a pune mâna pe desenele din acest tutorial, 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!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul JSON în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea aspectului Blurb cu elemente circulare rotative pe derulare în Divi

Adăugarea rândului

Mai întâi, adăugați trei rânduri de coloane la secțiune.

Marja de secțiune temporară

Apoi, adăugați niște margini de sus și de jos la secțiune pentru a crea un spațiu de derulare.

Crearea designului rotativ al elementului circular rotativ # 1

Pentru primul nostru design, vom crea un modul blurb cu trei module colorate care vor sta în spatele blurbului și se vor roti pe măsură ce utilizatorul se derulează. Acest prim design va servi ca un șablon bun pentru următoarele două modele pe care le vom adăuga la celelalte coloane.

Iată cum să-l construiești.

Adăugați modulul Blurb

În coloana 1, adăugați un modul blurb.

Blurb 1 Conținut

Deschideți setările pentru modulul blurb și actualizați conținutul corpului cu următoarele:

<p>Your content goes here. Edit or remove this text inline or in the module Content settings.</p>

Apoi adăugați o pictogramă la alegere pentru a înlocui imaginea implicită.

Setări de proiectare Blurb 1

Sub fila Proiectare, actualizați următoarele:

• Culoare fundal: # 121212
• Culoare pictogramă: # 41828d
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 75 px
• Alinierea textului: centru
• Titlu Font: Oswald
• Titlu Stil Font: TT
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 22 px
• Culoarea textului corpului: #ffffff

Pentru a face blurb circular, actualizați dimensiunea și colțurile rotunjite după cum urmează:

• Lățime: 300 px
• Lățime maximă: 300 px
• Căptușeală: 25 px sus, 25 px jos, 25 px stânga, 25 px dreapta
• Colțuri rotunjite: 50%

Combinația de lățime și înălțime egală combinată cu colțurile rotunjite este ceea ce face ca blurbul să fie circular.

Apoi actualizați poziția cu un offset.

• Poziție: relativă
• Decalaj vertical: 25 px
• Decalaj orizontal: 25 px
• Indicele Z: 1

Aceasta va centra blurbul în separatoarele pe care le vom adăuga mai târziu. Indexul Z se va asigura că blurb-ul se află deasupra celorlalte separatoare.

Apoi, adăugați un efect de derulare rotativă la blurb.

Sub fila Efecte rotative ...

• Activați rotirea: DA
• Rotație de pornire: 45 de grade (la 0% vizualizare)
• Rotație medie: 0 grade (la 40% -60% vizualizare)
• Rotație finală: -45 grade (la 100% vizualizare)

Aceasta va roti ușor blurb-ul într-o poziție verticală spre mijlocul paginii și apoi se va roti încă 45 de grade pe măsură ce părăsește partea de sus a paginii.

Adăugați divizorul circular nr. 1

Acum vom adăuga primul dintre cele trei module divizoare care vor alcătui designul nostru rotativ al elementelor circulare.

Adăugați un modul divizor sub modulul blurb.

Setări divizor 1

Deschideți setările divizorului și actualizați următoarele:

• Show Divider: NU
• Culoarea din stânga a gradientului de fundal: # 311847
• Culoare dreaptă a gradientului de fundal: # ec4067
• Poziția inițială: 50%
• Poziție finală: 50%

Și acum o facem circulară după cum urmează:

• Lățime: 350 px
• Lățime maximă: 350 px
• Înălțime: 350 px
• Colțuri rotunjite: 50%

Observați că divizorul este puțin mai mare decât modulul blurb, astfel încât vom putea vedea marginea exterioară a divizorului odată poziționată în spatele blurbului.
Acum pur și simplu actualizăm poziția divizorului la absolută și va sta perfect în spatele blurbului.

• Poziție: Absolută

Dacă divizorul dvs. stă deasupra blurbului, asigurați-vă că ați actualizat indexul blurb z la 1.

Apoi, adăugați următoarele efecte de derulare la divizor:

Sub fila Efect rotativ ...

• Activați rotirea: DA
• Rotație de pornire: 0deg (la 0% viewport)
• Rotație medie: 45 de grade (la 50% vizualizare)
• Rotație finală: -180 grade (la 100% vizualizare)

Adăugați divizorul circular 2

Pentru a crea al doilea divizor circular, deschideți caseta de straturi făcând clic pe pictograma straturilor din meniul de setări. Apoi copiați modulul divizor pentru a crea unul nou.

Actualizați divizorul 2 Setări de proiectare

Pentru acest divizor, să îi oferim o culoare de fundal diferită, după cum urmează:

• Culoarea stânga a gradientului de fundal: rgba (160,26,125,0,5)
• Culoarea dreaptă a gradientului de fundal: rgba (255,255,255,0)

NOTĂ: Este important să folosiți culori semi-transparente aici pentru a expune fundalul din spatele acestuia. Acest lucru creează o combinație frumoasă de culori.

Apoi, actualizați efectele de derulare după cum urmează:

Sub fila Efecte rotative ...

• Rotație medie: 90 de grade (la 50% vizualizare)
• Rotire de încheiereg: 180 de grade (la 100% vizualizare)

Adăugați divizorul circular 3

Continuați același proces pentru a crea al treilea și ultimul divizor duplicând divizorul 2.

Actualizați divizorul 3 Setări de proiectare

Pentru acest divizor, să îi dăm și o culoare de fundal diferită, după cum urmează:

• Culoarea stânga a gradientului de fundal: rgba (255,255,255,0)
• Culoarea dreaptă a gradientului de fundal: rgba (41.196.169,0.5)

Apoi actualizați efectele Scroll după cum urmează:

Sub fila Efecte rotative ...

• Rotație medie: 180 grade (la 50% vizualizare)
• Rotire finală: 360 de grade (la 100% vizualizare)

Sub fila Scalare în sus și în jos ...

• Activați scalarea în sus și în jos: DA
• Scară de început: 110% (la 0% vizualizare)
• Scală medie: 110% (la 50% vizualizare)
• Scara de încheiere: 100% (la 100% vizualizare)

Crearea designului rotativ al elementului circular rotativ # 2

Deoarece avem deja un design finalizat în coloana 1, să începem al doilea design prin duplicarea întregii prime coloane. Aceasta va prelua și cele patru module. Va trebui să ștergeți una dintre coloanele goale pentru a păstra aspectul celor trei coloane.

Actualizați designul modulului Blurb

Pentru acest design, vom merge cu un fundal alb de blurb, astfel încât să putem utiliza efectul de filtrare a ecranului pentru a arăta culorile în mișcare din spatele textului blurb. Vom adăuga, de asemenea, un efect de derulare a scalării pentru a face mai mare divizorul din spate.

Iată cum să o faci.

Deschideți setările modulului blurb din coloana 2 și actualizați următoarele:

• Fundal: #ffffff

Apoi schimbați culoarea textului titlului și corpului în negru.

• Culoarea textului titlului: # 000000
• Culoarea textului corpului: # 000000

Apoi adăugați următorul mod de amestecare:

• Blend Mode: ecran

Actualizați efectele de derulare a divizorului 1

Deschideți setările modulului divizor direct sub modulul blurb din coloana 2 și actualizați următoarele efecte de derulare:
Sub fila Scaling Up and Down effects ...

• Activați scalarea în sus și în jos: DA
• Scară de început: 100% (la 0% vizualizare)
• Scală medie: 120% (la 40% -60% vizualizare)
• Scara de încheiere: 100% (la 100% vizualizare)

Acest lucru va face ca divizorul să crească cu 20% dimensiunea inițială la jumătatea drumului, pe măsură ce utilizatorul derulează pagina.

Crearea designului rotativ al elementului circular rotativ # 3

Pentru acest ultim design, vom crea un blurb circular rotativ similar cu cel din coloana 1. Cu toate acestea, vom adăuga un mod de amestecare diferit pentru a afișa culorile prin textul alb pe un fundal întunecat.

Iată cum să o faci.

Duplicați coloana 1

Deoarece avem deja un design finalizat în coloana 1, să începem al treilea design prin duplicarea întregii prime coloane și să o mutăm în a treia plasare a coloanei folosind caseta de straturi. Apoi ștergeți coloana goală suplimentară.

Actualizați setările modulului Blurb

Mai întâi, să adăugăm modul de amestecare multiplă pentru a afișa culorile divizorului prin textul alb, după cum urmează:

• Blend Mode: multiplu

Apoi actualizați și culoarea pictogramei la alb.

• Culoare pictogramă: #ffffff

Actualizați setările Divider 3

Acum, să scoatem efectul de derulare a scalării pe ultimul (al treilea) separator din coloana 3.
Deschideți setările pentru al treilea separator și actualizați următoarele:

Sub fila Scaling Up and Down Effects ...

• Activați scalarea în sus și în jos: NU

Reglați poziția coloanei 2 pe mobil

În acest moment, cele trei modele de blurb se vor alinia la stânga ecranului pe afișajele de pe tabletă și telefon. Pentru a echilibra designul, putem deplasa cu ușurință coloana din mijloc spre dreapta folosind scala de transformare.

Deschideți setările pentru coloana 2 și actualizați următoarele:

Axa X Transform Scale: 40% (pe tabletă), 15% (pe telefon)

Rezultat final

Asta e! Să verificăm rezultatul final pe o pagină live.

Iată designul de pe desktop în timp ce utilizatorul parcurge aspectul.

Iată designul de pe tabletă.

Și iată-l la telefon.

Gânduri finale

Una dintre cele mai bune caracteristici ale acestui aspect este cât de creativ puteți obține cu efectele de derulare și combinațiile de culori, fiecare dintre acestea fiind ușor de modificat folosind opțiunile încorporate ale Divi. Și odată ce obțineți un control mai bun cu privire la modul de a încorpora efectele de filtrare, lucrurile chiar încep să apară. Sperăm că acest lucru vă va oferi o sursă de inspirație pentru următoarea machetă pe care o creați.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!