Cum se creează o animație Wave ca divizor în Divi

Publicat: 2024-12-30

În calitate de designer web, crearea unui site web atractiv din punct de vedere vizual este o necesitate. Ne bazăm adesea pe elemente de design subtile, dar captivante pentru a atinge acest obiectiv. Un astfel de element este animația valurilor, care poate servi ca un divizor elegant, separând perfect secțiunile paginii dvs. web, adăugând în același timp un flux dinamic designului.

Crearea acestui efect în Divi, un constructor popular de pagini WordPress, poate părea o provocare, dar cu tehnicile potrivite și creativitatea ta, este foarte posibil și realizabil.

În acest articol, vă vom ghida prin procesul pas cu pas de creare a unui divizor de animație cu valuri în Divi, utilizând instrumentele sale încorporate, setările personalizate și o notă de CSS pentru un plus de lustruire. Acest ghid vă va ajuta să transformați divizoarele statice în animații atrăgătoare, îmbunătățind estetica și experiența utilizatorului site-ului dvs.

Cum se creează o animație Wave ca divizor în Divi

Pasul 1. Creați un val SVG

În primul rând, trebuie să creăm valul SVG. Există multe moduri și instrumente de a crea un val SVG. În acest exemplu, vom folosi unul dintre generatoarele de unde SVG online care oferă o interfață ușor de utilizat cu opțiuni.

Faceți clic pe acesta și începeți să creați valuri SVG frumoase.

Personalizați forma valului

Apoi, puteți ajusta parametrii după preferințele dvs., cum ar fi amplitudinea, lungimea de undă, frecvența etc., pentru a controla aspectul undei.

Controlează culorile

Puteți alege culoarea undei dvs. SVG utilizând un selector de culori interactiv sau introducând coduri de culoare (coduri hexadecimale sau valori RGB).

Pentru a face undele SVG să se amestece bine cu elementul de dedesubt, vă recomandăm să alegeți aceeași culoare ca culoarea de fundal a secțiunii sub elementul SVG.

Export

În cele din urmă, copiați codul SVG generat pentru a fi utilizat în proiectul dvs. Păstrează-l pentru că vom avea nevoie de el mai târziu.

Pasul 2: Adăugați o secțiune nouă

Vom localiza divizorul de undă animat într-o secțiune separată. Prin crearea unei secțiuni separate, veți izola separatorul wave de alt conținut de pe pagina dvs. Îl face mai ușor de stilat, poziționat și gestionat independent.

Accesați Divi Visual Builder selectând tipul de postare existent (pagină sau postare). Apoi, faceți clic pe butonul Adăugați o secțiune nouă pentru a adăuga o nouă secțiune pe pagina dvs. Apoi, alegeți un aspect de rând cu o coloană.

Setări rând

Înainte de a adăuga orice modul nou la coloana dvs., vom personaliza mai întâi setarea rândului. Acest pas este esențial pentru a asigura poziționarea și stilizarea corespunzătoare a separatorului de undă. Iată câteva setări cheie pentru rânduri de luat în considerare:

Dimensiunea
- Latime: 100%
- Latime maxima: 100%

Pentru a vă asigura că valoarea are 100% în fiecare dimensiune a ecranului, vă rugăm să aplicați aceste setări și pe tablete și telefoane.

Spațiere
- Umplutură: 0px de sus , 0px de jos

Transforma
- Rotire: 180 de grade

Poziţie
- Poziție: absolută
- Locație: în centrul fundului
- Offset vertical: -2px
- Index Z: 100

Pasul 3: Adăugați codul SVG în modulul de cod

Introduceți codul SVG

Adăugați modulul Cod în interiorul coloanei, apoi inserați codul SVG pe care îl aveți de la generatorul de unde SVG online.

Apoi, setați lățimea modulului Cod la 100% pentru a-l face pe toată lățimea containerului său, asigurându-vă că valul SVG încorporat se aliniază corect și arată consecvent pe tot modulul.

