--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/stili-card' title: 'Dai stile alle tue card | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:01:15+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dai alle tue card un aspetto adatto al tuo sito: una combinazione di colori dal Type della card, angoli arrotondati e un’ombra dal pannello Style. Alla fine hai una card che puoi ripetere in una riga per funzioni, membri del team o prezzi. Per mettere prima una card nella pagina, vedi Aggiungere una Card. Il video segue i passaggi sotto: dà a una card un aspetto chiaro, angoli tondi e un’ombra morbida. 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: 'Dai stile alle tue card' description: |- Dai alle tue card un aspetto adatto al tuo sito: una combinazione di colori dal Type della card, angoli arrotondati e un’ombra dal pannello Style. Alla fine hai una card che puoi ripetere in una riga per funzioni, membri del team o prezzi. Per mettere prima una card nella pagina, vedi Aggiungere una Card. Il video segue i passaggi sotto: dà a una card un aspetto chiaro, angoli tondi e un’ombra morbida. 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:15+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/stili-card' articleSection: 'Guide di design' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/design/stili-card' description: |- Dai alle tue card un aspetto adatto al tuo sito: una combinazione di colori dal Type della card, angoli arrotondati e un’ombra dal pannello Style. Alla fine hai una card che puoi ripetere in una riga per funzioni, membri del team o prezzi. Per mettere prima una card nella pagina, vedi Aggiungere una Card. Il video segue i passaggi sotto: dà a una card un aspetto chiaro, angoli tondi e un’ombra morbida. 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) # Dai stile alle tue card. Impara DXPR BuilderCrea le pagineDai stile agli elementiGuide di design ## In questa guida Guide correlate - [Aggiungere una Card](/it/hc/documentazione/impara-dxpr-builder/elementi/card) - [Fai reagire gli elementi al passaggio del mouse](/it/hc/documentazione/impara-dxpr-builder/design/effetti-hover) - [Usa i colori del tuo brand](/it/hc/documentazione/impara-dxpr-builder/design/colori-e-brand) Dai alle tue card un aspetto adatto al tuo sito: una combinazione di colori dal **Type** della card, angoli arrotondati e un’ombra dal pannello **Style**. Alla fine hai una card che puoi ripetere in una riga per funzioni, membri del team o prezzi. Per mettere prima una card nella pagina, vedi [Aggiungere una Card](/it/hc/documentazione/impara-dxpr-builder/elementi/card). Il video segue i passaggi sotto: dà a una card un aspetto chiaro, angoli tondi e un’ombra morbida. ## Dai stile a una card 1. Passa sopra la card con il mouse, apri **More** e scegli **Settings**. 2. In **Type**, scegli **Light**. 3. Apri il pannello **Style**. 4. Imposta **Border radius** a 8. 5. Imposta **Drop shadow** a 2. 6. Fai clic su **Save**. ## Cosa vedrai La card ha uno sfondo chiaro, angoli arrotondati e un’ombra morbida. La sua barra **Header** sta in cima, il suo **Title** apre il corpo, e gli elementi aggiunti dentro seguono sotto. Un **Type** colora l’intera card, non solo l’header. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** e **Dark** riempiono la card con quel colore del tema e rendono bianco il testo. **Light** dà uno sfondo chiaro con testo normale. **Default** lascia la card al tuo tema. ## Impostazioni | Impostazione | Dove | Cosa fa | |---|---|---| | **Header** | **General** | Testo in una barra in cima alla card; lasciala vuota per nessuna barra | | **Title** | **General** | Un titolo in cima al corpo della card | | **Type** | **General** | La combinazione di colori dell’intera card; predefinito **Default** | | **Background**, **Font color** | **Style** | I tuoi colori, quando **Type** è **Default** | | **Border radius** | **Style** | Angoli arrotondati, in pixel | | **Drop shadow** | **Style** | Profondità, da 1 a 5 | | **Border** (modello di riquadro), **Border style**, **Border color** | **Style** | Una cornice su uno o più lati | ## Schemi di card - **Card piatta**: **Border style** **Solid**, un **Border color** chiaro, **Border radius** 4, nessuna ombra. - **Card rialzata**: **Drop shadow** 2, **Border style** **None**, **Border radius** 8. - **Card evidenziata**: imposta il lato sinistro di **Border** nel modello di riquadro a 4, **Border style** **Solid** e un **Border color** d’accento. - **Card che si solleva**: **Drop shadow** 1 in **Style** e 4 in **Hover style**; vedi [Fai reagire gli elementi al passaggio del mouse](/it/hc/documentazione/impara-dxpr-builder/design/effetti-hover). ## Card in una riga Per una griglia di card di funzioni, membri del team o prezzi: 1. Aggiungi una riga e scegli un layout con tre o quattro colonne uguali. 2. Aggiungi una card a ogni colonna e dai a ogni card gli stessi valori di **Type** e **Style**. 3. Apri il menu **More** della riga, scegli **Settings** e attiva **Equal-height columns**. Le colonne si allineano, ma ogni card resta alta quanto il suo contenuto. Mantieni il testo di ogni card circa della stessa lunghezza, così le card finiscono alla stessa altezza. Per una tabella prezzi, evidenzia il piano consigliato con un altro **Type** o un **Drop shadow** più profondo. ## Se non vedi lo stile - **Background o Font color nel pannello Style non ha effetto.** Un **Type** diverso da **Default** imposta i colori della card con classi del tema che vincono sul pannello **Style**. Imposta **Type** a **Default** e scegli i tuoi colori. - **Il testo bianco su una card colorata si legge male.** I colori **Warning** e **Info** di molti temi sono pallidi, e questi tipi impostano sempre testo bianco. Scegli un **Type** più scuro, oppure **Light**, che mantiene il colore normale del testo. - **L’ombra non si vede.** **Drop shadow** è a 0, cioè nessuna ombra. Impostalo a 1 o più. ## Prossimi passi - [Aggiungere una Card](/it/hc/documentazione/impara-dxpr-builder/elementi/card): aggiungi una card e riempila di elementi. - [Fai reagire gli elementi al passaggio del mouse](/it/hc/documentazione/impara-dxpr-builder/design/effetti-hover): lascia che le card si sollevino quando i visitatori le indicano. - [Usa i colori del tuo brand](/it/hc/documentazione/impara-dxpr-builder/design/colori-e-brand): mantieni i colori delle card in linea con il resto del sito.