Prima di poter aggiungere un modulo Toggle 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 Abilita Visual Builder quando sfogli il tuo sito web in primo piano se hai effettuato l'accesso alla dashboard di WordPress.
Una volta che sei su 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 attivazione / disattivazione 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 "toggle" e quindi premere invio per trovare e aggiungere automaticamente il modulo toggle! 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: pagina delle domande frequenti
Una pagina delle FAQ è uno dei posti migliori per consolidare le informazioni utilizzando il modulo Toggle. Consente all'utente di identificare rapidamente la domanda che sta cercando senza dover leggere tonnellate di testo. Per questo esempio, ti mostrerò come utilizzare il modulo Toggle per progettare una moderna sezione delle FAQ per la tua pagina delle FAQ in pochi minuti.
Utilizzando Visual Builder, aggiungi una nuova sezione con una riga a larghezza intera (1 colonna). Quindi aggiungi un modulo Divisore alla riga. Nella scheda Contenuto delle impostazioni del modulo Divisore, seleziona l'opzione "Mostra divisore".
Nella scheda Progettazione, inserisci le seguenti opzioni:
Colore: # 000000 (nero)
Stile divisorio: solido
Posizione del separatore:
Divisore centrato verticalmente Peso: 4px
Altezza: 1
Quindi aggiungi un modulo di attivazione / disattivazione sotto il divisore che ho appena creato nella stessa riga. Nelle impostazioni del modulo Attiva / disattiva, aggiorna quanto segue:
Scheda Contenuto
Titolo: [inserisci il tuo titolo]
Contenuto: [inserisci il tuo contenuto]
Stato: Chiudi
Apri il colore di sfondo: #ffffff
Chiuso Attiva o disattiva il colore di sfondo: #ffffff
Colore di sfondo: #ffffff
Scheda di progettazione
Colore icona: # 000000
Apri Toggle Text Color: # 000000
Colore commutatore chiuso: # 000000
Carattere del titolo: Apri Sans, Bold
Dimensione carattere: 24px
Colore del testo del titolo: # 000000
Carattere del corpo: Apri Sans
Dimensione carattere corpo: 18px
Colore testo corpo: # 666666
Altezza della linea del corpo: 1.6em
Usa il bordo: SÌ
Larghezza del bordo: 0px
Imbottitura personalizzata: 2px superiore, 2px inferiore
Dopo aver salvato le impostazioni per il modulo di attivazione / disattivazione, duplica il modulo divisore creato e posizionalo sotto il modulo di attivazione / disattivazione. Questo incornicerà l'altalena con una linea di divisione superiore e inferiore. Successivamente, duplica il tuo modulo di commutazione e posizionalo dopo la linea di separazione inferiore. Poiché si tratta di un modulo Toggle duplicato, tutte le impostazioni di progettazione sono state trasferite al nuovo modulo Toggle e tutto ciò che devi fare è aggiornare il contenuto del nuovo modulo Toggle. Quindi continua con il processo di duplicazione dei moduli Divisione e Moduli Bilancia e aggiorna il contenuto delle tue bilance fino a quando non hai completato l'intera sezione FAQ.
È tutto. Ora hai una moderna sezione delle FAQ che utilizza il modulo Toggle per consolidare le tue domande e risposte.
Ora che hai visto il modulo di attivazione / disattivazione in azione, immergiti in TUTTE le sue impostazioni nelle sezioni seguenti. Abbiamo fornito uno sguardo dettagliato a ciò che troverai in ciascuna scheda delle impostazioni del modulo e una spiegazione di ciò che ciascuna fa.
I parametri di contenuto del modulo Toggle
La scheda del contenuto del modulo di attivazione / disattivazione è organizzata nei seguenti gruppi di parametri (che si alternano anche!).
Testo
Qui è dove puoi aggiungere il titolo e alternare il contenuto.
Stato
Puoi scegliere se vuoi che il tuo pulsante appaia aperto o chiuso di default con questa impostazione.
contesto
Qui puoi cambiare il colore di sfondo quando l'interruttore è aperto e il colore di sfondo quando è chiuso. Puoi anche renderli uguali facilmente impostando l'opzione del colore di sfondo. C'è anche la possibilità di impostare o caricare un'immagine di sfondo.
Etichetta amministrativa
Per impostazione predefinita, il modulo di attivazione / disattivazione verrà visualizzato con un'etichetta che recita "Attiva / Disattiva" nel generatore. Il tag amministratore ti consente di modificare questo tag per una facile identificazione.
I parametri di progettazione del modulo rocker
Le impostazioni di progettazione per il modulo di attivazione / disattivazione sono state raggruppate nelle seguenti opzioni a discesa nella scheda Progettazione.
icona
Qui è dove puoi cambiare il colore dell'icona di attivazione / disattivazione.
Testo
Qui puoi impostare il colore per il testo di attivazione e disattivazione.
Titolo del testo
Qui puoi regolare il carattere del testo del titolo, il peso, la dimensione, il colore, la spaziatura, l'altezza della linea e altro.
Il corpo del testo
Qui puoi regolare il carattere, il peso, le dimensioni, il colore, la spaziatura, l'altezza delle righe e altro ancora.
confini
Qui puoi scegliere di utilizzare un bordo. E se scegli di utilizzare un bordo, puoi anche selezionarne il colore, modificarne la larghezza e sceglierne lo stile.
spaziatura
Nell'area della spaziatura, puoi aggiungere un riempimento personalizzato in alto, a destra, in basso o a sinistra dell'interruttore. È inoltre possibile modificare questi valori per desktop, tablet o dispositivi mobili.
Le impostazioni avanzate del modulo sono attivate
Nella scheda Avanzate del tuo modulo di commutazione, puoi aggiungere un ID univoco e una classe css. Puoi anche aggiungere CSS personalizzati a vari selettori CSS predefiniti (e preselezionati) nel modulo di scorrimento video a discesa CSS personalizzato. Infine, nell'elenco a discesa della visibilità, puoi regolare la visibilità del tuo modulo su telefoni, tablet e desktop.
Questo è tutto per questo tutorial, spero che ti permetta di utilizzare meglio il modulo Divi Toggle.
[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
