Altere o aspeto de um elemento no painel Style.

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.
• 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 e HTML ID and classes.
• 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

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.

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.

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.

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.
• 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: ponha uma fotografia atrás de um título e mantenha-o legível.