Come progettare un modulo di accesso in linea per un'intestazione globale personalizzata in Divi

La creazione di un modulo di accesso in linea per l'intestazione può essere un ottimo impulso per l'esperienza dell'utente. Sono perfetti per i siti di appartenenza e i negozi online perché rendono davvero facile per gli utenti l'accesso in qualsiasi momento o su qualsiasi pagina del sito. In questo tutorial, ti mostreremo come progettare un modulo di accesso in linea per un utente di intestazione personalizzato Divi Theme Builder. Per fare ciò, creeremo una semplice intestazione globale reattiva e quindi progetteremo un modulo di accesso in linea compatto in alto a destra dell'intestazione utilizzando il modulo di accesso di Divi. La build richiede un po' di CSS personalizzato, ma una volta che tutto è a posto, sarà facile personalizzare il modulo di accesso in linea in modo che corrisponda facilmente a qualsiasi design di intestazione utilizzando le opzioni di design integrate di Divi.

Iniziamo!

Sbirciata

Ecco una rapida occhiata all'intestazione personalizzata con il modulo di accesso in linea che creeremo in questo tutorial.

Ed ecco il modulo di accesso in linea sul display del tablet e del telefono.

Ecco il messaggio e il collegamento "disconnetti" che verranno visualizzati quando gli utenti hanno effettuato l'accesso.

Scarica GRATUITAMENTE il layout dell'intestazione del modulo di accesso in linea

Per mettere le mani sul layout di questo tutorial, 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 iresubscribei 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!

Per importare il layout nella tua pagina, estrai semplicemente il file zip e aggiungi uno dei file json nel Divi Theme Builder utilizzando l'opzione Theme Builder Portability.

Andiamo al tutorial, vero?

Cosa ti serve per iniziare

Se non l'hai ancora fatto, installa e attiva il tema Divi. Questo è praticamente tutto ciò di cui hai bisogno per iniziare. Creeremo un nuovo layout del modello di intestazione da zero con Divi Theme Builder.

Aggiunta di una nuova intestazione globale

Per far funzionare le cose, dobbiamo creare una nuova intestazione globale per il nostro sito web. Per fare ciò, vai alla dashboard di WordPress e vai a Divi > Theme Builder.

Sul modello di sito Web predefinito, fai clic su "Aggiungi intestazione globale" e quindi su "Crea intestazione globale".

Quindi seleziona l'opzione Crea da zero.

Progettare l'intestazione globale Divi con un modulo di accesso in linea

Personalizzazione della sezione

Dall'editor del layout dell'intestazione globale, sarai in grado di creare completamente da zero l'intestazione personalizzata per il tuo sito. Per iniziare, apri le impostazioni per la sezione normale e aggiorna quanto segue:

• Colore di sfondo sfumato a sinistra:
• Colore di sfondo sfumato a destra:
• Direzione del gradiente: 48deg
• Imbottitura: 10px in alto, 10px in basso, 20px a sinistra, 20px a destra

Per rendere la nostra intestazione personalizzata più reattiva, aggiungeremo il seguente CSS personalizzato all'elemento principale della sezione.

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

Aggiunta del logo dell'intestazione alla prima riga

Ora che la sezione è pronta, possiamo aggiungere la prima riga.

Aggiungi riga

Aggiungi una riga a una colonna alla sezione.

Aggiungi modulo immagine con immagine logo

Nella riga a una colonna, aggiungi un modulo immagine. Qui sarà dove aggiungeremo il logo per l'intestazione.

Aggiorna immagine e margine del modulo immagine

Aggiorna le impostazioni dell'immagine come segue:

• Immagine: [aggiungi logo (circa 64px per 64px)]

• Margine: 20 px a destra

Aggiorna impostazioni riga

Prima di andare oltre, apri le impostazioni per la riga e aggiorna quanto segue:

• Usa larghezza grondaia personalizzata: S
• Larghezza grondaia: 1
• Larghezza: 25%
• Allineamento righe: sinistra
• Imbottitura: 0px in alto, 0px in basso

Aggiunta del modulo di accesso in linea alla seconda riga

Aggiungi riga

Ora che la prima riga è pronta, noterai nell'editor che la prima riga occuperà il 25% della sezione a sinistra. Questa sarà essenzialmente la riga designata per il logo della nostra intestazione. Dobbiamo creare una riga di sezione per il modulo di accesso in linea e il menu sul lato destro.

Aggiungi una seconda riga con una struttura a una colonna alla sezione.

Aggiungi modulo di accesso

All'interno della riga a una colonna, aggiungi un modulo di accesso.

Elimina contenuto predefinito

Nelle impostazioni di accesso, elimina il titolo fittizio e il contenuto del corpo.

Aggiungi classe personalizzata e CSS del modulo di accesso

