Divi: come creare un modulo di accesso popup

Vuoi creare un file forma accesso popup in Divi con i pulsanti di accesso / disconnessione?

La creazione di a forma popup di accesso Divi può essere un modo efficace per migliorare il design del tuo sito e l'esperienza utente di login/logout. 

L'idea è quella di creare un forma login che viene visualizzato in un popup ogni volta che l'utente fa clic su un pulsante di accesso nell'intestazione della pagina. 

Questo è più conveniente che reindirizzare l'utente a una pagina di accesso personalizzata.

In questo tutorial, creeremo un modulo di accesso pop-up con pulsanti di accesso e disconnessione personalizzati in Divi. 

Utilizzando il modulo Divi Login e alcuni moduli Button, creeremo un'esperienza di accesso popup senza interruzioni sul front-end consentendo agli utenti di accedere e disconnettersi senza essere reindirizzati a un'altra pagina.

Cominciamo!

Panoramica

Ecco una rapida occhiata al design che creeremo in questo tutorial.

Nota come cambiano rispettivamente il pulsante di accesso e il pulsante di disconnessione. E, una volta che l'utente effettua l'accesso, rimane sulla pagina corrente. 

Inoltre, il modulo di accesso a comparsa mostra diversi contenuti di "avviso" ogni volta che l'utente tenta di disconnettersi.

Cosa ti serve per iniziare

Sebbene tu possa aggiungere questo modulo di accesso pop-up e pulsanti di accesso/disconnessione personalizzati a qualsiasi intestazione personalizzata, utilizzeremo un'intestazione predefinita per accelerare il processo e avviare rapidamente la progettazione.

Importa il modello di intestazione "Crowdfunding Layout Pack" nel builder Divi

Per iniziare, scarica Intestazione e piè di pagina di Divi Crowdfunding Layout Pack gratis . Per fare questo, vai a il post del blog .

Quindi inserisci la tua email per scaricare il file zip.

Successivamente, decomprimi il file in modo che sia pronto per l'importazione.

Per importare il file nell'editor del tema, attenersi alla seguente procedura:

1. Vai a Divi > Generatore di temi.
2. Fare clic sull'icona della portabilità.
3. Nella finestra a comparsa Portabilità, seleziona la scheda di importazione.
4. Scegli il file decompresso scaricato in precedenza da importare.
5. Cliquer sur Importa Divi Theme Builder Modelli.
6. Fare clic sull'icona di modifica per modificare l'intestazione importata.

Creazione del modulo di accesso popup in Divi

Parte 1: Creazione di pulsanti di accesso e disconnessione

Una volta nell'editor del layout dell'intestazione globale, apri il file vista a strati in modo da poter vedere facilmente tutti gli elementi.

Nella riga superiore della sezione dell'intestazione, elimina il modulo Segui i social media accanto al pulsante Accedi nella colonna 3.

Leggi anche: Divi: Confronto dei diversi tipi di gradienti

Creazione del pulsante di accesso

Per creare il nostro pulsante di accesso, apri le impostazioni del modulo Pulsante nella colonna 3 della riga superiore.

Aggiorna i seguenti elementi nella scheda Design:

• Icona pulsante: icona lucchetto (vedi screenshot)
• Posizionamento dell'icona del pulsante: a destra
• Mostra solo l'icona al passaggio del mouse per il pulsante: NO
• Imbottitura: 0,5 em (superiore e inferiore), 2 em (sinistra), 0,7 em (destra)

Sotto la scheda Tecnologia, assegna al pulsante due classi CSS personalizzate come segue:

• Classe CSS: et-toggle-popup et-popup-login-button

Creazione del pulsante di logout

Per creare il nostro pulsante di disconnessione, duplica il pulsante di accesso esistente nella colonna 3.

Per aiutare a distinguere i due pulsanti, puoi aggiornare rispettivamente l'etichetta di ciascuno. Quindi, apri le impostazioni del modulo Pulsante duplicato nella colonna 3.

Modificare il testo del pulsante per leggere "Logout".

Aggiorna i seguenti elementi nella scheda Design:

• Icona pulsante: icona di sblocco (vedi screenshot)

Sotto la scheda Tecnologia, aggiorna il pulsante Classi CSS come segue:

• Classe CSS: et-toggle-popup et-popup-logout-button

La prima classe rimarrà la stessa ma la seconda classe sarà diversa.

Parte 2: creazione della sezione popup

Una volta terminati i pulsanti, siamo pronti per creare la sezione popup che fungerà da nostro popup contenente il file forme connessione.

Sotto la sezione dell'intestazione, aggiungi una nuova sezione regolare.

Quindi inserisci una riga di una colonna all'interno della sezione.

Impostazioni della sezione

Prima di aggiornare la riga, apri le impostazioni della sezione.

Sotto la scheda Contenuti, assegna alla sezione un colore di sfondo bianco:

• Sfondo: #ffffff

Sotto la scheda Design, aggiorna quanto segue:

