CMS Wordpress 12 Août 2021 Créé par 3mn de lecture

Modulo codice di Divi

Lien de l'article

Sommaire

Procédure

Divi builder è incluso nei nostri pacchetti dihosting web Wordpress. Se desiderate il supporto per DIVI builder, dovete sottoscrivere una licenza direttamente sul sito web del tema Elegent Divi.

Introduzione

LWS offre 3 plugin premium di Elegant Themes (Divi, Bloom e Monarch). Questi vengono aggiornati regolarmente. Una volta diventati clienti di LWS, avrete accesso gratuito a questi plugin scegliendo la distribuzione "Divi Builder" durante l'installazione del CMS Wordpress con il nostro programma di installazione automatica.

Se disponete di un pacchetto cPanel o avete già installato Wordpress con questa distribuzione, ma non avete accesso a tutti i temi o agli aggiornamenti, fatecelo sapere fornendoci i dati di accesso all'area di amministrazione del vostro sito Wordpress, in modo che un tecnico possa aggiornare la licenza.

Nota bene: per usufruire dell'assistenza è necessario sottoscrivere una licenza Elegant Themes. LWS non fornisce assistenza per questi prodotti.

Che cos'è il modulo Codice di Divi?

Il modulo Codice è una tela vuota che vi permette di aggiungere codice alla vostra pagina, come ad esempio shortcode di plugin o HTML statico. Se si desidera utilizzare un plugin di terze parti, ad esempio un plugin di slider di terze parti, è sufficiente inserire il codice breve del plugin in un modulo codice standard o a tutta larghezza per visualizzare l'elemento senza ostacoli.

Come aggiungere un modulo di codice alla pagina

Prima di poter aggiungere un modulo di codice alla pagina, è necessario passare al Divi Builder. Una volta installato il tema Divi sul vostro sito web, noterete un pulsante Use Divi Builder sopra l'editor dei post ogni volta che create una nuova pagina. Fate clic su questo pulsante per attivare il Divi Builder e accedere a tutti i suoi moduli. Quindi fate clic sul pulsante Use Visual Builder per avviare il costruttore in modalità visuale. È possibile fare clic sul pulsante Usa Visual Builder anche durante la navigazione del sito web, se si è connessi alla dashboard di WordPress.

Modulo codice di Divi

Una volta entrati nel Visual Builder, potete fare clic sul pulsante grigio + per aggiungere un nuovo modulo alla vostra pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se state iniziando una nuova pagina, non dimenticate di aggiungere prima una riga alla vostra pagina.

Modulo codice di Divi Individuare il modulo del codice nell'elenco dei moduli e fare clic su di esso per aggiungerlo alla pagina. L'elenco dei moduli è ricercabile, il che significa che si può anche digitare la parola "codice" e poi fare clic sul pulsante di invio per trovare e aggiungere automaticamente il modulo codice! Una volta aggiunto il modulo, si aprirà un elenco di opzioni per il modulo. Le opzioni sono suddivise in tre gruppi principali: Contenuto, Stile e Avanzate.

Esempio di utilizzo: aggiunta di un foglio di stile esterno per animare il contenuto di una singola pagina

In questo esempio, aggiungerò uno script di collegamento per importare Animate.css e aggiungere effetti di animazione agli elementi della pagina. Poiché il file Animate.css contiene molto codice, ha senso caricarlo solo nella pagina che mi serve.

È sufficiente aggiungere una sezione regolare e una riga a tutta larghezza (1 colonna) e aggiungere il modulo Code.

Modulo codice di Divi

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

Modulo codice di Divi

Ora non resta che aggiungere alcune classi CSS per animare qualsiasi elemento della pagina con le classi CSS. In questo esempio, farò rimbalzare il pulsante al caricamento della pagina.

Nelle impostazioni del modulo pulsante, nella scheda Avanzate, inserite le due classi "animato" e "rimbalzo" nella casella di testo Classe CSS.

Il pulsante ora rimbalzerà al caricamento della pagina.

Ecco alcuni altri esempi di utilizzo del modulo codice:

Aggiungere blocchi di codice javascript o librerie che si applicano solo alla pagina.
Integrare plugin di terze parti, come Revolution Slider.
È possibile utilizzare il modulo codice a tutta larghezza per integrare un modulo standard per questionari più interattivi, moduli di contatto, ecc.
Aggiungere un menu d'azione fluttuante
Creare un annuncio scorrevole sulla barra superiore.
Aggiungere un pulsante di azione fluttuante.

Suggerimento: a volte l'aggiunta di codice con interruzioni di riga causa il mancato funzionamento del codice. È meglio creare il codice in un editor di testo e concatenarlo (tutto su una riga) prima di incollarlo nel modulo Codice.