Elementor è sicuramente un buon builder per la realizzazione di siti Web, ma nella sua versione gratuita ha giustamente parecchi limiti. Uno di questi potrebbe essere l’inserimento di Custom CSS, ma in realtà non è così! Non si tratta di una vera restrizione perché abbiamo molteplici metodi, molto semplici, per utilizzare il CSS personalizzato anche sulle versioni gratis di Elementor.
Inserire codice CSS personalizzato è un must per personalizzare ulteriormente l’aspetto di una pagina ed Elementor gratuito non lo permette direttamente dal box dedicato di ogni widget, ma non esclude comunque di utilizzarlo, direttamente all’interno del proprio editor! Come da titolo, però, abbiamo detto che ci sono 3 metodi, quindi vediamo subito quali sono.
Metodo 1 per usare custom CSS su Elementor Free
Senza girarci molto intorno, andiamo a vedere subito il metodo più veloce e semplice per inserire codice CSS direttamente all’interno dell’editor di Elementor. È un’operazione semplicissima: basta assegnare un ID o una classe al widget al quale vogliamo applicare le modifiche tramite CSS e in seguito creiamo un widget HTML.
Un ID viene utilizzato per singoli elementi. In caso tu voglia applicare le stesse modifiche a più elementi, utilizza invece le classi.
Nel caso degli ID, nel CSS dovrai inserire #nomeID, mentre per le classi .nomeclasse
Dopo aver inserito il widget HTML di Elementor, digitiamo subito il tag <style></style> e iniziamo a inserire il nostro codice CSS personalizzato al suo interno. Si tratta di un’operazione molto banale, come puoi vedere anche dal seguente video dedicato.
Metodo 2: Personalizza WordPress
Un metodo che sicuramente conoscerai, è il theme customizer di WordPress. Raggiungibile tramite barra amministratore del front end o Aspetto -> Personalizza, questo menu permette di personalizzare il proprio tema installato e altri aspetti del sito web. In fondo alle opzioni è presente il menu CSS aggiuntivo, il quale tramite un box di testo permette appunto l’utilizzo del proprio codice CSS.
Questo codice è però legato al tema in uso, dunque nel caso in cui cambierai tema, perderai le tue personalizzazioni.
Metodo 3: Custom CSS su Elementor con Code Snippets
Su WordPress non c’è qualcosa che non si possa fare tramite plugin. La vasta scelta di estensioni semplifica la vita e soltanto per l’inserimento di codice personalizzato (non solo CSS) ne troviamo a decine. Sconsiglio di usare plugin dedicati ad Elementor se il tuo scopo è soltanto quello di abilitare il custom CSS. E parlo di quei plugin che arricchiscono le funzioni di Elementor, i quali purtroppo spesso appesantiscono tutto il sito.
Per inserire codice CSS, ma anche Javascript, PHP e volendo semplice testo, ovunque in tutto il sito, è sufficiente installare il plugin gratuito WPCode.
Utilizzare WPCode per l’inserimento di CSS è semplicissimo: dopo l’installazione troveremo il plugin sul menu laterale e da qui cliccheremo su + Add Snippet. A questo punto scegliamo la prima voce Add Your Custom Code (New Snippet) e nella nuova finestra inseriamo un titolo per riconoscere il nostro snippet e il codice personalizzato.
Infine scegliamo CSS Snippet accanto a Code Type, attiviamolo tramite lo switch in alto e scegliamo le condizioni per far funzionare il codice. Possiamo scegliere se inserire il codice nell’header, body o footer, in determinate zone delle pagine o articoli, tramite shortcode e infine abilitare logiche per mostrare o nascondere in base a utenti loggati e non, tipo di pagine e tassonomie o URL specifici.
La versione PRO sblocca altro, ma ciò che abbiamo a disposizione nella versione gratuita è più che sufficiente per aggiungere un codice personalizzato.
Conclusioni
Abbiamo visto come è possibile inserire un codice personalizzato su Elementor versione gratuita e sicuramente il metodo più semplice e rapido è il primo, ovvero attraverso lo stesso editor. Questo, oltre a semplificare e velocizzare l’operazione, ci dà un’anteprima in tempo reale delle modifiche applicate, anche se a volte qualcosa potrebbe non essere visualizzata direttamente nell’editor ma soltanto nell’anteprima della pagina.
Questo metodo è utile se abbiamo poco codice e dobbiamo applicarlo soltanto ad una pagina. Se invece il codice è più ampio o è necessario utilizzarlo su più pagine, conviene sicuramente passare all’utilizzo di un plugin.