• Larghezza: 100%
• Larghezza massima: 800px (desktop), 80% (tablet), 100% (telefono)
• Allineamento sezione: Centro
• Altezza: auto (desktop e tablet), 100% (telefono)
• Altezza massima: 100%
• Imbottitura: 0px (superiore e inferiore)

• Angoli arrotondati: 10px
• Box Shadow: vedi screenshot
• Posizione verticale dell'ombra del riquadro: 0px
• Forza di sfocatura: 100 pixel
• Forza di diffusione: 50px

Sotto la scheda Tecnologia, aggiorna quanto segue:

Aggiungi una classe CSS personalizzata.

• Classe CSS: et-popup-login

Aggiungi uno snippet CSS personalizzato all'elemento principale:

overscroll-behavior: contain;

Aggiorna le opzioni Visibilità e Posizione.

• Overflow orizzontale: nascosto
• Overflow verticale: automatico
• Posizione: fissa
• Località: Centro Centro
• Indice Z: 999999

Impostazioni linea

Con le impostazioni della sezione in atto, apri le impostazioni della linea e aggiorna le seguenti impostazioni di progettazione:

• Usa larghezza grondaia personalizzata: SÌ
• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px (in alto), 5vh (in basso)

Parte 3: Creazione dell'icona di chiusura popup

Per creare l'icona di chiusura del popup che chiuderà/nasconderà il popup al clic, utilizzeremo un modulo Blurb.

Aggiungi un nuovo modulo Blurb alla riga.

Apri l'impostazione del modulo ed elimina il titolo e il corpo del testo.

Quindi aggiungi l'icona come segue:

• Usa icona: SÌ
• Icona: icona "x" (vedi screenshot)

Sotto la scheda Design, aggiorna quanto segue:

• Colore icona: #004e43
• Allineamento immagine/icona: centrato
• Usa dimensione carattere icona: SÌ
• Dimensione carattere icona: 50px
• Larghezza: 50px
• Modulo di allineamento: a destra
• Altezza: 50px

Sotto la scheda Tecnologia, aggiungi una classe CSS al modulo Blurb come segue:

• Classe CSS: et-toggle-popup

Parte 4: Creazione dei moduli di accesso "Login" e "Logged out".

Per avere contenuto e design diversi per il modulo di accesso all'accesso e al logout, creeremo due diversi moduli del modulo di accesso. 

Il primo sarà il modulo di accesso che verrà visualizzato ogni volta che l'utente viene "loggato". Il secondo sarà il form di login che verrà visualizzato ogni volta che l'utente sarà “loggato”.

Creazione del form “Logged Out”.

Per creare il modulo di accesso "Logged Out", aggiungi un nuovo modulo di accesso sotto l'icona del modulo Blurb all'interno della riga.

Apri le impostazioni del modulo e modifica le seguenti impostazioni:

Scheda Contenuto

• Reindirizzamento alla pagina corrente: SÌ
• Usa colore di sfondo: NO

Scheda Progettazione

• Colore di sfondo dei campi: rgba(0,78,67,0.05)
• Colore sfondo messa a fuoco campo: rgba (0,78,67,0,15)
• Allineamento del testo: centrato
• Colore del testo: scuro

• Carattere del titolo: Poppins
• Peso del carattere del titolo: semigrassetto
• Colore del testo: #000000
• Altezza riga del titolo: 1,3 em
• Carattere del corpo: Work Sans

Per aggiornare gli stili dei pulsanti, copia gli stili dei pulsanti dal pulsante di accesso che abbiamo creato nella terza colonna nella riga della sezione Intestazione.

Quindi incolla gli stili dei pulsanti nel gruppo delle opzioni dei pulsanti nelle impostazioni di connessione nella scheda Progettazione.

Quindi, aggiorna gli stili dei pulsanti per il modulo di accesso come segue:

• Pulsante
  • Colore del testo: #ffffff
  • Sfondo: #004e43
  • Sfondo (al passaggio del mouse): #00683c
  • Larghezza bordo: 0 pixel
  • Imbottitura: 15px (superiore e inferiore)

Quindi, aggiorna le opzioni di dimensionamento come segue:

• Larghezza: 100%
• Larghezza massima: 80% (desktop), 90% (tablet), 95% (telefono)
• Modulo di allineamento: centro

Scheda Avanzate

Sotto la scheda Tecnologia, aggiorna la classe CSS e il CSS personalizzato come segue:

• Classe CSS: et-logged-out-form

CSS personalizzato per la descrizione della connessione:

width: 100% !important;
float: none !important;

CSS personalizzato per il modulo di accesso:

width: 100% !important;
padding: 0px !important;

Ciò garantirà che il modulo di accesso occupi l'intera larghezza della riga/colonna, anche sul desktop.

Creazione del form “Login”.

Ora che la versione "Logged Out" del modulo è completa, è necessario creare la versione "Logged In" che avrà contenuti e stili diversi per massimizzare l'esperienza dell'utente.

Per creare il modulo di accesso "Logged Out", duplica il modulo di accesso esistente.

Successivamente, aggiorna l'etichetta per ciascuno dei file forme collegamento rispettivamente.

