Vai al contenuto principale

Come utilizzare il modulo Divi Builder Flip

Divi: il tema WordPress più semplice da usare

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. [Consigliato]

Prima di poter aggiungere un modulo Toggle alla tua pagina, devi prima passare a Divi Builder. Una volta installato il tema Divi 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 navighi sul tuo sito Web in primo piano se sei connesso alla dashboard di WordPress.

accesso al visual builder

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.

flip flop divi module.png

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.
pagina di esempio FAQ.jpg

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

esempio di un pulsante flip-flop divi.png

Nella scheda Progettazione, inserisci le seguenti opzioni:

Colore: # 000000 (nero)
Stile divisorio: solido
Posizione del separatore:
Divisore centrato verticalmente Peso: 4px
Altezza: 1

opzioni di configurazione toggle divi.png

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:

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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

nuovo contenuto con divi.png rocker

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.

modulo toggle divi.gif

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

parametri flip-flop divi.png

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.

Etat

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

opzione design commuta wordpress.png

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

parametro flip-flop divi.png

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.

Altri tutorial di Divi

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
18 azioni
quota8
Tweet3
Enregistrer7