Como definir cores e estilos em todo o site para botões, textos, cabeçalhos e links
As cores e os estilos são especificados nas configurações do site e são aplicados a todas as páginas. Graças aos estilos, é mais fácil manter a consistência no design do site e seguir a identidade aprovada pelo designer.
Para definir as cores e os estilos do site, vá para "Site Settings" (Configurações do site) e clique na guia "Colors and Styles" (Cores e estilos).
Para definir uma cor para todos os cabeçalhos, textos, links ou para o plano de fundo da página em todo o site, clique no campo necessário e selecione manualmente uma cor em um dos três formatos ou insira um código de cor diretamente.
A cor pode ser especificada em três formatos: HEX, RGB, HSL.
Para alterar o estilo de todos os links no site, clique no link "Additional settings" (Configurações adicionais). Nas configurações, especifique a largura e a cor do sublinhado, bem como os estilos de link ao passar o mouse.
Configurações de estilo
Para criar sua própria biblioteca de estilos para o projeto, clique no botão "Manage Styles" (Gerenciar estilos).
No painel de gerenciamento de estilo, você pode adicionar cor, estilo de tipografia e um botão. Você também pode fazer download dos estilos criados e importá-los para outro projeto seu.
Adição de estilos
Para adicionar um novo estilo ao projeto, clique em "Manage Styles" (Gerenciar estilos) e selecione uma das opções: Create Color Style (Criar estilo de cor), Create Typography Style (Criar estilo de tipografia) ou Create Button Style (Criar estilo de botão).
Se você já tiver estilos e quiser adicionar outro, clique no ícone de adição ao lado da opção "Color" (Cor), "Typography" (Tipografia) ou "Button" (Botão) para adicionar um novo. O novo estilo aparecerá ao lado do anterior.
Para editar um estilo, clique nele.
Edição de estilos
Cor. Ao criar um estilo de cor, especifique um nome e uma descrição que serão exibidos em Project Styles (Estilos de projeto).
Tipografia. Ao criar um estilo de tipografia, estão disponíveis configurações de cor para o texto, tamanho da fonte para diferentes resoluções de tela, tipo de fonte, peso e outras configurações de fonte.
Na parte superior do editor de estilo de tipografia, uma fonte pode ser visualizada. Para ver como a fonte é exibida em um dispositivo móvel, selecione o intervalo necessário no painel de configurações de pontos de interrupção.
Para editar os pontos de interrupção, clique no ícone de engrenagem, e um menu com dispositivos padrão será aberto.
Botão. Ao criar um estilo de botão, você também pode escolher a exibição de um ícone ou a quebra de texto. Você também pode definir configurações de tipografia, estilo ao passar o mouse e outras configurações básicas.
O estilo do botão também pode ser visualizado em diferentes dispositivos e os pontos de interrupção podem ser editados.
Uso de estilos
Cor. Para usar o estilo de cor criado, clique em qualquer elemento no qual você deseja especificar a cor e, no editor, selecione Project Styles (Estilos de projeto).
Selecione o estilo necessário, e ele será aplicado automaticamente ao bloco. O campo com a cor especificada exibirá o nome do seu estilo, bem como um ícone indicando que o estilo de cor do projeto foi aplicado ao campo.
Tipografia. Para usar o estilo de tipografia criado, nas configurações do bloco, selecione a guia "Typography" (Tipografia) e clique em "Styles" (Estilos).
No menu de contexto, clique no estilo desejado e ele será automaticamente aplicado ao bloco. Para acessar as configurações de estilo, clique em Go to Style Library (Ir para a biblioteca de estilos).
Se nenhuma descrição for especificada para o estilo, suas configurações serão exibidas: Nome da fonte, tamanho e espaçamento entre linhas.
O estilo de tipografia pode ser aplicado em qualquer bloco em que sejam usados elementos de texto. Não é necessário que essa seja a guia "Typography" nas configurações do bloco.
Após aplicar estilos para tipografia, somente as opções que não foram especificadas para esse estilo serão exibidas nas configurações. Depois de editar essas opções, as alterações serão aplicadas somente ao bloco atual e não afetarão o estilo de tipografia definido no projeto.
Importante: Se uma configuração não foi especificada no estilo aplicado e você a especificou diretamente no bloco, ocorrerá um conflito se você adicionar posteriormente a mesma configuração com o mesmo ou outros valores ao mesmo estilo. Nesse caso, a configuração especificada no bloco terá precedência.
Se um estilo for desconectado do bloco, todos os campos de configuração do elemento de texto serão preenchidos com os valores especificados para o estilo aplicado anteriormente.
Botão. Para usar o estilo de botão criado, nas configurações do bloco, selecione a guia "Button" (Botão) e clique em "Styles" (Estilos) ao lado das predefinições.
No menu de contexto, clique no estilo de que você precisa, e ele também será aplicado automaticamente.
Como antes, nas configurações do botão, serão exibidas apenas as configurações que não foram especificadas no próprio estilo. Você pode editá-las ou mantê-las inalteradas.
Para adicionar um ícone ao botão, vá até o "Conteúdo" do bloco.
Ao lado do botão, aparecerá um local para o ícone. Clique nele para adicionar um ícone. Um menu será aberto com opções de ícones disponíveis: Setas, emojis, ícones Tilda , The Noun Project e a opção de carregar seus próprios arquivos de ícones.
Para alterar a exibição do ícone ao passar o mouse sobre o botão, clique na opção "Add Icon on Hover" (Adicionar ícone ao passar o mouse).
Selecione um ícone e salve as alterações.
Para excluir um ícone, clique em sua imagem ao lado do texto do botão. Selecione a guia "Icon" (Ícone) e clique na lixeira. Salve as alterações e o ícone desaparecerá.
Se precisar editar algum estilo depois de aplicá-lo no bloco, vá para Site Settings (Configurações do site), selecione a guia "Colors and Styles" (Cores e estilos) e edite o estilo. Não se esqueça de salvar as configurações do projeto e republicá-lo para que as alterações sejam aplicadas.
Nos blocos em que o estilo tiver sido usado, as alterações de estilo serão aplicadas automaticamente. Não há necessidade de editar ou reatribuir o estilo no bloco.
No bloco, você pode combinar o estilo de cor e o estilo de tipografia/botão no mesmo elemento. Por exemplo, se o estilo de tipografia não especificar uma cor de texto, você poderá atribuir esse estilo nas configurações do bloco e definir o estilo de cor para a cor.
Importação, exportação e exclusão de estilos do projeto
Para fazer o download do estilo do projeto, clique no botão Manage Styles (Gerenciar estilos) e selecione a opção necessária. Um arquivo com o nome do projeto e a extensão .tildastyles será baixado em seu dispositivo.
Você só pode usar um arquivo com a extensão .tildastyles para carregá-lo no projeto Styles; outros arquivos não podem ser usados.
Para carregar um estilo, selecione também a opção correspondente no menu de contexto. Os novos estilos serão adicionados aos estilos criados anteriormente no projeto. Os estilos criados anteriormente no projeto não serão excluídos ou atualizados.
Você pode carregar o Style somente em outro projeto Tilda ou em seu próprio projeto novamente. Não é possível editar e alterar arquivos .tildastyles manualmente.
Se você excluir um estilo do projeto e depois salvar as configurações, o estilo ainda será aplicado às configurações do bloco nas próximas duas semanas. Uma notificação aparecerá nos blocos em que o estilo foi aplicado anteriormente.
Em duas semanas, o estilo será completamente excluído do projeto e as configurações do bloco serão redefinidas.
Transferindo a página com estilos para outro projeto
Se você adicionou estilos a uma página em um projeto e precisa transferir a mesma página para outro projeto na conta atual ou em outra conta, a página será transferida juntamente com os estilos.
Durante a transferência, os estilos serão copiados para o novo projeto para que os blocos sejam exibidos corretamente.
Leia este guia para saber mais sobre como transferir uma página para outro projeto na conta atual ou em outra conta.
O limite total para a criação de estilos de todos os tipos no projeto é de 500.
Ao tentar transferir uma ou mais páginas com estilos para um projeto dentro da mesma conta em que o limite de estilos foi ou será atingido, uma notificação sobre um erro será exibida. Para concluir a transferência da página, você precisa excluir estilos extras em outro projeto.
Ao transferir uma ou mais páginas com estilos para um projeto em outra conta onde o limite foi atingido, as páginas não serão transferidas. Ao clicar em Aceitar, aparecerá uma notificação informando que o limite foi excedido e que você precisa excluir os estilos extras.