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 Block Library, logo abaixo da categoria "Other".

O Zero Block mantém todos os recursos regulares de bloqueio - pode ser copiado, removido, excluído e ocultado. Ele tem configurações, mas, em vez de um botão "Content" (Conteúdo), tem um botão "Block Editor" (Editor de blocos). Clique nele se quiser editar o bloco, e o Block Editor será aberto.

O site 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 do navegador.

O contêiner de grade é compatível com a mesma grade do site Tilda- 12colunas (1200 px). Se você alinhar objetos à grade e localizar elementos dentro do Grid Container, 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 Block Editor para adicionar um elemento à página. Você pode adicionar um texto, uma imagem, uma forma, um botão, um vídeo, uma dica de ferramenta, HTML, um formulário, uma galeria ou um vetor.

O site 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 das formas podem ser alterados em todas as direções.

Quando vários elementos são selecionados, eles podem ser alinhados horizontal ou verticalmente entre si ou com o contêiner.

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

Também é possível acessar a lista de atalhos de teclado no menu de contexto do Block Editor.

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

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

Use a linha superior do botão para alinhar um elemento vertical ou horizontalmente ao contêiner rapidamente.

Você pode ver as coordenadas do elemento abaixo. Elas podem ser fornecidas em pixels ou em porcentagem. A seguir, analisaremos esse recurso em detalhes.

A origem é indicada por uma cruz azul.

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

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

Se quiser cortar a imagem em formato de círculo, defina o raio de arredondamento.

Para criar um círculo uniforme, a imagem original deve ter formato quadrado 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, a opacidade, o deslocamento x e y, o grau de desfoque e o espalhamento no painel Configurações do elemento.

Cada imagem pode ter um texto alternativo (alt tag). Os mecanismos de pesquisa interpretam o texto alternativo como palavras-chave e as utilizam para indexar a página. Portanto, certifique-se de que o texto alternativo seja relevante para o conteúdo geral do seu site 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 a outra página. Vá para o painel Settings (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.

Rectangle: altere os comprimentos dos lados 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 como 1-5 px nas configurações do elemento; assim, você criará uma linha.

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

Você pode alterar o tamanho, a cor e o raio de arredondamento do botão. Também é possível adicionar uma sombra e uma borda a ele.

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

Você pode definir o comportamento do botão. Por exemplo, a cor do plano de fundo, a cor do texto e a cor da borda mudarão quando o botão for passado sobre ele.

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

Você pode ajustar a cor, a sombra e o tamanho da dica de ferramenta, definir o ícone exibido dentro do círculo, carregar a 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.

É possível adicionar um formulário horizontal ou vertical a um site 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 de erro, alterar seu design e criar uma animação.

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

Para conectar 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.

Em Zero Block, você pode adicionar uma galeria de imagens. Você pode alterar a largura e a altura da galeria, assim como no elemento Shape.

Vamos verificar as configurações da galeria:

Stretch: Tem dois parâmetros: Cover e Contain.

Para Cover, as imagens preencherão completamente a área da galeria, portanto poderão ser cortadas se seu formato for diferente do da galeria.

Para Contain, as imagens na galeria estarão em seu formato original, portanto não serão cortadas em galerias de qualquer formato.

Position. Define a posição da imagem com relação à área da galeria. Por exemplo, se o parâmetro Left Top for selecionado, a imagem será posicionada com relação ao canto superior esquerdo da galeria.

Loop. Essa configuração faz o loop dos slides (imagens) na galeria. Ela tem dois parâmetros: Loop e None.

Para Loop, os slides da galeria serão repetidos infinitamente, ou seja, o primeiro slide aparecerá após o último.

Para a opção None, não há repetição e a galeria parará no último slide.

Slide Speed define o tipo de animação para a troca de slides. Ela tem três parâmetros: None (Nenhum), Slow (Lento) e Fast (Rápido).

Para a opção None (Nenhum), nenhuma animação é usada quando você troca de slides.

Para a opção Slow (Lento), os slides são trocados lentamente.

Para a opção Fast (Rápido), os slides são trocados rapidamente.

Autoplay (Reprodução automática) define a velocidade da troca automática de slides em segundos.
Se você não especificou o valor em segundos, não haverá troca automática de slides.

A opção Zoomable (Zoomizável ) permite ampliar as imagens da galeria ao clicar. Ela tem dois parâmetros: Zoom on click (Zoom ao clicar) e None (Nenhum).

Para Zoom on click (Zoom ao clicar), as imagens serão ampliadas ao clicar.

Para a opção None (Nenhum), as imagens não serão ampliadas ao clicar.

A guia Arrows (Setas ) inclui configurações que definem a aparência das setas (botões).

A guia Dots (Pontos ) inclui configurações que definem a aparência dos pontos abaixo da galeria. Os pontos exibem o número de slides.

Cada slide (imagem) tem suas próprias configurações:

Aqui, você pode adicionar uma legenda de imagem, uma tag Alt para SEO, incluir um vídeo do YouTube ou do Vimeo, bem como um link para o qual saltar quando você clicar nesse slide.

Tilda é compatível com design responsivo para todos os tipos básicos de tela:
1200-max (desktops)
980-1200 (tablet horizontal)
640-980 (tablet 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 estão destacadas. As configurações que refletem as de outro tipo de tela estão em cinza. Dessa forma, é fácil ver quais configurações foram alteradas.

No exemplo abaixo, o elemento de texto tem todas as suas configurações em cinza. Isso significa que elas são as mesmas para o tipo de tela atual e para o anterior.

Se alterarmos o tamanho da fonte e as coordenadas do elemento 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 contêiner da grade em pixels usando o teclado. Você pode alterar o valor arrastando a borda do contêiner. A largura do contêiner de grade é fixada em 1200px.

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

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

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

Para que um bloco seja exibido ao clicar em um botão ou link, adicione o bloco do modificador T1093 da categoria "Other" (Outros).

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

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

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