--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/criacao-de-temas' title: 'Criação de temas no DXPR Builder | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:16:13+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- O conteúdo do construtor é HTML normal na sua página, por isso o seu tema aplica-lhe estilos como a qualquer outro conteúdo. Esta página abrange o que um tema herda, como adiciona classes ao editor e onde colocar substituições. O que o seu tema estiliza O conteúdo publicado do construtor herda os estilos do seu tema: tags: - 'Build on it' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:16:13+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Criação de temas no DXPR Builder' description: |- O conteúdo do construtor é HTML normal na sua página, por isso o seu tema aplica-lhe estilos como a qualquer outro conteúdo. Esta página abrange o que um tema herda, como adiciona classes ao editor e onde colocar substituições. O que o seu tema estiliza O conteúdo publicado do construtor herda os estilos do seu tema: image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:16:13+0000' dateModified: '2026-10-24T19:16:13+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/criacao-de-temas' articleSection: 'Desenvolver sobre ele' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/criacao-de-temas' description: |- O conteúdo do construtor é HTML normal na sua página, por isso o seu tema aplica-lhe estilos como a qualquer outro conteúdo. Esta página abrange o que um tema herda, como adiciona classes ao editor e onde colocar substituições. O que o seu tema estiliza O conteúdo publicado do construtor herda os estilos do seu tema: 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) /[Desenvolver sobre ele](/pt-pt/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Criação de temas no DXPR Builder. Aprender DXPR BuilderEstenderDesenvolver sobre ele ## Neste guia O conteúdo do construtor é HTML normal na sua página, por isso o seu tema aplica-lhe estilos como a qualquer outro conteúdo. Esta página abrange o que um tema herda, como adiciona classes ao editor e onde colocar substituições. ## O que o seu tema estiliza O conteúdo publicado do construtor herda os estilos do seu tema: - Títulos, texto de corpo e ligações usam os estilos do seu tema. - O esquema usa filas e colunas Bootstrap 5, por isso um tema Bootstrap 5 alinha com ele. Com qualquer outro tema, vá a **DXPR Studio > DXPR Builder > General Settings** e defina **Sideload Bootstrap files** como **Bootstrap 5**. - Cada elemento tem uma classe por tipo, como `az-card` ou `az-button`, e a maioria também traz `az-element`; veja [Arquitetura de CSS](/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/arquitetura-css). ## Adicionar classes ao editor ### No info.yml do tema Liste classes em `dxpr_builder_classes` no `.info.yml` do seu tema. Elas aparecem na lista **HTML classes** de cada elemento, num grupo de opções com o nome do tema, enquanto o tema está ativo: ```yaml # mytheme.info.yml dxpr_builder_classes: brand-header: 'Brand header style' brand-cta: 'Call to action style' bg-gradient-primary: 'Primary gradient background' ``` ### A partir de um módulo Implemente `hook_dxpr_builder_classes_alter()`. O nome tem de terminar em `_alter`; veja [Referência da API de hooks](/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/api-de-hooks). ```php /** * Implements hook_dxpr_builder_classes_alter(). */ function mymodule_dxpr_builder_classes_alter(&$classes) { $classes['optgroup-custom'] = t('Custom Styles'); $classes['custom-card'] = t('Custom card'); $classes['custom-hero'] = t('Custom hero'); } ``` ## Estilos de botão O elemento botão oferece os estilos Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light e Dark. A lista é fixa no editor; o hook das pastas buttons não a muda. Para dar aos botões o aspeto da sua marca, estilize as classes `btn-*`do Bootstrap no seu tema, ou adicione a sua classe através de **HTML classes**. ## Substituições de CSS Substitua a saída do construtor no CSS do seu tema: ```css /* Section padding */ .az-section { padding-top: 4rem; padding-bottom: 4rem; } /* Card shadows */ .az-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } ``` As definições que um editor faz no separador Style são escritas como estilos em linha. Estilos em linha vencem regras do tema que não usam `!important`, por isso use CSS do tema para predefinições e deixe os editores substituí-las por elemento. ## O editor e o seu tema O editor corre na página onde o campo é mostrado, ou seja dentro do seu tema público, não do tema de administração. As barras de controlos, menus e diálogos do editor trazem a classe `dxpr-builder-ui` e carregam a folha de estilos própria, `dxpr_builder_backend.css`. Regras do tema que apontam a seletores genéricos como `button` ou `.modal` ainda as alcançam; limite as suas regras às suas regiões de conteúdo para o evitar.