--- url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/development/css-architecture' title: 'Architettura CSS | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T03:04:01+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- I contenuti del builder sono markup Bootstrap 5 più un piccolo insieme di classi az-. Sapere quali classi compaiono nelle pagine pubblicate, e quali esistono solo mentre l’editor è in esecuzione, ti dice cosa il CSS del tuo tema può selezionare. tags: - 'Architectuur en API’s' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T03:04:01+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Architettura CSS' description: |- I contenuti del builder sono markup Bootstrap 5 più un piccolo insieme di classi az-. Sapere quali classi compaiono nelle pagine pubblicate, e quali esistono solo mentre l’editor è in esecuzione, ti dice cosa il CSS del tuo tema può selezionare. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T03:04:01+0000' dateModified: '2026-10-24T03:04:01+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/development/css-architecture' articleSection: 'Architectuur en API’s' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/development/css-architecture' description: |- I contenuti del builder sono markup Bootstrap 5 più un piccolo insieme di classi az-. Sapere quali classi compaiono nelle pagine pubblicate, e quali esistono solo mentre l’editor è in esecuzione, ti dice cosa il CSS del tuo tema può selezionare. 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) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Architectuur en API’s](/hc/documentation/learn-dxpr-builder/extend/architecture) # Architettura CSS. Learn DXPR BuilderExtendArchitectuur en API’s ## In this guide I contenuti del builder sono markup Bootstrap 5 più un piccolo insieme di classi `az-`. Sapere quali classi compaiono nelle pagine pubblicate, e quali esistono solo mentre l’editor è in esecuzione, ti dice cosa il CSS del tuo tema può selezionare. ## Classi nelle pagine pubblicate ### Layout | Markup | Classi | |---|---| | Sezione | `az-section`, con `container` o `container-fluid` all’interno | | Riga | Riga Bootstrap `row` | | Colonna | Classi `col-*` di Bootstrap, una per breakpoint | | Elemento di contenuto | Una classe per tipo di elemento, come `az-text`, `az-image` o `az-images-carousel`; Social Links usa `st-social`. La maggior parte ha anche `az-element`; Button e Image no | I contenuti salvati dalle versioni precedenti possono ancora contenere `az-row` e `az-column`. L’editor li riconosce e li omette al successivo salvataggio della riga o della colonna. ### Modificatori | Classe | Impostata da | |---|---| | `az-row--equal-height` | **Equal-height columns** su una riga; senza di essa la riga usa `align-items-start` | | `az-row--reverse-horizontal` | **Mirror row** su una riga | | `az-util-vertical-centering` | **Vertical centering** su una sezione o una colonna | ### Griglia Bootstrap Le colonne usano le classi della griglia di Bootstrap: | Classe | Larghezza | |---|---| | `col` | Condivide la riga in parti uguali | | `col-6` | 50% | | `col-md-4` | 33% da 768 px | | `col-lg-3` | 25% da 992 px | ## Scrivere CSS personalizzato - Limita le regole specifiche del builder a `.az-section` o alle classi di tipo, come `.az-text` o `.az-button`. `.az-element` non copre Button e Image. - Non sovrascrivere le classi della griglia di Bootstrap; l’editor imposta le larghezze delle colonne tramite esse. - Per uno stile una tantum, aggiungi una classe nel campo **HTML classes**dell’elemento e stilizza quella classe. ## Classi solo dell’editor Queste classi esistono solo mentre l’editor è in esecuzione, quindi le pagine pubblicate non le usano mai: | Classe | Dove | |---|---| | `dxpr-builder-ui` | Ogni parte dell’interfaccia dell’editor: barre di controllo, menu, finestre di dialogo | | `controls` | La barra di controllo di un elemento | | `dxpr-editor` | Il contenitore del campo in ogni modalità di visualizzazione tranne Preview | | `az-ctnr` | Il contenitore del campo una volta avviato l’editor | | `az-sortable-placeholder` | Il segnaposto di rilascio mentre trascini un elemento | Gli stili propri dell’editor sono in `dxpr_builder/css/dxpr_builder_backend.css`, generati da `dxpr_builder/sass/dxpr_builder_backend.scss`. ## Versione di Bootstrap Il builder scrive markup Bootstrap 5. Se il tuo tema non carica Bootstrap 5, imposta **Sideload Bootstrap files** su **Bootstrap 5** in **DXPR Studio > DXPR Builder > General Settings**, sotto **Bootstrap**. **None (theme provides Bootstrap)** presume che il tuo tema lo carichi.