Cum să adăugați o animație SVG cu o cale de text a cercului la designul dvs. Divi

Ținerea la curent cu tendințele din spațiul de web design este una dintre cele mai bune modalități de a rămâne la curent ca designer de web. Vă permite să creați site-uri web moderne care vă vor impresiona clienții și vă vor ajuta să vă aduceți abilitățile la nivelul următor. În tutorialul de astăzi, vă vom arăta cum să vă familiarizați cu o tendință pe care o vedeți adesea în zilele noastre pe site-urile web avansate; cercuri de animații SVG text. Vă vom arăta cum să le adăugați în designul paginii dvs. Divi și chiar să le folosiți și ca buton. Veți putea descărca gratuit fișierul JSON!

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

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, 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!

Creați Hero Design

Adăugați o secțiune nouă

Culoare de fundal

Să începem prin a crea designul eroului. Deschideți o pagină nouă sau existentă cu Divi și adăugați o nouă secțiune obișnuită. Deschideți setările secțiunii și aplicați o culoare de fundal la alegere.

• Culoare fundal: # f3eee8

Spațiere

Treceți la setările de spațiere și modificați valorile de umplere de sus și de jos.

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

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ândurilor, navigați la fila de proiectare, deschideți setările de dimensionare și efectuați următoarele ajustări:

• Lățime: 95%
• Lățime maximă: 2580 px

Setări coloana 1

Odată ce setările de rând generale sunt la locul lor, puteți continua să deschideți setările primei coloane.

Imagine de fundal

În setările de fundal, încărcați o imagine de fundal la alegere. Această imagine va apărea sub textul cercului animație SVG mai jos în tutorial.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare

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

Adăugați conținut H1

E timpul să adăugați module, începând cu un prim modul de text din coloana 2. Adăugați un conținut H1 la alegere dacă utilizați această secțiune ca erou sau conținut H2 dacă îl utilizați oriunde altundeva pe pagina dvs.

Setări text H1

Stilați setările textului antetului acestui modul în continuare.

• Font de titlu: Playfair Display
• Culoare text antet: # 212121
• Dimensiune text antet:
  • Desktop: 100 px
  • Tabletă: 60 px
  • Telefon: 45 px

Dimensionare

Apoi, accesați setările de dimensionare și aplicați o lățime maximă.

• Lățime maximă: 600 px

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

Adauga continut

Sub primul modul de text, vom adăuga un alt modul de text. De data aceasta, vom include un conținut de descriere.

Setări text

Navigați la fila de proiectare și stilizați textul după cum urmează:

• Font text: Montserrat
• Dimensiune text: 15 px
• Înălțimea liniei de text: 2em

Dimensionare

Utilizați și o lățime maximă în setările de dimensionare.

• Lățime maximă: 520 px

Spațiere

Apoi, navigați la setările de spațiere și utilizați câteva valori receptive.

• Marja superioară:
  • Desktop: 20vh
  • Tabletă și telefon: 50 px
• Căptușeală stângă: 5%

Frontieră

Includem și o margine stângă în setările frontierei.

• Lățimea marginii stânga: 2 px
• Culoarea chenarului stâng: # 000000

Adăugați animație SVG în cerc de text

Adăugați un modul de cod în coloana 1

Acum, după ce am creat bazele designului secțiunii noastre, ne putem concentra pe crearea animației SVG în textul cercului. Pentru a adăuga textul cercului animație SVG, vom folosi un modul de cod în coloana 1. Continuați și adăugați unul.

Adăugați un link

Dacă doriți ca această animație text SVG să poată fi făcută clic, puteți adăuga o adresă URL la alegere în setările de legătură ale modulului.

Dimensionare

Asigurați-vă că lățimea modulului este setată la „100%” și în setările de dimensionare.

• Lățime: 100%

Adăugați cercuri și text SVG-uri în caseta de cod

Înapoi la caseta de cod din fila conținut. Aici, vom adăuga mai întâi cercul SVG și calea textului folosind următorul cod HTML:

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

Stil SVG-uri cu CSS

Desigur, va trebui să stilizăm calea textului SVG pentru a se potrivi cu designul nostru. Ne asigurăm că SVG este setat și la „100%”. Lipiți următoarele linii de cod CSS în caseta de cod, între etichetele de stil:

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

Adăugați etichete HTML AnimateTransform

Acum, pentru a crea o rotație interminabilă pentru textul nostru, vom folosi elementul de transformare animată care ne permite să creăm animația fără a fi nevoie de cod JavaScript extern. Acestea sunt atributele pe care le atribuim SVG-ului nostru:

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

Puteți modifica aceste atribute oricum doriți, pentru a crea animația la alegere. Observați cum ultimul atribut, repeatCount, este setat la „nedefinit”. Acest lucru ne permite să creăm o buclă de rotație interminabilă pentru SVG-ul nostru.

Modificați calea textului pentru utilizare proprie

Desigur, veți dori să modificați textul pentru a se potrivi cu propriul dvs. site web, puteți face acest lucru cu ușurință între etichetele căii de text. Cu toate acestea, după ce schimbați lungimea copiei, va trebui să modificați setările pentru a vă asigura că creați un cerc perfect. Puteți juca cu valoarea „dy”, care indică o deplasare de-a lungul axei y și puteți schimba dimensiunea fontului și distanța dintre litere a căii textului până când obțineți rezultatul dorit. Asta e!

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să vă mențineți site-ul la curent cu tendințele de design. Mai exact, v-am arătat cum să creați o animație SVG text în cerc și să o utilizați elegant în designul Divi. Odată ce obțineți abordarea, puteți utiliza acest element pentru a afișa orice text doriți și a-l perfecționa după propriul design. Ați putut descărca gratuit fișierul JSON! 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.