Duplicați modulul de cod

După ce ați adăugat codul SVG, trebuie să duplicați modulul. Special pentru a doua copie/modul, trebuie să folosească poziție absolută cu un offset orizontal de 100% .

Pasul 4: Adăugați fragmentul CSS

Este timpul să adăugați două coduri CSS pentru a vă anima undele SVG. Primul cod CSS va fi adăugat la setările paginii dvs., iar al doilea va fi adăugat la setările coloanei dvs.

Primul cod CSS

Navigați la Setări pagină -> fila Avansat -> CSS personalizat . După aceea, copiați fragmentul CSS de mai jos și inserați-l în câmpul disponibil.

Iată fragmentul CSS pe care îl puteți utiliza și edita pentru a se potrivi nevoilor dvs.:

 @keyframes wpp-waves {
	0% {transform: translateX(0)}
	25% {transform: translateX(-25%) scaleY(45%);}
	50% {transform: translateX(-50%) scaleY(100%)}
	75% {transform: translateX(-75%) scaleY(45%);}
	100% {transform: translateX(-100%)}
  }

Al doilea cod CSS

Accesați setările coloanei cu modulele de cod, apoi copiați codul CSS de mai jos și inserați-l în câmpul Element principal de pe coloana dvs.

 animație: wpp-waves 12s liniar infinit;
transform-origine: top;

Asta este. Simțiți-vă liber să editați fragmentul CSS și să reproiectați forma SVG pentru a obține cea mai bună animație ondulată pentru separatorul secțiunii dvs. Nu uitați să salvați și să vă publicați pagina dacă doriți.

Ce a făcut codul CSS?

 @keyframes wpp-waves {
	0% {transform: translateX(0)}
	25% {transform: translateX(-25%) scaleY(45%);}
	50% {transform: translateX(-50%) scaleY(100%)}
	75% {transform: translateX(-75%) scaleY(45%);}
	100% {transform: translateX(-100%)}
  }

Concepte cheie:

@keyframes : Aceasta definește o secvență de animație. Fiecare procentaj (de exemplu, 0%, 25% etc.) reprezintă un cadru cheie în care sunt aplicate anumite stiluri în timpul animației.
proprietate transform : Controlează translațiile (mișcarea).
- translateX : Mută elementul pe orizontală cu cantitatea specificată.
- scaleY : Scală elementul pe verticală.

Animaţie

0%: Pornește în poziția inițială fără scalare.
25%: se deplasează cu 25% la stânga și se micșorează la 45% din înălțimea sa.
50%: se deplasează cu 50% la stânga și revine la înălțimea maximă.
75%: se deplasează cu 75% la stânga și se micșorează din nou la 45% înălțime.
100%: se deplasează 100% la stânga și se resetează la înălțimea maximă.

 animație: wpp-waves 12s liniar infinit;
transform-origine: top;

animation: wpp-waves 12s linear infinite;

wpp-waves : Se aplică numele animației.
12s : Viteza ciclului de animație este de 12 secunde.
linear : animația progresează cu o viteză constantă fără a se relaxa.
infinite : animația se desfășoară la nesfârșit.

transform-origin: top;

Transformările au loc relativ la marginea superioară a elementului.

Concluzia

Utilizarea Divi pentru a crea o animație val ca separator este o abordare excelentă pentru a oferi site-ului dvs. componente de design dinamice și atrăgătoare. Cu ajutorul instrumentelor încorporate Divi, a animațiilor de cadre cheie și a CSS personalizat, puteți încorpora cu ușurință efecte de val care îmbunătățesc aspectul site-ului dvs. și atrag vizitatori.

Cu câțiva pași simpli, vă puteți îmbunătăți designul web, făcându-l mai modern și mai interactiv, păstrând în același timp flexibilitatea și ușurința de utilizare Divi. Simțiți-vă liber să încercați alte valori în cadrul cheie și CSS personalizat pentru a obține cea mai bună animație wave pentru divizorul secțiunii dvs.