Ligue a secções e reutilize estilos com classes.

Aprender DXPR BuilderCriar páginasEstilizar os elementos

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.
  • 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.

Painel General de um Button com o Title See our programmes e o Link #programmes, ao lado desse botão na página

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.

Campo HTML classes de um elemento de texto com a amostra Hidden on extra small devices, phones (<576px), ao lado da caixa cinzenta Plan your visit, ainda mostrada à largura de computador

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.

HTML classes no modo Edit as text, um campo simples com brand-card py-3 py-lg-5, ao lado da caixa cinzenta Partner with us com o preenchimento da classe por cima e por baixo do texto

O que vê

Painel General de Section com HTML ID open-day e três amostras de classe, ao lado dessa secção com fundo cinzento e texto centrado

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.

A lista HTML classes filtrada pela palavra padding, a mostrar o grupo Padding com Padding size 1 a 5 e No padding, ao lado do texto Course fees que vai estilizar

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:

.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. Para estilos em todo o site, veja Custom CSS.

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?