--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado' title: 'Ligue a secções e reutilize estilos com classes | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:13:39+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dê a uma secção um HTML ID para que um botão possa saltar para ela. Adicione HTML classes para ocultar um elemento nos telemóveis, para definir espaçamento por tamanho de ecrã, ou para reutilizar um aspeto que o seu tema define. Encontra ambos os campos no fundo do painel General de cada elemento. Uma classe mantém um aspeto consistente: quando a sua regra CSS muda, cada elemento com essa classe acompanha. O vídeo segue a primeira receita abaixo: faz um botão saltar para uma secção mais abaixo na página. 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: 'Ligue a secções e reutilize estilos com classes' description: |- Dê a uma secção um HTML ID para que um botão possa saltar para ela. Adicione HTML classes para ocultar um elemento nos telemóveis, para definir espaçamento por tamanho de ecrã, ou para reutilizar um aspeto que o seu tema define. Encontra ambos os campos no fundo do painel General de cada elemento. Uma classe mantém um aspeto consistente: quando a sua regra CSS muda, cada elemento com essa classe acompanha. O vídeo segue a primeira receita abaixo: faz um botão saltar para uma secção mais abaixo na página. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:13:39+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/css-personalizado' articleSection: 'Estilizar os elementos' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado' description: |- Dê a uma secção um HTML ID para que um botão possa saltar para ela. Adicione HTML classes para ocultar um elemento nos telemóveis, para definir espaçamento por tamanho de ecrã, ou para reutilizar um aspeto que o seu tema define. Encontra ambos os campos no fundo do painel General de cada elemento. Uma classe mantém um aspeto consistente: quando a sua regra CSS muda, cada elemento com essa classe acompanha. O vídeo segue a primeira receita abaixo: faz um botão saltar para uma secção mais abaixo na página. 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) # Ligue a secções e reutilize estilos com classes. Aprender DXPR BuilderCriar páginasEstilizar os elementos ## Neste guia Guias relacionados - [Adaptar o esquema aos telemóveis](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/design-responsivo) Dê a uma secção um **HTML ID** para que um botão possa saltar para ela. Adicione **HTML classes** para ocultar um elemento nos telemóveis, para definir espaçamento por tamanho de ecrã, ou para reutilizar um aspeto que o seu tema define. Encontra ambos os campos no fundo do painel **General** de cada elemento. Uma classe mantém um aspeto consistente: quando a sua regra CSS muda, cada elemento com essa classe acompanha. O vídeo segue a primeira receita abaixo: faz um botão saltar para uma secção mais abaixo na página. ## 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". - **Use um HTML ID** para um destino de salto. Um botão "Book a tour" pode deslocar-se para o formulário de marcação. Uma lista de ligações no topo de uma página longa pode levar a cada parte. - **Use uma classe para um aspeto que se repete.** O seu webmaster escreve o CSS uma vez, e adiciona a classe onde precisa. O painel **Style** copia valores para cada elemento, o que diverge com o tempo. - **Use uma classe para o que o painel Style não faz**, como ocultar um elemento nos telemóveis ou mudar o espaçamento por tamanho de ecrã. ## Receita: um botão que salta para uma secção 1. Paire o cursor sobre a **Section** de destino, clique em **More** e depois em **Settings**. 2. No painel **General**, escreva um nome curto, como `programmes`, em **HTML ID**. Clique em **Save**. 3. Abra as definições do **Button**. Em **Link**, escreva `#` seguido exatamente do mesmo nome: `#programmes`. Clique em **Save**. 4. Clique em **Save** na barra de ferramentas do construtor. 5. Escolha **Preview** no menu de vista (o ícone de olho) e clique no botão. Teste com a secção mais abaixo na página que o botão, para ver o deslocamento. Se o destino estiver dentro de um painel recolhível, um separador ou um diapositivo de carrossel, a ligação abre-o primeiro. ## Receita: ocultar um elemento nos telemóveis 1. Paire o cursor sobre o elemento, clique em **More** e depois em **Settings**. 2. No painel **General**, clique na caixa **HTML classes**. 3. Escolha **Hidden on extra small devices, phones (<576px)**. Está no grupo **Responsive Visibility**. 4. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas. O elemento desaparece em ecrãs com menos de 576 px, também no editor. Para o verificar, abra a página num telemóvel. ## Receita: escreva as suas classes A caixa **HTML classes** só deixa escolher da lista. Para escrever um nome de classe, mude-a primeiro para texto. 1. Paire o cursor sobre o elemento, clique em **More** e depois em **Settings**. 2. Em **HTML classes**, clique em **Edit as text**. A caixa passa a um campo de texto simples que lista as classes que o elemento já tem. 3. Adicione os seus nomes de classe depois delas, separados por espaços, por exemplo `brand-card py-3 py-lg-5`. Omita o ponto: `.brand-card` no CSS da sua equipa é `brand-card` aqui. 4. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas. O elemento fica com o aspeto que a sua equipa web definiu. ## O que vê Em **Preview**, o botão desloca a página suavemente até à secção e deixa espaço para um cabeçalho fixo; a barra de endereço termina em `#programmes`. Abaixo de 576 px de largura, o elemento oculto desaparece. As classes que escreveu aparecem como amostras da próxima vez que abrir o diálogo, entre aspas quando não estão na lista, como "brand-card". ## Como funcionam os campos ### HTML ID Um ID tem de começar por uma letra. Depois pode ter letras, números, hífenes e sublinhados, mas sem espaços. Um ID errado mostra um erro por baixo do campo, e o **Save** não faz nada até o corrigir. Se deixar o campo vazio, o elemento mantém um ID criado pelo DXPR Builder. O campo vazio mostra-o a cinzento. Use cada ID uma vez por página: quando dois elementos partilham um, as ligações saltam para o primeiro. ### HTML classes A lista contém classes de sombra e classes Bootstrap 5, agrupadas por função, como **Margins**, **Padding**, **Responsive Visibility** e **Rounded Corners**. O seu tema pode acrescentar um grupo próprio no fim. Desloque a lista aberta, ou escreva parte de um nome como padding, py-5 ou circular para a estreitar. Escrever só filtra a lista; para uma classe que não está nela, use **Edit as text**. As classes Bootstrap só funcionam quando a página carrega Bootstrap 5. Vem do seu tema, ou de **General Settings** > **Bootstrap** (`/admin/dxpr_studio/dxpr_builder/settings`), onde **Sideload Bootstrap files** está definido como **Bootstrap 5**. As classes utilitárias Bootstrap, como as classes de cor e espaçamento, estão marcadas como `!important`. Vencem o painel **Style** na mesma propriedade. **Primary background** vence **Background**, e **Top margin size 3 (mt-3)** vence a **Margin** superior. Uma classe com tamanho de ecrã no nome aplica-se a partir dessa largura: | No nome da classe | Aplica-se a partir de | |---|---| | `sm` | 576 px | | `md` | 768 px | | `lg` | 992 px | | `xl` | 1200 px | | `xxl` | 1400 px | Por isso `py-3 py-lg-5` dá 16 px de preenchimento no topo e no fundo em ecrãs mais pequenos, e 48 px a partir de 992 px de largura. ### Para o programador do seu tema Uma classe precisa de uma regra CSS no tema, por exemplo: ```css .brand-card { background: #f4f6fb; border-left: 4px solid #1a4d8f; padding: 2rem; } ``` Para mostrar a classe na lista **HTML classes** aos editores, registe-a no `.info.yml` do tema; veja [Utility classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/classes-utilitarias). Para estilos em todo o site, veja [Custom CSS](/pt-pt/hc/documentacao/aprender-dxpr-builder/personalizacao/css-personalizado). ## Se não o vir - **Save não faz nada e HTML ID diz "ID must start with a letter".** O ID quebra as regras acima. Comece-o com uma letra e use só letras, números, hífenes e sublinhados. - **Não consegue escrever uma classe nova.** A caixa só filtra a lista. Clique primeiro em **Edit as text**. - **Falta na lista uma classe que esperava.** A lista só tem as classes que o DXPR Builder e o seu tema definem. Clique em **Edit as text** e escreva-a. - **O botão não se desloca.** **Link** tem de ser `#` seguido exatamente do HTML ID, com as mesmas maiúsculas. Verifique ambos os campos e teste em **Preview**. - **Uma classe não tem efeito.** O nome está mal escrito, o tema não tem regra para ela, ou o Bootstrap 5 não está carregado. Verifique a ortografia e pergunte ao seu webmaster sobre a regra ou **Sideload Bootstrap files**. - **A classe da sua equipa só muda algumas coisas.** Um valor do painel **Style** na mesma propriedade vence uma classe do tema. Limpe esse valor no painel **Style**. - **O botão salta para o lugar errado.** Dois elementos partilham o ID, e o primeiro ganha. Dê a cada elemento o seu ID. - **O título da secção esconde-se sob o cabeçalho fixo.** O DXPR Builder não reconhece o seu cabeçalho. Um webmaster define **Scroll offset selector** em **General Settings** > **Advanced Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) para o seletor CSS do cabeçalho. ## E a seguir? - [Responsive design](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/design-responsivo): planeie que elementos mostrar em cada tamanho de ecrã.