Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)

Uno dei maggiori selling point dei page builder come Elementor sono gli elementi di pagina pre-costruiti, o “widget”. I widget di Elementor offrono numerose possibilità di personalizzazione e di stile. Tuttavia, a volte l’unico modo per applicare uno stile particolare è quello di utilizzare i CSS.

I CSS offrono un incredibile controllo su ogni elemento di un sito web. Aggiungerli a WordPress è semplice se si ha familiarità con il linguaggio. Elementor offre anche diverse opzioni per aggiungere CSS personalizzati.

In questo articolo spiegheremo cosa sono i CSS e come aggiungere uno stile personalizzato a Elementor. Infine, presenteremo alcune best practice per l’utilizzo dei CSS in WordPress. Iniziamo!

Cosa Sono i CSS?

CSS è il cosiddetto linguaggio dei “fogli di stile”. È possibile usare i fogli di stile CSS per aggiungere uno stile personalizzato ai documenti HTML o XML. Utilizzando i CSS, è possibile prendere una pagina HTML di base e darle un design moderno.

Pensate ai CSS come a un linguaggio che descrive il modo in cui gli elementi devono apparire su un browser. Funziona su tutti i browser ed è uno dei principali linguaggi di Internet.

Ad esempio, questo è il codice CSS che utilizzereste per assegnare un colore di sfondo al corpo di un documento HTML:

body {

background-color: red;

}

Potete usare i CSS per applicare gli stili a componenti, classi e ID specifici nell’HTML. Ad esempio, il seguente frammento applicherebbe un colore e un allineamento del testo specifico a tutti gli H2 di una pagina:

h2 {

color: black;

text-align: left;

}

In genere, quando si carica una pagina HTML, viene caricato anche un foglio di stile separato che contiene tutto il codice CSS. Questo significa che potete riutilizzare i fogli di stile in più pagine.

Potete applicare il codice CSS direttamente a qualsiasi pagina HTML. Potete anche utilizzarlo “in linea”. Questo termine si riferisce al codice CSS che si applica a un singolo elemento HTML e che risiede all’interno del file.

Ecco un esempio di CSS inline per una specifica intestazione H2:

<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>

È considerata una best practice aggiungere il CSS in un foglio di stile separato. Tuttavia, uno dei tanti vantaggi di WordPress ed Elementor è che potete aggiungere i CSS senza modificare i file manualmente. Vediamo come funziona.

Opzioni di CSS Personalizzati in Elementor

Se conoscete Elementor, saprete che il builder utilizza sezioni, colonne e widget per aiutarvi a creare le pagine. Le sezioni contengono una o più colonne e ogni colonna può contenere diversi moduli:

Uno degli aspetti migliori di Elementor è che potete aggiungere codice CSS separato a livello di sezione, colonna e widget. Passando il mouse su una sezione, è possibile selezionare l’icona a sei punti per aprire il menu Modifica sezione sul lato sinistro dello schermo:

Se vi spostate nella scheda Avanzate del menu Modifica sezione, vedrete una sezione CSS personalizzato. Al suo interno troverete un campo che vi permetterà di aggiungere codice per quella specifica sezione:

Modificando le colonne e i widget, noterete che avete accesso alle stesse tre schede nei rispettivi menu delle impostazioni. Le sezioni, le colonne e i widget includono tutte le impostazioni di layout, di stile e avanzate.

Per aggiungere CSS personalizzati a una colonna, passate il mouse su di essa e selezionate l’icona a due colonne nell’angolo in alto a destra dell’elemento. Quindi, andate all’opzione Avanzate e apri la sezione CSS personalizzati:

Potete seguire lo stesso procedimento per aggiungere un CSS personalizzato a un widget di Elementor. Basta selezionare il widget che volete personalizzare e passare direttamente alla scheda Avanzate > CSS Personalizzato:

Aggiungere CSS personalizzati a elementi specifici all’interno del costruttore di pagine Elementor è molto semplice. Ma ricordate che lo stile verrà applicato solo a quegli elementi. Se volete aggiungere un CSS personalizzato che influisca sull’intero sito, dovrete seguire un approccio diverso.

