Come aggiungere e animare il tuo logo SVG all'interno della tua intestazione globale con Divi's Theme Builder e Anime.js

Il tuo logo è una parte centrale dell'identità del tuo marchio. Ecco perché è quasi sempre incluso nell'intestazione di qualsiasi sito Web che incontri. Quando aggiungi un logo alla tua intestazione, puoi scegliere di caricare un file PNG o optare invece per un'integrazione SVG. Per un approccio più personalizzato, puoi anche animare il tuo logo SVG. Questo è esattamente ciò che ti mostreremo in questo post. Ti mostreremo come aggiungerlo prima all'intestazione globale creata da Divi, quindi animarlo utilizzando la libreria Anime JS. Useremo un design semplice per il nostro esempio, ma una volta ottenuto l'approccio, puoi animare qualsiasi logo!

Andiamo ad esso.

Anteprima

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

Desktop

Mobile

Scarica il modello di intestazione globale GRATUITAMENTE

Per mettere le mani sul modello di intestazione globale, 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!

1. Crea logo SVG in Adobe Illustrator e ottieni codice SVG

Apri Illustrator e crea un nuovo documento

Nella prima parte di questo tutorial, creeremo un semplice logo all'interno di Adobe Illustrator. Se hai già un tuo logo SVG, sentiti libero di usarlo. In alternativa, puoi anche accedere al file Illustrator di esempio del logo nella cartella di download sopra. Se preferisci creare il campione del logo da zero, inizia aggiungendo un nuovo documento con un rapporto 1:1.

• Larghezza: 500 px
• Altezza: 500 px

Aggiungi cerchio al livello esistente

Il primo elemento che aggiungeremo è un cerchio. Utilizzeremo un colore di riempimento che corrisponda alla tavolozza dei colori dello Spice Shop Layout Pack. Ci assicureremo anche che il cerchio sia allineato centralmente all'interno della nostra tela.

• Riempi: #0C1019
• Corsa: nessuna

Crea nuovo livello e aggiungi testo logo

Successivamente, aggiungeremo un nuovo livello.

Useremo questo livello per aggiungere del testo al logo.

• Carattere: Montserrat
• Peso del carattere: nero
• Dimensione carattere: 110 pt

Crea contorni per il logo

Dopo aver modificato il testo del logo, puoi fare clic con il pulsante destro del mouse sull'elemento e fare clic su "Crea contorni" per trasformare il testo in un contorno.

Allinea i contorni del testo

Faremo in modo che anche i contorni del testo siano allineati al centro.

Esporta come SVG

Ora che abbiamo tutti i percorsi a posto, possiamo esportare l'SVG. Per fare ciò, passeremo il mouse sull'opzione "File" in alto, andremo su "Esporta" e faremo clic su "Esporta come...".

Ottieni codice SVG

Dopo aver fatto clic sul pulsante "Esporta", vedrai apparire una finestra con alcune opzioni SVG aggiuntive. Lì, sarai in grado di copiare il codice SVG. Assicurati di tenere a portata di mano l'SVG per utilizzarlo in seguito in questo tutorial.

2. Inizia a creare un'intestazione globale/personalizzata all'interno di Divi Theme Builder

Vai a Divi Theme Builder e inizia a creare un'intestazione globale

Ora che abbiamo seguito la prima parte di questo tutorial, ottenendo il codice SVG del nostro logo, è ora di passare a Divi! Creeremo una nuova intestazione globale accedendo al Theme Builder all'interno del backend di WordPress.

Impostazioni della sezione

Colore di sfondo

Una volta inserito il modello di intestazione globale, noterai una sezione. Apri quella sezione e applica un colore di sfondo.

• Colore di sfondo: #eaeaea

Spaziatura

Passa alla scheda Design e rimuovi tutte le imbottiture superiori e inferiori predefinite.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga, vai alla scheda design e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 95%
• Larghezza massima: 100%

Spaziatura

Rimuovi anche tutta l'imbottitura superiore e inferiore predefinita.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Elemento principale

Per assicurarci che le nostre colonne rimangano l'una accanto all'altra su schermi di dimensioni più piccole, aggiungeremo anche una riga di codice CSS all'elemento principale della riga.

display: flex;

Colonna 1 Elemento principale

Successivamente, ci assicureremo che la struttura delle colonne (1/4 e 3/4) venga mantenuta su schermi di dimensioni più piccole aggiungendo una riga di codice CSS a ciascuna colonna singolarmente. Inizia con il primo.

width: 25% !important;

Colonna 2 Elemento principale

Fai lo stesso per la seconda colonna, ma usa un'altra percentuale di larghezza.

width: 75% !important;

3. Aggiungi logo SVG (modulo codice interno)

Aggiungi modulo codice alla colonna 1

È ora di aggiungere moduli, iniziando con un primo modulo di codice. Collocheremo questo modulo di codice nella colonna 1 e lo useremo per aggiungere il nostro codice SVG.

Aggiungi codice SVG copiato

Strutturalo

Una volta che hai incollato il codice SVG (vedi la parte 1 di questo tutorial) all'interno del Modulo Codice, aiuta a strutturare tutto come mostrato nella schermata di stampa qui sotto. In questo modo, avrai una panoramica chiara dei diversi elementi all'interno di SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

