ASSINAR

Classe CSS para elementos do site

Uma ferramenta útil para modificar elementos de design no Zero Block
Você pode adicionar um nome de classe CSS para qualquer elemento do Zero Block no menu de contexto. Esse recurso simplifica a edição de elementos: você pode definir uma classe para o título, a imagem, a galeria ou qualquer outro elemento e, em seguida, especificar seu nome em HTML.

Abaixo, você encontrará alguns exemplos e um guia passo a passo sobre como usar o novo recurso.
EXEMPLO # 1
Títulos em gradiente
Novo recurso
Casos
Equipe
Contatos
Desenvolvemos serviços para ajudar as pessoas a administrar seus negócios e aprimorar seus sistemas de gerenciamento
Como fazer
Etapa 1
Criar um design no Zero Block

Etapa 2
  • Clique com o botão direito do mouse no título e selecione Adicionar nome de classe CSS
  • Defina um nome para o estilo, como "gradiente", por exemplo

Etapa 3
  • Adicionar o elemento HTML ao bloco zero
  • Copie o código abaixo e cole-o no elemento HTML usando o botão Editar código

<style>
.gradient {
        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);
}

.gradient .tn-atom {
    display: inline;
}
</style>
Salve as alterações no Zero Block e publique a página

Pronto!
EXEMPLO # 2
Setas personalizadas da galeria
INTERIOR
DESIGN
STUDIO
Vamos tornar sua casa um lugar melhor
Como fazer
Etapa 1
Criar um design no Zero Block

Etapa 2
  • Clique com o botão direito do mouse na galeria e selecione Adicionar nome de classe CSS
  • Defina um nome para o estilo, como "gallery", por exemplo

Etapa 3
  • Adicionar o elemento HTML ao bloco zero
  • Copie o código abaixo e cole-o no elemento HTML usando o botão Editar código

<style>
.gallery .t-null__slds-arrow {
 opacity: 0;
}

.gallery .t-slds__arrow-left {
  background: url('https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg');
}

.gallery .t-slds__arrow-right {
  background: url('https://static.tildacdn.com/tild6262-3932-4634-b166-373237616466/right_custom_arrow.svg');
}

.gallery .t-slds__arrow {
    background-size: 50px 50px;
   background-repeat: no-repeat;
   background-position: center;
 width: 75px !important;
    height: 75px !important;
   left: -40px !important;
}

@media (max-width: 480px) { 
 .t396__elem .t-slds__arrow {
    width: 40px !important;
     height: 40px !important;
    background-size: 30px 30px;
    left: -20px !important;
 }
}
</style>
Salve as alterações no Zero Block e publique a página

. Pronto!
Como carregar suas próprias setas na galeria
Para carregar suas próprias setas na galeria, adicione os links para as imagens das setas esquerda e direita como arquivos SVG ao código HTML. Para fazer isso, carregue as imagens em qualquer serviço de nuvem ou em qualquer página do Tilda. Em seguida, abra a imagem carregada em uma nova guia e copie o link.

Exemplo dos links usados no código acima
Seta esquerda: https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
Seta direita: https://static.tildacdn.com/tild6262 -3932-4634-b166-373237616466 / right_custom_arrow.svg
EXEMPLO # 3
Adição de um efeito de desfoque atrás do texto
CURIOSIDADES
Casos
Equipe
Contatos
O conteúdo de tirar o fôlego começa com sua própria experiência, não apenas explorando os pensamentos dos outros
Pense no texto como um ponto de partida para suas próprias palavras
Etapa 1
Criar um design no Zero Block

Etapa 2
  • Clique com o botão direito do mouse na forma e selecione Adicionar nome de classe CSS
  • Defina um nome para o estilo, como "blur", por exemplo

Etapa 3
  • Adicionar o elemento HTML ao bloco zero
  • Copie o código abaixo e cole-o no elemento HTML usando o botão Editar código

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
Salve as alterações no Zero Block e publique a página

. Pronto!
Há várias maneiras de adicionar código HTML ao Tilda
Se quiser adicionar um código a uma única página, faça isso usando o elemento HTML ou o bloco T123. Se você quiser usar o código em todo o site ou em várias páginas, adicione-o ao cabeçalho.
Defina gradientes complexos para o título, modifique as setas da galeria, os botões e muito mais. Sua criatividade é ilimitada.
Feito em
Tilda