Come Aggiungere CSS Personalizzati con Elementor (5 Metodi)

In questa sezione analizzeremo altri modi per aggiungere CSS personalizzati con Elementor. Vedremo quali sono i metodi per applicare i CSS all’intero sito, a pagine specifiche e ai widget di Elementor.

Metodo 1: Il Widget HTML di Elementor

Elementor permette di aggiungere CSS personalizzati a qualsiasi widget. Tuttavia, in alcuni casi, potreste voler aggiungere elementi manualmente utilizzando HTML e CSS. In questi casi, dovrete utilizzare il widget HTML:

Il widget HTML può elaborare HTML, CSS e JavaScript. È possibile aggiungere qualsiasi codice nel campo Codice HTML e, se è valido, Elementor lo visualizzerà come widget:

Il widget HTML supporta sia il CSS inline che quello standalone. Qualsiasi codice aggiunto tramite il widget avrà effetto solo su quel singolo elemento.

Metodo 2: Il Menu delle Impostazioni del Sito di Elementor

Elementor dispone di un set di impostazioni globali che assomigliano alle opzioni del Customizer di WordPress. Per accedere al menu Impostazioni del sito di Elementor, aprite l’editor e fate clic sul menu ad hamburger nell’angolo in alto a sinistra dello schermo:

Nella pagina successiva, selezionate l’opzione Impostazioni del sito:

Al suo interno troverete una serie di impostazioni che vi permetteranno di personalizzare lo stile del vostro sito. Tutte le modifiche che apporterete qui saranno applicate all’intero sito, anche se tecnicamente state modificando una singola pagina.

Potete leggere come utilizzare il menu Impostazioni del sito per personalizzare le vostre pagine sul sito ufficiale di Elementor. Per ora, l’unica sezione che ci interessa è la scheda CSS personalizzato. Aprendola, vedrete un campo che assomiglia alle opzioni CSS personalizzate per le sezioni, i widget e le colonne:

Tutti i CSS personalizzati che aggiungete qui avranno effetto sull’intero sito web. Se intendete personalizzare solo elementi specifici, consigliamo di seguire un approccio più mirato (ad esempio aggiungendo il CSS direttamente a un widget).

Metodo 3: Utilizzare il Customizer di WordPress

Il Customizer di WordPress permette di aggiungere CSS personalizzati a livello di sito. Andate su Aspetto > Personalizza e selezionate l’opzione CSS aggiuntivo nel menu a sinistra:

Ma vale la pena notare che i campi di codice di Elementor sono più facili da usare rispetto a quelli disponibili nel Customizer. Se utilizzate già Elementor per la creazione di un sito, non c’è motivo di aggiungere CSS personalizzati dal Customizer.

Metodo 4: Inserire File CSS personalizzati

Se siete in grado di modificare i file di WordPress e di accedere al vostro sito web tramite un client FTP (File Transfer Protocol), potete inserire un foglio di stile CSS da caricare con Elementor. Con questo approccio è necessario aggiungere del codice al file functions.php di WordPress.

Per accedere al file functions.php, collegatevi al vostro sito web tramite FTP e andate alla cartella root di WordPress. Aprite la cartella, trovate il file functions.php e modificatelo.

Ecco un esempio del codice da aggiungere al file:

add_action( 'elementor/frontend/before_enqueue_scripts', function() {

wp_enqueue_script(

'custom-stylesheet',

get_stylesheet_uri()

);

} );

Questo codice utilizza l’hook before_enqueue_script per caricare un foglio di stile chiamato custom-stylesheet. Utilizziamo anche la funzione get_stylesheet_uri per indicare la posizione sul server del foglio di stile.

L’ideale sarebbe aggiungere il foglio di stile personalizzato nella cartella di un child theme o nella cartella Themes. Il foglio di stile può contenere qualsiasi codice CSS desiderate. Lo snippet che avete aggiunto al file functions.php fa sì che il codice venga caricato solo quando Elementor è attivo sul vostro sito web.

