ASSINAR
25 DE FEVEREIRO DE 2022
Classe CSS para blocos
Agora você pode atribuir uma classe CSS a blocos no painel Settings (Configurações). Esse recurso simplifica a edição de blocos: Você pode definir uma classe para o bloco e, em seguida, especificar seu título em HTML.

A seguir, você encontrará alguns exemplos e um guia passo a passo sobre como usar o novo recurso.
Exemplo nº 1
Títulos em gradiente
SOBRE NÓS
A Renner Yoga oferece aulas de ioga exclusivas para pessoas de todos os níveis de habilidade. Apresentaremos a você um novo modo de vida e sentimentos.

Bloco AB501

Como fazer
Etapa 1
Adicione um bloco com um título, por exemplo, AB501.

Etapa 2
  • Abra as configurações do bloco e selecione Add CSS class name (Adicionar nome de classe CSS);
  • Defina um nome para o estilo, por exemplo, "uc-about".

Etapa 3
  • Adicione um bloco T123 ("Embed HTML Code");
  • Copie o código abaixo e cole-o no bloco T123.

<style>
.uc-about .t-title {
        background: linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        background: -webkit-linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}
</style>
→ Salve as alterações e publique a página.

Pronto!
Exemplo nº 2
Imagens com cantos arredondados
Algumas palavras sobre nós
Somos um estúdio de design de interiores sediado no País de Gales. Trabalhamos com três estilos de design contemporâneo: minimalismo funcional, ecológico e modernista nouveau. Temos um banco de dados de designers e arquitetos dentro e fora da empresa.

Bloco AB903

Como fazer
Etapa 1
Adicione um bloco com a foto, por exemplo, AB903.

Etapa 2
  • Abra as configurações do bloco e selecione Add CSS class name (Adicionar nome de classe CSS);
  • Defina um nome para o estilo, por exemplo, "uc-about".

Etapa 3
  • Adicione um bloco T123 ("Embed HTML Code");
  • Copie o código abaixo e cole-o no bloco T123.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Salve as alterações e publique a página.

Pronto!
Exemplo nº 3
Efeito Hover para botões
Exemplo nº 3
Efeito Hover para botões
Somente para versões desktop
Passe o mouse sobre o botão
Alta qualidade
Somos uma empresa líder no fornecimento de qualidade e valor aos nossos clientes. Cada membro de nossa equipe tem pelo menos 5 anos de experiência jurídica. Gostamos do que fazemos.
Saiba mais
Bom suporte
Nossos gerentes estão sempre prontos para responder às suas perguntas. Você pode entrar em contato conosco nos finais de semana e à noite. Você também pode visitar nosso escritório para uma consulta pessoal.
Saiba mais

Bloco FR301

Como fazer
Etapa 1
Adicione um bloco com um botão, por exemplo, FR301.

Etapa 2
  • Abra as configurações do bloco e vá para a guia "Button" (Botão);
  • Defina a cor inicial do texto do botão em Text Color (Cor do texto). Não é necessário especificar a cor da borda e do plano de fundo;
  • Clique em "Add CSS Class Name" (Adicionar nome de classe CSS) e defina um nome para o estilo, por exemplo, "uc-about".

Etapa 3
  • Adicione um bloco T123 ("Embed HTML Code");
  • Copie o código abaixo e cole-o no bloco T123.

<style> 
.uc-features .t-btn { 
    box-shadow: inset 0 0 0 2px #1f5bff; 
    position: relative; 
    transition: color 0.25s; 
    box-sizing: border-box; 
} 
 
.uc-features .t-btn::before, 
.uc-features .t-btn::after { 
    content: ''; 
    position: absolute; 
    border: 2px solid transparent; 
    width: 0; 
    height: 0; 
    top: 0; 
    left: 0; 
    box-sizing: inherit; 
} 
 
.uc-features .t-btn:hover { 
    color: #60daaa !important; 
} 
 
.uc-features .t-btn:hover::before, 
.uc-features .t-btn:hover::after { 
    width: 100%; 
    height: 100%; 
} 
 
.uc-features .t-btn:hover::before { 
    border-top-color: #60daaa; 
    border-right-color: #60daaa; 
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s; 
} 
 
.uc-features .t-btn:hover::after { 
    border-bottom-color: #60daaa; 
    border-left-color: #60daaa; 
    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s; 
} 
</style>
→ Salve as alterações e publique a página.

Pronto!
Observe que a modificação do código é recomendada apenas para usuários com experiência em CSS. A Tilda não oferece suporte para problemas relacionados a códigos de terceiros.
Feito em
Tilda