Zero Block: Como criar um bloco personalizado

Primeira parte. Como começar.
Zero Block. Editor de design para profissionais
Assista a este tutorial sobre como usar o site Zero Block ou leia o guia abaixo.
Zero Block é um editor profissional integrado que permite realizar qualquer ideia criando blocos personalizados de acordo com suas preferências. Ele é semelhante aos editores de design gráfico populares, mas no site Tilda.
Artigo de visão geral sobre os principais recursos
Trabalhar com contêineres e criar elementos responsivos
Uma lista de todos os atalhos para acelerar seu fluxo de trabalho
Fixação de elementos, paralaxe e animação fade-in
Animação complexa em várias etapas: Princípios básicos, configurações e exemplos

Como configurar uma animação de elemento que é executada quando você clica ou passa o mouse sobre outro elemento

Como você pode importar automaticamente um layout do Figma para o Zero Block

1
Como adicionar um Zero Block
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.
2
Introdução à interface
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.
O contêiner de grade é o espaço de trabalho principal do Block Editor.
3
Como adicionar e editar elementos
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 ou uma galeria.
Você também pode adicionar uma imagem arrastando-a de uma pasta para o espaço do bloco.
Como editar elementos usando um mouse
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.
Para operações com vários elementos, pressione Cmd+A para selecionar todos os elementos ou selecione vários elementos com o mouse enquanto mantém pressionada a tecla Shift.
Quando vários elementos são selecionados, eles podem ser alinhados horizontal ou verticalmente entre si ou com o contêiner.
Como editar elementos usando um teclado
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.
Alterar o tipo de tela
Ocultar a grade
Ocultar as configurações
Ocultar o gerenciamento de elementos
Desfazer a última ação
Salvar
Copiar
Colar
Mover
Excluir
Alterar a opacidade
Bloquear o elemento
Alterar o tamanho da fonte
Alterar o espaçamento entre linhas
Alterar o espaçamento entre letras
Selecionar tudo
Camadas: Hide/Show (Ocultar/Mostrar)
Guides (Guias): Add Horizontal
Guides: Add Vertical
⌘+1...5
G
TAB
F
⌘+Z
⌘+S
⌘+C
⌘+V
(Shift+) ←↑→↓
Backspace
0...9
L
+ / -
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
⌘+L
⌘+H
⌘+Shift+L
(Use Ctrl em vez de ⌘ se for um usuário do Windows)
Também é possível acessar a lista de atalhos de teclado no menu de contexto do Block Editor.
Como editar elementos usando o painel Settings (Configurações)
(Tecla TAB)
1
Texto
Você pode acessar as configurações completas de qualquer elemento clicando em Settings (Configurações) no canto inferior direito da tela.
Você pode abrir ou fechar o painel Configurações pressionando a tecla Tab.
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.
Para alterar o tamanho da fonte, use as teclas -/+.
Você pode alterar o espaçamento entre linhas pressionando Cmd+teclas de seta para cima/para baixo.
Você pode alterar o espaçamento entre letras pressionando
Cmd+teclas de seta para a esquerda/direita.
Para copiar um elemento, arraste-o enquanto mantém pressionada a tecla Alt.
A opacidade é fácil de ajustar usando um teclado:
1-10%
2-20%
...
0- 00%
2
Imagem
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.
3
Forma
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.
4
Botão
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.
5
Dica de ferramenta
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.
Usando uma dica de ferramenta para mostrar os recursos do produto. Foto de SPERA.de.
6
Formulário
É 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.
4
Como criar um design responsivo
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.
5
Configurações da prancheta
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.
Usando o site Zero Block como uma janela pop-up
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.
O índice z define a ordem dos blocos sobrepostos na página. Use valores numéricos personalizados (por exemplo, um bloco com um índice z de 10 sobreporá um bloco com um índice z de 5).
Abordamos as configurações e os recursos básicos do Zero Block. Na segunda parte do tutorial, analisaremos as configurações avançadas relacionadas ao design responsivo.
segunda parte
Design responsivo
Fabricado em
Tilda