---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/utility-classes'
title: 'Classes utilitárias | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:46:53+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Cada elemento tem um campo HTML classes com uma lista de classes nomeadas. Os utilitários do Bootstrap 5 e as sombras estão incluídos de origem. O tema pode adicionar um grupo próprio através do ficheiro .info.yml, e um módulo através de um hook de alteração. Esta página explica o que a lista contém e como registar classes próprias, para os editores escolherem um aspeto da marca pelo nome em vez de escreverem nomes de classes.'
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:53+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Classes utilitárias'
      description: 'Cada elemento tem um campo HTML classes com uma lista de classes nomeadas. Os utilitários do Bootstrap 5 e as sombras estão incluídos de origem. O tema pode adicionar um grupo próprio através do ficheiro .info.yml, e um módulo através de um hook de alteração. Esta página explica o que a lista contém e como registar classes próprias, para os editores escolherem um aspeto da marca pelo nome em vez de escreverem nomes de classes.'
      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:53+0000'
      dateModified: '2026-10-24T11:46:53+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/utility-classes'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/utility-classes'
      description: 'Cada elemento tem um campo HTML classes com uma lista de classes nomeadas. Os utilitários do Bootstrap 5 e as sombras estão incluídos de origem. O tema pode adicionar um grupo próprio através do ficheiro .info.yml, e um módulo através de um hook de alteração. Esta página explica o que a lista contém e como registar classes próprias, para os editores escolherem um aspeto da marca pelo nome em vez de escreverem nomes de classes.'
      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) # Classes utilitárias.

 Learn DXPR BuilderManage the siteJe huisstijl toepassen

   ## In this guide

 Related guides

- [Estilizar conteúdo do construtor com o CSS do tema](/pt-pt/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [Adicionar estilos da marca e botões ao editor de texto](/pt-pt/hc/documentation/learn-dxpr-builder/customization/text-editor)
- [Referência da API de hooks](/pt-pt/hc/documentation/learn-dxpr-builder/development/hooks-api)

Cada elemento tem um campo **HTML classes** com uma lista de classes nomeadas. Os utilitários do Bootstrap 5 e as sombras estão incluídos de origem. O tema pode adicionar um grupo próprio através do ficheiro `.info.yml`, e um módulo através de um hook de alteração. Esta página explica o que a lista contém e como registar classes próprias, para os editores escolherem um aspeto da marca pelo nome em vez de escreverem nomes de classes.

## Aplicar uma classe

1. Abra as definições do elemento e encontre **HTML classes** no fim do painel **General**.
2. Clique na caixa e escolha uma classe da lista. Escrever na caixa filtra a lista.
3. Para introduzir uma classe que não está na lista, clique em **Edit as text** e escreva-a.
4. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas do construtor.

As classes vão para o atributo `class` do elemento no HTML guardado. [ID e classes de HTML](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) explica utilizações comuns aos editores.

## O que a lista contém

O editor constrói a lista ao arrancar. Junta três fontes, por esta ordem:

1. A lista incluída. Tem um grupo **Drop shadows**, um grupo curto **Bootstrap classes** e os utilitários do Bootstrap 5, agrupados por função: **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** e mais.
2. Um grupo para cada tema instalado cujo `.info.yml` tenha uma chave `dxpr_builder_classes`. O grupo usa o nome do tema como etiqueta.
3. Alterações de módulos, consulte [Registar classes a partir de um módulo](#register-classes-from-a-module).

Assim, cada site tem classes para espaçamento, como `mt-3` e `px-4`, para apresentação, como `d-none`, e para texto, como `text-center` e `fw-bold`. Nada precisa de configurar para elas.

## Registar classes num tema

Adicione um mapeamento `dxpr_builder_classes` ao `.info.yml` do tema. Cada chave é um nome de classe, ou vários separados por espaços; cada valor é a etiqueta que os editores veem. O DXPR Theme regista as classes assim:

```yaml
dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

```

1. Adicione o mapeamento a `themes/custom/mytheme/mytheme.info.yml`:

    ```yaml
    dxpr_builder_classes:
      brand-card: 'Brand card'
      brand-card shadow-lg: 'Brand card with shadow'

    ```
2. Escreva o CSS das classes numa biblioteca que o tema carrega em todas as páginas; consulte [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css).
3. Limpe as caches com `drush cr`, para o Drupal voltar a ler o ficheiro de informação.
4. Abra as definições de um elemento e confirme que **HTML classes** mostra um grupo com o nome do tema e as duas entradas.

Cada tema instalado com a chave adiciona o grupo, não apenas o tema predefinido. O grupo usa sempre o nome do tema; o ficheiro de informação não o pode mudar.

## Registar classes a partir de um módulo

Um módulo próprio pode adicionar classes, ou remover classes que um tema registou, com um hook de alteração. Não pode remover as entradas incluídas do Bootstrap, porque o editor adiciona-as no navegador. O código está em [Referência da API de hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter).

## Versão do Bootstrap

A lista incluída é do Bootstrap 5. Se o tema não carrega o Bootstrap 5, defina **Sideload Bootstrap files** como **Bootstrap 5** em **Bootstrap** em **DXPR Studio** > **DXPR Builder** > **General Settings**, para as classes terem CSS por trás. Consulte [Desempenho](/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading) para saber o que isso carrega.

## Se as classes não aparecem

- **Your theme's group is missing from HTML classes.** O Drupal ainda usa a cópia antiga do ficheiro de informação do tema. Clique em **Clear all caches** em **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`), ou execute `drush cr`.
- **A theme with the key adds no group.** Só contam os temas instalados. Instale o tema em **Appearance** (`/admin/appearance`); não precisa de ser o tema predefinido.
- **The element looks the same after you pick a class.** Não há CSS dessa classe carregado na página. Adicione as regras a uma biblioteca que o tema carrega, consulte [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css). Para classes do Bootstrap, consulte [Versão do Bootstrap](#bootstrap-version).

## O que se segue?

- [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css): escreva as regras por trás das classes.
- [Editor de texto](/hc/documentation/learn-dxpr-builder/customization/text-editor): ofereça classes para parágrafos e palavras na lista **Styles**.
- [Referência da API de hooks](/hc/documentation/learn-dxpr-builder/development/hooks-api): os outros hooks que o DXPR Builder oferece.