Come animare la tua intestazione globale con Divi

La tua intestazione è una delle parti più importanti del tuo sito web. Collega le tue pagine, i tuoi post e gli inviti all'azione. È anche una delle cose che i tuoi visitatori cercano automaticamente, in modo che non perdano tempo a trovare ciò che stanno cercando. Se stai cercando un modo per enfatizzare la tua intestazione, ti piacerà questo post. Ti mostreremo come animare la tua intestazione globale personalizzata utilizzando Divi's Theme Builder. Le possibilità sono infinite, ma ti mostreremo due esempi di animazione con cui puoi iniziare subito. Potrai anche scaricare i file JSON gratuitamente!

Andiamo ad esso.

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata ai due esempi su schermi di diverse dimensioni.

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Scarica l'intestazione globale animata GRATUITAMENTE

Per mettere le mani sull'intestazione globale animata gratuita, dovrai prima scaricarla 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!

Iscriviti al nostro canale Youtube

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

Vai a Divi Theme Builder

Inizia andando al Divi Theme Builder nel tuo backend WordPress.

Costruisci un'intestazione globale da zero

Fare clic su "Aggiungi intestazione globale" e continuare selezionando "Crea intestazione globale".

2. Crea un design globale del blocco di intestazione

Impostazioni della sezione

Spaziatura

Una volta entrato nell'editor del modello, puoi iniziare a creare l'intestazione globale. Ci stiamo assicurando di avere un design "a blocchi" in corso in modo da poter, in seguito, aggiungere animazioni a due contenitori diversi; colonna + modulo. Apri la sezione che puoi notare all'interno dell'editor del modello e rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Scatola ombra

Aggiungi un'ombra di casella successiva.

• Intensità della sfocatura dell'ombra della scatola: 80 px
• Colore ombra: rgba (13,60,216,0.24)

Indice Z

E assicurati di aumentare anche l'indice z della sezione nella scheda avanzata. Ciò assicurerà che il contenuto dell'intestazione globale appaia in cima a tutti i contenuti della pagina/post.

• Indice Z: 99999

Aggiungi nuova riga

Struttura della colonna

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

Dimensionamento

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e consenti alla riga di occupare l'intera larghezza dello schermo.

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

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Visibilità

Assicurati di impostare anche gli overflow della riga su "visibile".

• Overflow orizzontale: visibile
• Overflow verticale: visibile

Impostazioni colonna (tutti e tre)

Colore di sfondo

Una volta completate le impostazioni delle righe, dovrai dare uno stile anche alle colonne. Apri ciascuna delle colonne e cambia il loro colore di sfondo di conseguenza:

• Colore di sfondo della colonna 1: #efefef
• Colore di sfondo della colonna 2: #ffcb0f
• Colore di sfondo della colonna 3: #2848ff

Spaziatura

Aggiungi anche un riempimento personalizzato superiore e inferiore a ciascuna colonna.

• Imbottitura superiore: 0.5vw (desktop), 1vw (tablet e telefono)
• Imbottitura inferiore: 0.5vw (desktop), 1vw (tablet e telefono)

Elemento principale

E per assicurarci che tutto il contenuto della colonna sia centrato verticalmente, aggiungeremo tre righe di codice CSS all'elemento principale di ogni colonna.

display: flex;
flex-direction: column;
justify-content: center;

Indice Z della colonna 1

Ultimo ma non meno importante, apri le impostazioni della colonna 1 e aumenta l'indice z nelle impostazioni di visibilità.

• Indice Z: 10

Aggiungi modulo menu alla colonna 1

Seleziona Menu

È ora di aggiungere moduli, iniziando con un Modulo Menu nella colonna 1. Seleziona un menu a tua scelta.

Carica logo

Carica il tuo logo dopo.

Rimuovi sfondo

Continua rimuovendo il colore di sfondo del modulo.

Disposizione

Passa alla scheda Progettazione e assicurati che le seguenti impostazioni si applichino al layout:

• Stile: allineato a sinistra
• Direzione del menu a discesa: verso il basso

Menu Impostazioni testo

Modella le impostazioni del testo in seguito:

• Carattere del menu: Montserrat
• Colore del testo del menu: #000000
• Dimensione del testo del menu: 0.7vw (desktop), 2vw (tablet), 3vw (telefono)

Impostazioni del menu a discesa

Insieme alle impostazioni del menu a discesa.

• Colore linea menu a discesa: #ffffff

Impostazioni icone

E cambia anche il colore dell'icona del menu dell'hamburger.

• Colore icona menu hamburger: #2848ff

Dimensionamento

Continua modificando la larghezza massima del logo su diverse dimensioni dello schermo.

• Larghezza massima logo: 6vw (desktop), 9vw (tablet), 13vw (telefono)

Spaziatura

