{"id":148601,"date":"2025-05-19T15:53:36","date_gmt":"2025-05-19T12:53:36","guid":{"rendered":"https:\/\/elementor.com\/help\/classi-in-elementor-2\/"},"modified":"2025-05-19T15:53:36","modified_gmt":"2025-05-19T12:53:36","slug":"classi-in-elementor-2","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/","title":{"rendered":"Classi in Elementor"},"content":{"rendered":"\n<p>L&#8217;Editor di Elementor \u00e8 progettato per aiutare i creatori web a lavorare in modo rapido ed efficiente. Come parte di questa missione, l&#8217;Editor adotta i principi dell&#8217;Atomic Design. Questo sistema si basa sull&#8217;idea di creare piccoli elementi riutilizzabili. In Elementor, questi elementi sono chiamati classi. Questo \u00e8 in linea con il vocabolario utilizzato da CSS.    <\/p>\n\n\n\n<p>Come ulteriore vantaggio, l&#8217;uso corretto delle classi pu\u00f2 anche migliorare le prestazioni del tuo sito web.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creazione di una classe<\/h2>\n\n\n\n<p>La creazione di classi avviene automaticamente. Lo fai ogni volta che aggiungi un <a href=\"https:\/\/elementor.com\/help\/add-elements-to-a-page\/\">elemento alla canvas<\/a>. Quando aggiungi un elemento alla canvas, le opzioni dell&#8217;elemento appaiono nel pannello di sinistra. Nella parte superiore della scheda <strong>Stile<\/strong>, vedrai il campo <strong>Classe<\/strong> con la classe <strong>local<\/strong> gi\u00e0 compilata. Ora puoi aggiungere nuove classi all&#8217;elemento seguendo questo processo:    <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Inserisci un nome di classe nella casella di testo.<br>Appare un menu a tendina.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"580\" height=\"296\" class=\"wp-image-57382\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png 1468w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-300x153.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-1024x522.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-768x391.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Seleziona il nome della classe sotto <strong>Aggiungi nuova classe globale<\/strong>.&nbsp;<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Modifica di una classe<\/h2>\n\n\n\n<p>Dopo aver creato una classe, \u00e8 necessario modificarla per stabilirne le propriet\u00e0.<\/p>\n\n\n\n<p><strong>Per modificare una classe<\/strong>:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Crea la classe.<br><img decoding=\"async\" width=\"680\" height=\"350\" class=\"wp-image-57383\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image.png 1600w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-300x155.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-1024x527.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-768x396.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-1536x791.png 1536w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Controlla il campo delle classi CSS. La classe che stai modificando sar\u00e0 rosa se \u00e8 una classe locale. Altrimenti sar\u00e0 verde. Quando la classe \u00e8 rosa o verde, stai modificando quella classe.   <\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Cos&#8217;\u00e8 una classe?<\/h2>\n\n\n\n<p>Una classe \u00e8 fondamentalmente una raccolta di caratteristiche di stile condivise. Ad esempio, se stai costruendo un sito web e vuoi che il testo standard in tutto il sito utilizzi il carattere Arial 12, puoi creare una classe chiamata <strong>Testo principale<\/strong> con queste caratteristiche. In questo modo, ogni elemento che avesse la classe <strong>Testo principale<\/strong>, userebbe Arial 12 come carattere.  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La classe locale<\/h3>\n\n\n\n<p>In Elementor, ogni elemento ha almeno una classe: la classe <strong>local<\/strong>. Questa classe definisce il particolare elemento con cui stai lavorando. \u00c8 importante notare che, anche se tutti gli elementi hanno una classe locale, la classe <strong>local<\/strong> pu\u00f2 essere diversa per ogni elemento. Ad esempio, puoi avere un widget Testo che utilizza il carattere Arial nella sua classe <strong>local<\/strong> e un altro widget Testo che utilizza Calibri nella sua classe <strong>local<\/strong>.   &nbsp;<br><img decoding=\"async\" width=\"280\" height=\"188\" class=\"wp-image-57385\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-the-local-class.png\" alt=\"\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gerarchia delle classi<\/h3>\n\n\n\n<p>L&#8217;altra cosa importante da notare sulle classi \u00e8 che funzionano per gerarchie. Se le classi si contraddicono a vicenda, l&#8217;Editor sa quali caratteristiche hanno la priorit\u00e0. Ad esempio, se un elemento contiene due classi, una che imposta il carattere su Arial e un&#8217;altra che imposta la classe su Calibri, l&#8217;editor deve determinare quale ha la priorit\u00e0. Questa priorit\u00e0 \u00e8 impostata nel gestore delle classi. Tuttavia, la classe locale ha sempre la massima priorit\u00e0. Quindi, nel caso precedente, se la classe <strong>local<\/strong> imposta il carattere su New Time Roman, l&#8217;elemento utilizzerebbe il carattere New Times Roman.     <\/p>\n\n\n\n<p>[callout type=&#8221;tip&#8221;]\u00c8 meglio costruire le tue classi in modo che ci siano il minor numero possibile di questi conflitti. Questi conflitti non solo possono farti perdere tempo, ma possono anche rallentare il tuo sito. &nbsp;[\/callout]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Esempio di creazione di classi<\/h2>\n\n\n\n<p>In questo esempio, esamineremo la costruzione di un sito web che includer\u00e0 diversi pulsanti. Al fine di risparmiare tempo e migliorare le prestazioni, creeremo due classi: una per definire i pulsanti importanti e un&#8217;altra per definire i pulsanti secondari. &nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Crea una pagina nell&#8217;Editor di Elementor.<\/li>\n\n\n\n<li>Trascina un <strong>widget Pulsante<\/strong> sulla canvas.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"166\" class=\"wp-image-57386\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-300x73.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-1024x250.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-768x188.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>Le opzioni appaiono nel pannello.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"166\" class=\"wp-image-57387\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-300x73.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-1024x250.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-768x188.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Nel pannello, fai clic sulla scheda <strong>Stile<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"175\" class=\"wp-image-57389\" style=\"width: 150px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class.png 270w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class-257x300.png 257w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/li>\n\n\n\n<li>Nella casella di testo <strong>Classi<\/strong>, accanto a <strong>local<\/strong>, inserisci <strong>Main_button<\/strong>.<\/li>\n\n\n\n<li>Nel menu a tendina, seleziona <strong>Crea nuovo \u201cMain_button\u201d<\/strong>.<br><strong>Pulsante principale<\/strong> appare nella casella di testo <strong>Classi<\/strong>.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"239\" class=\"wp-image-57390\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/6-Main-button-is-in-green.png\" alt=\"\"><br>Nota che il testo <strong>Main_button<\/strong> \u00e8 in verde. Ci\u00f2 significa che stai modificando quella classe. <br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"383\" class=\"wp-image-57391\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field.png 268w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field-219x300.png 219w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Apri il campo <strong>Dimensione<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"289\" class=\"wp-image-57393\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-300x127.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-1024x435.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-768x326.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Dai al pulsante una larghezza di 200 PX e un&#8217;altezza di 50 PX.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"523\" class=\"wp-image-57394\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background.png 268w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background-160x300.png 160w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Aprire il campo <strong>Sfondo<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"468\" class=\"wp-image-57395\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color.png 693w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color-244x300.png 244w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Seleziona un colore per il pulsante. Per i dettagli, vedi <a href=\"https:\/\/elementor.com\/help\/it\/scheda-stile-sfondo\/\">Scheda Stile &#8211; Sfondo<\/a>. <br>Ora creiamo una classe per i pulsanti secondari. <br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"142\" class=\"wp-image-57396\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class.png 1344w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-300x63.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-1024x213.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-768x160.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Nella casella di testo <strong>Classi<\/strong>, elimina <strong>Main_button<\/strong>.<br>Nota che il pulsante torna alle sue impostazioni predefinite.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"314\" class=\"wp-image-57397\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/12-create-secondary-button.png\" alt=\"\"><\/li>\n\n\n\n<li>Nella casella di testo <strong>Classi<\/strong>, inserisci <strong>Secondary_button<\/strong>.<\/li>\n\n\n\n<li>Nel menu a tendina, seleziona <strong>Crea nuovo \u201cSecondary_button\u201d<\/strong>.<br>Nota che il testo \u00e8 in verde, il che significa che stai modificando la classe.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"385\" class=\"wp-image-57398\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary.png 266w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary-218x300.png 218w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Apri il campo <strong>Dimensione<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"409\" class=\"wp-image-57402\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1.png 869w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1-300x212.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1-768x542.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Dai al pulsante una larghezza di 100 PX e un&#8217;altezza di 50 PX.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"618\" class=\"wp-image-57400\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography.png 266w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography-136x300.png 136w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>&nbsp;Apri il campo <strong>Tipografia<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"483\" class=\"wp-image-57403\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography.png 942w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography-300x250.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography-768x639.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Imposta la <strong>dimensione del carattere<\/strong> su 12.&nbsp;<\/li>\n\n\n\n<li>Aprire il campo <strong>Sfondo<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"385\" class=\"wp-image-57404\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary.png 844w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary-296x300.png 296w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary-768x777.png 768w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Seleziona un colore per lo sfondo. Assicurati che sia diverso dallo sfondo di <strong>Main_button<\/strong>.<br>Ora prova i risultati. <\/li>\n\n\n\n<li>Aggiungi un nuovo elemento Pulsante alla canvas.<\/li>\n\n\n\n<li>Apri la scheda <strong>Stile<\/strong>.<br><img decoding=\"async\" class=\"wp-image-57409\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/22-select-Main-button-2-scaled.png\" alt=\"\"><\/li>\n\n\n\n<li>Fai clic sulla casella di testo <strong>Classi<\/strong> e seleziona <strong>Main_button <\/strong>dal menu a tendina.<br><img decoding=\"async\" class=\"wp-image-57413\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/23-Main-button-entered-2-scaled.png\" alt=\"\"><br>Il pulsante dovrebbe assumere le caratteristiche della classe Main_button.<br><img decoding=\"async\" class=\"wp-image-57416\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/24-Main-and-secondary-1-scaled.png\" alt=\"\"><\/li>\n\n\n\n<li>Fai clic sulla casella <strong>Classi<\/strong> e seleziona <strong>Pulsante secondario <\/strong>dal menu a tendina.<br>Il pulsante avr\u00e0 la maggior parte delle caratteristiche della classe <strong>Pulsante principale<\/strong>. Questo perch\u00e9 la classe Pulsante principale \u00e8 pi\u00f9 in alto nella gerarchia delle classi. Tuttavia, il carattere sul pulsante assume lo stile della classe Pulsante secondario. Questo perch\u00e9 non abbiamo mai definito la tipografia del <strong>Pulsante principale<\/strong>, quindi la classe <strong>Pulsante secondario<\/strong> determina lo stile del carattere.   &nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"505\" class=\"wp-image-57417\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1.png 608w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1-166x300.png 166w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1-568x1024.png 568w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Nella casella <strong>Classi<\/strong>, fai clic sui tre punti accanto a <strong>Secondary_button<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Seleziona <strong>Rimuovi<\/strong> dal menu a tendina.<br>La casella Classi CSS dovrebbe ora contenere solo le classi <strong>local<\/strong> e <strong>Main_button<\/strong>. Nota che la dimensione del carattere torna alla dimensione predefinita perch\u00e9 la classe Secondary_button non \u00e8 pi\u00f9 presente.<br>Ora diciamo che vogliamo personalizzare questo pulsante in modo che assomigli a un pulsante principale ma abbia una caratteristica aggiuntiva: cambia colore quando i visitatori ci passano sopra con il mouse.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"583\" class=\"wp-image-57423\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1.png 295w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1-144x300.png 144w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Fai clic sui tre punti accanto alla classe <strong>local<\/strong> e seleziona Hover dal menu a tendina.<br>Modificando la classe <strong>local<\/strong>, possiamo cambiare lo stile di questo pulsante senza cambiare altri pulsanti con la classe <strong>Pulsante principale<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"246\" class=\"wp-image-57424\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/27-The-hover-state.png\" alt=\"\"><br>Hover \u00e8 ci\u00f2 che viene chiamato uno stato. Quando lo selezioni, determini l&#8217;aspetto del pulsante quando i visitatori ci passano sopra con il mouse. Per i dettagli, vedi <a href=\"https:\/\/elementor.com\/help\/it\/stati-degli-elementi\/\">Stati dell&#8217;elemento<\/a>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"591\" class=\"wp-image-57426\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background.png 299w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background-142x300.png 142w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Aprire il campo <strong>Sfondo<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"671\" class=\"wp-image-57427\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background.png 305w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background-125x300.png 125w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Seleziona un colore di sfondo diverso.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"274\" class=\"wp-image-57428\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/30-see-the-hover-effect.gif\" alt=\"\"><br>Nota che quando sposti il cursore sul pulsante, cambia colore.&nbsp;<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>L&#8217;Editor di Elementor \u00e8 progettato per aiutare i creatori web a lavorare in modo rapido ed efficiente. Come parte di questa missione, l&#8217;Editor adotta i principi dell&#8217;Atomic Design. Questo sistema si basa sull&#8217;idea di creare piccoli elementi riutilizzabili. In Elementor, questi elementi sono chiamati classi. Questo \u00e8 in linea con il vocabolario utilizzato da CSS. [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1606],"tags":[1697],"class_list":["post-148601","post","type-post","status-publish","format-standard","hentry","category-features-it","tag-v4-it"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Classi in Elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Classi in Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Classi in Elementor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Classi in Elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T12:53:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1468\" \/>\n\t<meta property=\"og:image:height\" content=\"748\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/it\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Classi in Elementor\",\"datePublished\":\"2025-05-19T12:53:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/\"},\"wordCount\":1031,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"keywords\":[\"V4\"],\"articleSection\":[\"Features\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/\",\"url\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/\",\"name\":\"Classi in Elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"datePublished\":\"2025-05-19T12:53:36+00:00\",\"description\":\"Learn everything about Classi in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Senza categoria\",\"item\":\"https:\/\/elementor.com\/help\/it\/senza-categoria\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Classi in Elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/it\/#website\",\"url\":\"https:\/\/elementor.com\/help\/it\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/it\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/help\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/it\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/it\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/help\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Classi in Elementor | Elementor","description":"Learn everything about Classi in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/","og_locale":"it_IT","og_type":"article","og_title":"Classi in Elementor | Elementor","og_description":"Learn everything about Classi in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/","og_site_name":"Help","article_published_time":"2025-05-19T12:53:36+00:00","og_image":[{"width":1468,"height":748,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Cliff Churgin","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/it\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Classi in Elementor","datePublished":"2025-05-19T12:53:36+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/"},"wordCount":1031,"publisher":{"@id":"https:\/\/elementor.com\/help\/it\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","keywords":["V4"],"articleSection":["Features"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/","url":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/","name":"Classi in Elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","datePublished":"2025-05-19T12:53:36+00:00","description":"Learn everything about Classi in Elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/it\/classi-in-elementor-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/it\/"},{"@type":"ListItem","position":2,"name":"Senza categoria","item":"https:\/\/elementor.com\/help\/it\/senza-categoria\/"},{"@type":"ListItem","position":3,"name":"Classi in Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/it\/#website","url":"https:\/\/elementor.com\/help\/it\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/it\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/help\/it\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/it\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/it\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/help\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/posts\/148601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/comments?post=148601"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/posts\/148601\/revisions"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/media?parent=148601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/categories?post=148601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/it\/wp-json\/wp\/v2\/tags?post=148601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}