Vai al contenuto principale

Come utilizzare il modulo di codice su Divi Builder

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 701.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

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 installato il tema Divi 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 navighi nel tuo sito Web a monte se hai effettuato l'accesso alla dashboard di WordPress.

pulsante divi costruttore modulo blog divi

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.

Inserisci il modulo codice divi

 

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.

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]

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

Codice costruttore Divi

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

Aggiungi lo snippet animate.css

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.

Aggiungi una classe animata CSS

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Ora il pulsante rimbalza quando viene caricata la pagina.

Animazione del pulsante costruttore divi

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 dei contenuti 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.

Parametri del codice Divi BuilderContenuto

Puoi inserire qualsiasi codice HTML, CSS o JavaScript che desideri visualizzare nella pagina nella posizione corrente. Solo gli editor e gli amministratori possono pubblicare HTML non filtrato, il che significa che il codice può essere rimosso dal modulo se viene utilizzato da un autore o collaboratore. Puoi anche inserire codici brevi nel modulo. Questi codici corso (shortcode) verranno visualizzati nella colonna genitore 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.

Opzione design modulo codice divi builderLarghezza 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.

Sezione anticipo modulo codice divi builder

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.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

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 Divi Child o in CSS personalizzati che aggiungi alla tua pagina o al tuo 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.

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
2 azioni
quota2
Tweet
Enregistrer