--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/scheda-stile' title: 'Cambiare l’aspetto di un elemento nel pannello Stile | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:43:40+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Usa il pannello Stile quando un elemento in una pagina ha bisogno del suo aspetto: una scheda colorata, un logo sbiadito, un pulsante nei colori della campagna. Vedi ogni modifica sulla pagina mentre la fai. Per un aspetto condiviso da tutte le pagine, come il colore di tutti i pulsanti, cambia invece il tuo tema. Una modifica lì aggiorna l’intero sito. Il video segue il primo esempio pratico qui sotto: attenua il logo di un partner finché il puntatore lo raggiunge. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Cambiare l’aspetto di un elemento nel pannello Stile' description: |- Usa il pannello Stile quando un elemento in una pagina ha bisogno del suo aspetto: una scheda colorata, un logo sbiadito, un pulsante nei colori della campagna. Vedi ogni modifica sulla pagina mentre la fai. Per un aspetto condiviso da tutte le pagine, come il colore di tutti i pulsanti, cambia invece il tuo tema. Una modifica lì aggiorna l’intero sito. Il video segue il primo esempio pratico qui sotto: attenua il logo di un partner finché il puntatore lo raggiunge. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T13:43:40+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/scheda-stile' articleSection: 'Dai stile agli elementi' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/scheda-stile' description: |- Usa il pannello Stile quando un elemento in una pagina ha bisogno del suo aspetto: una scheda colorata, un logo sbiadito, un pulsante nei colori della campagna. Vedi ogni modifica sulla pagina mentre la fai. Per un aspetto condiviso da tutte le pagine, come il colore di tutti i pulsanti, cambia invece il tuo tema. Una modifica lì aggiorna l’intero sito. Il video segue il primo esempio pratico qui sotto: attenua il logo di un partner finché il puntatore lo raggiunge. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) # Cambiare l’aspetto di un elemento nel pannello Stile. Impara DXPR BuilderCrea le pagineDai stile agli elementi ## In questa guida Guide correlate - [Mettere un colore o una foto dietro il contenuto](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/sfondo) Usa il pannello **Stile** quando un elemento in una pagina ha bisogno del suo aspetto: una scheda colorata, un logo sbiadito, un pulsante nei colori della campagna. Vedi ogni modifica sulla pagina mentre la fai. Per un aspetto condiviso da tutte le pagine, come il colore di tutti i pulsanti, cambia invece il tuo tema. Una modifica lì aggiorna l’intero sito. Il video segue il primo esempio pratico qui sotto: attenua il logo di un partner finché il puntatore lo raggiunge. ## Prima di iniziare - Apri la pagina in DXPR Builder; puntando a un elemento si mostra la sua barra di controllo con **Altro**. Nuovo del builder? Vedi [La tua prima pagina](/it/hc/documentazione/impara-dxpr-builder/per-iniziare/prima-pagina). - **Salva** nella finestra conserva una modifica nell’editor. **Salva** nella barra del builder sopra il contenuto conserva la pagina e mostra “Campo salvato”. Le impostazioni nel pannello **Stile** appartengono a un elemento. Vengono salvate nel contenuto di quella pagina, non nel tuo tema. Se il colore del tuo brand cambia l’anno prossimo, ogni elemento colorato a mano conserva il vecchio colore finché non lo modifichi. - **Riusa un aspetto** salvando un elemento stilizzato con **Altro** > **Salva come modello**, oppure dando agli elementi una classe condivisa sotto **Classi HTML**. Vedi [modelli utente](/it/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) e [ID e classi HTML](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato). - **Scegli i colori dai campioni** quando il tuo sito li mostra. Vengono dalla tavolozza colori del tuo tema. Un campione copia il colore, quindi una successiva modifica della tavolozza non lo aggiorna. ## Esempio pratico: attenuare i loghi finché il puntatore li raggiunge Una fila di loghi di partner sembra più calma quando i loghi sono attenuati. Questo esempio attenua un logo e lo riporta indietro al passaggio del mouse. 1. Passa sopra un elemento **Immagine** che mostra un logo, fai clic su **Altro**, poi su **Impostazioni**. 2. Apri il pannello **Stile** e trascina **Opacità** a 0.5. Il logo sbiadisce mentre trascini. 3. Apri sotto il pannello **Stile hover** e trascina **Opacità** a 1. 4. Fai clic su **Salva** nella finestra, poi su **Salva** nella barra. 5. Apri il menu vista (l’icona dell’occhio) nella barra del builder, scegli **Anteprima** e punta al logo. Passa a piena intensità e si attenua di nuovo quando il puntatore esce. Ripeti i passi per ogni logo della fila. ## Esempio pratico: un pulsante nei colori della campagna Il tuo tema dà ai pulsanti un colore hover. Uno **Sfondo** impostato da te sostituisce anche quel colore hover, quindi impostali entrambi. 1. Passa sopra l’elemento **Pulsante**, fai clic su **Altro**, poi su **Impostazioni**. 2. Nel pannello **Stile**, scegli uno **Sfondo** e un **Colore del carattere**. Fai clic su un campione, oppure digita il tuo codice colore, come #e4002b, nel campo colore. 3. Nel pannello **Stile hover**, scegli uno **Sfondo** più scuro. 4. Fai clic su **Salva** nella finestra, poi su **Salva** nella barra. 5. Scegli **Anteprima** nel menu vista e punta al pulsante. Diventa del colore più scuro. ## Cosa vedi Mentre la finestra è aperta, l’elemento mostra ogni modifica. In **Anteprima**, il logo attenuato passa a piena intensità sotto il puntatore, e il pulsante della campagna diventa del suo colore più scuro. Entrambi gli aspetti restano dopo un ricaricamento della pagina, perché **Salva** nella barra li ha conservati. ## Cosa accetta ogni controllo | Controllo | Intervallo | Unità | |---|---|---| | **Colore del carattere**, **Colore del bordo**, **Sfondo** | qualsiasi colore, con trasparenza | colore | | **Immagine di sfondo** | un’immagine dalla libreria multimediale, o un URL | | | **Stile di sfondo**, **Posizione dello sfondo**, **Stile del bordo** | un elenco che inizia con **Predefiniti del tema** | | | **Dimensione del carattere** | da 0 a 100 | px | | **Raggio del bordo** | da 0 a 100 | px | | **Opacità** | da 0 a 1, in passi di 0,01 | | | **Ombra** | livelli da 0 a 5 | | | Modello box **Margine** | da -200 a 200 | **PX** o **%** | | Modello box **Padding** | da 0 a 200 | **PX** o **%** | | Modello box **Bordo** | da 0 a 50 | px | | larghezza × altezza del modello box | da 0 a 2000 | **PX** o **%** | Un valore digitato fuori intervallo viene tagliato al limite più vicino. Il modello box e i suoi lucchetti sono spiegati nella pagina [spaziatura](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura). ## Come si comportano le impostazioni ### Predefiniti del tema Un colore vuoto, un cursore a 0, un elenco su **Predefiniti del tema** e un lato del modello box che mostra “-” significano tutti la stessa cosa. DXPR Builder non scrive niente, e decide il tuo tema. Così **Opacità** 0 non nasconde un elemento, e **Dimensione del carattere** 0 conserva la dimensione del tema. Per tornare all’aspetto del tema, fai clic su **Azzera** nel selettore colore, sposta il cursore a 0 oppure scegli di nuovo **Predefiniti del tema**. ### Dove finiscono le impostazioni Ogni impostazione **Stile** tranne **Ombra** viene salvata come stile in linea sull’elemento. Gli stili in linea battono il CSS ordinario del tema. Due cose li battono comunque: le regole del tema marcate `!important`, e le classi di utilità Bootstrap sotto **Classi HTML**, che portano anch’esse `!important`. Su alcuni elementi le impostazioni vanno su una parte interna. Su un **Pulsante** stilizzano il pulsante stesso, su un’**Immagine** l’immagine, su un **Link** il link e su una **Mappa** il riquadro della mappa. ### Ogni dimensione di schermo Le impostazioni di stile non hanno breakpoint. 64 px di padding sono 64 px anche su un telefono. I valori in percentuale crescono e calano con la larghezza della pagina. Per valori diversi per dimensione di schermo, usa classi responsive, come mostrato nella pagina [ID e classi HTML](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato). ### L’opacità sbiadisce tutto ciò che sta dentro **Opacità** agisce sull’intero elemento. Sbiadisce il riquadro, il bordo, il testo e ogni elemento dentro di esso. Per un riquadro trasparente dietro un testo pieno, lascia **Opacità** a 0. Scegli invece un colore di **Sfondo** con un po’ di trasparenza: il selettore colore ha un suo cursore di opacità per questo. ### Stile hover **Stile hover** è un pannello separato sotto **Stile**. Ha gli stessi controlli, modello box incluso. I suoi valori si applicano mentre il puntatore sta sopra l’elemento. A differenza dei valori **Stile**, sono marcati `!important` essi stessi, così battono i tuoi valori **Stile**, le classi di utilità sotto **Classi HTML** e quasi tutte le regole del tema. Solo l’**Ombra** sfuma dentro, in 0,15 secondi. Le altre modifiche hover scattano subito, a meno che il tuo tema le animi. I pulsanti Bootstrap sfumano i colori in 0,15 secondi. Telefoni e tablet non hanno puntatore. I visitatori lì vedono un aspetto hover solo dopo un tocco, quindi non metterci mai informazioni che servono loro. ### Elementi con impostazioni proprie Alcuni elementi hanno una propria impostazione per lo stesso lavoro. Vince la loro, e il controllo **Stile** non fa niente. | Elemento | Ignora in Stile | Usa invece | |---|---|---| | Contatore circolare | **Sfondo**, **Dimensione del carattere**, larghezza × altezza | **Colore di sfondo** e **Dimensione** in **Generale**, **Dimensione del carattere** in **Contenuto del cerchio** | | Barra di avanzamento | **Sfondo**, larghezza × altezza | **Colore di fondo**, **Colore frontale** e **Altezza della barra** in **Generale** | | Divisore | **Sfondo**, larghezza | **Colore** e **Lunghezza** in **Generale** | | Contatore numerico | **Dimensione del carattere** | **Dimensione del carattere** in **Generale** | | Immagine | larghezza × altezza | **Larghezza immagine** e **Altezza immagine** in **Generale** | | Mappa | larghezza × altezza | **Larghezza mappa** e **Altezza mappa** in **Generale** | | Marquee | larghezza × altezza | **Larghezza immagine** e **Altezza** in **Generale** | | Video, Video locale | larghezza | **Larghezza video** in **Generale** | | Livelli posizionati | larghezza × altezza | **Larghezza** e **Altezza** in **Generale** | ## Se non vedi la modifica - **La modifica è sparita quando si è chiusa la finestra.** L’hai chiusa con **Annulla**, l’icona di chiusura o il tasto Esc, che hanno ripristinato le vecchie impostazioni. Rifai la modifica e fai clic su **Salva** nella finestra. - **La modifica non c’è più dopo un ricaricamento della pagina.** **Salva** nella finestra conserva una modifica solo nell’editor. Fai clic su **Salva** nella barra prima di lasciare la pagina. - **Resta l’aspetto del tema.** Vince una classe di utilità Bootstrap sotto **Classi HTML** oppure una regola del tema con `!important`. Apri il pannello **Generale** e rimuovi il chip della classe, per esempio **Sfondo primario**, oppure chiedi al tuo webmaster della regola del tema. - **Un controllo non fa proprio niente.** Alcuni elementi hanno una propria impostazione per lo stesso lavoro. Vedi [Elementi con impostazioni proprie](#elements-with-their-own-settings). - **Il pulsante non cambia più colore al passaggio del mouse.** Il tuo **Sfondo** sostituisce il colore hover del tema. Imposta uno **Sfondo** anche nel pannello **Stile hover**. - **Il testo è diventato pallido insieme al riquadro.** **Opacità** sbiadisce l’intero elemento. Riportalo a 0 e usa un colore di **Sfondo** con trasparenza. - **Opacità 0 non nasconde l’elemento.** 0 significa **Predefiniti del tema**. Aggiungi invece la classe **Nascondi elemento (d-none)** sotto **Classi HTML**. ## Passi successivi - [Sfondi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/sfondo): metti una foto dietro un titolo e mantieni il titolo leggibile.