Come aggiungere un'animazione SVG con percorso di testo circolare al tuo design Divi

Stare al passo con le tendenze nello spazio del web design è uno dei modi migliori per rimanere aggiornati come web designer. Ti consente di creare siti Web moderni che stupiranno i tuoi clienti e ti aiuteranno a portare le tue competenze a un livello superiore. Nel tutorial di oggi, ti mostreremo come familiarizzare con una tendenza che spesso vedi oggigiorno nei siti Web avanzati; animazioni SVG di testo circolare. Ti mostreremo come aggiungerli all'interno del design della tua pagina Divi e persino usarli come pulsante. Potrai anche scaricare gratuitamente il file JSON!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica il layout GRATUITAMENTE

Per mettere le mani sul layout gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Crea un design da eroe

Aggiungi nuova sezione

Colore di sfondo

Iniziamo creando il design dell'eroe. Apri una pagina nuova o esistente con Divi e aggiungi una nuova sezione regolare. Apri le impostazioni della sezione e applica un colore di sfondo a tua scelta.

• Colore di sfondo: #f3eee8

Spaziatura

Passa alle impostazioni di spaziatura successiva e modifica i valori di riempimento superiore e inferiore.

• Imbottitura superiore: 30px
• Imbottitura inferiore: 30px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione, utilizzando la seguente struttura a colonne:

Dimensionamento

Senza aggiungere ancora moduli, apri le impostazioni di riga, vai alla scheda di progettazione, apri le impostazioni di dimensionamento e apporta le seguenti modifiche:

• Larghezza: 95%
• Larghezza massima: 2580 px

Impostazioni colonna 1

Una volta che le impostazioni generali della riga sono a posto, puoi procedere con l'apertura delle impostazioni della prima colonna.

Immagine di sfondo

All'interno delle impostazioni di sfondo, carica un'immagine di sfondo a tua scelta. Questa immagine apparirà sotto l'animazione SVG del testo del cerchio più in basso nel tutorial.

• Dimensione immagine di sfondo: copertina
• Posizione immagine di sfondo: Centro
• Ripetizione immagine di sfondo: nessuna ripetizione

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi contenuto H1

È ora di aggiungere moduli, iniziando con un primo modulo di testo nella colonna 2. Aggiungi del contenuto H1 a tua scelta se stai usando questa sezione come eroe, o contenuto H2 se lo stai usando in qualsiasi altra parte della tua pagina.

Impostazioni testo H1

Successivamente, modella le impostazioni del testo dell'intestazione di questo modulo.

• Carattere dell'intestazione: Display Playfair
• Colore del testo dell'intestazione: #212121
• Dimensione del testo dell'intestazione:
  • Desktop: 100 px
  • Tablet: 60px
  • Telefono: 45px

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e applica una larghezza massima.

• Larghezza massima: 600 px

Aggiungi il modulo di testo n. 2 alla colonna 2

Aggiungi contenuto

Sotto il primo modulo di testo, aggiungeremo un altro modulo di testo. Questa volta, includeremo alcuni contenuti descrittivi.

Impostazioni testo

Passare alla scheda Design e modellare il testo come segue:

• Carattere del testo: Montserrat
• Dimensione del testo: 15px
• Altezza riga di testo: 2em

Dimensionamento

Usa una larghezza massima anche nelle impostazioni di dimensionamento.

• Larghezza massima: 520 px

Spaziatura

Quindi, vai alle impostazioni di spaziatura e usa alcuni valori reattivi.

• Margine superiore:
  • Desktop: 20vh
  • Tablet e telefono: 50px
• Imbottitura sinistra: 5%

Frontiera

Stiamo includendo anche un bordo sinistro nelle impostazioni del bordo.

• Larghezza bordo sinistro: 2px
• Colore bordo sinistro: #000000

Aggiungi animazione SVG di testo circolare

Aggiungi modulo codice alla colonna 1

Ora che abbiamo creato le basi del nostro design della sezione, possiamo concentrarci sulla creazione dell'animazione SVG del testo circolare. Per aggiungere l'animazione SVG del testo del cerchio, utilizzeremo un modulo di codice nella colonna 1. Vai avanti e aggiungine uno.

Aggiungi collegamento

Se vuoi che questa animazione SVG con testo circolare sia cliccabile, puoi aggiungere un URL a tua scelta nelle impostazioni del collegamento del modulo.

Dimensionamento

Assicurati che la larghezza del modulo sia impostata su "100%" anche nelle impostazioni di dimensionamento.

• Larghezza: 100%

Aggiungi cerchi e testo SVG alla casella del codice

Torna alla casella del codice nella scheda contenuto. Qui, per prima cosa aggiungeremo il cerchio SVG e il percorso del testo utilizzando il seguente codice 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>

Stile SVG con CSS

Ovviamente, dovremo modellare il percorso del testo SVG per farlo corrispondere al nostro design. Ci stiamo assicurando che anche l'SVG sia impostato su "100%". Incolla le seguenti righe di codice CSS all'interno della casella del codice, tra i tag di stile:

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

Aggiungi tag HTML AnimateTransform

Ora, per creare una rotazione infinita per il nostro testo, utilizzeremo l'elemento di trasformazione animato che ci consente di creare l'animazione senza la necessità di codice JavaScript esterno. Questi sono gli attributi che stiamo assegnando al nostro SVG:

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

Puoi modificare questi attributi come preferisci, per creare l'animazione che preferisci. Nota come l'ultimo attributo, repeatCount, è impostato su "indefinite". Questo ci permette di creare un ciclo infinito di rotazione per il nostro SVG.

Modifica il percorso del testo per uso personale

Ovviamente, vorrai modificare il testo per farlo corrispondere al tuo sito web, puoi farlo facilmente tra i tag del percorso di testo. Tuttavia, una volta modificata la lunghezza della copia, dovrai modificare le impostazioni per assicurarti di creare un cerchio perfetto. Puoi giocare con il valore "dy", che indica uno spostamento lungo l'asse y e modificare la dimensione del carattere e la spaziatura delle lettere del percorso del testo fino a ottenere il risultato desiderato. Questo è tutto!

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Pensieri finali

In questo post, ti abbiamo mostrato come mantenere aggiornato il tuo sito web con le tendenze del design. Più specificamente, ti abbiamo mostrato come creare un'animazione SVG con testo circolare e usarla elegantemente nel tuo design Divi. Una volta ottenuto l'approccio, puoi utilizzare questo elemento per visualizzare qualsiasi testo che desideri e adattarlo al tuo design. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.