Metodo 5: Plugin per CSS

Esistono diversi plugin che permettono di aggiungere CSS personalizzati ad un sito web senza utilizzare il Customizer o i page builder. Uno dei nostri strumenti preferiti si chiama Simple Custom CSS and JS:

Con Simple Custom CSS and JS è possibile aggiungere codice direttamente agli elementi dell’header e del footer del tema. Per iniziare, andate su Custom CSS & JS > Add Custom CSS e fate clic su Add CSS Code.

A sinistra apparirà un editor CSS di base. A destra, potete stabilire se caricare il codice CSS in un foglio di stile esterno o internamente. Potete anche decidere se il codice deve essere inserito nell’header o nel footer:

Quando avete finito di modificare il codice CSS, premete il pulsante Publish. Potrebbe essere necessario passare al front-end per vedere il codice in azione.

Le Best Practice per Creare CSS Personalizzati con Elementor

Ogni volta che avete a che fare con un CSS personalizzato o dovete aggiungere del codice al vostro sito web, farete bene a tenere a mente le seguenti best practice. Iniziamo con un child theme.

Utilizzare un Child Theme di WordPress

Se volete modificare lo stile del vostro tema utilizzando i CSS, consigliamo di utilizzare un child theme. Un child theme è un modello che eredita tutti gli stili di un tema di riferimento.

In questo modo, se apportate delle modifiche al tema originale, queste non avranno alcun impatto sulle personalizzazioni aggiunte al child theme. Inoltre, quando aggiornerete il tema, il child theme manterrà le modifiche apportate.

Usa un Preprocessore di Codice per Scrivere più Facilmente

Una delle maggiori difficoltà nell’aggiungere codice all’interno di WordPress o utilizzando Elementor è che non avete accesso a tutte le funzionalità dei moderni editor di codice. Invece di gestire il codice con gli editor di base sul posto, consigliamo di utilizzare un preprocessor. In seguito, potrete semplicemente copiare e incollare il vostro codice in WordPress.

Considerate l’Opportunità di Usare un Sito di Staging

Ogni volta che avete intenzione di apportare grandi modifiche a WordPress, consigliamo di utilizzare un sito di staging. I siti di staging permettono di testare le modifiche allo stile e alle funzionalità senza rischiare di rompere qualcosa sul sito reale.

Alcuni host web permettono di accedere alle funzionalità di staging dal pannello di controllo. Se utilizzate Kinsta, potete selezionare il vostro sito dalla dashboard MyKinsta e passare dall’ambiente live a quello di staging:

Se il vostro host non offre la funzionalità di staging, potete utilizzare a scopo di test un ambiente di sviluppo locale di WordPress come DevKinsta. In alternativa, potreste prendere in considerazione l’idea di cambiare provider di hosting.

Riepilogo

Aggiungere CSS personalizzati con Elementor è più facile di quanto si possa immaginare. Il page builder permette di aggiungere codice a sezioni, colonne, widget e all’intero sito web.

Per ricapitolare, ecco i cinque modi principali per aggiungere CSS personalizzato a Elementor (o al vostro sito web in generale):

1. Usare il Widget HTML di Elementor.
2. Usare il menu Impostazioni del sito di Elementor.
3. Usare il Customizer di WordPress.
4. Inviare i file CSS personalizzati.
5. Usare un plugin CSS.

I piani di Kinsta sono pensati per aiutarvi a costruire il sito dei sogni con page builder come Elementor. Date un’occhiata ai nostri piani o parlate con i nostri addetti alle vendite per trovare il piano più adatto a voi.

Salman Ravoof

Salman Ravoof é uno sviluppatore web autodidatta, uno scrittore, un creatore e un grande ammiratore del Free and Open Source Software (FOSS). Oltre alla tecnologia, è appassionato di scienza, filosofia, fotografia, arte, gatti e cibo. Per saperne di più su di lui, visitate il suo sito web o contattate Salman su X.

• Sito Web
• LinkedIn
• Twitter