Elementor: Custom CSS e Codice Personalizzato (Guida Sviluppatori)

Introduzione: Quando il Visual Builder Non Basta

Elementor è un editor visuale straordinario che copre la maggior parte delle esigenze di design. Ma ci sono momenti in cui hai bisogno di quel tocco in più che solo il codice può darti: un’animazione CSS unica, un layout che non rientra nelle opzioni standard, o un’integrazione con un servizio esterno. Questa guida è pensata per chi ha conoscenze tecniche e vuole spingere Elementor oltre i suoi limiti predefiniti.

Nota: alcune delle funzionalità descritte (come il Custom CSS per singolo widget) sono disponibili solo in Elementor Pro. Quando è il caso, lo segnaleremo chiaramente.

Custom CSS in Elementor Pro

Elementor Pro aggiunge un campo Custom CSS nella tab Avanzate di ogni widget, colonna, sezione e container. Questo è il modo più pulito per aggiungere stili personalizzati.

Sintassi del Custom CSS

Il campo Custom CSS utilizza il selettore speciale selector che punta automaticamente all’elemento corrente:

• selector — si riferisce all’elemento wrapper del widget/sezione
• selector .elementor-heading-title — un discendente specifico all’interno del widget
• selector:hover — lo stato hover dell’elemento

Esempio pratico: per aggiungere un’ombra al hover che si muove verso il basso:

selector { transition: transform 0.3s ease, box-shadow 0.3s ease; }

selector:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

Questo tipo di effetto sarebbe difficile da ottenere solo con le opzioni dell’interfaccia.

Custom CSS a Livello di Pagina

Per aggiungere CSS che si applica all’intera pagina:

1. Fai clic sull’icona ingranaggio nel footer del pannello (Impostazioni pagina)
2. Vai alla tab Avanzate
3. Usa il campo Custom CSS

Qui puoi scrivere CSS standard senza il selettore selector, usando i tuoi selettori CSS normali.

Aggiungere CSS Globale (Senza Elementor Pro)

Se usi la versione gratuita di Elementor, puoi comunque aggiungere CSS personalizzato in diversi modi:

Il Customizer di WordPress

1. Vai su Aspetto → Personalizza
2. Fai clic su CSS aggiuntivo
3. Scrivi il tuo CSS qui — si applicherà a tutto il sito

Questo è il metodo più semplice e non richiede alcun plugin aggiuntivo. Il CSS inserito qui viene caricato nell’head della pagina con un tag <style>.

Il Widget HTML

Il widget HTML di Elementor permette di inserire codice HTML, CSS e JavaScript inline nella pagina. Puoi inserire un blocco <style> per aggiungere CSS specifico per quella posizione nella pagina:

Il widget HTML è molto versatile: puoi usarlo per embed di servizi esterni (form, calendari, mappe), pixel di tracciamento, widget di chat e qualsiasi altro codice che deve essere inserito nella pagina.

JavaScript Personalizzato

Per aggiungere JavaScript personalizzato alle pagine Elementor, hai diverse opzioni:

Tramite il Widget HTML

Inserisci il codice JavaScript in un widget HTML, racchiuso in tag <script>. Il codice verrà eseguito quando il widget viene renderizzato. Assicurati di avvolgere il codice in un IIFE (Immediately Invoked Function Expression) per evitare conflitti con altre librerie o istanze del codice.

Tramite il functions.php del Tema

Per script che devono caricarsi su tutte le pagine, il modo corretto è aggiungerli tramite il functions.php del tema (preferibilmente un child theme) usando wp_enqueue_script():

Questa è la best practice WordPress per caricare script: il sistema gestisce le dipendenze, il caching e la posizione nel documento.

Hooks e Filtri di Elementor

Elementor espone numerosi hooks (azioni e filtri) che permettono agli sviluppatori di estendere e modificare il comportamento del page builder:

Hooks Principali (Azioni)

• elementor/widgets/register — per registrare widget personalizzati
• elementor/controls/register — per registrare controlli personalizzati
• elementor/frontend/after_enqueue_styles — per aggiungere stili personalizzati nel frontend
• elementor/frontend/after_register_scripts — per registrare script personalizzati
• elementor/editor/after_enqueue_styles — per aggiungere stili all’editor
• elementor/element/before_section_end — per aggiungere controlli a widget esistenti

Filtri Principali

