--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/colori-e-brand' title: 'Usa i colori del tuo brand | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:01:08+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Applica i colori del tuo brand a sezioni, testo e pulsanti così ogni pagina sembra appartenere allo stesso sito. Ogni campo colore in DXPR Builder mostra la palette del tuo tema come campioni, così scegli colori brand invece di indovinare codici. L’esempio dà a una sezione il tuo colore brand primario con testo bianco. Il video segue i passaggi sotto: colora una sezione con il tuo campione brand e ne rende bianco il testo. tags: - 'Design guides' 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: 'Usa i colori del tuo brand' description: |- Applica i colori del tuo brand a sezioni, testo e pulsanti così ogni pagina sembra appartenere allo stesso sito. Ogni campo colore in DXPR Builder mostra la palette del tuo tema come campioni, così scegli colori brand invece di indovinare codici. L’esempio dà a una sezione il tuo colore brand primario con testo bianco. Il video segue i passaggi sotto: colora una sezione con il tuo campione brand e ne rende bianco il testo. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T03:01:08+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/design/colori-e-brand' articleSection: 'Guide di design' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/colori-e-brand' description: |- Applica i colori del tuo brand a sezioni, testo e pulsanti così ogni pagina sembra appartenere allo stesso sito. Ogni campo colore in DXPR Builder mostra la palette del tuo tema come campioni, così scegli colori brand invece di indovinare codici. L’esempio dà a una sezione il tuo colore brand primario con testo bianco. Il video segue i passaggi sotto: colora una sezione con il tuo campione brand e ne rende bianco il testo. 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) /[Guide di design](/it/hc/documentation/learn-dxpr-builder/design/overview) # Usa i colori del tuo brand. Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design ## In questa guida Guide correlate - [Fai reagire gli elementi al passaggio del mouse](/it/hc/documentazione/impara-dxpr-builder/design/effetti-hover) - [Dai stile alle tue card](/it/hc/documentazione/impara-dxpr-builder/design/stili-card) - [Dai stile ai contenuti del builder con il CSS del tuo tema](/it/hc/documentazione/impara-dxpr-builder/personalizzazione/css-personalizzato) Applica i colori del tuo brand a sezioni, testo e pulsanti così ogni pagina sembra appartenere allo stesso sito. Ogni campo colore in DXPR Builder mostra la palette del tuo tema come campioni, così scegli colori brand invece di indovinare codici. L’esempio dà a una sezione il tuo colore brand primario con testo bianco. Il video segue i passaggi sotto: colora una sezione con il tuo campione brand e ne rende bianco il testo. ## Prima di iniziare - I colori del tuo brand vivono nel tema. Con DXPR Theme, impostali in **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), nel pannello **Colors**. - DXPR Builder mostra i primi dieci colori diversi di quella palette come campioni. ## Colora una sezione 1. Passa sopra la sezione con il mouse, apri **More** e scegli **Settings**. 2. Apri il pannello **Style**. 3. Fai clic sul pulsante colore di **Background**. Il selettore di colori si apre con i tuoi campioni. 4. Fai clic sul tuo campione brand primario. 5. Fai clic sul pulsante colore di **Font color** e scegli il bianco. 6. Fai clic su **Save**. Il testo del paragrafo diventa bianco; i titoli mantengono il colore dei titoli del tema. 7. Per rendere bianco anche un titolo, apri le **Settings** del suo elemento **Text**, scegli il bianco per **Font color** nel suo pannello **Style** e fai clic su **Save**. ## Cosa vedrai La sezione si riempie del tuo colore brand, e il testo del paragrafo e il titolo diventano bianchi. Gli stessi campioni compaiono in ogni campo colore. Inclusi i pannelli **Style** e **Hover style**, e **Start color** e **End color** dello sfondo **Gradient** di una sezione. Per usare un colore fuori palette, digita il suo codice nel campo di testo del selettore, ad esempio `#2196F3`. Sposta il cursore di opacità per un colore trasparente. **Clear** rimuove il colore. ## Mantieni i colori legati al tema Un campione copia il codice del colore nell’elemento. Se cambi in seguito la palette del tema, quell’elemento mantiene il vecchio colore. Per far seguire la palette a un elemento, usa invece una classe di colore. Apri le **Settings** dell’elemento e scegli un chip in **HTML classes**: | Chip | Cosa fa | |---|---| | **Primary background**, **Secondary background** e altri | Colori Bootstrap dal tuo tema | | **Primary text color**, **Secondary text color** e altri | Colori di testo Bootstrap dal tuo tema | | **Background color: DXPR Theme primary** | Il colore **Primary** di DXPR Theme, con il suo colore di testo abbinato | | **Text color: DXPR Theme accent1** | Il colore **Secondary** di DXPR Theme per il testo | I chip **DXPR Theme** compaiono solo quando DXPR Theme è attivo. ## Campi colore per elemento | Dove | Cosa colora | |---|---| | **Style** del pannello: **Font color**, **Border color**, **Background** | L’elemento stesso | | **Hover style** (gli stessi campi del pannello) | L’elemento mentre il puntatore è sopra | | **Button**: **Type** | Una combinazione di colori pronta per i pulsanti | | **Card**: **Type** | Lo sfondo e il testo dell’intera card | | **Alert**: **Type** | **Success**, **Info**, **Warning** o **Danger** | | **Section**: **Background effects** > **Gradient** | Una fusione di due colori | ## Colore leggibile - Mantieni abbastanza contrasto tra testo e sfondo. WCAG 2.1 Livello AA richiede almeno 4,5 a 1 per il testo normale. - Non usare il solo colore per trasmettere significato; abbinalo a un’etichetta o un’icona. - Alterna gli sfondi delle sezioni, come bianco, grigio chiaro e il tuo colore brand, per dare ritmo alle pagine lunghe. ## Se non vedi i tuoi colori - **Il selettore di colori non mostra campioni.** Il tema predefinito del tuo sito non fornisce palette di colori. Digita i tuoi codici colore, oppure usa un tema con una palette, come DXPR Theme. - **Un elemento mantiene il vecchio colore dopo aver cambiato la palette del tema.** Un campione memorizza un codice colore fisso. Scegli il nuovo campione, oppure passa a un chip di colore in **HTML classes**, che segue la palette. - **Background o Font color non ha effetto su una card.** Un **Type** di card diverso da **Default** ne imposta i colori con classi del tema che vincono. Imposta prima **Type** a **Default**. ## Prossimi passi - [Fai reagire gli elementi al passaggio del mouse](/it/hc/documentazione/impara-dxpr-builder/design/effetti-hover): cambia i colori quando i visitatori indicano un elemento. - [Dai stile alle tue card](/it/hc/documentazione/impara-dxpr-builder/design/stili-card): applica i tuoi colori alle card. - [CSS personalizzato](/it/hc/documentazione/impara-dxpr-builder/personalizzazione/css-personalizzato): imposta regole brand non coperte dai pannelli.