Aggiungi tratto e larghezza del tratto agli elementi nel codice CSS

In Illustrator, abbiamo usato solo i colori di riempimento per gli elementi che abbiamo aggiunto. Il motivo è che vogliamo evitare di generare percorsi aggiuntivi. Il codice SVG non è sempre così prevedibile come potresti pensare, quindi apportare alcune modifiche manuali al codice CSS può spesso aiutare a mantenere i percorsi semplici. Per creare lo stesso risultato dell'anteprima di questo post, dovremo aggiungere un tratto a entrambi i nostri elementi. Per fare ciò, aggiungeremo righe di codice CSS alle due classi all'interno del nostro codice. La classe CSS "cls-1" che è stata generata in AI sta per il cerchio, la classe CSS "cls-2" rappresenta i contorni del testo.

stroke: #0c1019;
stroke-width: 3px;

Diminuisci il raggio del cerchio

Poiché abbiamo aggiunto un tratto extra al nostro cerchio, il cerchio sembra estendersi oltre la tela SVG (visibile ai lati), per risolvere questo problema, ridurremo semplicemente il raggio all'interno del nostro tag cerchio. Invece di usare il "232.5" originale, lo riduciamo a "225". Puoi determinare da solo quale valore preferisci giocando delicatamente con questo numero.

• r=”225″

Modifica impostazioni modulo codice

Dimensionamento

Ora che il nostro codice SVG è a posto, possiamo apportare alcune modifiche aggiuntive al modulo del codice stesso. Vai alla scheda Design e modifica la larghezza del modulo su diverse dimensioni dello schermo.

• Larghezza:
  • Desktop: 25%
  • Compressa: 50%
  • Telefono: 80%

Spaziatura

Stiamo anche generando una sovrapposizione inferiore modificando le impostazioni di spaziatura.

• Imbottitura superiore: 5%
• Imbottitura inferiore:
  • Scrivania: -12%
  • Compressa: -20%
  • Telefono: -35%

4. Usa Anime.js per animare il tuo logo SVG

Aggiungi un altro modulo di codice sotto quello precedente

Il nostro logo SVG è stato aggiunto alla nostra intestazione Divi! Nella parte successiva di questo tutorial, animeremo il logo SVG utilizzando la libreria Anime JS. L'animazione del disegno che puoi vedere nell'anteprima è una delle più popolari, ma puoi creare qualsiasi tipo di animazione con questa libreria. Aggiungi un nuovo modulo di codice proprio sotto il precedente.

Aggiungi la libreria degli anime

La prima cosa che devi fare è aggiungere la libreria all'interno dei tag script.

• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

Aggiungi il codice di animazione della timeline dell'anime

Proprio sotto di esso, dovrai aggiungere il codice JS dell'anime tra i tag di script come mostrato nella schermata di stampa qui sotto:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

Ogni funzione "aggiungi" rappresenta un'animazione in una sequenza temporale di animazioni. Puoi modificare queste funzioni di "aggiunta" come preferisci, aggiungerne di nuove o rimuovere quelle attuali, assicurati solo che l'ultima funzione di aggiunta sia chiusa correttamente con un ';' alla fine (come puoi vedere nel codice sopra). Puoi aggiungere diverse proprietà CSS all'interno di queste funzioni "aggiungi". Puoi scoprire di più sulle proprietà e su come vengono utilizzate negli esempi di documentazione di anime.js.

5. Aggiungi il modulo menu alla colonna 2

L'unico elemento di cui abbiamo bisogno per completare la nostra intestazione globale è un modulo menu nella colonna 2.

Seleziona Menu

Seleziona un menu a tua scelta.

Rimuovi colore di sfondo

Quindi, rimuovi il colore di sfondo predefinito.

Menu Impostazioni testo

Passa alla scheda Progettazione e modifica le impostazioni del testo del menu come segue:

• Colore del testo del menu: #000000
• Dimensione del testo del menu:
  • Desktop: 0.7vw
  • Tablet: 2.2vw
  • Telefono: 3vw
• Allineamento del testo: a destra

Menu a discesa Impostazioni testo

Cambia anche il colore della linea del menu a discesa.

• Colore linea menu a discesa: #ffffff

Impostazioni icone

Insieme al colore dell'icona del menu dell'hamburger.

• Colore icona menu hamburger: #0c1019

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e assicurati che la larghezza sia "100%".

• Larghezza: 100%

Posizione

Completa le impostazioni del modulo riposizionando il modulo nella scheda Avanzate.

• Posizione: Assoluta
• Posizione: Centro Destra

6. Salva tutte le modifiche al generatore di temi

Dopo aver completato l'intero design dell'intestazione globale, puoi salvare tutte le modifiche al generatore di temi e visualizzare il risultato sul tuo sito web!

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 portare la tua intestazione globale Divi un passo avanti nel tuo viaggio di sviluppo web. Più specificamente, ti abbiamo mostrato come aggiungere e animare il tuo logo SVG usando Divi e la libreria JavaScript Anime. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello di intestazione globale! 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.