Personalizzare il codice del tema Extra

Procédure

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" quando installate il 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.

Personalizzare il codice del tema Extra

È possibile utilizzare il modulo Codice per aggiungere HTML personalizzato e/o codici brevi di WordPress ai layout. Nell'esempio qui sopra, abbiamo aggiunto un modulo di opt-in via e-mail utilizzando uno shortcode fornito dal plugin di opt-in via e-mail, Bloom.

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 Extra sul vostro sito web, noterete un pulsante Usa 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.

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.

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.

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

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.

Ora il pulsante rimbalza al caricamento della pagina!

Conclusione

Grazie per aver seguito questo tutorial!

Utilizzate il modulo codice per inserire codice personalizzato nella vostra pagina, come HTML e JS, o per inserire brevi codici di terze parti.

A presto per un nuovo tutorial ;)

Per saperne di più sul tema Extra e su come utilizzarlo

Creare un blog con il tema Extra

Il modulo di testo Extra

> Consultate la nostra sezione di aiuto del tema Extra