Come aggiungere un modulo di accesso a discesa all'intestazione Divi

Se stai creando un sito Web di appartenenza, è altamente necessario pensare all'esperienza di accesso. Certo, puoi consentire ai visitatori di utilizzare la pagina di accesso predefinita di WordPress, ma puoi anche semplificarli includendo un modulo di accesso nell'intestazione. In questo caso, ti consigliamo di attivare il modulo di accesso al clic in modo da poter risparmiare spazio nell'intestazione. Questo è esattamente ciò che ti mostreremo nel tutorial Divi di oggi. Creeremo un'intestazione globale da zero e includeremo un modulo di accesso a discesa. 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. Crea un nuovo modello di intestazione globale

Vai a Divi Theme Builder

Inizia andando al Divi Theme Builder nel backend del tuo sito Web WordPress. Una volta lì, fai clic su "Aggiungi intestazione globale".

Aggiungi nuova intestazione globale

Apparirà un menu a tendina. Per iniziare a costruire da zero, continua selezionando "Crea intestazione globale".

2. Costruisci il design dell'intestazione

Aggiungi la sezione n. 1

Immagine di sfondo

Una volta all'interno dell'editor dei modelli, noterai già una sezione. Apri le impostazioni della sezione e carica un'immagine di sfondo o usa un colore di sfondo.

Spaziatura

Passa alla scheda di progettazione della sezione e modifica successivamente l'imbottitura superiore e inferiore.

• Imbottitura superiore: 10px
• Imbottitura inferiore: 10px

Aggiungi riga alla sezione

Struttura della colonna

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

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza:
  • Desktop: 80%
  • Tablet e telefono: 95%
• Larghezza massima: 2580 px

Spaziatura

Modificare i valori di riempimento successivo.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 1%
• Imbottitura destra: 1%

Elemento principale CSS

Per allineare automaticamente le colonne verticalmente, aggiungeremo le seguenti righe di codice CSS all'elemento principale della riga nella scheda Avanzate:

display: flex;
justify-content: center;
align-items: center;

Aggiungi il modulo Segui social media alla colonna 1

Aggiungi social network

È ora di aggiungere moduli, iniziando con un modulo Segui social media nella colonna 1. Aggiungi i social network di tua scelta.

Cambia il colore di sfondo di ogni social network individualmente

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

• Colore di sfondo: #ffffff

Impostazioni icona

Torna alle impostazioni generali del modulo e cambia il colore dell'icona nella scheda design.

• Colore icona: #141414

Frontiera

Applicare successivamente alcune impostazioni degli angoli arrotondati nelle impostazioni del bordo.

• Tutti gli angoli: 100 px

Aggiungi modulo pulsante alla colonna 2

Aggiungi copia

Nella colonna 2, l'unico modulo di cui abbiamo bisogno è un modulo pulsante. Aggiungi una copia a tua scelta.

Allineamento dei pulsanti

Modificare l'allineamento del modulo successivo.

• Allineamento dei pulsanti: a destra

Impostazioni dei pulsanti

Quindi, modella il pulsante.

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 12px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #ff4700
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 2px

• Carattere pulsante: Prata
• Stile carattere pulsante: maiuscolo

Spaziatura

E completa le impostazioni del pulsante applicando i seguenti valori di riempimento alle impostazioni di spaziatura:

• Imbottitura superiore: 16px
• Imbottitura inferiore: 16px
• Imbottitura sinistra: 24px
• Imbottitura destra: 24px

Aggiungi sezione #2

Colore di sfondo

Aggiungi un'altra sezione proprio sotto la precedente e usa il seguente colore di sfondo per essa:

• Colore di sfondo: #fff4ef

Spaziatura

Rimuovi tutte le imbottiture superiori e inferiori predefinite nella scheda di progettazione successiva.

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

Aggiungi riga n. 1

Struttura della colonna

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

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

• Equalizza le altezze delle colonne: Sì
• Larghezza:
  • Desktop: 80%
  • Tablet e telefono: 95%
