--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/custom-css' title: 'Estilizar conteúdo do construtor com o CSS do tema | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:46:30+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'O conteúdo do DXPR Builder faz parte da página que o tema apresenta, por isso o CSS do tema formata-o no editor e na página publicada. Use esta página quando um aspeto deve repetir-se em muitos elementos ou páginas, ou quando as definições de elemento não o produzem. Termina com uma folha de estilos no tema e uma classe que os editores podem aplicar. Para um elemento, use o diálogo de definições.' 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-24T11:46:30+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Estilizar conteúdo do construtor com o CSS do tema' description: 'O conteúdo do DXPR Builder faz parte da página que o tema apresenta, por isso o CSS do tema formata-o no editor e na página publicada. Use esta página quando um aspeto deve repetir-se em muitos elementos ou páginas, ou quando as definições de elemento não o produzem. Termina com uma folha de estilos no tema e uma classe que os editores podem aplicar. Para um elemento, use o diálogo de definições.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:46:30+0000' dateModified: '2026-10-24T11:46:30+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/documentation/learn-dxpr-builder/customization/custom-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/custom-css' description: 'O conteúdo do DXPR Builder faz parte da página que o tema apresenta, por isso o CSS do tema formata-o no editor e na página publicada. Use esta página quando um aspeto deve repetir-se em muitos elementos ou páginas, ou quando as definições de elemento não o produzem. Termina com uma folha de estilos no tema e uma classe que os editores podem aplicar. Para um elemento, use o diálogo de definições.' 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 --- [Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/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) # Estilizar conteúdo do construtor com o CSS do tema. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Classes utilitárias](/pt-pt/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Utilizar os tipos de letra da marca nas páginas do construtor](/pt-pt/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [Adicionar estilos da marca e botões ao editor de texto](/pt-pt/hc/documentation/learn-dxpr-builder/customization/text-editor) O conteúdo do DXPR Builder faz parte da página que o tema apresenta, por isso o CSS do tema formata-o no editor e na página publicada. Use esta página quando um aspeto deve repetir-se em muitos elementos ou páginas, ou quando as definições de elemento não o produzem. Termina com uma folha de estilos no tema e uma classe que os editores podem aplicar. Para um elemento, use o [diálogo de definições](/hc/documentation/learn-dxpr-builder/element-settings). ## Antes de começar - Precisa de acesso aos ficheiros do tema e de uma forma de os implementar. - Use um tema personalizado ou um subtema. Uma atualização de um tema contribuído substitui os ficheiros, e o CSS com eles. ## Configuração 1. Crie `css/custom.css` na pasta do tema, por exemplo `themes/custom/mytheme/css/custom.css`. 2. Declare o ficheiro em `mytheme.libraries.yml`: ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. Carregue a biblioteca em cada página a partir de `mytheme.info.yml`: ```yaml libraries: - mytheme/global-styling ``` 4. Escreva uma regra para um nome de classe próprio: ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. Limpe a cache em **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) com **Clear all caches**, ou execute `drush cr`. 6. No construtor, abra as definições de uma **Section** e adicione `brand-hero` em **HTML classes**. [ID e classes de HTML](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) mostra como escrever uma classe própria. Os editores também podem escolher a classe na lista **HTML classes** quando o tema a enumera lá; consulte [Classes utilitárias](/hc/documentation/learn-dxpr-builder/customization/utility-classes). ## O que vê A secção assume o gradiente e o texto branco assim que adiciona a classe, porque o editor corre na página que o tema apresenta. Os visitantes veem o mesmo após guardar a página. A classe fica guardada no HTML da página, por isso mudar a regra mais tarde atualiza cada elemento que a tem. ## Classes que o DXPR Builder escreve A classe própria é o alvo mais seguro. Estas classes também estão no HTML guardado: | Selector | Matches | |---|---| | `.az-container` | o invólucro de cada campo do DXPR Builder; também tem `.dxpr-editor` enquanto alguém o edita | | `.az-section` | cada **Section**; dentro fica um `.container`, ou `.container-fluid` quando **Full width** está ligado | | `.row` | cada **Row**; o DXPR Builder usa a classe própria do Bootstrap e não adiciona `az-row` | | `.col-*` | cada coluna, por exemplo `.col-12.col-md-6`; não há `az-column` | | `.az-text`, `.az-image`, `.az-button`, `.az-card` | um tipo de elemento: `az-` mais o nome do elemento, como `.az-separator` para o Divider | | `.az-element` | a maioria dos elementos de conteúdo, mas não Image, Icon ou Button | O painel **Style** escreve atributos `style` em linha, que vencem uma regra de classe na mesma propriedade. As classes utilitárias do Bootstrap estão marcadas com `!important` e vencem ambas. ## Se o estilo não aparece - **The class is on the element, but nothing changes.** A biblioteca não está carregada, ou a cache ainda guarda o CSS antigo. Verifique que `mytheme.info.yml` enumera a biblioteca e limpe as caches em `/admin/config/development/performance`. - **Only some properties apply.** Um valor do painel **Style** na mesma propriedade vence. Limpe esse valor no painel **Style** do elemento, ou mova todo o aspeto para a classe. - **The style shows in the editor but not for visitors.** **Apply text format filters to frontend content** está ligado, e o formato de texto do campo remove atributos `class`. Desligue-o em **Text Filters** em `/admin/dxpr_studio/dxpr_builder/settings`, ou permita classes no formato. - **A rule for `.az-row` or `.az-column` never matches.** O DXPR Builder não escreve essas classes. Aponte para `.row`, as classes `.col-*` ou a classe própria. ## O que se segue? - [Classes utilitárias](/hc/documentation/learn-dxpr-builder/customization/utility-classes): enumere as classes em **HTML classes** para os editores as escolherem. - [Tipos de letra personalizados](/hc/documentation/learn-dxpr-builder/customization/custom-fonts): carregue tipos de letra da marca da mesma forma. - [Editor de texto](/hc/documentation/learn-dxpr-builder/customization/text-editor): ofereça classes para parágrafos e palavras na lista **Styles**.