--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/separador-de-estilo' title: 'Altere o aspeto de um elemento no painel Style | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:11:44+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Use o painel Style quando um elemento numa página precisar do seu próprio aspeto: um cartão colorido, um logótipo esmaecido, um botão nas cores de campanha. Vê cada alteração na página à medida que a faz. Para um aspeto que todas as páginas devem partilhar, como a cor de todos os botões, mude antes o seu tema. Uma edição aí atualiza todo o site. O vídeo segue a primeira receita abaixo: esmaece um logótipo de parceiro até o ponteiro o alcançar. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Altere o aspeto de um elemento no painel Style' description: |- Use o painel Style quando um elemento numa página precisar do seu próprio aspeto: um cartão colorido, um logótipo esmaecido, um botão nas cores de campanha. Vê cada alteração na página à medida que a faz. Para um aspeto que todas as páginas devem partilhar, como a cor de todos os botões, mude antes o seu tema. Uma edição aí atualiza todo o site. O vídeo segue a primeira receita abaixo: esmaece um logótipo de parceiro até o ponteiro o alcançar. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:11:44+0000' dateModified: '2026-10-24T17:19:22+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/definicoes-de-elementos/separador-de-estilo' articleSection: 'Estilizar os elementos' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/separador-de-estilo' description: |- Use o painel Style quando um elemento numa página precisar do seu próprio aspeto: um cartão colorido, um logótipo esmaecido, um botão nas cores de campanha. Vê cada alteração na página à medida que a faz. Para um aspeto que todas as páginas devem partilhar, como a cor de todos os botões, mude antes o seu tema. Uma edição aí atualiza todo o site. O vídeo segue a primeira receita abaixo: esmaece um logótipo de parceiro até o ponteiro o alcançar. 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) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) # Altere o aspeto de um elemento no painel Style. Aprender DXPR BuilderCriar páginasEstilizar os elementos ## Neste guia Guias relacionados - [Coloque uma cor ou fotografia atrás do conteúdo](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/fundo) Use o painel **Style** quando um elemento numa página precisar do seu próprio aspeto: um cartão colorido, um logótipo esmaecido, um botão nas cores de campanha. Vê cada alteração na página à medida que a faz. Para um aspeto que todas as páginas devem partilhar, como a cor de todos os botões, mude antes o seu tema. Uma edição aí atualiza todo o site. O vídeo segue a primeira receita abaixo: esmaece um logótipo de parceiro até o ponteiro o alcançar. ## Antes de começar - Abra a página no DXPR Builder; apontar para um elemento mostra a barra de controlos com **More**. Novo no construtor? Veja [Crie a sua primeira página](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina). - **Save** no diálogo mantém uma alteração no editor. **Save** na barra de ferramentas do construtor por cima do conteúdo guarda a página e mostra "Saved field". As definições do painel **Style** pertencem a um elemento. São guardadas no conteúdo dessa página, não no seu tema. Se a cor da sua marca mudar no próximo ano, cada elemento que coloriu à mão mantém a cor antiga até o editar. - **Reutilize um aspeto** guardando um elemento com estilo através de **More** > **Save as template**, ou dando aos elementos uma classe partilhada em **HTML classes**. Veja [user templates](/pt-pt/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates) e [HTML ID and classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado). - **Escolha cores das amostras** quando o seu site as mostra. Vêm da paleta de cores do seu tema. Uma amostra copia a cor, por isso uma mudança posterior de paleta não a atualiza. ## Receita: esmaecer logótipos até o ponteiro os alcançar Uma fila de logótipos de parceiros parece mais calma quando os logótipos estão esmaecidos. Esta receita esmaece um logótipo e trazê-o de volta ao pairar o cursor. 1. Paire o cursor sobre um elemento **Image** que mostra um logótipo, clique em **More** e depois em **Settings**. 2. Abra o painel **Style** e arraste **Opacity** para 0.5. O logótipo esmaece enquanto arrasta. 3. Abra o painel **Hover style** por baixo e arraste **Opacity** para 1. 4. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas. 5. Abra o menu de vista (o ícone de olho) na barra de ferramentas do construtor, escolha **Preview** e aponte para o logótipo. Muda para força total e esmaece de novo quando o ponteiro sai. Repita os passos para cada logótipo na fila. ## Receita: um botão nas cores de campanha O seu tema dá aos botões uma cor de hover. Um **Background** definido por si também substitui essa cor de hover, por isso defina ambas. 1. Paire o cursor sobre o elemento **Button**, clique em **More** e depois em **Settings**. 2. No painel **Style**, escolha um **Background** e uma **Font color**. Clique numa amostra, ou escreva o seu código de cor, como #e4002b, no campo de cor. 3. No painel **Hover style**, escolha um **Background** mais escuro. 4. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas. 5. Escolha **Preview** no menu de vista e aponte para o botão. Fica da cor mais escura. ## O que vê Enquanto o diálogo está aberto, o elemento mostra cada alteração. Em **Preview**, o logótipo esmaecido passa a força total sob o ponteiro, e o botão de campanha fica da cor mais escura. Ambos os aspetos permanecem depois de recarregar a página, porque o **Save** na barra de ferramentas guardou-os. ## O que cada controlo aceita | Controlo | Intervalo | Unidade | |---|---|---| | **Font color**, **Border color**, **Background** | qualquer cor, com transparência | cor | | **Background image** | uma imagem da mediateca, ou um URL | | | **Background style**, **Background position**, **Border style** | uma lista que começa em **Theme defaults** | | | **Font size** | 0 a 100 | px | | **Border radius** | 0 a 100 | px | | **Opacity** | 0 a 1, em passos de 0,01 | | | **Drop shadow** | níveis 0 a 5 | | | Modelo de caixa: **Margin** | -200 a 200 | **PX** ou **%** | | Modelo de caixa: **Padding** | 0 a 200 | **PX** ou **%** | | Modelo de caixa: **Border** | 0 a 50 | px | | width × height do modelo de caixa | 0 a 2000 | **PX** ou **%** | Um valor escrito fora do intervalo é cortado para o limite mais próximo. O modelo de caixa e os seus cadeados são explicados na página de [espaçamento](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/espacamento). ## Como se comportam as definições ### Predefinições do tema Uma cor vazia, um cursor em 0, uma lista em **Theme defaults** e um lado do modelo de caixa que mostra "-" significam todos o mesmo. O DXPR Builder não escreve nada, e o seu tema decide. Por isso **Opacity** 0 não oculta um elemento, e **Font size** 0 mantém o tamanho do tema. Para voltar ao aspeto do tema, clique em **Clear** no seletor de cor, leve o cursor para 0 ou escolha **Theme defaults** de novo. ### Onde ficam as definições Cada definição de **Style** exceto **Drop shadow** é guardada como estilo em linha no elemento. Estilos em linha vencem CSS normal do tema. Duas coisas ainda ganham: regras do tema marcadas como `!important`, e classes utilitárias Bootstrap em **HTML classes**, que também trazem `!important`. Nalguns elementos as definições vão para uma parte interior. Num **Button** estilizam o próprio botão, numa **Image** a fotografia, num **Link** a ligação e num **Map** a moldura do mapa. ### Todos os tamanhos de ecrã As definições de estilo não têm pontos de interrupção. 64 px de preenchimento são 64 px também no telemóvel. Valores em percentagem crescem e encolhem com a largura da página. Para valores diferentes por tamanho de ecrã, use classes responsivas, como mostra a página de [HTML ID and classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado). ### Opacity esmaece tudo dentro **Opacity** atua sobre o elemento inteiro. Esmaece a caixa, o bordo, o texto e cada elemento dentro. Para uma caixa transparente atrás de texto sólido, deixe **Opacity** em 0. Em vez disso escolha uma cor de **Background** com alguma transparência: o seletor de cor tem o seu próprio cursor de opacidade para isso. ### Estilo de hover **Hover style** é um painel separado por baixo de **Style**. Tem os mesmos controlos, modelo de caixa próprio incluído. Os valores aplicam-se enquanto o ponteiro está sobre o elemento. Ao contrário dos valores de **Style**, estão marcados como `!important`, por isso vencem os seus valores de **Style**, as classes utilitárias em **HTML classes** e a maioria das regras do tema. Só **Drop shadow** aparece gradualmente, em 0,15 segundos. As outras mudanças de hover alternam de imediato, salvo o seu tema as animar. Botões Bootstrap esmaecem cores em 0,15 segundos. Telemóveis e tablets não têm ponteiro. Os visitantes aí só veem um aspeto de hover depois de um toque, por isso nunca ponha nele informação de que precisam. ### Elementos com definições próprias Alguns elementos têm definição própria para o mesmo trabalho. A definição própria ganha, e o controlo de **Style** não faz nada. | Elemento | Ignora em Style | Use em vez disso | |---|---|---| | Circle counter | **Background**, **Font size**, width × height | **Background color** e **Dimension** em **General**, **Font size** em **Circle content** | | Progress bar | **Background**, width × height | **Back color**, **Front color** e **Bar height** em **General** | | Divider | **Background**, width | **Color** e **Length** em **General** | | Number counter | **Font size** | **Font size** em **General** | | Image | width × height | **Image width** e **Image height** em **General** | | Map | width × height | **Map width** e **Map height** em **General** | | Marquee | width × height | **Image width** e **Height** em **General** | | Video, Local video | width | **Video width** em **General** | | Positioned layers | width × height | **Width** e **Height** em **General** | ## Se não vir a sua alteração - **A alteração desapareceu quando o diálogo fechou.** Fechou-o com **Cancel**, o ícone de fechar ou a tecla Escape, que repuseram as definições antigas. Faça de novo a alteração e clique em **Save** no diálogo. - **A alteração desapareceu depois de recarregar a página.** **Save** no diálogo só mantém uma alteração no editor. Clique em **Save** na barra de ferramentas antes de sair da página. - **O aspeto do tema fica.** Uma classe utilitária Bootstrap em **HTML classes** ou uma regra do tema com `!important` ganha. Abra o painel **General** e remova a amostra de classe, por exemplo **Primary background**, ou pergunte ao seu webmaster sobre a regra do tema. - **Um controlo não faz nada.** Alguns elementos têm definição própria para o mesmo trabalho. Veja [Elementos com definições próprias](#elements-with-their-own-settings). - **O botão deixou de mudar de cor ao pairar o cursor.** O seu **Background** substitui a cor de hover do tema. Defina um **Background** no painel **Hover style** também. - **O texto esmaeceu junto com a caixa.** **Opacity** esmaece o elemento inteiro. Reponha-o em 0 e use uma cor de **Background** com transparência. - **Opacity 0 não oculta o elemento.** 0 significa **Theme defaults**. Adicione antes a classe **Hide element (d-none)** em **HTML classes**. ## E a seguir? - [Coloque uma cor ou fotografia atrás do conteúdo](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/fundo): ponha uma fotografia atrás de um título e mantenha-o legível.