ASSINAR
FEVEREIRO 25, 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.
Fabricado em
Tilda