{"id":57725,"date":"2022-07-18T09:39:39","date_gmt":"2022-07-18T08:39:39","guid":{"rendered":"https:\/\/kinqsta.com\/it\/?p=57725&preview=true&preview_id=57725"},"modified":"2023-03-13T16:07:31","modified_gmt":"2023-03-13T15:07:31","slug":"css-personalizzato-elementor","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/","title":{"rendered":"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)"},"content":{"rendered":"

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

I CSS offrono un incredibile controllo su ogni elemento di un sito web. Aggiungerli a WordPress \u00e8 semplice se si ha familiarit\u00e0 con il linguaggio. Elementor offre anche diverse opzioni per aggiungere CSS personalizzati.<\/p>\n

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

<\/div><\/kinsta-auto-toc>\n

Cosa Sono i CSS?<\/h2>\n

CSS \u00e8 il cosiddetto linguaggio dei “fogli di stile”. \u00c8 possibile usare i fogli di stile CSS per aggiungere uno stile personalizzato ai documenti HTML o XML<\/a>. Utilizzando i CSS, \u00e8 possibile prendere una pagina HTML di base e darle un design moderno<\/a>.<\/p>\n

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 \u00e8 uno dei principali linguaggi di Internet.<\/p>\n

Ad esempio, questo \u00e8 il codice CSS che utilizzereste per assegnare un colore di sfondo al corpo di un documento HTML:<\/p>\n

body {\n\nbackground-color: red;\n\n}<\/code><\/pre>\n
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:<\/p>\n
h2 {\n\ncolor: black;\n\ntext-align: left;\n\n}<\/code><\/pre>\n
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\u00f9 pagine.<\/p>\n
Potete applicare il codice CSS direttamente a qualsiasi pagina HTML<\/a>. 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.<\/p>\n
Ecco un esempio di CSS inline per una specifica intestazione H2:<\/p>\n
<h2 style=\"color:black;text-align:center;\">This is where the heading text goes<\/h1><\/code><\/pre>\n
\u00c8 considerata una best practice aggiungere il CSS<\/a> in un foglio di stile separato. Tuttavia, uno dei tanti vantaggi di WordPress ed Elementor<\/a> \u00e8 che potete aggiungere i CSS senza modificare i file manualmente. Vediamo come funziona.<\/p>\n\n
Opzioni di CSS Personalizzati in Elementor<\/h2>\n
Se conoscete Elementor, saprete che il builder utilizza sezioni, colonne e widget per aiutarvi a creare le pagine. Le sezioni contengono una o pi\u00f9 colonne e ogni colonna pu\u00f2 contenere diversi moduli:<\/p>\n
\"Colonne
Colonne e moduli in Elementor<\/figcaption><\/figure>\n
Uno degli aspetti migliori di Elementor \u00e8 che potete aggiungere codice CSS separato a livello di sezione, colonna e widget. Passando il mouse su una sezione, \u00e8 possibile selezionare l’icona a sei punti per aprire il menu Modifica sezione<\/strong> sul lato sinistro dello schermo:<\/p>\n
\"Aggiungere
Aggiungere codice CSS separato a livello di sezione, colonna e widget.<\/figcaption><\/figure>\n
Se vi spostate nella scheda Avanzate<\/strong> del menu Modifica sezione<\/strong>, vedrete una sezione CSS personalizzato<\/strong>. Al suo interno troverete un campo che vi permetter\u00e0 di aggiungere codice per quella specifica sezione:<\/p>\n
\"L'opzione
L’opzione CSS personalizzato si trova nella scheda “Avanzate”<\/figcaption><\/figure>\n
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.<\/p>\n
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<\/strong> e apri la sezione CSS personalizzati<\/strong>:<\/p>\n
\"Aggiungere
Aggiungere CSS personalizzati a una singola colonna<\/figcaption><\/figure>\n
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<\/strong>:<\/p>\n
\"Aggiungere
\u00c8 possibile aggiungere CSS anche a un widget<\/figcaption><\/figure>\n
Aggiungere CSS personalizzati a elementi specifici all’interno del costruttore di pagine Elementor \u00e8 molto semplice. Ma ricordate che lo stile verr\u00e0 applicato solo a quegli elementi. Se volete aggiungere un CSS personalizzato che influisca sull’intero sito, dovrete seguire un approccio diverso.<\/p>\n
Come Aggiungere CSS Personalizzati con Elementor (5 Metodi)<\/h2>\n
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.<\/p>\n
Metodo 1: Il Widget HTML di Elementor<\/h3>\n
Elementor permette di aggiungere CSS personalizzati a qualsiasi widget. Tuttavia, in alcuni casi, potreste voler aggiungere elementi manualmente utilizzando HTML<\/a> e CSS. In questi casi, dovrete utilizzare il widget HTML<\/strong>:<\/p>\n
\"Il
Il widget HTML<\/figcaption><\/figure>\n
Il widget HTML<\/strong> pu\u00f2 elaborare HTML, CSS e JavaScript<\/a>. \u00c8 possibile aggiungere qualsiasi codice nel campo Codice HTML<\/strong> e, se \u00e8 valido, Elementor lo visualizzer\u00e0 come widget:<\/p>\n
\"Aggiungere
Aggiungere codice all’interno del widget<\/figcaption><\/figure>\n
Il widget HTML<\/strong> supporta sia il CSS inline che quello standalone. Qualsiasi codice aggiunto tramite il widget avr\u00e0 effetto solo su quel singolo elemento.<\/p>\n
Metodo 2: Il Menu delle Impostazioni del Sito di Elementor<\/h3>\n
Elementor dispone di un set di impostazioni globali che assomigliano alle opzioni del Customizer di WordPress. Per accedere al menu Impostazioni del sito<\/strong> di Elementor, aprite l’editor e fate clic sul menu ad hamburger nell’angolo in alto a sinistra dello schermo:<\/p>\n
\"Il
Il menu hamburger<\/figcaption><\/figure>\n
Nella pagina successiva, selezionate l’opzione Impostazioni del sito<\/strong>:<\/p>\n
\"L'opzione
L’opzione “Impostazioni del sito<\/figcaption><\/figure>\n
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.<\/p>\n
Potete leggere come utilizzare il menu Impostazioni del sito<\/strong><\/a> per personalizzare le vostre pagine sul sito ufficiale di Elementor. Per ora, l’unica sezione che ci interessa \u00e8 la scheda CSS personalizzato<\/strong>. Aprendola, vedrete un campo che assomiglia alle opzioni CSS personalizzate per le sezioni, i widget e le colonne:<\/p>\n
\"Aggiungere
Aggiungere CSS personalizzati qui avr\u00e0 effetto sull’intero sito<\/figcaption><\/figure>\n
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\u00f9 mirato (ad esempio aggiungendo il CSS direttamente a un widget).<\/p>\n
Metodo 3: Utilizzare il Customizer di WordPress<\/h3>\n
Il Customizer di WordPress permette di aggiungere CSS personalizzati a livello di sito. Andate su Aspetto > Personalizza<\/strong> e selezionate l’opzione CSS aggiuntivo<\/strong> nel menu a sinistra:<\/p>\n
\"Il
Il Customizer di WordPress permette di aggiungere CSS<\/figcaption><\/figure>\n
Ma vale la pena notare che i campi di codice di Elementor sono pi\u00f9 facili da usare rispetto a quelli disponibili nel Customizer. Se utilizzate gi\u00e0 Elementor per la creazione di un sito, non c’\u00e8 motivo di aggiungere CSS personalizzati dal Customizer.<\/p>\n
Metodo 4: Inserire File CSS personalizzati<\/h3>\n
Se siete in grado di modificare i file di WordPress e di accedere al vostro sito web tramite un client FTP (File Transfer Protocol)<\/a>, potete inserire un foglio di stile CSS da caricare con Elementor. Con questo approccio \u00e8 necessario aggiungere del codice al file functions.php<\/strong> di WordPress.<\/p>\n
Per accedere al file functions.php<\/strong>, collegatevi al vostro sito web tramite FTP e andate alla cartella root<\/strong> di WordPress. Aprite la cartella, trovate il file functions.php<\/strong> e modificatelo.<\/p>\n
Ecco un esempio del codice da aggiungere al file:<\/p>\n
add_action( 'elementor\/frontend\/before_enqueue_scripts', function() {\n\nwp_enqueue_script(\n\n'custom-stylesheet',\n\nget_stylesheet_uri()\n\n);\n\n} );<\/code><\/pre>\n
Questo codice utilizza l’hook before_enqueue_script<\/strong> per caricare un foglio di stile chiamato custom-stylesheet<\/strong>. Utilizziamo anche la funzione get_stylesheet_uri<\/strong> per indicare la posizione sul server del foglio di stile.<\/p>\n
L’ideale sarebbe aggiungere il foglio di stile personalizzato nella cartella di un child theme o nella cartella Themes<\/strong>. Il foglio di stile pu\u00f2 contenere qualsiasi codice CSS desiderate. Lo snippet che avete aggiunto al file functions.php<\/strong> fa s\u00ec che il codice venga caricato solo quando Elementor \u00e8 attivo sul vostro sito web.<\/p>\n
Metodo 5: Plugin per CSS<\/h3>\n
Esistono diversi plugin che permettono di aggiungere CSS personalizzati ad un sito web senza utilizzare il Customizer o i page builder<\/a>. Uno dei nostri strumenti preferiti si chiama Simple Custom CSS and JS<\/a>:<\/p>\n
\"Plugin
Simple Custom CSS and JS<\/figcaption><\/figure>\n
Con Simple Custom CSS and JS \u00e8 possibile aggiungere codice direttamente agli elementi dell’header e del footer del tema. Per iniziare, andate su Custom CSS & JS > Add Custom CSS<\/strong> e fate clic su Add CSS Code.<\/strong><\/p>\n
A sinistra apparir\u00e0 un editor CSS di base. A destra, potete stabilire se caricare il codice CSS in un foglio di stile esterno<\/a> o internamente. Potete anche decidere se il codice deve essere inserito nell’header o nel footer:<\/p>\n
\"Inserire
Inserire il codice in un foglio di stile esterno<\/figcaption><\/figure>\n
Quando avete finito di modificare il codice CSS, premete il pulsante Publish<\/strong>. Potrebbe essere necessario passare al front-end per vedere il codice in azione.<\/p>\n
Le Best Practice per Creare CSS Personalizzati con Elementor<\/h2>\n
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.<\/p>\n
Utilizzare un Child Theme di WordPress<\/h3>\n
Se volete modificare lo stile del vostro tema<\/a> utilizzando i CSS, consigliamo di utilizzare un child theme<\/a>. Un child theme \u00e8 un modello che eredita tutti gli stili di un tema di riferimento.<\/p>\n
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\u00e0 le modifiche apportate.<\/p>\n
Usa un Preprocessore di Codice per Scrivere pi\u00f9 Facilmente<\/h3>\n
Una delle maggiori difficolt\u00e0 nell’aggiungere codice all’interno di WordPress o utilizzando Elementor \u00e8 che non avete accesso a tutte le funzionalit\u00e0 dei moderni editor di codice. Invece di gestire il codice con gli editor di base sul posto, consigliamo di utilizzare un preprocessor<\/a>. In seguito, potrete semplicemente copiare e incollare il vostro codice in WordPress.<\/p>\n
Considerate l’Opportunit\u00e0 di Usare un Sito di Staging<\/h3>\n
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\u00e0 senza rischiare di rompere qualcosa sul sito reale.<\/p>\n
Alcuni host web permettono di accedere alle funzionalit\u00e0 di staging dal pannello di controllo. Se utilizzate Kinsta, potete selezionare il vostro sito dalla dashboard MyKinsta<\/a> e passare dall’ambiente live a quello di staging:<\/p>\n
\"L'ambiente
L’ambiente di staging in MyKinsta<\/figcaption><\/figure>\n
Se il vostro host non offre la funzionalit\u00e0 di staging<\/a>, potete utilizzare a scopo di test un ambiente di sviluppo locale di WordPress come DevKinsta<\/a>. In alternativa, potreste prendere in considerazione l’idea di cambiare provider di hosting.<\/p>\n\n
Riepilogo<\/h2>\n
Aggiungere CSS personalizzati con Elementor \u00e8 pi\u00f9 facile di quanto si possa immaginare. Il page builder permette di aggiungere codice a sezioni, colonne, widget e all’intero sito web.<\/p>\n
Per ricapitolare, ecco i cinque modi principali per aggiungere CSS personalizzato a Elementor (o al vostro sito web in generale):<\/p>\n
    \n
  1. Usare il Widget HTML di Elementor.<\/li>\n
  2. Usare il menu Impostazioni del sito di Elementor.<\/li>\n
  3. Usare il Customizer di WordPress.<\/li>\n
  4. Inviare i file CSS personalizzati.<\/li>\n
  5. Usare un plugin CSS.<\/li>\n<\/ol>\n
    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<\/a> o parlate con i nostri addetti alle vendite per trovare il piano pi\u00f9 adatto a voi.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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\u00e0 di …<\/p>\n","protected":false},"author":117,"featured_media":57726,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[24367,25564,25837],"topic":[25873],"class_list":["post-57725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-css","tag-elementor","tag-page-builder","topic-sviluppo-wordpress"],"yoast_head":"\nCome Aggiungere CSS Personalizzato a Elementor (5 Metodi)<\/title>\n<meta name=\"description\" content=\"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)\" \/>\n<meta property=\"og:description\" content=\"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-18T08:39:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-13T15:07:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)\",\"datePublished\":\"2022-07-18T08:39:39+00:00\",\"dateModified\":\"2023-03-13T15:07:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/\"},\"wordCount\":1974,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg\",\"keywords\":[\"css\",\"Elementor\",\"page builder\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/\",\"url\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/\",\"name\":\"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg\",\"datePublished\":\"2022-07-18T08:39:39+00:00\",\"dateModified\":\"2023-03-13T15:07:31+00:00\",\"description\":\"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinqsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/it\/#website\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinqsta.com\/it\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)","description":"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/","og_locale":"it_IT","og_type":"article","og_title":"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)","og_description":"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.","og_url":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2022-07-18T08:39:39+00:00","article_modified_time":"2023-03-13T15:07:31+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg","type":"image\/jpeg"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.","twitter_image":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Salman Ravoof","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)","datePublished":"2022-07-18T08:39:39+00:00","dateModified":"2023-03-13T15:07:31+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/"},"wordCount":1974,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg","keywords":["css","Elementor","page builder"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/","url":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/","name":"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg","datePublished":"2022-07-18T08:39:39+00:00","dateModified":"2023-03-13T15:07:31+00:00","description":"Non sai dove aggiungere il CSS personalizzato in Elementor? Scopri come aggiungere codice CSS personalizzato a Elementor per far risaltare il tuo sito.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#primaryimage","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2022\/07\/elementor-custom-css.jpg","width":1460,"height":730,"caption":"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/it\/blog\/css-personalizzato-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinqsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come Aggiungere CSS Personalizzato a Elementor (5 Metodi)"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/it\/#website","url":"https:\/\/kinqsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinqsta.com\/it\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/57725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/comments?post=57725"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/57725\/revisions"}],"predecessor-version":[{"id":66801,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/57725\/revisions\/66801"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/es"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/en"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/57725\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media\/57726"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media?parent=57725"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/tags?post=57725"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/topic?post=57725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}