Su Elementor, soprattutto se utilizzi la versione Pro, esistono diversi modi per aggiungere del codice personalizzato. Il modo corretto da utilizzare però dipende anche da cosa intendi per inserire del codice in una pagina o in sito WordPress.
Aggiungere codice per Analytics o altri script JavaScript
A partire dalla versione 3.1 di Elementor Pro è stata aggiunta la possibilità di inserire facilmente del codice personalizzato all’interno di alcune pagine o dell’intero sito.
Ecco come fare:
- Accedi alla bacheca del tuo sito WordPress
- Se hai installato e attivato Elementor Pro vai nella sezione Elementor -> Codice personalizzato.
- Assegna un nome al codice (questo nome è a uso interno, quindi serve solo a te).
- Scegli la locazione (se <head> o all’inizio o alla fine del <body>) nella quale il codice personalizzato deve essere inserito.
- A destra, nelle Condizioni, puoi stabilire in quali pagine o sezioni del sito tale codice dovrà essere attivo.
- Una volta terminato, clicca sul pulsate Pubblica per attivare il tuo codice personalizzato.
Si tratta di una funzionalità che può essere utilizzata per inserire facilmente codici come quello di Google Analytics o per il Pixel di Meta/Facebook. È poi possibile sfruttare le classiche condizioni di visualizzazione di Elementor per stabilire dove deve essere inserito quel codice: su tutte le pagine del sito, solo in determinate pagine, solo negli articoli del blog e così via.
Tra l’altro, con l’introduzione della funzione che permette di tenere separate le landing page dalle “normali” pagine del sito ora è possibile andare a selezionare queste landing page come condizioni di visualizzazione.
Cosa significa questo? Vuol dire che è ad esempio possibile inserire facilmente uno script di tracciamento facendo in modo che venga caricato solo nelle landing page e non sulle altre pagine del sito.
È inoltre possibile selezionare un livello di priorità, da 1 a 10, per decidere l’ordine di inserimento dei vari codici. Un codice con priorità 1 sarà inserito prima di un codice con priorità 2.
Una funzionalità simile è disponibile anche in un tema come GeneratePress ed è una buona notizia vedere che anche Elementor ha introdotto qualcosa del genere per gestire i vari codici CSS, HTML e JavaScript che sono spesso necessari all’interno di un sito.
Aggiunta di codice CSS su Elementor
Quando l’esigenza è quella di personalizzare l’aspetto di un elemento con del codice CSS personalizzato, Elementor Pro mette a disposizione una particolare sezione che è presente praticamente in ogni widget.
È sufficiente andare nella sezione Avanzato di ogni widget e in fondo troverai un’area denominata CSS Personalizzato. Qui troverai un’area di testo che ti permette di inserire del codice CSS per personalizzare l’aspetto di quel widget.
Cliccando sull’icona dell’ingranaggio presente in basso a sinistra dell’interfaccia di Elementor, puoi accedere alle impostazioni della pagina. Anche qui, nella sezione Avanzato, trovi un’area dedicata al CSS Personalizzato.
Anche accedendo alle impostazioni del sito è disponibile una sezione CSS Personalizzato.
In pratica, puoi inserire del codice CSS sia a livello di singolo widget, sia a livello dell’intera pagina, sia a livello globale dell‘intero sito.
Inserire codice HTML in una pagina
Inserire del codice HTML con Elementor è semplicissimo grazie al widget HTML. È sufficiente cercare il widget HTML tra i widget disponibili di Elementor e trascinarlo nel punto desiderato della pagina.
Nelle impostazioni di questo widget è possibile inserire il codice HTML che vuoi aggiungere alla pagina.
Un classico utilizzo di questo widget può essere l’inserimento di un form generato da uno dei tanti servizi di email marketing. In generale però, qualsiasi codice HTML di embed può essere inserito sfruttando questo widget.
Visualizzare il codice nelle pagine
Un’altra novità di Elementor Pro è il widget Evidenziazione codice, ossia un widget che consente di visualizzare snippet di codice sorgente all’interno delle pagine create con Elementor.
Per chi ha la necessità di mostrare ai propri visitatori dei frammenti di codice sorgente, questa funzionalità può essere molto comoda.
Sottolineo pure, semmai ce ne fosse il bisogno, che questo widget permette di inserire del codice per poterlo mostrare ai visitatori, non per poterlo eseguire all’interno della pagina.
Come hai potuto vedere, dietro la domanda “Come inserire codice personalizzato con Elementor“ si possono celare diverse esigenze: dalla necessità di inserire uno script per tracciare le visite al sito o le conversioni delle campagne Facebook a quella di personalizzare l’aspetto di un elemento della pagina con del codice CSS. Elementor ti permette di soddisfare facilmente queste esigenze.