Custom CSS in Elementor Pro<\/h2>\n
Elementor Pro aggiunge un campo Custom CSS<\/strong> nella tab Avanzate di ogni widget, colonna, sezione e container. Questo \u00e8 il modo pi\u00f9 pulito per aggiungere stili personalizzati.<\/p>\n Il campo Custom CSS utilizza il selettore speciale Esempio pratico: per aggiungere un’ombra al hover che si muove verso il basso:<\/p>\n Questo tipo di effetto sarebbe difficile da ottenere solo con le opzioni dell’interfaccia.<\/p>\n Per aggiungere CSS che si applica all’intera pagina:<\/p>\n Qui puoi scrivere CSS standard senza il selettore Se usi la versione gratuita di Elementor, puoi comunque aggiungere CSS personalizzato in diversi modi:<\/p>\n Questo \u00e8 il metodo pi\u00f9 semplice e non richiede alcun plugin aggiuntivo. Il CSS inserito qui viene caricato nell’head della pagina con un tag Il widget HTML<\/strong> di Elementor permette di inserire codice HTML, CSS e JavaScript inline nella pagina. Puoi inserire un blocco Il widget HTML \u00e8 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.<\/p>\n Per aggiungere JavaScript personalizzato alle pagine Elementor, hai diverse opzioni:<\/p>\n Inserisci il codice JavaScript in un widget HTML, racchiuso in tag Per script che devono caricarsi su tutte le pagine, il modo corretto \u00e8 aggiungerli tramite il Questa \u00e8 la best practice WordPress per caricare script: il sistema gestisce le dipendenze, il caching e la posizione nel documento.<\/p>\n Elementor espone numerosi hooks (azioni e filtri) che permettono agli sviluppatori di estendere e modificare il comportamento del page builder:<\/p>\n Per i casi pi\u00f9 avanzati, puoi creare il tuo widget Elementor personalizzato. Un widget personalizzato \u00e8 una classe PHP che estende Il widget va poi registrato tramite l’hook Elementor Pro permette di aggiungere attributi HTML personalizzati a qualsiasi widget dalla tab Avanzate \u2192 Attributi. Questo \u00e8 utile per:<\/p>\n Nella versione gratuita, puoi comunque aggiungere un CSS ID<\/strong> e CSS Classes<\/strong> nella tab Avanzate di ogni elemento.<\/p>\n Quando il codice personalizzato non funziona come previsto:<\/p>\n Il codice personalizzato in Elementor apre possibilit\u00e0 infinite. Dal semplice ritocco CSS alla creazione di widget personalizzati, le opzioni per gli sviluppatori sono vaste. La chiave \u00e8 trovare il giusto equilibrio tra le comodit\u00e0 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.<\/p>\n Scopri tutte le impostazioni di Elementor<\/a> per capire come configurare al meglio l’ambiente di sviluppo. Per progetti che richiedono sviluppo custom avanzato, il team di G Tech Group<\/a> offre servizi di sviluppo web professionale<\/a>. Contattaci<\/a> per discutere il tuo progetto.<\/p>\n Premi F12, usa il selettore elementi per cliccare qualsiasi widget e vedere\/modificare il CSS in tempo reale.<\/p>\n Ogni widget Elementor genera classi CSS specifiche. I selettori piu utili:<\/p>\n Continua a esplorare Elementor con le nostre guide:<\/p>\n Introduzione: Quando il Visual Builder Non Basta Elementor \u00e8 un editor visuale straordinario che copre la maggior parte delle esigenze di design. Ma ci sono…<\/p>\n","protected":false},"author":2,"featured_media":166407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Elementor: Custom CSS e Codice Personalizzato","_seopress_titles_desc":"Guida sviluppatori per Elementor: custom CSS per widget e pagine, widget HTML, hooks, filtri e come estendere il page builder con codice.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[2559,2561,2558,2562,2560],"class_list":["post-166421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-codice-personalizzato","tag-css-wordpress","tag-custom-css-elementor","tag-guida-sviluppatori","tag-sviluppo-elementor"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166421"}],"version-history":[{"count":4,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166421\/revisions"}],"predecessor-version":[{"id":166521,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166421\/revisions\/166521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166407"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Editor](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/editor-widgets.png\")
<\/p>\n![\"Impostazioni](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/09-settings-advanced.png\")
<\/p>\nSintassi del Custom CSS<\/h3>\n
selector<\/code> che punta automaticamente all’elemento corrente:<\/p>\n\n
selector<\/code> \u2014 si riferisce all’elemento wrapper del widget\/sezione<\/li>\nselector .elementor-heading-title<\/code> \u2014 un discendente specifico all’interno del widget<\/li>\nselector:hover<\/code> \u2014 lo stato hover dell’elemento<\/li>\n<\/ul>\nselector { transition: transform 0.3s ease, box-shadow 0.3s ease; }<\/code><\/p>\nselector:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }<\/code><\/p>\nCustom CSS a Livello di Pagina<\/h3>\n
\n
selector<\/code>, usando i tuoi selettori CSS normali.<\/p>\nAggiungere CSS Globale (Senza Elementor Pro)<\/h2>\n
Il Customizer di WordPress<\/h3>\n
\n
<style><\/code>.<\/p>\nIl Widget HTML<\/h3>\n
<style><\/code> per aggiungere CSS specifico per quella posizione nella pagina:<\/p>\nJavaScript Personalizzato<\/h2>\n
Tramite il Widget HTML<\/h3>\n
<script><\/code>. Il codice verr\u00e0 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.<\/p>\nTramite il functions.php del Tema<\/h3>\n
functions.php<\/code> del tema (preferibilmente un child theme) usando wp_enqueue_script()<\/code>:<\/p>\nHooks e Filtri di Elementor<\/h2>\n
Hooks Principali (Azioni)<\/h3>\n
\n
elementor\/widgets\/register<\/code> \u2014 per registrare widget personalizzati<\/li>\nelementor\/controls\/register<\/code> \u2014 per registrare controlli personalizzati<\/li>\nelementor\/frontend\/after_enqueue_styles<\/code> \u2014 per aggiungere stili personalizzati nel frontend<\/li>\nelementor\/frontend\/after_register_scripts<\/code> \u2014 per registrare script personalizzati<\/li>\nelementor\/editor\/after_enqueue_styles<\/code> \u2014 per aggiungere stili all’editor<\/li>\nelementor\/element\/before_section_end<\/code> \u2014 per aggiungere controlli a widget esistenti<\/li>\n<\/ul>\nFiltri Principali<\/h3>\n
\n
elementor\/frontend\/the_content<\/code> \u2014 per modificare il contenuto generato da Elementor<\/li>\nelementor\/widget\/render_content<\/code> \u2014 per modificare l’output di un singolo widget<\/li>\n<\/ul>\nCreare un Widget Personalizzato<\/h2>\n
ElementorWidget_Base<\/code> e implementa i seguenti metodi:<\/p>\n\n
get_name()<\/code> \u2014 identificativo unico del widget<\/li>\nget_title()<\/code> \u2014 nome visibile nel pannello<\/li>\nget_icon()<\/code> \u2014 icona nel pannello (classe di Font Awesome)<\/li>\nget_categories()<\/code> \u2014 categorie nel pannello<\/li>\nregister_controls()<\/code> \u2014 definizione dei controlli nell’editor (testi, colori, slider, ecc.)<\/li>\nrender()<\/code> \u2014 il template HTML per il frontend<\/li>\ncontent_template()<\/code> \u2014 il template JavaScript per l’anteprima nell’editor<\/li>\n<\/ul>\nelementor\/widgets\/register<\/code>. Questa \u00e8 un’operazione avanzata che richiede buona conoscenza di PHP e dell’architettura di Elementor. La documentazione ufficiale per sviluppatori \u00e8 disponibile su developers.elementor.com<\/a>.<\/p>\nAttributi Personalizzati<\/h2>\n
\n
data-*<\/code> per JavaScript personalizzato<\/li>\nid<\/code> personalizzati per ancoraggi e targeting CSS<\/li>\nDebug e Risoluzione Problemi<\/h2>\n
\n
?elementor-safe-mode=1<\/code> all’URL dell’editor<\/li>\n<\/ol>\nConclusione<\/h2>\n
Snippet CSS Pratici<\/h2>\n
Nascondere su Mobile<\/h3>\n
@media (max-width: 767px) {\n .hide-on-mobile { display: none !important; }\n}<\/code><\/pre>\nHover Pulsante Personalizzato<\/h3>\n
selector .elementor-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n}<\/code><\/pre>\nSfondo Gradiente Animato<\/h3>\n
selector {\n background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5);\n background-size: 400% 400%;\n animation: gradient 8s ease infinite;\n}<\/code><\/pre>\nBrowser Inspector<\/h2>\n
Selettori CSS di Elementor<\/h2>\n
\/* Widget specifico *\/\nselector .elementor-heading-title { }\nselector .elementor-button { }\nselector .elementor-image img { }\nselector .elementor-text-editor p { }\n\n\/* Sezione\/Container *\/\nselector { background: #fff; }\nselector:hover { transform: scale(1.02); }<\/code><\/pre>\nDebugging CSS<\/h2>\n
\n
Guide Correlate della Serie Elementor<\/h2>\n
\n