Zero Block: Como criar um bloco personalizado

Para adicionar um Zero Block à página, clique em Zero na parte inferior da página. Você também pode encontrá-lo na parte inferior da Biblioteca de blocos, logo abaixo da categoria "Outros".

Um Zero Block mantém todos os recursos de bloqueio regulares — ele pode ser copiado, removido, excluído e oculto. Ele tem configurações, mas em vez de um botão "Conteúdo", ele tem um botão "Editor de bloco". Clique nele se quiser editar o bloco e o Editor de Blocos será aberto.

Um Zero Block tem dois espaços de trabalho ou contêineres: o Contêiner de Grade e o Contêiner de Janela, que indicam os limites da tela de um navegador.

O contêiner de grade oferece suporte à mesma grade que Tilda — 12 colunas (1200 px). Se você alinhar objetos à grade e localizar elementos dentro do Contêiner de Grade, eles sempre permanecerão dentro dos limites de 12 colunas, independentemente do tamanho da tela.

Clique no botão de adição no canto superior esquerdo do Editor de bloco para adicionar um elemento à página. Você pode adicionar texto, imagem, forma, botão, vídeo, dica de ferramenta, HTML, formulário ou galeria.

Um Zero Block suporta todas as manipulações básicas do mouse: os elementos podem ser movidos, redimensionados, copiados (mantendo pressionada a tecla Alt) e vários elementos podem ser selecionados.

Você pode redimensionar um elemento de imagem sem alterar suas proporções.

A altura dos elementos de texto muda automaticamente dependendo do volume do texto.

Os tamanhos dos botões e formas podem ser alterados em todas as direções.

Quando vários elementos são selecionados, eles podem ser alinhados horizontal ou verticalmente uns aos outros ou ao contêiner.

A edição de elementos de bloco usando um teclado acelera consideravelmente o processo de trabalho, por isso recomendamos o uso de teclas de atalho.

Você também pode acessar a lista de atalhos de teclado no menu de contexto do Editor de blocos.

Você pode acessar as configurações completas de qualquer elemento clicando em Configurações no canto inferior direito da tela.

Por padrão, o painel Configurações fica oculto para manter o espaço de trabalho limpo.

Use a linha de botões superior para alinhar um elemento vertical ou horizontalmente ao contêiner rapidamente.

Você pode ver as coordenadas do elemento abaixo. Eles podem ser dados em pixels ou por cento. Abaixo, estamos revisando esse recurso em detalhes.

A origem é indicada com uma cruz azul.

Você também pode visualizar os parâmetros do elemento: largura e altura, medidos em pixels.

Quando você carrega uma imagem, ela assume o tamanho do quadro em que foi carregada. Clique em Tamanho original no painel Configurações do elemento para redefinir a imagem para seu tamanho original.

Se você deseja recortar a imagem em forma de círculo, defina o raio de arredondamento.

Para fazer um círculo uniforme, a imagem original deve ser de forma quadrada e o raio de arredondamento deve ser igual à metade do lado. Por exemplo, se o tamanho da imagem for 100×100 px, defina um raio igual a 50.

Você pode adicionar uma sombra à imagem. Para fazer isso, selecione a cor da sombra, opacidade, deslocamento xey, grau de desfoque e espalhamento no painel Configurações do elemento.

Cada imagem pode ter um texto alternativo (tag alt). Os mecanismos de pesquisa interpretam o texto alternativo como palavras-chave e os usam para indexar a página, portanto, certifique-se de que o texto alternativo seja relevante para o conteúdo do seu site em geral e reflita o conteúdo da imagem.

Qualquer imagem pode ser transformada em um link para que, quando o usuário clicar nela, seja levado para outra página. Vá para o painel Configurações do elemento e especifique o link e se ele deve ser aberto na mesma janela ou em uma nova.

Quando você adiciona uma forma, um quadrado aparece na página, que pode ser transformado em um retângulo, um círculo ou uma linha.

Retângulo: altere os comprimentos laterais arrastando os pontos de controle.

Ou especifique os valores nas configurações do elemento.

Círculo. Para fazer um círculo, defina um raio de arredondamento igual à metade do comprimento do lado do quadrado.

Linha. Defina a altura do retângulo para 1-5 px nas configurações do elemento; assim, você fará uma linha.

As formas podem ter uma sombra, uma borda e um link atribuído a elas.