E completa le impostazioni del modulo aggiungendo un margine sinistro e destro.

• Margine sinistro: 2vw
• Margine destro: 2vw

Aggiungi modulo codice alla colonna 1

Inserisci il codice CSS per la reattività VW

Ora, nel modulo menu, abbiamo utilizzato l'unità di larghezza della finestra per la dimensione del testo e i valori di spaziatura. Lo abbiamo fatto per assicurarci che tu possa posizionare fino a 8 voci di menu su diverse dimensioni dello schermo del desktop, senza che si divida in due righe. Dovremo assicurarci che lo spazio tra le voci di menu sia creato anche con l'unità vw. Per fare ciò, aggiungeremo un modulo di codice alla colonna 1 e inseriremo le seguenti righe di codice CSS:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

Aggiungi il modulo Segui social media alla colonna 2

Aggiungi social network

Nella colonna successiva, lì, avremo bisogno di un modulo di follow sui social media. Aggiungi i social network di tua scelta.

Ripristina individualmente gli stili dei social network

Continua ripristinando le impostazioni di ciascuna rete.

Allineamento

Completa le impostazioni del modulo modificando l'allineamento del modulo.

• Allineamento del modulo: Centro

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Alla prossima e ultima colonna. Lì, avremo solo bisogno di un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento

Passa alla scheda Design e modifica l'allineamento del pulsante.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Completa le impostazioni del modulo applicando uno stile al pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 1.2vw (tablet), 2vw (telefono)
• Colore del testo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px

• Raggio bordo pulsante: 0px
• Carattere pulsante: Montserrat
• Peso del carattere del pulsante: Ultra grassetto
• Stile carattere pulsante: maiuscolo

3. Aggiungi l'animazione di corrispondenza agli elementi

Combo di animazione dell'intestazione globale n. 1

Animazione colonna 1

Ora che abbiamo creato l'intestazione globale, è il momento di aggiungere le animazioni! Per ricreare la prima animazione, apri le impostazioni della colonna 1 e aggiungi la seguente animazione:

• Stile di animazione: Zoom
• Direzione dell'animazione: su
• Opacità iniziale dell'animazione: 100%

Animazione colonna 2

Aggiungi le seguenti impostazioni di animazione alla colonna 2 successiva:

• Stile di animazione: Zoom
• Direzione animazione: Giù
• Ritardo animazione: 500 ms
• Opacità iniziale dell'animazione: 100%

Animazione colonna 3

Completa le impostazioni della colonna assegnando la seguente animazione alla colonna 3:

• Stile di animazione: Zoom
• Direzione dell'animazione: su
• Ritardo animazione: 1000 ms
• Opacità iniziale dell'animazione: 100%

Animazioni del modulo (tutti e tre i moduli)

Una volta completate le impostazioni della colonna, apri ciascuno dei moduli singolarmente e usa la seguente animazione per loro:

• Stile di animazione: dissolvenza
• Ritardo animazione: 1500 ms

Combo Global Header Animation #2

Animazione colonna 1

Vuoi ricreare invece il secondo set di animazione? Apri le impostazioni della colonna 1 e aggiungi la seguente animazione:

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Opacità iniziale dell'animazione: 100%

Animazione colonna 2

Utilizzare le seguenti impostazioni di animazione per la colonna 2 in seguito:

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Ritardo animazione: 500 ms
• Opacità iniziale dell'animazione: 100%

Animazione colonna 3

E completa le impostazioni della colonna applicando le seguenti impostazioni di animazione alla colonna 3:

• Stile di animazione: diapositiva
• Direzione dell'animazione: su
• Ritardo animazione: 1000 ms
• Opacità iniziale dell'animazione: 100%

Animazioni del modulo (tutti e tre i moduli)

Quindi, apri ciascun modulo singolarmente e aggiungi la seguente animazione:

• Stile di animazione: diapositiva
• Direzione animazione: Giù
• Ritardo animazione: 1500 ms

4. Salva le modifiche del generatore e visualizza il risultato

Una volta completate le impostazioni dell'animazione, puoi salvare l'intestazione globale, uscire dal Theme Builder e visualizzare il risultato sul tuo sito web!

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata agli esempi su schermi di diverse dimensioni.

Esempio 1

Desktop

Mobile

Esempio #2

Desktop

Mobile

Pensieri finali

In questo tutorial, ti abbiamo mostrato come animare la tua intestazione globale usando le opzioni integrate di Divi e il Theme Builder. Questo è un ottimo modo per attirare l'attenzione sull'intestazione del tuo sito web. Con le opzioni di animazione integrate di Divi, le possibilità sono infinite. Per aiutarti a iniziare, ti abbiamo mostrato due diversi esempi. Sei stato anche in grado di scaricare i file JSON gratuitamente!

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.