[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: #f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3 / 4" css = ". vxXXXXUM ! important; border-bottom-width: 1502759058885px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: il tema WordPress più semplice da usare

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62.

La creazione di un modulo di accesso online per la tua intestazione può essere un enorme miglioramento per l'esperienza utente. Sono ottimi per i siti di appartenenza e i negozi online in quanto consentono agli utenti di accedere in qualsiasi momento e su qualsiasi pagina del sito. 

In questo tutorial, ti mostreremo come progettare un modulo di accesso online utilizzando un'intestazione personalizzata su Divi Theme Builder. Per fare ciò, creeremo una semplice intestazione globale reattiva, quindi progetteremo un modulo di accesso online compatto in alto a destra dell'intestazione utilizzando il modulo di accesso 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 abbinare facilmente qualsiasi design di intestazione utilizzando le opzioni di design. Divi integrato.

Panoramica dei risultati

Ecco una rapida panoramica dell'intestazione personalizzata con il modulo di accesso online che creeremo in questo tutorial.

Modulo di connessione Divi

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.

modulo di accesso online

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 fare 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.

Nel modello di sito Web predefinito, fai clic su "Aggiungi un'intestazione globale", quindi fai clic su "Crea un'intestazione globale".

Creazione della testa global divi

Quindi seleziona l'opzione Crea da zero.

Costruire 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
Personalizza in head divi

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 codice divi css

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 una colonna di intestazione divi

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.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare Facile e gratuito qualsiasi sito web o blog design con un aspetto professionale. Smetti di pagare molto per un sito web che puoi fare da solo.

Aggiungi un'immagine del modulo divi

Aggiorna immagine e margine del modulo immagine

Aggiorna le impostazioni dell'immagine come segue:

  • Immagine: [aggiungi logo (circa 64 pixel per 64 pixel)]
Personalizza l'immagine e il suo margine divi
  • Margine: 20 px a destra
Modifica divi del margine destro

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
Modifica i parametri della linea divi

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 una nuova colonna divi in ​​testa

Aggiungi un modulo di accesso

Nella riga di una colonna, aggiungi un modulo di accesso.

Aggiungi un modulo di accesso divi

Rimuovi il contenuto predefinito

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

Rimuovi il contenuto predefinito

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: header-login-form

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:

Vuoi vendere i tuoi prodotti su Internet?

Scarica WooCommerce gratis, i migliori plugin di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress e creare facilmente il tuo negozio online. Perfetto per i principianti.

width: 100%;

Aggiungi il seguente CSS personalizzato alla casella CSS Fields Connection:

padding: 5px 4% !important

Personalizza codice css divi

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.

Personalizza modulo divi

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
Usa bordi speciali

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
Usa il colore di sfondo divi
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
Personalizza il modulo di login del modulo colore
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
modulo di accesso online

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.

Inserisci un modulo menu divi

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.

Bottone di chiusura testa Divi

Quindi salva anche le impostazioni del generatore di temi.

Salvare l'intestazione di creazione divi modifiche

Risultati finali

Questo è tutto!

Vediamo ora il risultato finale. Per vedere il risultato finale, visita semplicemente una pagina del tuo sito web.

Ecco l'intestazione sullo schermo del desktop.

Menu dei risultati finali con forum di connessione divi

Ecco l'intestazione del modulo di accesso in linea sullo schermo del tablet.

modulo di accesso online

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.

Cosa è visibile quando l'utente ha effettuato l'accesso a divi

Considerazioni finali

Questa intestazione globale personalizzata con un modulo di accesso online tornerà 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 online che si adatterà bene nell'intestazione di qualsiasi sito web. Spero che tu lo trovi utile per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Alla tua salute!

1 azioni
quota1
Tweet
Enregistrer