Come risparmiare spazio nell'intestazione utilizzando le icone di commutazione con Divi

Il modo in cui progetti la tua intestazione imposta il tono per il resto del tuo sito web. Ecco perché è importante pensare al modo in cui aggiungi elementi e interazioni. Naturalmente, ti consigliamo di includere le nozioni di base come un logo e le voci di menu, ma è molto probabile che tu voglia includere anche altri inviti all'azione. Tuttavia, più elementi aggiungi all'intestazione, più l'intestazione può diventare opprimente. Se stai cercando un modo pulito e interattivo per mostrare diversi inviti all'azione nella tua intestazione, adorerai questo tutorial. Oggi ti mostriamo come risparmiare spazio nell'intestazione utilizzando le icone di commutazione. 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 modello di intestazione globale GRATUITAMENTE

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

1. Costruisci la struttura dell'intestazione

Crea un nuovo modello di intestazione globale

Inizia andando al Divi Theme Builder e inizia a creare una nuova intestazione globale o personalizzata.

Aggiungi la sezione n. 1

Sfondo sfumato

Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri le impostazioni di quella sezione e applica uno sfondo sfumato.

• Colore 1: #ffffff
• Colore 2: #eaeaea
• Tipo di gradiente: lineare
• Direzione gradiente: 90 gradi
• Posizione di partenza: 50%
• Posizione finale: 50%

Spaziatura

Passa alla scheda Progettazione della sezione e rimuovi tutte le imbottiture superiori e inferiori predefinite.

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

Scatola ombra

Aggiungi anche un'ombra di scatola.

• Colore ombra: rgba(0,0,0,0.06)

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, passa 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: 100%
• Larghezza massima: 100%
• Allineamento righe: Centro

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Elemento principale CSS

Quindi, vai alla scheda Avanzate e applica alcune righe di codice CSS personalizzate dell'elemento principale su diverse dimensioni dello schermo. Questo codice ci aiuterà a centrare verticalmente gli elementi sul desktop.

Scrivania:

display: flex;
place-items: center;

Tablet e telefono:

display: block;

Impostazioni colonna 1

Spaziatura

Quindi, apri le impostazioni della colonna 1 e applica un riempimento sinistro e destro.

• Imbottitura sinistra: 5%
• Imbottitura destra: 5%

Elemento principale

Stiamo modificando la dimensione della nostra colonna sul desktop e riportandola al "100%" su tablet e telefono applicando alcuni CSS personalizzati all'elemento principale della colonna.

Scrivania:

width: 88% !important

Tablet e telefono:

width: 100% !important;

Impostazioni colonna 2

Colore di sfondo

Successivamente, apriremo le impostazioni della colonna 2 e cambieremo il colore di sfondo in bianco.

• Colore di sfondo: #FFFFFF

Spaziatura

Aggiungeremo anche alcuni valori di riempimento reattivo alle impostazioni di spaziatura di questa colonna.

• Imbottitura superiore:
  • Desktop: 50 pixel
  • Tablet e telefono: 20px
• Imbottitura inferiore
  • Desktop: 50 pixel
  • Tablet e telefono: 20px
• Imbottitura sinistra: 1%
• Imbottitura destra: 1%

Elemento principale CSS

Modificheremo anche la dimensione della seconda colonna sul desktop. Lo stiamo riportando al "100%" su schermi di dimensioni più piccole.

Scrivania:

display: flex;
place-items: center;
width: 12% !important;

Tablet e telefono:

width: 100% !important;

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 un logo successivo.

Rimuovi colore di sfondo

Quindi, rimuovi il colore di sfondo predefinito.

Menu Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo del menu di conseguenza:

• Carattere del menu: display Playfair
• Carattere del testo del menu: display Playfair
• Colore del testo del menu: #000000
• Dimensione del testo del menu: 19px
• Altezza riga menu: 1.4em
• Allineamento del testo: a destra

Impostazioni del menu a discesa

Quindi, cambia il colore della linea del menu a discesa.

• Colore linea menu a discesa: #ffffff

Impostazioni icone

Cambia anche i colori delle icone nelle impostazioni delle icone.

• Colore icona carrello: #000000
• Colore icona di ricerca: #000000
• Colore icona menu hamburger: #000000