Você pode alterar o tamanho, a cor e o raio de arredondamento do botão. Você também pode adicionar uma sombra e uma borda a ela.

Você pode definir a legenda e o link do botão no painel Configurações do elemento. Lá você também pode definir seu tamanho, tipo, opacidade e cor da fonte.

Você pode definir o comportamento do botão. Por exemplo, a cor de fundo, a cor do texto e a cor da borda mudarão quando o botão passar o mouse.

A dica de ferramenta é um elemento de bloco interativo que exibe uma dica de texto e/ou uma imagem quando você passa o ponteiro sobre ela.

Você pode ajustar a cor, sombra, tamanho da dica de ferramenta, definir o ícone exibido dentro do círculo, fazer upload da imagem que aparecerá quando você passar o ponteiro sobre ela e criar uma animação.

Certifique-se de verificar a localização da dica de ferramenta em todas as resoluções de tela depois de organizar os elementos no bloco para que a dica de ferramenta não seja cortada nas bordas do bloco.

Você pode adicionar um formulário horizontal ou vertical a um Zero Block. Você terá acesso a todas as configurações básicas do formulário, como adicionar campos de entrada, conectar serviços de captura de dados, configurar mensagens de sucesso e erro, alterar seu design e criar uma animação.

Para editar os campos de entrada, vá para o painel Configurações do elemento e clique em Campos de entrada. Aqui você pode personalizar os campos de entrada como em um bloco de formulário regular.

Para conectar os serviços de captura de dados ao formulário, acesse o painel Configurações do elemento e clique em Serviços. Lá você pode conectar os serviços de captura de dados ao formulário.

Tilda suporta design responsivo para todos os tipos de tela básicos:
1200—max (desktops)
980—1200 (tablet horizontal)
640—980 (comprimido vertical)
480—640 (smartphone horizontal)
320—480 (smartphone vertical)

Isso é suficiente para que seu design seja exibido corretamente em todos os dispositivos.

Depois de personalizar um Zero Block na prancheta principal, alterne os tipos de tela e faça ajustes quando necessário, como largura da coluna de texto, tamanho da imagem, tamanho da fonte, altura da prancheta ou layout do elemento.

As configurações que foram alteradas para um determinado tipo de tela são realçadas. As configurações que espelham as de outro tipo de tela são cinza. Dessa forma, é fácil ver quais configurações foram alteradas.

No exemplo abaixo, o elemento de texto está com todas as suas configurações em cinza. Isso significa que eles são os mesmos para o tipo de tela atual e para o anterior.

Se mudarmos o tamanho da fonte e as coordenadas dos elementos para um determinado tipo de tela, os valores não serão mais coloridos em cinza. Isso significa que as novas configurações são exclusivas para esse tipo de tela.

Se você clicar em um espaço vazio, verá as configurações da prancheta.

Você pode especificar a altura do Grid Container em pixels usando o teclado. Você pode alterar o valor arrastando a borda do contêiner. A largura do Grid Container é fixada em 1200px.

Você pode personalizar a cor de fundo de todo o bloco nas configurações da prancheta.

Você pode fazer upload de uma imagem de plano de fundo para todo o bloco nas configurações da prancheta.

Você também pode personalizar a renderização da imagem de plano de fundo (Início do Filtro/Fim do Filtro) e o comportamento do conteúdo em relação à imagem de plano de fundo: se você definir um valor "Fixo", o conteúdo (texto e formas) será movido durante a rolagem, enquanto a imagem permanecerá no lugar.

Para que um bloco apareça clicando em um botão ou link, adicione o bloco modificador T1093 da categoria "Outro".

Na guia Conteúdo do bloco, especifique o ID do Zero Block que você precisa (ou escolha-o manualmente clicando no link "Escolher Zero Block"). Por padrão, o link para pop-up é o link #zeropopup, você pode alterar isso para qualquer nome que quiser, mas deve manter o sinal de hash no início. Em seguida, o bloco funcionará como um pop-up habitual e ficará oculto na página.

Leia mais sobre como os blocos pop-up funcionam no artigo "Pop-ups ".

Nas configurações do bloco T1093 você pode selecionar os parâmetros de fundo (cor, opacidade), cor do ícone de fechamento, velocidade de animação,
seu próprio índice Z e outros parâmetros.