5 de novembro de 2025

Estilos. Um sistema de estilo unificado para seu site

Configure a tipografia, os botões e a paleta de cores do seu projeto em um só lugar. Aplique estilos aos elementos do site com apenas alguns cliques. Se você precisar atualizar o design, basta editar o estilo - todas as alterações serão aplicadas automaticamente em todo o site.

Onde encontrar: Site Settings → Colors and Styles → Manage Styles (Configurações do site → Cores e estilos → Gerenciar estilos)

Como os estilos melhoram seu fluxo de trabalho

  • Criação mais rápida de sites. Você não precisa personalizar cada novo botão ou cabeçalho do zero. Basta selecionar um estilo e todas as configurações de tipografia e aparência serão aplicadas automaticamente.

  • Economia de tempo ao atualizar o design. Imagine que você criou um site e depois decidiu alterar o tamanho, a cor ou a fonte do cabeçalho. Antes, isso poderia levar horas - agora, com os estilos, você pode atualizá-los com alguns cliques diretamente nas configurações do site.

  • Identidade visual consistente. O uso de estilos facilita a manutenção de uma aparência unificada em todas as páginas. Quando os cabeçalhos, o texto e os botões são estilizados de forma consistente, o site tem uma aparência polida e profissional.

O que você pode personalizar usando estilos

Tipografia
Defina a aparência de títulos, subtítulos, corpo do texto e outros elementos de texto. Por exemplo, você pode definir a fonte Tilda Sans, o tamanho da fonte de 36px e a espessura da fonte Bold para todos os títulos do site. Para o corpo do texto, você pode definir um tamanho de fonte menor, de 24px, e escolher a espessura Normal em vez de Negrito.
Como aplicar um estilo de tipografia: Nas configurações do bloco, abra a guia Typography → Styles → escolha um estilo. Ele será aplicado automaticamente ao bloco. Ou clique com Cmd/Ctrl + em qualquer elemento de texto e selecione um estilo no widget de acesso rápido.
Botões
Você pode definir a cor do botão, a borda, o raio, o preenchimento, a sombra e adicionar um ícone. Também é possível configurar um efeito de foco, por exemplo, aumentar a escala do botão ao passar o mouse ou alterar a cor do plano de fundo.
Como aplicar um estilo de botão: No bloco Settings (Configurações), abra a guia Button (Botão) → Styles (Estilos) → escolha um Style (Estilo) para o botão. Ou clique no botão na página e escolha um estilo no widget que aparece.
Tanto a tipografia quanto os estilos de botão suportam configurações responsivas, permitindo que você defina valores diferentes para pontos de interrupção de desktop, tablet e celular (por exemplo, um tamanho de cabeçalho menor no celular).
Cores
Crie uma paleta de cores para manter a linguagem visual consistente em seu website. Por exemplo, o cinza e o bege podem servir como cores primárias, enquanto o rosa pode ser usado como destaque. Dessa forma, você pode aplicar as cores desejadas mais rapidamente, por exemplo, para guias ou capas de páginas.
Como aplicar uma cor da paleta. No bloco Configurações, ao selecionar a cor de um elemento, um widget será aberto. Selecione Project Styles no menu suspenso e escolha a cor desejada.

Exportação e importação de estilos

Você pode fazer download dos estilos do seu projeto e reutilizá-los em outro projeto Tilda.
Para exportar um estilo, em Site Settings → Colors and Styles (Configurações do site → Cores e estilos), clique em Manage Styles (Gerenciar estilos) e escolha Download Styles (Baixar estilos) - você obterá um arquivo .tildastyles com o nome do projeto.
Para importar um estilo, clique em Upload Styles (Carregar estilos) no mesmo menu e selecione um arquivo .tildastyles (outras extensões de arquivo não serão carregadas). Os estilos recém-adicionados aparecerão junto com os existentes.
Gostaríamos muito de ouvir suas impressões sobre o novo recurso - sinta-se à vontade para compartilhá-las nas mídias sociais. Se tiver sugestões de melhorias, entre em contato com nossa equipe de suporte em sua conta ou envie um e-mail para team@tilda.cc
Veja também

Personalize a aparência do questionário, adicione uma mensagem de boas-vindas e avisos de ajuda do consultor virtual e configure os resultados com base nas respostas do usuário

Saiba mais

Transforme elementos agrupados em um único e personalize suas configurações

Saiba mais
Fabricado em
Tilda