Dimensionamento

E completa le impostazioni del modulo modificando le impostazioni di dimensionamento come segue:

• Larghezza massima logo: 200 px
• Larghezza: 100%
• Allineamento del modulo: Centro

Aggiungi il modulo Blurb n. 1 alla colonna 2

Lascia la casella del contenuto vuota

Alla seconda colonna. Per creare le icone di commutazione, utilizzeremo i Moduli Blurb senza titolo e contenuto. Inizieremo creando la prima icona di commutazione e quindi riutilizzare il modulo per aggiungere le altre due icone di commutazione. Dopo aver aggiunto il modulo Blurb, assicurati che il titolo e la casella del contenuto siano vuoti.

Seleziona icona

Quindi, seleziona un'icona a tua scelta.

Impostazioni icona

Passa alla scheda di progettazione del modulo e modifica le impostazioni dell'icona come segue:

• Colore icona
  • Predefinito: #dbdbdb
  • Al passaggio del mouse: #000000
• Posizionamento delle icone: in alto
• Allineamento delle icone: al centro
• Usa dimensione carattere icona: Sì
• Dimensione carattere icona: 200%

Dimensionamento

Modifica anche le impostazioni di dimensionamento.

• Larghezza contenuto: 100%
• Larghezza: 32%

Elemento principale e immagine sfocata CSS

E completa le impostazioni del modulo aggiungendo due righe di codice CSS alle opzioni CSS personalizzate nella scheda Avanzate del Modulo Blurb.

Elemento principale:

display: inline-block;

Immagine sfocata:

margin-bottom: 0px !important

Clona modulo Blurb due volte

Una volta completata la prima icona di attivazione/disattivazione del modulo Blurb, puoi clonarlo due volte.

Cambia icona

Assicurati di cambiare l'icona in ogni duplicato.

2. Aggiungi elementi di commutazione

Aggiungi sezione #2

Dimensionamento

Ora che abbiamo impostato le basi della nostra intestazione, dobbiamo ancora includere gli elementi di commutazione. Per fare ciò, aggiungeremo una nuova sezione proprio sotto la precedente. Apri le impostazioni della sezione e assicurati che l'altezza di questa sezione sia "0px". Questo ci aiuterà a evitare che la sezione occupi spazio nel nostro design dell'intestazione. L'unico motivo per cui abbiamo bisogno di questa sezione è mostrare i nostri elementi di commutazione.

• Altezza: 0px

Spaziatura

Passa alla scheda Progettazione della sezione 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 e modifica le impostazioni di dimensionamento come segue:

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

Spaziatura

Successivamente, rimuovi tutto il riempimento superiore e inferiore predefinito.

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

Posizione

E riposizionare l'intera riga. Trasformare questa riga in assoluto ci aiuterà a evitare che la riga occupi spazio nel disegno.

• Posizione: Assoluta
• Posizione: angolo in alto a destra

Aggiungi il modulo di testo n. 1 alla colonna 2

Aggiungi il numero di telefono alla casella dei contenuti

È ora di aggiungere gli elementi di commutazione! Per prima cosa, aggiungeremo il numero di telefono. Aggiungi un nuovo modulo di testo alla colonna 2 e inserisci il numero di telefono nella casella del contenuto.

Colore di sfondo

Aggiungi un colore di sfondo nero dopo.

• Colore di sfondo: #000000

Impostazioni testo

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo di conseguenza:

• Carattere di testo: display Playfair
• Colore del testo: #ffffff
• Dimensione del testo: 27px
• Allineamento del testo: Centro

Dimensionamento

Assicurati che anche la larghezza sia del 100%.

• Larghezza: 100%

Spaziatura

Quindi, aggiungi alcuni valori di riempimento personalizzati alle impostazioni di spaziatura.

• Imbottitura superiore: 10%
• Imbottitura fondo: 10%
• Imbottitura sinistra: 2%
• Imbottitura destra: 2%

Clona modulo testo

Una volta completato il primo modulo di attivazione/disattivazione dell'elemento Testo, clonalo una volta.

Cambia contenuto in indirizzo e-mail

Modificare il contenuto nella casella del contenuto.

Aggiungi il modulo Segui social media alla colonna 2

Aggiungi social network di scelta

