Il modulo di accesso (accesso) visualizza a forma Accedi a WordPress, in stile Divi, ovunque sulla tua pagina. Se utilizzi WordPress con un'area membri, aggiungi un file forma collegarsi direttamente a una pagina può essere molto utile (invece di reindirizzare le persone al file forma Login WordPress che utilizza uno stile diverso rispetto al tuo tema).

Come aggiungere un modulo di accesso alla tua pagina

Prima di poter aggiungere un modulo di accesso alla tua pagina, devi prima passare a Divi Builder. Una volta il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.

Individua il modulo di accesso nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "Connetti" e quindi fare clic su "Invio" per trovare e aggiungere automaticamente il modulo di connessione! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Esempio di caso d'uso: aggiungi un modulo di accesso personalizzato alla pagina di accesso dell'area membri

Poiché i siti di appartenenza richiedono che l'utente acceda ad alcuni o tutti i contenuti, il modulo di accesso semplifica l'aggiunta di un modulo di accesso alla propria pagina di accesso. Inoltre, puoi scegliere di reindirizzare gli utenti a questo modulo anziché alla pagina di accesso predefinita di WordPress.

Ecco una semplice pagina di accesso con il modulo di accesso che ti mostrerò come creare:

Utilizzando Visual Builder, aggiungi una nuova sezione standard alla pagina di accesso dell'abbonamento con una riga a larghezza intera (1 colonna). Quindi inserire il modulo di connessione sulla linea.

Aggiorna le impostazioni di connessione come segue:

Opzioni di contenuto

