--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/arquitetura-css' title: 'Arquitetura de CSS | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:47:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- O conteúdo do construtor é código Bootstrap 5 mais um pequeno conjunto de classes az-. Saber que classes aparecem nas páginas publicadas e que classes só existem enquanto o editor está em execução indica o que o CSS do seu tema pode selecionar. tags: - 'Architecture and APIs' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:47:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Arquitetura de CSS' description: |- O conteúdo do construtor é código Bootstrap 5 mais um pequeno conjunto de classes az-. Saber que classes aparecem nas páginas publicadas e que classes só existem enquanto o editor está em execução indica o que o CSS do seu tema pode selecionar. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:47:43+0000' dateModified: '2026-10-24T11:47:43+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/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/arquitetura-css' articleSection: 'Arquitetura e APIs' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/arquitetura-css' description: |- O conteúdo do construtor é código Bootstrap 5 mais um pequeno conjunto de classes az-. Saber que classes aparecem nas páginas publicadas e que classes só existem enquanto o editor está em execução indica o que o CSS do seu tema pode selecionar. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Estender](/pt-pt/hc/documentation/learn-dxpr-builder/extend) /[Arquitetura e APIs](/pt-pt/hc/documentation/learn-dxpr-builder/extend/architecture) # Arquitetura de CSS. Aprender DXPR BuilderEstenderArquitetura e APIs ## Neste guia O conteúdo do construtor é código Bootstrap 5 mais um pequeno conjunto de classes `az-`. Saber que classes aparecem nas páginas publicadas e que classes só existem enquanto o editor está em execução indica o que o CSS do seu tema pode selecionar. ## Classes nas páginas publicadas ### Esquema | Markup | Classes | |---|---| | Section | `az-section`, com `container` ou `container-fluid` dentro | | Row | Classe Bootstrap `row` | | Column | Classes `col-*` do Bootstrap, uma por ponto de interrupção | | Content element | Uma classe por tipo de elemento, como `az-text`, `az-image` ou `az-images-carousel`; Social Links utiliza `st-social`. A maioria também traz `az-element`; Button e Image não | O conteúdo guardado por versões antigas ainda pode trazer `az-row` e `az-column`. O editor reconhece-as e omite-as da próxima vez que a linha ou a coluna for guardada. ### Modificadores | Class | Set by | |---|---| | `az-row--equal-height` | **Equal-height columns** numa linha; sem ela, a linha recebe `align-items-start` | | `az-row--reverse-horizontal` | **Mirror row** numa linha | | `az-util-vertical-centering` | **Vertical centering** numa secção ou coluna | ### Grelha do Bootstrap As colunas utilizam as classes de grelha do Bootstrap: | Class | Width | |---|---| | `col` | Partilha a linha por igual | | `col-6` | 50% | | `col-md-4` | 33% a partir de 768 px | | `col-lg-3` | 25% a partir de 992 px | ## Escrever CSS personalizado - Limite as regras específicas do construtor a `.az-section` ou às classes de tipo, como `.az-text` ou `.az-button`. `.az-element` não abrange Button nem Image. - Não sobreponha as classes de grelha do Bootstrap; o editor define as larguras das colunas através delas. - Para estilo pontual, adicione uma classe no campo **HTML classes**do elemento e estilize essa classe. ## Classes só do editor Estas classes só existem enquanto o editor está em execução, por isso as páginas publicadas nunca lhes correspondem: | Class | Where | |---|---| | `dxpr-builder-ui` | Toda a interface do editor: barras de controlos, menus, caixas de diálogo | | `controls` | A barra de controlos de um elemento | | `dxpr-editor` | O contentor de campo em todos os modos de visualização exceto Preview | | `az-ctnr` | O contentor de campo depois de o editor iniciar | | `az-sortable-placeholder` | O marcador de largada enquanto arrasta um elemento | Os estilos próprios do editor estão em `dxpr_builder/css/dxpr_builder_backend.css`, gerados a partir de `dxpr_builder/sass/dxpr_builder_backend.scss`. ## Versão do Bootstrap O construtor escreve código Bootstrap 5. Se o seu tema não carrega o Bootstrap 5, defina **Sideload Bootstrap files** para **Bootstrap 5** em **DXPR Studio > DXPR Builder > General Settings**, em **Bootstrap**. **None (theme provides Bootstrap)** pressupõe que o seu tema o carrega.