Come utilizzare il modulo di codice su Divi Builder

Il modulo del codice è una tela bianca che ti consente di aggiungere codice alla tua pagina, come codici brevi di plug-in o codice HTML statico. Se desideri utilizzare un plug-in di terze parti, ad esempio un plug-in di scorrimento di terze parti, puoi semplicemente posizionare lo shortcode del plug-in in un modulo di codice standard o a larghezza intera per visualizzare l'elemento senza restrizioni.

Come aggiungere un modulo di codice alla tua pagina

Prima di poter aggiungere un modulo di codice alla tua pagina, devi prima accedere a Divi Builder. Una volta il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editore ogni volta che crei una nuova pagina.

Facendo clic su questo pulsante, attivi Divi Builder, che ti dà accesso a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visiva.

Puoi anche fare clic sul pulsante Usa Visual Builder quando sfogli il tuo sito web upstream se hai effettuato l'accesso alla dashboard di WordPress.

Una volta entrati 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 del codice 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 "codice" e poi premere invio per trovare e aggiungere automaticamente il modulo codice! Una volta aggiunto il modulo, sarai accolto con l'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

Usa il caso aggiungendo un foglio di stile opaco per animare il contenuto su una singola pagina

In questo esempio, aggiungerò uno script di collegamento per importare Animate.css per aggiungere effetti di animazione agli elementi della pagina. Poiché il file Animate.css contiene molto codice, ha senso caricarlo solo sulla pagina di cui ho bisogno.

Basta aggiungere una sezione regolare e una linea a larghezza intera (colonna 1) e aggiungere il modulo di codice.

Nella casella di testo di contenuto, aggiungi lo snippet di codice.

Tutto quello che devi fare è aggiungere alcune classi CSS per animare qualsiasi elemento della tua pagina di classe CSS sulla tua pagina. In questo esempio, farò rimbalzare il pulsante quando la pagina viene caricata.

Nelle impostazioni del modulo Pulsante, nella scheda Avanzate, inserisci le due classi "animato" e "rimbalzo" nella casella di testo della classe CSS.

Ora il pulsante rimbalza quando viene caricata la pagina.

Suggerimento: a volte l'aggiunta di codice con interruzioni di riga farà sì che il codice smetta di funzionare. È meglio creare il codice in un editor di testo e incollarlo nel modulo del codice.

Opzioni di contenuto del codice

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

Contenuto

Qui puoi inserire qualsiasi codice HTML, CSS o JavaScript che desideri visualizzare sulla pagina nella posizione corrente. Solo gli editori e gli amministratori possono pubblicare HTML non filtrato, il che significa che il codice può essere rimosso dal corso se utilizzato da un autore o collaboratore. Puoi anche inserire codici brevi nel modulo. Questi codici corso (codici brevi) verranno visualizzati all'interno della colonna principale senza alcun wrapper del modulo Divi aggiuntivo.

Etichetta di amministrazione

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

Opzioni di progettazione del codice

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

Larghezza massima

Qualsiasi valore immesso qui limita la larghezza di qualsiasi contenuto visualizzato nel modulo del codice al valore impostato. Ad esempio, l'immissione del 50% nel campo di immissione ridurrà il contenuto del modulo del codice al 50% della colonna che lo contiene.

Codice Opzioni avanzate Codice

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

Inserisci un ID CSS facile da usare 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 tuo Tema Divi Child o nel CSS personalizzato che aggiungi alla tua pagina o al tuo file sito web utilizzando le opzioni del tema Divi o le impostazioni della pagina Divi Builder.

CSS personalizzato

Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi elemento interno del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere CSS direttamente a ogni elemento. Le voci CSS in queste impostazioni sono già incorporate con i tag di stile. Quindi devi solo inserire 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 mod differenti su dispositivi differenti o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

Questo è tutto per questo tutorial.