Come progettare un modulo di accesso popup creativo in Divi

Un bel modulo di accesso aiuta ad aumentare l'esperienza utente del tuo sito web. L'idea del nostro tutorial di oggi è creare un modulo di accesso utilizzando Divi Builder, che verrà visualizzato quando si fa clic sul pulsante di accesso nella home page. La maggior parte delle volte, quando facciamo clic sul pulsante di accesso, veniamo reindirizzati alla pagina di accesso, quando un semplice modulo pop-up è molto più conveniente e rinfrescante. Quindi oggi impareremo a progettare un modulo di accesso pop-up creativo. Questo lo creeremo con l'aiuto del modulo di login di Divi e di alcuni moduli di pulsanti. Quindi iniziamo il tutorial di oggi senza indugio.

Nota: lavoreremo solo con il design front-end. Se qualcuno ha problemi ad accedere, ad esempio, qualcuno deve reimpostare la password, dobbiamo passare alla pagina di accesso tradizionale. Per le persone innamorate delle pagine di accesso personalizzate, questo tutorial è perfetto.

Anteprima

Ecco l'anteprima del design di oggi. Possiamo vedere che, facendo clic sul pulsante di accesso, vengono visualizzati i moduli di accesso e, quando si fa clic su logout, viene visualizzato un messaggio di avviso prima del logout.

Modulo di accesso popup con pulsanti di accesso/disconnessione

Per iniziare con il design, devi prima andare su Divi

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Ora dobbiamo scaricare l'intestazione e il piè di pagina dei pacchetti di layout Crowdfunding di Divi da questa pagina . Inserisci il tuo ID e-mail e fai clic su download.

Quindi vedrai di nuovo un'opzione per il download e fai clic su di essa. Ora, decomprimi il file al termine del download e torna a Divi builder e fai clic sull'opzione di portabilità.

Ora segui l'ulteriore procedura come scritto di seguito.

• Seleziona la scheda di importazione dal popup di portabilità.
• Carica il file Json scaricato dalla cartella decompressa.
• Fare clic sul pulsante di importazione.
• Quindi fare clic su modifica per apportare modifiche all'intestazione.

Parte 1: Creazione del pulsante Login/Logout

Innanzitutto, apri i livelli in modo da poter vedere facilmente tutti gli elementi. Dalla riga superiore della sezione dell'intestazione, elimina i moduli dei social media.

Pulsante di accesso Creazione

C'è già un pulsante di accesso nella quarta colonna delle righe superiori. Lo modificheremo.

Aggiorna quanto segue nella scheda Progettazione:

• Icona del pulsante: icona del lucchetto (vedi screenshot)
• Posizionamento dell'icona del pulsante: a sinistra
• Mostra solo l'icona al passaggio del mouse per il pulsante: NO
• Imbottitura: 0.5em in alto, 0.5em in basso, 2em a sinistra, 0.7em a destra

Aggiungi due classi CSS personalizzate al pulsante dalla scheda Avanzate come segue:

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

Pulsante di disconnessione

Per creare il nostro pulsante di disconnessione, clonare il pulsante di accesso esistente nella colonna 4. Inoltre, etichettali per un'ulteriore identificazione.

Modifica il testo del pulsante clonato come "Esci".

Cambia l'icona del pulsante dalla scheda di progettazione come indicato di seguito.

Infine, cambia la Classe CSS dalla scheda Avanzate.

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

Parte 2: Creazione di una pagina popup

Abbiamo creato i pulsanti con successo. No, progetteremo la sezione popup che fungerà da modulo. Per crearlo, aggiungi una sezione normale sotto la sezione dell'intestazione.

Aggiunta di sezioni e impostazioni

Diamo alla sezione uno sfondo bianco.

• Colore di sfondo: #ffffff

Apportare le seguenti modifiche nella scheda Progettazione della sezione.

• Larghezza: 100%
• Larghezza massima: 800 px (desktop), 80% (tablet), 100% (telefono)
• Allineamento della sezione: Centro
• Altezza: auto (desktop e tablet), 100% (telefono)
• Altezza massima: 100%
• Imbottitura: 0px in alto, 0px in basso

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

Aggiungiamo una classe CSS dalla scheda avanzata.

• Classe CSS: et-popup-login

Quindi aggiungi il seguente codice CSS nell'elemento principale.

overscroll-behavior: contain;

Quindi, apportare alcune modifiche a Visibilità e posizione.

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

Aggiunta di righe e impostazioni

Aggiungiamo una riga a una colonna alla nuova sezione.

Apri le impostazioni della riga e apporta le seguenti modifiche.

• 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

Useremo un modulo blurb per creare un'icona di chiusura popup.

Elimina i testi del modulo dalle impostazioni e aggiungi la seguente icona.

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

Applicare le seguenti impostazioni dalla scheda Progettazione.

• Colore icona: #004e43
• Allineamento immagine/icona: centrato
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 50px

