È necessario creare un'intestazione globale con forma connessione in DIVI?
La creazione di a forma login sulla tua intestazione può essere una grande spinta per l'esperienza dell'utente.
Sono ideali per siti Web in abbonamento e negozi online in quanto consentono agli utenti di accedere in qualsiasi momento a qualsiasi pagina del sito web.
In questo tutorial ti mostreremo come progettare a forma accesso online per gli utenti su un'intestazione personalizzata. Iniziamo!
Panoramica
Ecco la rapida anteprima dell'intestazione personalizzata con il modulo di accesso che creeremo in questo tutorial.
Ecco il messaggio e il collegamento di "disconnessione" che verranno visualizzati quando gli utenti avranno effettuato l'accesso.
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 su Divi > Theme Builder.
Sul modello di sito web per impostazione predefinita, fai clic su "Aggiungi intestazione globale", quindi fai clic su "Crea intestazione globale".
Design dell'intestazione globale Divi con un modulo di accesso orizzontale
Personalizza la sezione
Dall'editor del layout dell'intestazione globale, puoi creare l'intestazione personalizzata del tuo sito web Partendo dal nulla. Per iniziare, apri le impostazioni nella sezione normale e aggiorna quanto segue:
- Colore sfumatura sfondo sinistro:
- Colore sfumato di sfondo destro:
- Direzione del gradiente: 48 gradi
- Margine interno: 10px in alto, 10px in basso, 20px a sinistra, 20px a destra
Per rendere la nostra intestazione più reattiva, aggiungeremo il seguente CSS personalizzato all'elemento della sezione principale.
display:flex;
justify-content:center;
align-items:center;
Aggiungi il logo dell'intestazione alla prima riga
Ora che la sezione è pronta, possiamo aggiungere la prima riga.
Aggiungi riga
Aggiungi una riga a una colonna nella sezione.
Aggiungi un modulo Immagine con un'immagine del logo
Nella riga a una colonna, aggiungi un modulo Immagine. Questo sarà il punto in cui aggiungeremo il logo dell'intestazione.
Aggiorna immagine e margine del modulo immagine
Aggiorna le impostazioni dell'immagine come segue:
- Immagine: [aggiungi logo (circa 64 x 64 px)]
- Margine: 20px a destra
Aggiorna i parametri della linea
Prima di andare oltre, apri le impostazioni della linea e aggiorna quanto segue:
- Usa larghezza grondaia personalizzata: SÌ
- Spaziatura delle colonne: 1
- Larghezza massima: 25%
- Allineamento: sinistra
- Margine interno: 0px in alto, 0px in basso
Aggiunto modulo di accesso orizzontale alla seconda riga
Aggiungi riga
Ora che la prima riga è pronta, noterai nell'editor che la prima riga occuperà il 25% della sezione sinistra. Questa sarà fondamentalmente la linea designata per il nostro logo di intestazione. Dobbiamo creare una riga di sezione per il modulo di accesso e il menu sul lato destro.
Aggiungi una seconda riga con struttura a una colonna nella sezione.
Aggiungi un modulo di accesso
All'interno della riga di una colonna, aggiungi un modulo "Connetti".
Rimuovi il contenuto predefinito
Nelle impostazioni del modulo di accesso, rimuovi il titolo falso e il contenuto del corpo.
Aggiungi una classe personalizzata per il modulo di accesso e CSS
Prima di andare troppo oltre nella progettazione del modulo di accesso, aggiungiamo prima la classe CSS e il CSS personalizzato al modulo di accesso. Questo imposterà la struttura online di base del modulo prima di dare gli ultimi ritocchi al design del modulo con le opzioni integrate di Divi.
Vedi anche la nostra guida su Come creare un menu laterale scorrevole e reattivo in DIVI
Nella scheda Avanzate, aggiungi la seguente classe CSS:
- Classe CSS: header-login-form
Aggiungi il seguente CSS personalizzato alla casella CSS della descrizione della connessione:
margin-bottom: 0px !important
Quindi aggiungi il seguente CSS personalizzato nell'area CSS del modulo di accesso:
width: 100%;Aggiungi il seguente CSS personalizzato all'area CSS dei campi di accesso:
padding: 5px 4% !important
Aggiungi CSS personalizzato alle impostazioni del 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 quel particolare modulo di accesso.
Leggi anche il nostro tutorial su Come creare la pagina del blog con il modulo Blog con DIVI
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 farà sì che i campi di accesso e il pulsante visualizzino in linea (orizzontale), il messaggio "Hai dimenticato la password?" verrà nascosto e verrà aggiunto un piccolo margine tra i campi.
Impostazioni linea
Prima di dare gli ultimi ritocchi al modulo di accesso, aggiorniamo i parametri della linea come segue:
- Usa larghezza grondaia personalizzata: SÌ
- Spaziatura delle colonne: 1
- Allineamento: giusto
- Margine interno: 0px in alto, 0px in basso
Impostazioni di progettazione per il modulo di accesso
Ora siamo pronti per aggiornare le impostazioni del modulo di accesso. Apri le impostazioni del modulo Connect e aggiorna quanto segue:
- Usa il colore di sfondo: NO
Campo e testo del collegamento
- Campi colore di sfondo: rgba(255,255,255,0.2)
- Campi colore testo: #ffffff
- Carattere dei campi: Lato
- Campi dimensione testo: 14px
- Allineamento del testo: a destra
Disegno pulsante
- Usa stili personalizzati per Button: NO
- Dimensione testo pulsante: 15px
- Pulsante sfondo: #ff3190
- Pulsante Larghezza bordo: 0 pixel
- Carattere pulsante: Lato
- Pulsante Margine: 2px in alto, 2px in basso
- Pulsante di riempimento: 15px in basso
- Margine interno: 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 attivo, possiamo aggiungere il menu direttamente sotto.
Aggiungi un modulo Menu sotto il modulo Login.
Impostazioni del modulo menu
Aggiorna le impostazioni del menu come segue:
- Sfondo: rgba(0,0,0,0)
- Menu dei caratteri: Lato
- Menu luce soffusa: grassetto
- Colore testo menu: #ffffff
- Dimensione testo menu: 16px
- Allineamento del testo: a destra
- Colore di sfondo del menu a tendina: #ffffff
- Colore riga 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 ricerca: #ffffff
- Colore icona menu hamburger: #ffffff
Salvataggio dell'intestazione del modulo di accesso
Assicurati di salvare il layout prima di uscire dall'editor di intestazione.
Quindi, salva anche le impostazioni di Theme Builder.
Risultati finali
È fatta !
Ora vediamo il risultato finale. Per vedere il risultato finale, tutto ciò che devi fare è visitare una pagina del tuo sito web.
E questo è ciò che l'utente vedrà una volta effettuato l'accesso.
Scarica DIVI ora!!!
Conclusione
Questa intestazione globale personalizzata con un modulo di accesso sarà sicuramente utile per qualsiasi sito Web in abbonamento 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 che si adatterà perfettamente all'intestazione di qualsiasi sito web.
Spero che questo sarà utile per il tuo prossimo progetto. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