• Larghezza massima: 2580 px

Spaziatura

Modifica anche i valori di riempimento nelle impostazioni di spaziatura.

• Imbottitura superiore: 5px
• Imbottitura inferiore: 5px
• Imbottitura sinistra: 2%
• Imbottitura destra: 2%

Impostazioni colonna 2

Colore di sfondo

Quindi, apri le impostazioni della colonna 2 e applica un colore di sfondo solo su tablet e telefono.

• Scrivania: /
• Tablet e telefono: #f2e8e3

Spaziatura

Stiamo aggiungendo un po' di imbottitura superiore e inferiore anche su schermi di dimensioni più piccole.

• Imbottitura superiore:
  • Tablet e telefono: 25px
• Imbottitura inferiore:
  • Tablet e telefono: 25px

Aggiungi modulo menu alla colonna 1

Seleziona Menu

Successivamente, aggiungeremo un modulo menu alla riga. Seleziona un menu a tua scelta.

Carica logo

Carica un logo sul tuo Modulo Menu.

Rimuovi colore di sfondo

Quindi, rimuovi il colore di sfondo del menu.

Menu Impostazioni testo

Passa alla scheda di progettazione del modulo e modella il testo del menu come segue:

• Carattere del menu: Prata
• Colore del testo del menu: #111821
• Dimensione del testo del menu: 18px
• Altezza riga menu: 1.4em
• Allineamento del testo: a destra

Impostazioni del menu a discesa

Modifica anche le impostazioni del menu a discesa.

• Colore di sfondo del menu a discesa: #fff4ef
• Colore linea menu a discesa: #191919
• Colore del testo del menu a discesa: #191919
• Colore di sfondo del menu mobile: #fff4ef
• Colore testo menu mobile: #191919

Impostazioni icone

Quindi, cambia i colori delle icone nelle impostazioni delle icone.

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

Dimensionamento

E completa le impostazioni del modulo applicando le seguenti impostazioni di dimensionamento:

• Larghezza massima logo: 50 px
• Larghezza: 100%

3. Aggiungi il modulo di accesso a discesa e fai clic sulla funzionalità

Aggiungi modulo Blurb alla colonna 2

Aggiungi titolo

Ora che le basi della nostra intestazione sono state costruite, possiamo concentrarci sulla creazione del trigger e del modulo di accesso a discesa. La prima cosa di cui avremo bisogno è un modulo Blurb nella colonna 2 della nostra riga. Qui, aggiungeremo un titolo.

Seleziona icona

Successivamente, selezioneremo un'icona.

Impostazioni icona

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

• Colore icona: #ffffff
• Icona del cerchio: Sì
• Colore del cerchio: #ff4700
• Posizionamento immagine/icona: a sinistra

Impostazioni del testo del titolo

Quindi, modella il testo del titolo.

• Carattere del titolo: Lato
• Peso del carattere del titolo: pesante
• Stile carattere del titolo: maiuscolo
• Dimensione del testo del titolo: 12px
• Spaziatura delle lettere del titolo: 3px

Animazione

Stiamo anche rimuovendo l'animazione predefinita di questo modulo nelle impostazioni di animazione.

• Animazione immagine/icona: nessuna animazione

Blurb Titolo CSS

E aggiungeremo un margine superiore al titolo del blurb nella scheda Avanzate.

margin-top: 10px;

Posizione

Ultimo ma non meno importante, riposizioneremo il modulo nelle impostazioni di posizione.

• Posizione: Assoluta
• Posizione: Centro

Aggiungi la riga n. 2 alla sezione n. 2

Struttura della colonna

Per aggiungere il form di login, utilizzeremo una nuova riga sotto la precedente, con la seguente struttura a colonne:

Dimensionamento

Senza ancora aggiungere moduli, apri le impostazioni di riga e modifica le impostazioni di dimensionamento come segue:

• Equalizza le altezze delle colonne: Sì
• Larghezza massima: 2580 px

Spaziatura

Modifica anche i valori di riempimento.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px
• Imbottitura sinistra: 2%
• Imbottitura destra: 2%

Aggiungi il modulo di accesso alla colonna 2

Rimuovi contenuto

Aggiungi un modulo di accesso alla colonna 2. Assicurati che le caselle del contenuto siano vuote.

Colore di sfondo

Cambia il colore di sfondo successivo.

• Colore di sfondo: #ff4700

Impostazioni dei campi

Passa alla scheda Design e dai uno stile ai campi.

• Colore di sfondo dei campi: rgba(0,0,0,0)
• Colore del testo dei campi: rgba (255,255,255,0.73)
• Imbottitura campi a sinistra: 0px
• Imbottitura destra dei campi: 0px
• Carattere dei campi: Lato
• Dimensioni del testo dei campi: 16 px

• Altezza della linea dei campi: 1,8 em
• Tutti gli angoli: 0px
• Larghezza bordo inferiore dei campi: 1px
• Colore bordo inferiore dei campi: #ffffff

Impostazioni dei pulsanti

Quindi, modificare le impostazioni del pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 12px
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #141414
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px
• Spaziatura delle lettere dei pulsanti: 2px
• Carattere pulsante: Prata

• Stile carattere pulsante: maiuscolo
• Imbottitura superiore del pulsante: 16px
• Imbottitura fondo pulsante: 16px

Dimensionamento

Assicurati che anche la larghezza sia "100%".

• Larghezza: 100%

Pulsante di accesso CSS

Applicare un margine superiore alla casella CSS del pulsante di accesso nella scheda Avanzate.

margin-top: 30px;

Posizione

E riposizionare il modulo di conseguenza:

• Posizione: Assoluta
• Posizione: in alto a destra
• Offset verticale: 1px

Aggiungi l'ID CSS al modulo Blurb nella riga n. 1

Ora che abbiamo tutti gli elementi di cui abbiamo bisogno, possiamo concentrarci sulla funzionalità dei clic. Innanzitutto, apri il modulo Blurb e aggiungi il seguente ID CSS:

• ID CSS: divi-login-toggle

Aggiungi l'ID CSS al modulo di accesso nella riga n. 2

Apri il modulo di accesso successivo e applica il seguente ID CSS:

• ID CSS: divi-login-form

Aggiungi modulo codice sotto il modulo di accesso

Quindi, aggiungi un modulo di codice proprio sotto il modulo di accesso.

Aggiungi tag stile e script

Per creare la funzionalità di clic, utilizzeremo del codice CSS e JQuery. Per prepararci a quel codice, aggiungeremo tag di stile (per il codice CSS) e tag di script (per il codice JQuery).

Inserisci codice CSS tra i tag di stile

Inserisci le seguenti righe di codice CSS tra i tag di stile:

#divi-login-toggle {
cursor: pointer;    
}

#divi-login-form {
margin-top: -20px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;
}
  
.show-login-form {
visibility: visible !important;
margin-top: 0px !important;
opacity: 1 !important;
}

Inserisci JQuery tra i tag di script

E il seguente codice tra i tag dello script:

jQuery(document).ready(function($){

var loginForm =  $('#divi-login-form');

$('#divi-login-toggle').click(function() {

loginForm.toggleClass('show-login-form');

});
});

4. Salva le modifiche al generatore di temi Divi

Ora che tutto è a posto, l'unica cosa che resta da fare è salvare tutte le modifiche di Divi Theme Builder e visualizzare il risultato!

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 essere creativo con la tua intestazione durante la creazione di un sito Web di appartenenza. Più specificamente, ti abbiamo mostrato come includere un modulo di accesso a discesa che consente ai tuoi visitatori di accedere ai loro account senza dover accedere alla pagina di accesso di WordPress. Sei stato anche in grado di scaricare gratuitamente il file JSON del modello di intestazione! 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.