• elementor/frontend/the_content — per modificare il contenuto generato da Elementor
• elementor/widget/render_content — per modificare l’output di un singolo widget

Creare un Widget Personalizzato

Per i casi più avanzati, puoi creare il tuo widget Elementor personalizzato. Un widget personalizzato è una classe PHP che estende ElementorWidget_Base e implementa i seguenti metodi:

• get_name() — identificativo unico del widget
• get_title() — nome visibile nel pannello
• get_icon() — icona nel pannello (classe di Font Awesome)
• get_categories() — categorie nel pannello
• register_controls() — definizione dei controlli nell’editor (testi, colori, slider, ecc.)
• render() — il template HTML per il frontend
• content_template() — il template JavaScript per l’anteprima nell’editor

Il widget va poi registrato tramite l’hook elementor/widgets/register. Questa è un’operazione avanzata che richiede buona conoscenza di PHP e dell’architettura di Elementor. La documentazione ufficiale per sviluppatori è disponibile su developers.elementor.com.

Attributi Personalizzati

Elementor Pro permette di aggiungere attributi HTML personalizzati a qualsiasi widget dalla tab Avanzate → Attributi. Questo è utile per:

• Aggiungere attributi data-* per JavaScript personalizzato
• Aggiungere attributi ARIA per l’accessibilità
• Aggiungere id personalizzati per ancoraggi e targeting CSS
• Aggiungere classi CSS extra per targeting da fogli di stile esterni

Nella versione gratuita, puoi comunque aggiungere un CSS ID e CSS Classes nella tab Avanzate di ogni elemento.

Debug e Risoluzione Problemi

Quando il codice personalizzato non funziona come previsto:

1. Ispeziona con DevTools: apri il browser DevTools (F12) per verificare che il CSS sia applicato correttamente. Controlla la tab “Stili” per vedere se i tuoi stili sono sovrascritti da altri
2. Controlla la specificità: Elementor genera CSS con specificità alta. Potresti dover aumentare la specificità del tuo CSS personalizzato
3. Rigenera CSS: dopo modifiche al codice, vai su Elementor → Strumenti e fai clic su “Rigenera file e dati CSS” per forzare la rigenerazione
4. Svuota la cache: se usi un plugin di caching, svuota la cache dopo le modifiche
5. Modalità sicura: se il sito si rompe, puoi attivare la modalità sicura di Elementor aggiungendo ?elementor-safe-mode=1 all’URL dell’editor

Conclusione

Il codice personalizzato in Elementor apre possibilità infinite. Dal semplice ritocco CSS alla creazione di widget personalizzati, le opzioni per gli sviluppatori sono vaste. La chiave è trovare il giusto equilibrio tra le comodità dell’editor visuale e la potenza del codice: usa l’interfaccia per il 90% del lavoro e il codice per quel 10% che richiede precisione chirurgica.

Scopri tutte le impostazioni di Elementor per capire come configurare al meglio l’ambiente di sviluppo. Per progetti che richiedono sviluppo custom avanzato, il team di G Tech Group offre servizi di sviluppo web professionale. Contattaci per discutere il tuo progetto.

Snippet CSS Pratici

Nascondere su Mobile

@media (max-width: 767px) {
  .hide-on-mobile { display: none !important; }
}

Hover Pulsante Personalizzato

selector .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

Sfondo Gradiente Animato

selector {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5);
  background-size: 400% 400%;
  animation: gradient 8s ease infinite;
}

Browser Inspector

Premi F12, usa il selettore elementi per cliccare qualsiasi widget e vedere/modificare il CSS in tempo reale.

Selettori CSS di Elementor

Ogni widget Elementor genera classi CSS specifiche. I selettori piu utili:

/* Widget specifico */
selector .elementor-heading-title { }
selector .elementor-button { }
selector .elementor-image img { }
selector .elementor-text-editor p { }

/* Sezione/Container */
selector { background: #fff; }
selector:hover { transform: scale(1.02); }

Debugging CSS

1. Apri Chrome DevTools (F12)
2. Usa il selettore elementi per cliccare il widget
3. Nella tab Styles vedi tutto il CSS applicato
4. Modifica i valori in tempo reale per testare
5. Copia il CSS finale nel campo Custom CSS di Elementor

Guide Correlate della Serie Elementor

Continua a esplorare Elementor con le nostre guide:

• Animazioni e Motion
• Tipografia e Design System
• Elementor e SEO
• Performance