--- url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/customization/custom-css' title: 'Dai stile ai contenuti del builder con il CSS del tuo tema | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:03:33+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'I contenuti di DXPR Builder fanno parte della pagina renderizzata dal tuo tema, quindi il CSS del tuo tema gli dà stile nell’editor e nella pagina pubblicata. Usa questa pagina quando un aspetto deve ripetersi su molti elementi o pagine, o quando le impostazioni degli elementi non riescono a produrlo. Finisci con un foglio di stile nel tuo tema e una classe che gli editor possono applicare. Per un singolo elemento, usa la sua finestra delle impostazioni.' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Dai stile ai contenuti del builder con il CSS del tuo tema' description: 'I contenuti di DXPR Builder fanno parte della pagina renderizzata dal tuo tema, quindi il CSS del tuo tema gli dà stile nell’editor e nella pagina pubblicata. Usa questa pagina quando un aspetto deve ripetersi su molti elementi o pagine, o quando le impostazioni degli elementi non riescono a produrlo. Finisci con un foglio di stile nel tuo tema e una classe che gli editor possono applicare. Per un singolo elemento, usa la sua finestra delle impostazioni.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T03:03:33+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/customization/custom-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/customization/custom-css' description: 'I contenuti di DXPR Builder fanno parte della pagina renderizzata dal tuo tema, quindi il CSS del tuo tema gli dà stile nell’editor e nella pagina pubblicata. Usa questa pagina quando un aspetto deve ripetersi su molti elementi o pagine, o quando le impostazioni degli elementi non riescono a produrlo. Finisci con un foglio di stile nel tuo tema e una classe che gli editor possono applicare. Per un singolo elemento, usa la sua finestra delle impostazioni.' 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 --- [Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Dai stile ai contenuti del builder con il CSS del tuo tema. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Classi di utilità](/it/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Usa i font del tuo brand nelle pagine del builder](/it/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [Aggiungi stili del brand e pulsanti all’editor di testo](/it/hc/documentation/learn-dxpr-builder/customization/text-editor) I contenuti di DXPR Builder fanno parte della pagina renderizzata dal tuo tema, quindi il CSS del tuo tema gli dà stile nell’editor e nella pagina pubblicata. Usa questa pagina quando un aspetto deve ripetersi su molti elementi o pagine, o quando le impostazioni degli elementi non riescono a produrlo. Finisci con un foglio di stile nel tuo tema e una classe che gli editor possono applicare. Per un singolo elemento, usa la sua [finestra delle impostazioni](/hc/documentation/learn-dxpr-builder/element-settings). ## Prima di iniziare - Serve accesso ai file del tuo tema e un modo per distribuirli. - Usa un tema personalizzato o un sotto-tema. Un aggiornamento di un tema contribuito ne sostituisce i file, e il tuo CSS con essi. ## Configurazione 1. Crea `css/custom.css` nella cartella del tuo tema, ad esempio `themes/custom/mytheme/css/custom.css`. 2. Dichiara il file in `mytheme.libraries.yml`: ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. Carica la libreria su ogni pagina da `mytheme.info.yml`: ```yaml libraries: - mytheme/global-styling ``` 4. Scrivi una regola per un nome di classe tuo: ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. Svuota la cache in **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) con **Clear all caches**, oppure esegui `drush cr`. 6. Nel builder, apri le impostazioni di una **Section** e aggiungi `brand-hero` in **HTML classes**. [ID HTML e classi](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) mostra come digitare una classe tua. Gli editor possono anche scegliere la classe dall’elenco **HTML classes** una volta che il tuo tema la elenca lì; vedi [Classi di utilità](/it/hc/documentation/learn-dxpr-builder/customization/utility-classes). ## Cosa vedrai La sezione prende il gradiente e il testo bianco appena aggiungi la classe, perché l’editor gira sulla pagina renderizzata dal tuo tema. I visitatori vedono lo stesso dopo che salvi la pagina. La classe è memorizzata nell’HTML della pagina, quindi cambiare la regola in seguito aggiorna ogni elemento che la ha. ## Classi scritte da DXPR Builder La tua classe è il bersaglio più sicuro. Anche queste classi sono nell’HTML salvato: | Selettore | Corrisponde | |---|---| | `.az-container` | il wrapper di ogni campo DXPR Builder; ha anche `.dxpr-editor` mentre qualcuno lo modifica | | `.az-section` | ogni **Section**; dentro c’è un `.container`, o `.container-fluid` quando **Full width** è attivo | | `.row` | ogni **Row**; DXPR Builder usa la classe propria di Bootstrap e non aggiunge `az-row` | | `.col-*` | ogni colonna, ad esempio `.col-12.col-md-6`; non esiste `az-column` | | `.az-text`, `.az-image`, `.az-button`, `.az-card` | un tipo di elemento: `az-` più il nome dell’elemento, come `.az-separator` per il Divider | | `.az-element` | la maggior parte degli elementi di contenuto, ma non Image, Icon o Button | Il pannello **Style** scrive attributi `style` inline, che battono una regola di classe sulla stessa proprietà. Le classi di utilità Bootstrap sono marcate `!important` e battono entrambi. ## Se non vedi lo stile - **La classe è sull’elemento, ma niente cambia.** La libreria non è caricata, oppure la cache contiene ancora il vecchio CSS. Verifica che `mytheme.info.yml` elenchi la libreria, poi svuota le cache in `/admin/config/development/performance`. - **Solo alcune proprietà si applicano.** Un valore del pannello **Style** sulla stessa proprietà vince. Azzera quel valore nel pannello **Style** dell’elemento, oppure sposta l’intero aspetto nella tua classe. - **Lo stile si vede nell’editor ma non per i visitatori.** **Apply text format filters to frontend content** è attivo, e il formato di testo del campo rimuove gli attributi `class`. Disattivalo in **Text Filters** in `/admin/dxpr_studio/dxpr_builder/settings`, oppure consenti le classi nel formato. - **Una regola per `.az-row` o `.az-column` non trova mai corrispondenze.** DXPR Builder non scrive quelle classi. Punta a `.row`, alle classi `.col-*` o alla tua classe. ## Prossimi passi - [Classi di utilità](/it/hc/documentation/learn-dxpr-builder/customization/utility-classes): elenca le tue classi in **HTML classes** così gli editor possono sceglierle. - [Font personalizzati](/it/hc/documentation/learn-dxpr-builder/customization/custom-fonts): carica i font del brand allo stesso modo. - [Editor di testo](/it/hc/documentation/learn-dxpr-builder/customization/text-editor): offri classi per paragrafi e parole nell’elenco **Styles**.