--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/text-editor' title: 'Adicionar estilos da marca e botões ao editor de texto | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:46:49+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Quando os editores clicam num texto no DXPR Builder, aparece uma barra de ferramentas. A lista Styles pode ser preenchida com os estilos da marca, como um parágrafo de abertura ou uma frase destacada. Também pode escolher que botões cada função vê. Os editores aplicam assim um aspeto da marca com um clique, em vez de definirem tamanhos e cores à mão. Os tipos de letra vêm do tema; consulte Tipos de letra personalizados.' 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:49+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Adicionar estilos da marca e botões ao editor de texto' description: 'Quando os editores clicam num texto no DXPR Builder, aparece uma barra de ferramentas. A lista Styles pode ser preenchida com os estilos da marca, como um parágrafo de abertura ou uma frase destacada. Também pode escolher que botões cada função vê. Os editores aplicam assim um aspeto da marca com um clique, em vez de definirem tamanhos e cores à mão. Os tipos de letra vêm do tema; consulte Tipos de letra personalizados.' 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:49+0000' dateModified: '2026-10-24T11:46:49+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/text-editor' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/customization/text-editor' description: 'Quando os editores clicam num texto no DXPR Builder, aparece uma barra de ferramentas. A lista Styles pode ser preenchida com os estilos da marca, como um parágrafo de abertura ou uma frase destacada. Também pode escolher que botões cada função vê. Os editores aplicam assim um aspeto da marca com um clique, em vez de definirem tamanhos e cores à mão. Os tipos de letra vêm do tema; consulte Tipos de letra personalizados.' 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) # Adicionar estilos da marca e botões ao editor de texto. 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) - [Classes utilitárias](/pt-pt/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Escolha o que cada função vê no construtor](/pt-pt/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) Quando os editores clicam num texto no DXPR Builder, aparece uma barra de ferramentas. A lista **Styles** pode ser preenchida com os estilos da marca, como um parágrafo de abertura ou uma frase destacada. Também pode escolher que botões cada função vê. Os editores aplicam assim um aspeto da marca com um clique, em vez de definirem tamanhos e cores à mão. Os tipos de letra vêm do tema; consulte [Tipos de letra personalizados](/hc/documentation/learn-dxpr-builder/customization/custom-fonts). ## Antes de começar - Para editar estilos, precisa de **Administer DXPR Builder configuration**. - Para editar botões da barra de ferramentas, precisa de **Administer dxpr builder profile**. - Cada estilo precisa de CSS por trás. Classes do Bootstrap 5 como `lead` funcionam quando a página carrega o Bootstrap 5. As classes próprias precisam de uma regra no tema; consulte [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css). ## Configuração 1. Aceda a **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`). 2. Expanda **Text Editor**. A caixa **Custom styles** já enumera os estilos que vêm com o DXPR Builder, um por linha. 3. Adicione uma linha por estilo na forma `Label=element.class` e elimine as linhas que não quer. 4. Clique em **Save settings**. 5. Abra uma página no construtor, ou recarregue-a se estiver aberta, e clique num texto. 6. Clique em **Styles** na barra de ferramentas e escolha o estilo. Estas linhas adicionam quatro estilos: ```text Lead=p.lead Event date=span.text-primary.fw-semibold Callout=p.border-start.border-primary.border-4.ps-3 Sassy Title=h1.sassy-title ``` Cada linha tem três partes: - A **label** antes de `=` é o nome que os editores veem na lista. - O **element** depois de `=` decide o que o estilo abrange. Um elemento de bloco como `p`, `h2` ou `blockquote` formata um parágrafo ou título inteiro. Um elemento em linha como `span`, `mark` ou `code` envolve apenas as palavras selecionadas. - Cada **class** segue um ponto. Adicione mais classes com mais pontos, como em `Callout` acima. Os nomes de elementos usam apenas letras e dígitos. Os nomes de classes usam letras, dígitos, hífenes e sublinhados. Para repor a lista de origem, esvazie a caixa e guarde. ## Botões da barra de ferramentas por função 1. Aceda a **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) e clique em **Edit** junto ao perfil da função. 2. Expanda **Text editor buttons (inline editing)**. Marque os botões para texto editado na página. 3. Expanda **Text editor buttons (modal editing)**. Marque os botões para caixas de texto num diálogo de definições. 4. Clique em **Save**. A edição em linha abrange os elementos Text, Alert e Blockquote. Mantenha **Font style** marcado em ambos os grupos para mostrar os estilos personalizados; é o nome do perfil para a lista **Styles**. Se desmarcar todos os botões de um grupo, essa barra de ferramentas volta ao conjunto incluído. [Perfis de utilizador](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) explica que perfil se aplica a quem. ## O que vê **Styles** na barra de ferramentas abre um painel com dois grupos. **Block styles** tem os estilos para parágrafos e títulos inteiros, **Text styles** os das palavras selecionadas. Depois de escolher um estilo, o botão mostra o nome, ou **Multiple styles** quando vários se aplicam. O editor guarda o elemento e as classes no HTML da página, para os visitantes verem o mesmo aspeto. Um estilo de bloco só está ativo no próprio elemento: `Sassy Title` precisa do cursor num **Heading 1**. ## Definições Os 36 botões aparecem em ambos os grupos. Um perfil novo começa com estes marcados: | Button | Machine name | Inline default | Modal default | |---|---|:-:|:-:| | **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | yes | yes | | **Bold**, **Italic** | `bold`, `italic` | yes | yes | | **Underline**, **Strike through** | `underline`, `strikethrough` | | yes | | **Superscript**, **Subscript** | `superscript`, `subscript` | | yes | | **Remove format** | `removeFormat` | yes | yes | | **Text color** | `fontColor` | yes | yes | | **Background color** | `fontBackgroundColor` | | | | **Font size** | `fontSize` | yes | yes | | **Font family** | `fontFamily` | | | | **HTML block format** | `heading` | yes | yes | | **Font style** (the **Styles** list) | `style` | yes | yes | | **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | yes | yes | | **Insert/Remove Bullet list** | `bulletedList` | yes | yes | | **Insert/Remove Numbered list** | `numberedList` | | yes | | **Outdent**, **Indent** | `outdent`, `indent` | | yes | | **Block quote** | `blockQuote` | | yes | | **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | yes | yes | | **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` | | yes | | **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` | | yes | | **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` | | | | **Undo**, **Redo** | `undo`, `redo` | yes | yes | Os utilizadores cujas funções não correspondem a nenhum perfil ativo recebem as barras de ferramentas incluídas. Em linha, são **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, ambas as listas, **Link**, **Image**, **Table**, **Undo** e **Redo**. A barra modal adiciona os botões de sublinhado, rasurado, expoente e índice, alinhamento, avanço e recuo, cor e tamanho. Também adiciona **Block quote**, **Horizontal rule**, **Character map**, **Source code** e **Show blocks**. Com a IA ligada, ambas recebem os dois botões de IA. **Font family** oferece os tipos de letra padrão do CKEditor para a Web, não os tipos do tema. ## Se o estilo não aparece - **The Styles list only shows the shipped styles.** Uma linha quebra o formato, ou uma linha em branco entre dois estilos, e o DXPR Builder ignora a lista inteira. Corrija em **Text Editor** em `/admin/dxpr_studio/dxpr_builder/settings` e guarde. - **Your style is greyed out.** Um estilo de bloco só funciona no próprio elemento: `h1.sassy-title` precisa de um **Heading 1**. Mude primeiro o bloco com a lista de títulos, ou defina o estilo para `p`. - **There is no Styles button on the toolbar.** O perfil do editor tem **Font style** desmarcado. Marque-o em ambos os grupos de botões em `/admin/dxpr_studio/dxpr_builder/profile`. - **The style applies, but the text looks the same.** O tema não tem CSS para a classe, ou o Bootstrap 5 não está carregado. Adicione a regra ao tema, ou defina **Sideload Bootstrap files** como **Bootstrap 5** em **Bootstrap** na página General Settings. - **Editors see the style, visitors do not.** **Apply text format filters to frontend content** está ligado em **Text Filters**, e o formato de texto do campo remove atributos `class`. Desligue a opção, ou dê ao campo um formato que mantém classes; consulte [Os visitantes veem algo diferente](/hc/documentation/learn-dxpr-builder/troubleshooting/visitors-see-something-else). ## O que se segue? - [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css): escreva as regras do tema por trás das classes de estilo. - [Classes utilitárias](/hc/documentation/learn-dxpr-builder/customization/utility-classes): ofereça classes para elementos inteiros na lista **HTML classes**. - [Perfis de utilizador](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin): tudo o resto que um perfil controla.