Titolo: Connessione
Contenuto: [inserire una breve descrizione del corso o le istruzioni per l'accesso]
Reindirizza alla pagina corrente: SI

Opzioni di design

Colore sfondo campo: # f0f0f0 Colore testo: Scuro Carattere intestazione: 35px Colore intestazione: # 888888 Dimensione carattere corpo: 16px Bordo: Sì Colore bordo: # 0c71c3 Larghezza bordo: 1 px Imbottitura personalizzata: 50 px in alto, 50 px a destra, 50 px in basso, 50 px a sinistra Utilizza stili personalizzati per il pulsante: SÌ Dimensioni del testo del pulsante: 26 px Colore del testo del pulsante: #ffffff Colore del pulsante: # 0c71c3 Pulsante: 0px Pulsante Carattere: predefinito, maiuscolo Aggiungi icona pulsante: SI Icona pulsante: Visualizza solo l'icona quando si passa con il mouse sopra il pulsante: NO

È tutto. Il sito dell'area membri ora dispone di un modulo di accesso personalizzato in cui gli utenti verranno reindirizzati quando avranno bisogno di accedere al corso. Non è necessario accontentarsi del modulo di accesso predefinito di WordPress.

Opzioni di contenuto del modulo di connessione

Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.

titolo

Il titolo verrà visualizzato nella casella di accesso, sopra il modulo di accesso.

Contenuto

Il contenuto verrà visualizzato nella casella di accesso, sotto il titolo. Se desideri aggiungere una descrizione aggiuntiva, puoi utilizzare il campo. Altrimenti, lascialo vuoto.

Reindirizza alla pagina corrente

Qui puoi scegliere se reindirizzare l'utente alla pagina corrente.

Usa il colore di sfondo

Se vuoi dare al tuo modulo di accesso un colore di sfondo a tinta unita, seleziona "sì" per questa opzione e verrà utilizzato il colore di sfondo selezionato nell'opzione successiva.

Colore di sfondo

Seleziona un colore di sfondo da visualizzare come sfondo della tua casella di accesso. Se hai scelto di disattivare i colori di sfondo nell'opzione precedente, quel colore non avrà effetto.

Etichetta amministratore

Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di stile per il modulo di login

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.

Colore di sfondo del campo modulo

Il modulo di accesso contiene due campi di input per nome utente e password. È possibile utilizzare questa impostazione per regolare il colore di sfondo di questi campi.

Colore del testo del campo modulo

Il modulo di accesso contiene due campi di input per nome utente e password. È possibile utilizzare questa impostazione per regolare il colore del testo di questi campi. Se hai regolato il colore di sfondo del campo modulo, puoi anche regolare il colore del testo per garantire una relazione cromatica armoniosa.

Colore di sfondo

Quando un campo di input viene messo a fuoco con il mouse di un visitatore, i colori cambiano per indicare chiaramente quale campo è attivo. Qui puoi definire il colore di sfondo dei campi focalizzati.

Metti a fuoco il colore del testo

Quando un campo di input viene messo a fuoco con il mouse di un visitatore, i colori cambiano per indicare chiaramente quale campo è attivo. Qui puoi definire il colore del testo dei campi focalizzati.

Usa il colore del bordo della messa a fuoco

Se desideri aggiungere un bordo ai campi di input quando sono a fuoco, puoi abilitare questa opzione.

Colore del bordo del fuoco

Usando questa impostazione, puoi cambiare il colore del bordo che appare sui campi di input focalizzati.

Colore del testo

Qui puoi scegliere se il tuo testo deve essere chiaro o scuro. Se stai lavorando su uno sfondo scuro, il tuo testo dovrebbe essere chiaro. Se lo sfondo è chiaro, il testo dovrebbe essere scuro.

Orientamento del testo

Qui puoi regolare l'allineamento del tuo testo.

Carattere dell'intestazione

È possibile modificare il carattere del testo dell'intestazione selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, lettere maiuscole e sottolineato.

Dimensione del carattere dell'intestazione

Qui puoi regolare la dimensione del testo dell'intestazione. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Colore del testo dell'intestazione

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo dell'intestazione, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.

Spaziatura delle lettere di intestazione

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se desideri aumentare lo spazio tra ogni lettera nel testo dell'intestazione, utilizza il dispositivo di scorrimento dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Altezza riga di intestazione

L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. Se desideri aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Carattere del corpo

È possibile modificare il carattere del corpo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Dimensione del carattere del corpo

Qui puoi regolare la dimensione del testo del tuo corpo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo oppure immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.

Colore del testo del corpo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo testo, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere del corpo

La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel tuo testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Altezza della linea del corpo

L'altezza della riga influisce sullo spazio tra ogni riga di testo nel tuo corpo Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Usa il bordo

Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.

Colore del bordo

Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.

Larghezza del confine

Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Sono supportate unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.

Stile del bordo

I bordi supportano otto diversi stili: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.

Margine personalizzato

Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto o a sinistra ea destra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Imbottitura personalizzata

Il riempimento è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.

Usa stili personalizzati per il pulsante

L'attivazione di questa opzione rivela varie impostazioni di personalizzazione dei pulsanti che puoi utilizzare per modificare l'aspetto del pulsante del tuo modulo.

Dimensione del testo del pulsante

Questa impostazione può essere utilizzata per aumentare o diminuire la dimensione del testo nel pulsante. Il pulsante si adatta all'aumentare e diminuire della dimensione del testo.

Colore del testo del pulsante

Per impostazione predefinita, i pulsanti adottano il colore accento del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore di testo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del pulsante.

Colore di sfondo del pulsante

Per impostazione predefinita, i pulsanti hanno un colore di sfondo trasparente. Questo può essere modificato selezionando il colore di sfondo desiderato dal selettore dei colori.

Pulsante Larghezza bordo

Tutti i pulsanti Divi hanno un bordo 2px per impostazione predefinita. Questo bordo può essere aumentato o diminuito utilizzando questa impostazione. I bordi possono essere rimossi inserendo un valore di 0.

Colore del bordo del pulsante

Per impostazione predefinita, i bordi dei pulsanti adottano il colore principale del tema come definito nel personalizzatore del tema. Questa opzione ti consente di assegnare un colore del bordo personalizzato al pulsante di questo modulo. Seleziona il tuo colore personalizzato utilizzando il selettore di colori per cambiare il colore del bordo del pulsante.

Raggio del bordo del pulsante

Il raggio del bordo influisce sulla rotondità degli angoli dei pulsanti. Per impostazione predefinita, i pulsanti in Divi hanno un piccolo raggio del bordo che arrotonda gli angoli di 3 pixel. È possibile ridurre questo valore a 0 per creare un pulsante quadrato o aumentarlo in modo significativo per creare pulsanti con bordi circolari.

Spaziatura delle lettere dei pulsanti

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera nel testo del pulsante, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.

Carattere pulsante

È possibile modificare il carattere del testo del pulsante selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.

Aggiungi un'icona a pulsante

Disattivata, questa impostazione rimuoverà le icone dal pulsante. Per impostazione predefinita, tutti i pulsanti Divi visualizzano un'icona a forma di freccia al passaggio del mouse.

Icona del pulsante

Se le icone sono abilitate, puoi usare questa impostazione per scegliere quale icona usare nel tuo pulsante. Divi ha diverse icone tra cui scegliere.

Pulsante icona colore

La regolazione di questa impostazione cambierà il colore dell'icona che appare sul tuo pulsante. Per impostazione predefinita, il colore dell'icona è lo stesso del colore del testo del pulsante, ma questa impostazione consente di regolare il colore in modo indipendente.

Pulsante di posizionamento delle icone

Puoi scegliere di visualizzare l'icona del tuo pulsante a sinistra o a destra del tuo pulsante.

Mostra solo l'icona quando si passa con il mouse sopra il pulsante

Per impostazione predefinita, le icone dei pulsanti vengono visualizzate solo al passaggio del mouse. Se vuoi che l'icona appaia sempre, disattiva questa impostazione.

Colore del testo al passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Colore di sfondo del pulsante al passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Pulsante del bordo di passaggio del colore

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo colore. Il colore cambierà dal colore di base definito nelle impostazioni precedenti.

Pulsante del bordo del passaggio del mouse

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Pulsante di spaziatura delle note di puntamento

Quando il pulsante viene posizionato sopra il mouse di un visitatore, verrà utilizzato questo valore. Il valore cambierà dal valore di base definito nelle impostazioni precedenti.

Opzioni avanzate del modulo Login

Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.

ID CSS

Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.

Classe CSS

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o al tuo sito Web utilizzando le opzioni del tema Divi o le impostazioni nella pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.

visibilità

Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Questo è utile se vuoi usare diverse mod su diversi dispositivi, o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]

