La creazione di a forma L'accesso in linea per l'intestazione può dare un enorme impulso all'esperienza dell'utente. Sono perfetti per i siti di appartenenza e i negozi online perché consentono agli utenti di accedere in qualsiasi momento e su qualsiasi pagina del sito.
In questo tutorial, ti mostreremo come progettare un file forma online utilizzando un'intestazione personalizzata su Divi Theme Builder. Per fare ciò, creeremo una semplice intestazione globale reattiva e quindi progetteremo un file forma accesso online compatto in alto a destra dell'intestazione utilizzando il modulo di accesso di Divi. La build richiede un po' di codice CSS personalizzato, ma una volta che tutto è a posto, sarà facile personalizzare il modulo di accesso online per adattarlo facilmente a qualsiasi design di intestazione utilizzando le opzioni di progettazione dei servizi integrati di Divi.
Panoramica dei risultati
Ecco una rapida panoramica dell'intestazione personalizzata con il modulo di accesso online che creeremo in questo tutorial.
Ed ecco il modulo di accesso online sullo schermo del tablet e del telefono.
Ecco il messaggio e il collegamento di disconnessione che verranno visualizzati quando gli utenti effettueranno l'accesso.
Cosa ti serve per iniziare
Se non l'hai già 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 per impostazione predefinita, fai clic su "Aggiungi intestazione globale" e quindi su "Crea intestazione globale".
Quindi seleziona l'opzione Crea da zero.
Progetta l'intestazione globale Divi con un modulo di accesso online
Personalizzazione della sezione
Dall'editor del layout dell'intestazione globale, sarai in grado di creare completamente l'intestazione personalizzata del tuo sito. Per iniziare, apri le impostazioni della sezione normale e aggiorna quanto segue:
- Gradiente di sfondo del colore sinistro:
- Gradiente di sfondo destro:
- Direzione del gradiente: 48 gradi
- Imbottitura: 10 pixel nella parte superiore, 10 pixel nella parte inferiore, 20 pixel a sinistra, 20 pixel 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;
Aggiungi il logo dell'intestazione alla prima riga
Ora che la sezione è pronta, possiamo aggiungere la prima riga.
Aggiungi una riga
Aggiungi una riga a una colonna nella sezione.
Aggiungi un modulo immagine con un'immagine del logo
Nella riga della singola 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 64 pixel per 64 pixel)]
- Margine: 20 px a destra
Aggiorna i parametri della linea
Prima di proseguire, apri le impostazioni della riga e aggiorna quanto segue:
- Utilizzare una larghezza della grondaia personalizzata: SÌ
- Larghezza della grondaia: 1
- Larghezza: 25%
- Allineamento delle file: a sinistra
- Imbottitura: 0px alta, 0px bassa
Aggiunta del modulo di accesso online alla seconda riga
Aggiungi una 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 e il menu di accesso in linea sul lato destro.
Aggiungi una seconda riga con struttura a una colonna nella sezione.
Aggiungi un modulo di accesso
Nella riga di una colonna, aggiungi un modulo di accesso.
Rimuovi il contenuto predefinito
Nelle impostazioni di accesso, elimina il titolo falso e il contenuto del corpo.
Aggiungi un modulo di accesso e una classe CSS personalizzata
Prima di andare troppo oltre nella progettazione del modulo di accesso online, aggiungiamo prima le classi CSS e CSS personalizzate al modulo di accesso. Questo ci consentirà di impostare la struttura online di base del modulo prima di dare il tocco finale di progettazione al modulo con le opzioni integrate di Divi.
Nella scheda Avanzate, aggiungi la seguente classe CSS:
- Classe CSS: modulo-login-intestazione
Aggiungi il seguente CSS personalizzato nell'area CSS della descrizione della connessione:
margin-bottom: 0px !important
Quindi aggiungere il seguente CSS personalizzato nell'area CSS del modulo di accesso:
width: 100%;
Aggiungi il seguente CSS personalizzato alla casella CSS Fields Connection:
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 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 farà sì che i campi di accesso e il pulsante vengano visualizzati in linea (orizzontalmente), nascondendo il collegamento "Hai dimenticato la password?". »E aggiungi un piccolo margine tra i campi.
Impostazioni linea
Prima di aggiungere gli ultimi ritocchi al modulo di accesso online, aggiorniamo i parametri di linea come segue:
- Utilizzare una larghezza della grondaia personalizzata: SÌ
- Larghezza della grondaia: 1
- Allineamento della linea: dritto
- Imbottitura: 0px alta, 0px bassa
Impostazioni di progettazione per il 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 del campo: Colore: rgba (255,255,255,0.2)
- Colore del testo del campo: #ffffff
- Polizia di campo: Lato
- Dimensione del testo del campo: 14px
- Allineamento del testo: a destra
- Carattere link: Lato
- Stile carattere link: sottolineato
- Colore testo collegamento: # ff3190
Disegno pulsante
- Dimensione del testo del pulsante: 15px
- Colore sfondo pulsante: # ff3190
- Larghezza del bordo del pulsante: 0px
- Carattere del pulsante: Lato
- Imbottitura bottoni: 2px in alto, 2px in basso
- Margine: 15px 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 online attivo, possiamo aggiungere il menu direttamente sotto.
Aggiungi un modulo menu sotto il modulo modulo di accesso.
Impostazioni del modulo menu
Aggiorna le impostazioni del menu come segue:
- Colore di sfondo: rgba (0,0,0,0)
- Carattere del menu: Lato
- Peso carattere menu: grassetto
- Colore testo menu: #ffffff
- Dimensione del testo del menu: 16px
- Allineamento del testo: a destra
- Colore di sfondo del menu a discesa: #ffffff
- Colore della linea nel 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
Assicurati di salvare il layout prima di uscire dall'Editor layout intestazione.
Quindi salva anche le impostazioni del generatore di temi.
Risultati finali
Questo è tutto!
Ora vediamo il risultato finale. Per vedere il risultato finale è sufficiente visitare una pagina del tuo sito web.
Ecco l'intestazione sullo schermo del desktop.
Ecco l'intestazione del modulo di accesso in linea sullo schermo del tablet.
Ed ecco il modulo di accesso online sullo schermo del telefono. Notare anche il menu mobile.
E questo è ciò che l'utente vedrà una volta effettuato l'accesso.
Considerazioni finali
Questa intestazione globale personalizzata con un modulo di accesso online tornerà sicuramente utile per qualsiasi sito di 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 online che avrebbe fatto bella figura nell'intestazione di qualsiasi sito web. Spero che questo sia utile per il tuo prossimo progetto.
Non vedo l'ora di sentirti nei commenti.
Alla tua salute!