Prima di andare troppo avanti nella progettazione del modulo di accesso in linea, aggiungiamo prima la classe CSS e CSS personalizzata al modulo di accesso. Questo ci consentirà di ottenere la struttura in linea di base del modulo prima di dare gli ultimi ritocchi di progettazione al modulo con le opzioni integrate di Divi.

Nella scheda Avanzate, aggiungi la seguente classe CSS:

• Classe CSS: header-login-form

Aggiungi il seguente CSS personalizzato alla casella CSS descrizione accesso:

margin-bottom: 0px !important

Quindi aggiungi il seguente CSS personalizzato alla casella CSS del modulo di accesso:

width: 100%;

Aggiungere il seguente CSS personalizzato alla casella CSS dei campi di accesso:

padding: 5px 4% !important

Aggiungi CSS personalizzato alle impostazioni di layout dell'intestazione

Poiché abbiamo aggiunto la nostra classe CSS personalizzata al modulo del modulo di accesso, possiamo aggiungere il nostro CSS personalizzato che avrà come target solo questo particolare modulo di accesso.

Apri l'impostazione del layout dell'intestazione e aggiungi il seguente CSS personalizzato:

.header-login-form .et_pb_login_form form {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-login-form .et_pb_login_form .et_pb_contact_form_field {
padding-bottom: 0px;
margin-right: 5px;
}
.header-login-form .et_pb_forgot_password {
display:none;
}

Questo CSS renderà i campi di accesso e il pulsante visualizzati in linea (orizzontalmente), nascondendo il messaggio "password dimenticata?" collegamento e aggiungere un piccolo margine tra i campi.

Impostazioni riga

Prima di dare gli ultimi ritocchi al modulo di accesso in linea, aggiorniamo le impostazioni della riga come segue:

• Usa larghezza grondaia personalizzata: S
• Larghezza grondaia: 1
• Allineamento righe: a destra
• Imbottitura: 0px in alto, 0px in basso

Impostazioni di progettazione del modulo di accesso

Ora siamo pronti per aggiornare le impostazioni del modulo di accesso. Apri le impostazioni del modulo del modulo di accesso e aggiorna quanto segue:

• Usa il colore di sfondo: NO

Campo e testo del collegamento

• Sfondo campi: Colore: rgba (255,255,255,0.2)
• Colore testo campi: #ffffff
• Carattere dei campi: Lato
• Dimensioni del testo dei campi: 14 px
• Allineamento del testo: a destra
• Carattere del collegamento: Lato
• Stile carattere collegamento: sottolineato
• Colore del testo del collegamento: #ff3190

Design del pulsante

• Dimensione del testo del pulsante: 15 px
• Colore di sfondo del pulsante: #ff3190
• Pulsante Larghezza bordo: 0px
• Carattere pulsante: Lato
• Imbottitura dei pulsanti: 2px in alto, 2px in basso
• Margine: 15px in basso
• Imbottitura: 0px in alto, 0px in basso, 0px a sinistra, 0px a destra

Aggiunta del menu alla seconda riga

Modulo Menu

Con il nostro modulo di accesso in linea in atto, possiamo aggiungere il menu direttamente sotto di esso.

Aggiungi un modulo menu sotto il modulo modulo di accesso.

Impostazioni modulo menu

Aggiorna le impostazioni del menu come segue:

• Colore di sfondo: rgba(0,0,0,0)
• Carattere del menu: Lato
• Peso del carattere del menu: grassetto
• Colore del testo del menu: #ffffff
• Dimensione del testo del menu: 16px
• Allineamento del testo: a destra
• Colore di sfondo del menu a discesa: #ffffff
• Colore linea menu a discesa: rgba(0,0,0,0)
• Colore del testo del menu a discesa: #000000
• Colore di sfondo del menu mobile: #ffffff
• Colore testo menu mobile: #000000
• Colore icona carrello: #ffffff
• Colore icona di ricerca: #ffffff
• Colore icona menu hamburger: #ffffff

Salvataggio dell'intestazione del modulo di accesso in linea

Assicurati di salvare il layout prima di uscire dall'editor del layout dell'intestazione.

Quindi salva anche le impostazioni del generatore di temi.

Risultati finali

Questo è tutto!

Ora diamo un'occhiata al risultato finale. Per visualizzare il risultato finale, visita semplicemente una pagina del tuo sito web.

Ecco l'intestazione sul display del desktop.

Ecco l'intestazione del modulo di accesso in linea sul display del tablet.

Ed ecco il modulo di accesso in linea sul display del telefono. Notare anche il menu mobile.

Ed ecco cosa vedrà l'utente una volta effettuato l'accesso.

Pensieri finali

Questa intestazione globale personalizzata con un modulo di accesso in linea sarà sicuramente utile per qualsiasi sito di appartenenza o negozio online. Con solo un po' di CSS personalizzato, siamo stati in grado di convertire il modulo di accesso di Divi in ​​un elegante modulo di accesso in linea che starà bene all'interno dell'intestazione di qualsiasi sito web. Spero che questo possa tornare utile per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!