Altri tutorial di Divi

• siti 5 che utilizzano Divi ristorante a tema
• Come aggiungere testo su un prodotto Divi WooCommerce
• Come cambiare il colore del menu tra le pagine Divi
• Come personalizzare le griglie di un blog con Divi
• Come utilizzare il ruolo di Editor Divi su WordPress
• Come creare un dispositivo di scorrimento Divi a schermo intero
• Come cambiare il colore dei menu tra le pagine di Divi
• Funzionalità che probabilmente non conosci su Divi
• Come usare Divi Builder su WordPress
• Come usare il modulo di scorrimento video Divi
• Come utilizzare il modulo Divi Builder Flip
• Come aggiungere un modulo di testimonianza su Divi Builder
• Come usare il modulo di testo Divi
• Come creare un dispositivo di scorrimento su Divi
• Come modificare un ruolo utente Divi
• Come usare il modulo Divi Social Media
• Come utilizzare il modulo negozio sul tema WordPress Divi
• Come utilizzare il modulo barra laterale Divi
• Come utilizzare il modulo Tabella prezzi Divi
• Come utilizzare il modulo del titolo delle pubblicazioni Divi
• Come aggiungere un modulo video di Divi
• Come utilizzare il modulo di navigazione dell'articolo
• Come usare il modulo di ricerca Divi
• Come utilizzare il modulo portafoglio Divi
• Come usare il modulo persona su Divi Builder
• Come usare il modulo portafoglio con filtro Divi
• Come utilizzare il modulo di scorrimento a larghezza piena
• Come utilizzare il modulo immagine Divi Builder
• Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
• Come utilizzare il modulo della galleria di immagini
• Come utilizzare il modulo Divi Builder Full-Width Card
• Come utilizzare il modulo Divi Full Width Portfolio
• Come utilizzare il modulo di intestazione a tutta larghezza Divi
• Come utilizzare il modulo contatore Divi
• Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
• Come utilizzare il modulo Divi Email Optin