• Larghezza: 50px
• Allineamento del modulo: a destra
• Altezza: 50 px

Aggiungi una classe CSS al modulo blurb dalla scheda Avanzate.

• Classe CSS: et-toggle-popup

Parte 4: Creazione del modulo

Il nostro modulo di accesso ha due design, uno per l'accesso e l'altro per il logout. Quindi, ci saranno due diversi moduli del modulo di accesso. Il primo apparirà quando un utente è disconnesso e ha bisogno di accedere, e un altro è che l'utente è connesso e vuole disconnettersi. Concetto facile, torniamo al lavoro.

Creazione di un modulo disconnesso

Aggiungiamo un modulo di accesso per creare il nostro modulo di logout.

Ora apri le impostazioni del modulo modulo e modifica nella scheda contenuto.

• Reindirizzamento alla pagina corrente: SI
• Usa il colore di sfondo: NO

Scheda Progettazione

• Colore di sfondo dei campi: rgba(0,78,67,0,05)
• Colore di sfondo della messa a fuoco dei campi: rgba(0,78,67,0.15)
• Allineamento del testo: Centro
• Colore del testo: scuro

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

Ora torniamo alla sezione dell'intestazione dai livelli. Quindi, apri le impostazioni dal pulsante per dalla 4a colonna della 1a riga. Passa alla scheda Design e apri l'opzione del pulsante. Quindi, fai clic sull'opzione a tre punti e seleziona "copia stile pulsante".

Ora incollalo nel modulo di accesso che abbiamo appena creato.

Aggiorneremo lo stile del pulsante per il nostro modulo di accesso.

• Usa stili personalizzati per il pulsante: S .
• Colore del testo del pulsante: #ffffff
• Colore di sfondo del pulsante: #004e43
• Colore di sfondo del pulsante (al passaggio del mouse): #00683c
• Larghezza bordo pulsante: 0px
• Imbottitura pulsanti: 15px in alto, 15px in basso

Carichiamo anche le impostazioni di dimensionamento.

• Larghezza: 100%
• Larghezza massima: 80% (desktop), 90% (tablet), 95% (telefono)
• Allineamento del modulo: Centro

Ora passa alla scheda Avanzate e aggiungi la classe CSS e il CSS personalizzato come scritto di seguito.

• Classe CSS: et-log-out-form

Aggiungi il seguente codice alla casella Descrizione accesso.

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

Quindi aggiungi questo codice alla casella Modulo di accesso.

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

Questo rende il modulo di accesso simile a questo.

Creazione del modulo "Login"

Abbiamo finito con il modulo "Logout" e ora creiamo il modulo "Login" con contenuti diversi per estendere l'esperienza dell'utente. Per fare ciò, cloniamo il modulo di accesso esistente.

Ora aggiorna i nomi per ogni modulo. Quindi apri il modulo "Login" dalla scheda del contenuto apri l'impostazione del testo. Quindi dalla casella del titolo, avrai un menu a discesa sul lato destro. Aprilo e seleziona "Titolo sito".

Apri le impostazioni del titolo del sito dinamico e aggiornale come segue.

• Prima: "Stai tentando di disconnetterti da “
• Dopo: “. â€

Ora modifica le impostazioni della descrizione in base alla tua scelta, ma inserisci la descrizione come Intestazione 3.

In molti moduli di accesso al sito Web, abbiamo visto un messaggio personalizzato allegato al collegamento "logout". Personalizzeremo l'opzione del testo del corpo dalla scheda Avanzate per crearla.

• Seleziona la scheda del collegamento sotto le opzioni del testo del corpo.
• Tipo di carattere del collegamento: Work Sans
• Peso del carattere del collegamento: semi grassetto
• Stile del carattere del collegamento: TT
• Allineamento del testo del collegamento: centro
• Colore del testo del collegamento: #ffffff

Passa alla scheda Avanzate e aggiungi una classe CSS e un CSS personalizzato.

• Classe CSS: et-log-in-form

CSS personalizzato per il modulo di accesso:

display:none;

Parte 5: codici personalizzati

Dobbiamo aggiungere un modulo di codice per aggiungere codici personalizzati. Aggiungiamo un modulo di codice sotto l'ultimo modulo di accesso.

Codice CSS

Aggiungi il codice CSS specificato sul modulo all'interno dei tag di stile .

/* 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;
}

Codice JQuery

Ora assumi il seguente codice JQuery sul modulo all'interno di Script Tags.

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

Risultato del progetto

Quindi, ecco il risultato del nostro design. Tutto è a posto e funziona perfettamente.

Parole finali

Oggi hai visto come progettare un modulo di accesso personalizzato creativo con il modulo di accesso di Divi . In questo modo, puoi abbinare l'estetica del sito web su un pannello di accesso personalizzato. Spero che troverai utile questo tutorial e, in tal caso, una condivisione sarà splendida!