Apri le impostazioni duplicate (il modulo "Accedi") e aggiungi il titolo del sito come contenuto dinamico al titolo del modulo del modulo di accesso.

Quindi apri le impostazioni del contenuto dinamico del titolo del sito e aggiorna il contenuto prima e dopo come segue:

• Prima: "Stai tentando di disconnetterti da Elegant Themes"
• Dopo: ". " 

Questo creerà una bella notifica dinamica per gli utenti che tentano di disconnettersi dal sito.

Quindi aggiungi la seguente intestazione H3 al corpo:

<h3>Are you sure?</h3>

Se hai mai visto il contenuto del modulo Login dopo aver effettuato l'accesso, sai che c'è un messaggio personalizzato che include un link "log out" personalizzato. Per rendere questo collegamento simile a un pulsante, è necessario personalizzare le impostazioni del carattere/testo del collegamento del corpo come segue:

• Seleziona la scheda Link sotto opzione Corpo del testo.
• Font di collegamento: Work Sans
• Peso del carattere del collegamento: semigrassetto
• Stile carattere: TT
• Allineamento testo link: centrato
• Colore testo link: #ffffff

NOTA: non sarai in grado di visualizzare in anteprima questi risultati finché non visualizzerai il modulo su una pagina live.

Sotto la scheda Tecnologia, aggiorna la classe CSS e il CSS personalizzato come segue:

• Classe CSS: et-logged-in-form

CSS personalizzato per il modulo di accesso:

display:none;

Parte 5: aggiungi codice personalizzato

Per aggiungere il CSS e JQuery personalizzati necessari per la funzionalità del modulo di accesso a comparsa, creare un nuovo modulo Codice nell'ultimo modulo di accesso.

CSS

Apri le impostazioni del modulo Codice e incolla il seguente CSS nella casella del codice, assicurandoti di racchiudere il CSS nei tag di stile necessari.

/* hide popup section */
.et-popup-login {
  display: none;
}
 
/* hide login button when logged in */
.logged-in .et-popup-login-button {
  display: none !important;
}
 
/* hide logout button when logged out */
.et-popup-logout-button {
  display: none !important;
}
 
/* show logout button when logged in */
.logged-in .et-popup-logout-button {
  display: inline-block !important;
}
 
/* hide logged out form when logged in */
.logged-in .et-logged-out-form {
  display: none !important;
}
 
/* hide logged in form when logged out */
.et-logged-in-form {
  display: none !important;
}
 
/* show logged in form when logged in */
.logged-in .et-logged-in-form {
  display: block !important;
}
 
/* style logout link within logged in form */
.et-logged-in-form a {
  display: block;
  padding: 15px 1em;
  border-radius: 8px;
  background: #004e43;
  max-width: 400px;
  margin: 20px auto 0px;
}
.et-toggle-popup {
  cursor: pointer;
}
 
/* show hidden elements in visual builder */
body.et-fb .et-popup-login,
body.et-fb .et-logged-out-form {
  display: block !important;
}
body.et-fb .et-popup-login-button {
  display: inline-block !important;
}

Tieni presente che il CSS utilizza la classe “connected” incorporata in WordPress per nascondere/mostrare i pulsanti di accesso/disconnessione corrispondenti e i forme Messaggio di accesso "Connesso"/"Disconnesso" ogni volta che l'utente effettua l'accesso o si disconnette.

JQuery

Sotto il tag di stile finale, incolla il seguente JQuery assicurandoti di racchiudere il codice nei tag di script necessari.

(function ($) {
  $(document).ready(function () {
    $(".et-toggle-popup").click(function (e) {
      e.preventDefault();
      $(".et-popup-login").fadeToggle(500);
    });
  });
})(jQuery);

Questo frammento di codice commuta semplicemente la sezione popup ogni volta che l'utente fa clic su uno dei tre elementi con la classe " e-toggle-popup (i pulsanti di login e logout più l'icona di presentazione "x").

Guarda anche: Divi: come utilizzare le impostazioni della maschera di sfondo e le opzioni di trasformazione del modello

È fatta !

Non dimenticare di salvare le modifiche apportate al modello nel generatore di temi. Una volta salvati, puoi visualizzare i risultati su una pagina live.

Risultato finale

Ecco i risultati finali su computer, tablet e telefono.

Nota come cambiano il pulsante di accesso e il pulsante di disconnessione. E, una volta che l'utente accede, l'utente rimane sulla pagina corrente. 

Inoltre, il modulo di accesso popup visualizza diversi contenuti di "avviso" ogni volta che l'utente tenta di disconnettersi.

Scarica DIVI ora!!!

Conclusione.

Si spera che la creazione di questo modulo di accesso popup e dei pulsanti di accesso/disconnessione personalizzati ti dia un'idea di come utilizzare il modulo di accesso di Divi in ​​modo creativo. 

Sentiti libero di modificare il design e il contenuto di ogni modulo di accesso (o pulsante) per creare un'esperienza di accesso unica sul tuo sito web.

Speriamo anche che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.

Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.

Non esitate a consultare anche la nostra guida sul 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.

...