Quindi, aggiungi un modulo Segui social media alla colonna 2. Aggiungi tutti i social network che desideri.

Cambia il colore di sfondo di ogni social network in bianco

Quindi, cambia il colore di sfondo in bianco per ogni social network individualmente.

• Colore di sfondo: #FFFFFF

Colore di sfondo

Quindi, torna alle impostazioni generali del modulo e usa un colore di sfondo nero.

• Colore di sfondo: #000000

Allineamento

Passa alla scheda di progettazione del modulo e modifica l'allineamento del modulo.

• Allineamento del modulo: Centro

Impostazioni icona

Cambia anche il colore dell'icona nelle impostazioni delle icone.

• Colore icona: #000000

Dimensionamento

Quindi, applica una larghezza "100%" alle impostazioni di dimensionamento.

• Larghezza: 100%

Spaziatura

Applica anche un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 10%
• Imbottitura fondo: 10%

Frontiera

E completa le impostazioni del modulo aggiungendo alcuni angoli arrotondati alle impostazioni del bordo.

• Tutti gli angoli: 100 px

3. Aggiungi funzionalità

Aggiungi ID CSS consecutivi alla prima sezione dei moduli Blurb

Ora che tutti gli elementi sono a posto, possiamo iniziare ad aggiungere l'effetto di attivazione/disattivazione. La prima cosa che devi fare è aprire ciascun modulo Blurb singolarmente e aggiungere un ID CSS consecutivo.

• Blurb 1: header-cta-1
• Blurb 2: header-cta-2
• Blurb 3: intestazione-cta-3

Aggiungi ID CSS consecutivi per attivare/disattivare gli elementi

Fai la stessa cosa per i moduli degli elementi di commutazione. Il numero alla fine dell'ID CSS deve corrispondere all'ID CSS utilizzato per le icone nel passaggio precedente.

• Modulo di testo 1: header-item-1
• Modulo di testo 2: header-item-2
• Modulo Follow sui social media: header-item-3

Aggiungi posizione assoluta a tutti gli elementi di commutazione

E trasforma ciascuno degli elementi di commutazione in assoluto uno per uno. Ti consigliamo di passare alla modalità wireframe per farlo.

• Posizione: Assoluta
• Posizione: in alto a destra

Aggiungi modulo di codice alla prima colonna della sezione n. 1

Ora che tutti gli ID CSS sono a posto, possiamo aggiungere il codice per far funzionare la funzione clic. Aggiungi un nuovo modulo codice proprio sotto il modulo menu nella colonna 1.

Inserisci codice CSS

Aggiungi le seguenti righe di codice CSS tra i tag di stile come puoi notare nella schermata di stampa qui sotto :

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

Inserisci codice JQuery

Stiamo aggiungendo anche del codice JQuery personalizzato. Aggiungi il codice tra i tag script come puoi notare nella schermata di stampa qui sotto .

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Rendi l'intestazione + attiva gli elementi appiccicosi

Rendi la sezione n. 1 appiccicosa

Ultimo ma non meno importante, puoi anche trasformare l'intestazione e attivare o disattivare gli elementi appiccicosi. Per creare il risultato desiderato, devi assicurarti che entrambe le sezioni siano adesive e che l'opzione "Offset da elementi adesivi circostanti" sia abilitata. Rendi la prima sezione appiccicosa.

• Posizione appiccicosa: bastone in alto
• Limite appiccicoso inferiore: nessuno
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

Rendi la sezione #2 appiccicosa

E fai lo stesso per la sezione 2. Questo è tutto!

• Posizione appiccicosa: bastone in alto
• Limite appiccicoso inferiore: nessuno
• Offset da elementi appiccicosi circostanti: Sì
• Stili di transizione predefiniti e permanenti: Sì

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 utilizzare le icone di commutazione all'interno dell'intestazione. Non appena qualcuno fa clic su un'icona, viene visualizzato un elemento di attivazione/disattivazione, che ti aiuta a risparmiare molto spazio nel design dell'intestazione. Questo approccio si concentra sul comportamento dell'utente e aiuta a evitare di dover progettare un design di intestazione travolgente. Sei stato anche in grado di scaricare il file JSON gratuitamente! Se hai domande, 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.