--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/colour-and-branding' title: 'Utilizar as cores da marca | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:47:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Aplique as cores da marca a secções, texto e botões para cada página parecer do mesmo site. Cada campo de cor no DXPR Builder mostra a paleta do tema como amostras, para escolher cores da marca em vez de adivinhar códigos. O exemplo dá a uma secção a cor principal da marca com texto branco. O vídeo segue os passos abaixo: pinta uma secção com a amostra da marca e torna o texto branco. tags: - 'Design guides' 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:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Utilizar as cores da marca' description: |- Aplique as cores da marca a secções, texto e botões para cada página parecer do mesmo site. Cada campo de cor no DXPR Builder mostra a paleta do tema como amostras, para escolher cores da marca em vez de adivinhar códigos. O exemplo dá a uma secção a cor principal da marca com texto branco. O vídeo segue os passos abaixo: pinta uma secção com a amostra da marca e torna o texto branco. 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:17+0000' dateModified: '2026-10-24T11:47:17+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/design/colour-and-branding' articleSection: 'Guias de design' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/colour-and-branding' description: |- Aplique as cores da marca a secções, texto e botões para cada página parecer do mesmo site. Cada campo de cor no DXPR Builder mostra a paleta do tema como amostras, para escolher cores da marca em vez de adivinhar códigos. O exemplo dá a uma secção a cor principal da marca com texto branco. O vídeo segue os passos abaixo: pinta uma secção com a amostra da marca e torna o texto branco. 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/documentation) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) /[Guias de design](/pt-pt/hc/documentation/learn-dxpr-builder/design/overview) # Utilizar as cores da marca. Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design ## Neste guia Guias relacionados - [Tornar os elementos reativos ao pairar](/pt-pt/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Estilizar os cartões](/pt-pt/hc/documentation/learn-dxpr-builder/design/card-styles) - [Estilizar conteúdo do construtor com o CSS do tema](/pt-pt/hc/documentation/learn-dxpr-builder/customization/custom-css) Aplique as cores da marca a secções, texto e botões para cada página parecer do mesmo site. Cada campo de cor no DXPR Builder mostra a paleta do tema como amostras, para escolher cores da marca em vez de adivinhar códigos. O exemplo dá a uma secção a cor principal da marca com texto branco. O vídeo segue os passos abaixo: pinta uma secção com a amostra da marca e torna o texto branco. ## Antes de começar - As cores da marca vivem no tema. Com o DXPR Theme, defina-as em **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), no painel **Colors**. - O DXPR Builder mostra as primeiras dez cores diferentes dessa paleta como amostras. ## Pintar uma secção 1. Paire sobre a secção, abra **More** e escolha **Settings**. 2. Abra o painel **Style**. 3. Clique no botão de cor de **Background**. O seletor de cores abre com as amostras. 4. Clique na amostra principal da marca. 5. Clique no botão de cor de **Font color** e escolha branco. 6. Clique em **Save**. O texto dos parágrafos fica branco; os títulos mantêm a cor de títulos do tema. 7. Para tornar um título branco também, abra as **Settings** do elemento **Text**, escolha branco para **Font color** no painel **Style** e clique em **Save**. ## O que vê A secção enche-se com a cor da marca, e o texto dos parágrafos e o título ficam brancos. As mesmas amostras aparecem em cada campo de cor. Isso inclui os painéis **Style** e **Hover style**, e o **Start color** e o **End color** do fundo **Gradient** de uma secção. Para usar uma cor fora da paleta, escreva o código no campo de texto do seletor, por exemplo `#2196F3`. Mova o cursor de opacidade para uma cor transparente. **Clear** remove a cor. ## Manter as cores ligadas ao tema Uma amostra copia o código da cor para o elemento. Se mudar a paleta do tema mais tarde, esse elemento mantém a cor antiga. Para um elemento seguir a paleta, use antes uma classe de cor. Abra as **Settings** do elemento e escolha um chip em **HTML classes**: | Chip | What it does | |---|---| | **Primary background**, **Secondary background** e outros | Cores Bootstrap do tema | | **Primary text color**, **Secondary text color** e outros | Cores de texto Bootstrap do tema | | **Background color: DXPR Theme primary** | A cor **Primary** do DXPR Theme, com a cor de texto correspondente | | **Text color: DXPR Theme accent1** | A cor **Secondary** do DXPR Theme para texto | Os chips **DXPR Theme** só aparecem quando o DXPR Theme está ativo. ## Campos de cor por elemento | Where | What it colours | |---|---| | **Style** (painel): **Font color**, **Border color**, **Background** | O próprio elemento | | **Hover style** (painel): os mesmos campos | O elemento enquanto o ponteiro está sobre ele | | **Button**: **Type** | Um esquema de cores de botão pronto | | **Card**: **Type** | O fundo e o texto de todo o cartão | | **Alert**: **Type** | **Success**, **Info**, **Warning** ou **Danger** | | **Section**: **Background effects** > **Gradient** | Uma mistura de duas cores | ## Cor legível - Mantenha contraste suficiente entre texto e fundo. As WCAG 2.1 nível AA pedem pelo menos 4,5 para 1 para texto normal. - Não use apenas a cor para transmitir significado; junte-lhe uma etiqueta ou um ícone. - Alterne fundos de secção, como branco, cinzento claro e a cor da marca, para dar ritmo às páginas longas. ## Se as cores não aparecem - **The colour picker shows no swatches.** O tema predefinido do site não oferece paleta de cores. Escreva os códigos de cor, ou use um tema com paleta, como o DXPR Theme. - **An element keeps its old colour after you change the theme palette.** Uma amostra guarda um código de cor fixo. Escolha a nova amostra, ou mude para um chip de cor em **HTML classes**, que segue a paleta. - **Background or Font color has no effect on a card.** Um **Type** de cartão diferente de **Default** define as cores com classes do tema que prevalecem. Defina primeiro **Type** como **Default**. ## O que se segue? - [Tornar os elementos reativos ao pairar](/hc/documentation/learn-dxpr-builder/design/hover-effects): mude as cores quando os visitantes apontam para um elemento. - [Estilizar os cartões](/hc/documentation/learn-dxpr-builder/design/card-styles): aplique as cores aos cartões. - [CSS personalizado](/hc/documentation/learn-dxpr-builder/customization/custom-css): defina regras da marca que os painéis não abrangem.