Um guia completo para Zero Block

Controle cada elemento. Você pode controlar cada elemento do bloco, incluindo texto, imagem, botão ou fundo. Além disso, você pode decidir sua posição, tamanho e resolução de tela em que eles aparecerão.

Camadas. Esta é uma ferramenta conveniente para criar profundidade com técnicas de sobreposição e opacidade.

Bordas da tela e alinhamento da grade. Cada elemento do site pode ser posicionado em relação à grade de layout ou às bordas da tela.

Resoluções de tela personalizadas. Defina valores de resolução de tela personalizados para que seu layout se adapte perfeitamente a um dispositivo específico. Os pontos de interrupção podem ser definidos em qualquer lugar entre 320 px e 1920 px para controle totalmente responsivo.

Tipografia avançada. Os designers têm total liberdade criativa para criar soluções tipográficas exclusivas.

Guias. Use guias visuais para ter controle preciso sobre seu layout. Você pode configurá-los para aparecerem apenas em resoluções de tela selecionadas, assim você não perderá tempo ocultando-os quando não forem necessários.

Zoom da prancheta de 20 a 300%. Esse intervalo facilita o trabalho com elementos na prancheta. Aumente o zoom para ajustar pequenos detalhes ou diminua para ver a prancheta inteira, por exemplo, quando estiver trabalhando com muitos elementos ao mesmo tempo.

Posicionamento flexível de imagens em formas. Ajuste manualmente qual parte de uma imagem fica visível dentro de uma forma. Isso oferece mais controle sobre o layout do bloco quando as opções de posicionamento padrão não se adequam ao seu design.

Grupos como objetos. Combine vários elementos em grupos para simplificar a configuração de animações, a edição e a rotação de elementos e muito mais.

Opacidade. Defina o nível de opacidade em qualquer elemento e efeitos de sombra abaixo dele. Ajuste todos os parâmetros, como composição ou visibilidade do elemento, para cada resolução de tela.

Placas. Adicione placas coloridas, cartões de conteúdo ou coloque imagens dentro de formas.

Vídeo. Adicione vídeos do YouTube ou Vimeo ao seu site. No Zero Block, você pode ajustar o tamanho e a posição na página.

Adicionar HTML. Adicione qualquer elemento ao Zero Block código HTML e ajuste o posicionamento desses elementos em cada tela.

Dica de ferramenta. Use esta ferramenta interativa para adicionar prompts pop-up curtos. Você pode personalizar a cor, sombra, tamanho, selecionar e carregar um ícone dentro de um círculo ou uma imagem acima do texto.

Formulário de feedback. Adicione campos de entrada e serviços de captura de dados. Defina o estilo do formulário e anime-o.

Editor vetorial. Crie e edite imagens vetoriais diretamente no Zero Block. Usando o editor vetorial do Tilda, você pode criar todos os tipos de formas e editar arquivos SVG importados.

Animação da aparência dos elementos. Anime a maneira como os elementos da web aparecem em uma página, como fade in, zoom in ou deslizar da parte superior, inferior, esquerda ou direita da tela.

Animação passo a passo. Use a animação passo a passo para tornar sua página mais envolvente e dinâmica. Você pode acionar animações ao clicar, rolar, passar o mouse ou quando um elemento aparece na tela. Você também pode ajustar a suavização de cada passo para controlar a fluidez. Escolha a configuração certa e ajuste a suavização com curvas Bézier.

Rolagem paralaxe. Use um efeito de rolagem paralaxe ou crie um efeito paralaxe ao mover o mouse.

Elementos fixos durante a rolagem. Especifique a distância pela qual o elemento deve permanecer fixo e sua localização.
Aplique elementos fixos durante a rolagem. Você pode definir a distância durante a qual o elemento ficará fixo e sua posição. Você também pode tornar todo o Zero Block . Isso permitirá, por exemplo, criar um menu fixo com um layout não padrão de elementos.

Auto Layouts. Simplifique seu fluxo de trabalho automatizando o alinhamento de elementos dentro de um grupo. Os Auto Layouts ajudam você a criar designs mais rapidamente, trocar conteúdo facilmente e adaptar automaticamente os layouts para diferentes dispositivos.

Se você projeta layouts em um editor gráfico antes de fazer qualquer coisa, use Zero Block transferi-los para o seu site como estão. Para isso, Zero Block uma grade de 12 colunas e parâmetros personalizáveis para cada elemento. Isso inclui coordenadas, tamanho, posicionamento em relação à grade ou tela, parâmetros de opacidade e sombra. Use essas ferramentas para recriar seu layout no Zero Block.

Zero Block A interfaceZero Block é semelhante à de um editor gráfico. Basta adicionar os elementos necessários e atribuir-lhes as coordenadas adequadas. É fácil fazer isso no Zero Block, especialmente se você já fez isso antes. Use Zero Block transferir rapidamente sua ideia de um editor gráfico para o seu site sem precisar escrever nenhum código.

Se você estiver criando uma página da web ou uma página de destino e não conseguir encontrar o bloco certo na biblioteca Tilda, o Zero Block será Zero Block . Aqui estão alguns exemplos.

Os sites criados no Tilda geralmente são criados com blocos, para que os visitantes percorram suas seções. Essa é uma tendência de unificação no design da Web em que o conteúdo vem antes do design.

Se você quiser mudar a maneira como os visitantes leem as informações em seu site, o Zero Block é uma ótima ferramenta para isso.

Zero Block muito bem para reunir elementos com bordas irregulares em uma única composição, tornando todas as distâncias visualmente semelhantes.

No Zero Block, usar camadas é muito fácil. Você pode facilmente sobrepor imagens, textos sobre um painel e botões sobre imagens. Crie efeitos adicionais brincando com o posicionamento deles.

Para simplificar as coisas quando se trata de vários elementos, use Camadas. Essa ferramenta permite gerenciar cada elemento — alterar sua posição, ocultá-lo ou bloqueá-lo.

Para abrir o painel Camadas, use estes atalhos de teclado: ⌘+ L ou Ctrl + L (para Macs) ou Ctrl + L (para Windows).

Zero Block os usuários criem composições personalizadas com vários elementos, como textos, imagens, linhas, painéis e botões. Você também pode combinar vários elementos em um único objeto. Por exemplo, você pode criar um cartão de artigo e adicionar um link a ele. Esse tipo de grupo de elementos pode ser animado, espaçado com margens, receber uma sombra e ser personalizado com outras configurações. Para criar um grupo de objetos, selecione vários elementos, agrupe-os e, nas configurações do Grupo, escolha Objeto.

Esta página inicial apresenta os recursos do Tilda que são especialmente úteis para empresas e consiste em blocos contendo vários elementos.

O efeito hover altera a aparência de um elemento quando o usuário passa o mouse sobre ele. Você pode usá-lo como um elemento de design adicional ou como um elemento funcional de um artigo ou infográfico.

Perfeito em situações em que é impossível modificar um bloco pré-concebido da forma que você imagina usando suas configurações.

Se você selecionou um bloco Tilda pronto e deseja fazer algumas alterações nele, use a opção Converter para Zero Block. Isso permitirá que você o edite como se fosse umZero Block. Esta opção está disponível para a maioria dos blocos Tilda.

Vamos dividir esse processo em etapas. Por exemplo, vamos alterar o bloco de preços posicionando ícones fora dos painéis de informações.

Exemplo de um bloco convertido em Zero Block:

Os blocos pré-concebidos da Tilda oferecem várias configurações. Adicione o mais adequado da biblioteca. Abra o painel Configurações e verifique se pode ajustar o modelo para se adequar ao seu objetivo. É possível que não precise Zero Block .

Os exemplos abaixo foram concebidos com os blocos pré-concebidos da Tilda.

No Tilda, você pode especificar os preenchimentos separadamente para desktops e dispositivos móveis.

No Tilda, os blocos pré-concebidos são organizados numa grelha de 12 colunas. Pode definir os recuos como iguais a qualquer número de colunas. Se concebeu o seu bloco no Zero Block ter em conta a grelha, não poderá definir os mesmos recuos para os blocos pré-concebidos (terá de os converter para Zero Block).

Suponhamos que está a alternar blocos pré-concebidos e Zero Blocks no layout do seu site. Embora você possa colocar elementos onde quiser no Zero Block, isso não será possível em blocos pré-projetados. Portanto, é bom ter em mente que os blocos prontos só podem ser posicionados na grade.

Recomendamos usar uma grade ao projetar seu site no Zero Block. Posicione os elementos principais em relação à grade. Dessa forma, seu design pode ser facilmente combinado com todos os outros blocos Tilda.

Selecione um tema de interface preferido para o editor — padrão, claro ou escuro. Você também pode reduzir o tamanho da interface para cada um deles, para que ocupe menos espaço na tela. Onde habilitar: Zero Block clique em “Tab” → Zero Block → Tema.

No Zero Block, você pode adicionar elementos mais complexos do que textos, imagens, formas e botões.

Adicione e configure vídeos do YouTube, Vimeo, Kinescope, iFrame ou carregue um arquivo MP4 ou WebM. Modifique o tamanho e a proporção do vídeo, sua opacidade, crie sombras e aplique animações.

Nas configurações de vídeo, você pode definir a reprodução automática, ativar e desativar o looping, definir a hora de início e término de cada vídeo e carregar sua própria capa.

Adicione qualquer elemento incorporando HTML. Por exemplo, elementos interativos, gravações online, reprodutores de música, calendários, calculadoras e publicações nas redes sociais. Você pode ajustar a posição desses elementos em cada tela.

Uma dica de ferramenta é um prompt interativo que aparece quando o cursor do mouse é posicionado sobre um elemento de um site. Ela pode ser útil se você estiver descrevendo um assunto complexo e quiser descrever suas partes em uma foto. Por exemplo, se você estiver vendendo casas em um empreendimento imobiliário, pode desenhar um mapa e marcar cada edifício nesse mapa.

A dica de ferramenta vem com várias configurações úteis: ajuste a cor, a sombra e o tamanho, carregue um ícone que aparece dentro de um círculo ou carregue uma imagem que aparecerá quando o cursor passar por cima.

Depois de terminar de colocar os elementos/dicas de ferramenta na página, não se esqueça de verificar a posição de cada dica de ferramenta para todas as resoluções. Caso contrário, o prompt correrá o risco de ser cortado na parte superior, inferior ou nas bordas do bloco.

Adicione um formulário online horizontal ou vertical ao Zero Block. Em seguida, personalize todas as configurações, como campos de entrada ou serviços de captura de dados, mensagens de sucesso e erro, estilos de formulário ou animações.

No Zero Block, você pode criar e editar elementos vetoriais. Por exemplo, formas incomuns, ícones ou pequenos elementos desenhados, como sublinhados ou setas. O editor vetorial também é conveniente para refinar elementos SVG importados diretamente no Tilda.

Cada elemento pode receber coordenadas relativas aos quatro lados de uma tela ou grade, opacidade e sombra; você também pode girar elementos ou atribuir um link a eles.

As réguas facilitam o trabalho com elementos de layout. São linhas horizontais na parte superior e linhas verticais na borda esquerda da tela, das quais você pode “puxar” guias. As réguas e guias ajudam a definir o arranjo desejado dos elementos no layout, monitorar recuos e alinhamento e manter tamanhos e proporções constantes dos elementos. Para ativar as réguas, vá para Configurações no Zero Block Mostrar Réguas.

Cada elemento pode receber um tamanho em pixels ou uma porcentagem do tamanho da tela. Por exemplo, se você deseja criar um elemento que ocupe metade da tela, independentemente do seu tamanho, defina sua largura e altura em %, e não em pixels.

Descubra muitas surpresas com Zero Block. Aqui está uma lista de efeitos que você pode usar em seu site.

Use um botão para efeitos de foco no Zero Block. Você pode definir o tamanho que desejar e até mesmo torná-lo redondo ajustando as configurações. Deseja que ele fique visível apenas ao passar o mouse? Então torne-o transparente e, para o foco, selecione 30% de opacidade e qualquer cor.

Posicione o botão sobre os elementos que deseja cobrir com o efeito hover. Podem ser imagens ou texto. Se necessário, atribua um link URL ao botão.

Para bloquear um elemento durante a rolagem, altere as configurações da imagem para Comportamento — Fixo. Esse recurso está disponível para imagens de fundo e imagens dentro de uma forma. Se você aplicar isso a uma imagem dentro de um painel, a imagem será esticada por toda a tela. No entanto, ela só será visível dentro da forma. Se várias formas desse tipo forem usadas em um bloco, a imagem dentro delas será uma continuação de si mesma.

Você pode combinar imagens fixas e imagens estáticas para criar efeitos adicionais e composições incomuns.

Se você deseja que alguns elementos sejam exibidos fora Zero Block sobrepostos aos blocos adjacentes, use o Overflow. Encontre-o no painel Configurações no Zero Block.

No Zero Block, você também pode definir parâmetros diferentes para os eixos X e Y. Isso pode ser útil quando você deseja criar cartões que rolam horizontalmente sem deslocamento vertical.

Se você definir X como“Oculto” e Y como“Visível/Automático”, uma barra de rolagem vertical aparecerá no Zero Block, e o bloco ficará fixo até que todo o conteúdo ao longo do eixo Y seja exibido.

E se você definir X como “Visível/Automático” e Y como “Oculto”, o conteúdo fora da tela no eixo X será exibido na rolagem horizontal.

O Zero Block ser bloqueado na página para que permaneça na parte superior ou inferior da página ao rolar. Isso é útil, por exemplo, para criar um menu fixo com um design personalizado. Para configurar o bloqueio, vá para Configurações → Posição e Excesso.

Você também pode fazer com que o bloco não apareça imediatamente, mas após algumas rolagens (Deslocamento de Aparecimento). Nesse caso, você pode usar uma das duas animações de aparência — Fade In ou Slide Up/Down.

Zero Block cinco resoluções básicas de tela para modificar a capacidade de resposta do seu site: 320px, 480px, 640px, 960px e 1200px. Você pode ampliar esse intervalo adicionando pontos de interrupção. Os pontos de interrupção permitem que você obtenha o layout perfeito para todos os elementos do site em resoluções específicas. A configuração flexível pode ser útil, por exemplo, quando os usuários visitam o site em dispositivos com resoluções de tela irregulares.

Ao projetar Zero Block, é essencial testar como o site aparece em todas as telas. Você pode fazer isso diretamente no Zero Block na imagem do dispositivo correspondente.

Zero Block projetado para que cada elemento em cada tela possa ser personalizado individualmente. Quando você altera a composição ou o conteúdo em um deles, o bloco pode parecer diferente em telas com resolução mais baixa devido às diferenças no comprimento da linha ou no tamanho do elemento.

Ao criar um Zero Block zero, lembre-se de personalizar manualmente os layouts para cada resolução. Tenha isso em mente antes de publicar o site.

Se todo o seu site for projetado no Zero Block, é mais conveniente dividi-lo em blocos separados. Dessa forma, você pode desativar blocos para telas de baixa resolução ou desativá-los temporariamente para todo o site.

Se você usar muitos detalhes em uma tela grande, poderá tornar o layout mais simples e conciso em telas com resolução mais baixa para facilitar a percepção.

Aqui está um exemplo de uma composição visual única para cada tamanho de tela:

Se você não gosta do design adaptável e deseja começar do zero, pode limpar as configurações dos elementos para resoluções de tela mais baixas. Para fazer isso, selecione um ou mais elementos → clique com o botão direito do mouse para abrir o menu de contexto → Limpar design adaptável.

Os layouts automáticos no Zero Block uma técnica de design que permite criar layouts rapidamente, alterar o conteúdo e adaptar o design a diferentes resoluções de tela. É conveniente para criar elementos como cartões, botões com vários elementos, itens de menu e outros. Consulte o guia para configurar o layout automático na Central de Ajuda.

Os layouts automáticos controlam o posicionamento dos elementos em um grupo em relação uns aos outros. Depois que a direção e as distâncias são definidas, eles se alinham automaticamente de acordo com essas regras, independentemente das alterações no conteúdo do grupo. Por exemplo, se você precisar adicionar outra imagem a um grupo ao criar uma galeria, ela se “encaixará” de acordo com as regras especificadas — você não precisará mover outros elementos do grupo manualmente.

Confira o tutorial sobre como usar layouts automáticos:

Você pode animar cada elemento conforme ele aparece no site Zero Block. Há seis tipos de animações:

Cada tipo de animação inclui suas próprias configurações. Vamos dar uma olhada nelas.

A duração é o tempo da animação em segundos. Quanto maior o valor, mais lenta será a animação.

A distância é o espaço entre a posição inicial de um elemento animado e sua posição final. Ela é especificada apenas para animações em que os objetos aparecem pelas laterais.

A escala é o tamanho de um elemento no início da animação como uma porcentagem do tamanho original. Esse parâmetro é definido quando ocorre um aumento ou uma redução da escala. Se o valor for maior que 100, o elemento será maior desde o início e será reduzido ao seu tamanho original. Se o valor for menor que 100, o elemento será ampliado até sua escala original.

O atraso é o atraso na reprodução da animação, em segundos. Se o valor for 0, a animação começará assim que o bloco aparecer na página.

Quando você deve usar o atraso? Ele pode ser útil se outro objeto se sobrepor ou cruzar um elemento significativo. Se houver vários objetos animados em uma página, atribua configurações de atraso diferentes a cada elemento. Isso permite que você direcione o olhar do espectador, levando-o de um elemento para o outro.

O deslocamento do gatilho é a distância, medida em pixels, a partir da borda inferior da tela onde o elemento aparece na página. Por padrão, a animação começa assim que o elemento cruza a linha inferior da página. Se você quiser atrasar a animação até que o elemento fique visível para o visualizador (e não na parte inferior da página), defina a distância da borda inferior na qual a animação começará. Se o objeto estiver inicialmente localizado a uma distância menor do que o valor deste parâmetro, ele não ficará visível até que o usuário role a página para baixo.

Depois de definir os parâmetros necessários, verifique a animação diretamente no editor. Para ver o elemento animado em ação, clique em “Reproduzir elemento” para um único elemento e em “Reproduzir tudo” para vários elementos e ver como eles funcionam juntos.

Com a animação passo a passo, você pode atribuir etapas de transformação sequenciais a qualquer elemento da página e permitir que os visitantes interajam com eles.

Para adicionar uma animação passo a passo a um elemento no Zero Block, selecione o elemento, abra suas configurações e navegue até a seção Animação passo a passo (localizada no final das configurações do elemento).

Os elementos aparecem e se movem quando o visitante rola a página para cima ou para baixo.

Todos os exemplos de animação abaixo estão disponíveis como modelos, para que você possa adicioná-los aos seus projetos e usá-los como quiser.

Exemplos de animação ao rolar:

Este tipo de animação é acionado quando um elemento aparece na tela.

Elemento na tela — a animação é acionada quando um elemento cruza a parte inferior do navegador e aparece na página da web.

Bloco na tela — a animação é acionada quando um Zero Block o elemento cruza a parte inferior do navegador e aparece na página da web.

Esse tipo de animação é acionado quando um visitante passa o mouse sobre um elemento.

Esse tipo de animação é acionado quando um visitante clica no elemento.

Cada tipo de animação tem configurações adicionais:

O Start Trigger (Gatilho inicial) é um evento que aciona a animação. Escolha entre Window Top (Parte superior da janela), Window Center (Centro da janela) e Window Bottom (Parte inferior da janela).
O gatilho Window Bottom (Parte inferior da janela) é definido como padrão; a animação começará assim que cruzar a parte inferior do navegador.

O Trigger Offset (Desvio do gatilho) é a distância em pixels do Start Trigger (Gatilho inicial) selecionado. A animação começa assim que essa distância é percorrida.

O Loop (Repetição) é um parâmetro que permite repetir etapas específicas indefinidamente. Você pode repetir a animação um número infinito de vezes (defina Loop com Reverse) ou reproduzir a animação apenas uma vez (defina Loop Once).

Easing define a suavidade da animação. No Tilda, você pode escolher um dos 29 tipos de suavização que afetarão a exibição da animação configurada. O tipo de suavização selecionado pode ser alterado usando as curvas Bézier.

Você pode testar a animação resultante usando os botões Play Element (ver a animação do elemento selecionado) / Play All (reproduzir a animação de todos os elementos no bloco). Esta opção está disponível para todos os tipos de animação, exceto animação em rolagem.

Por conveniência, você pode trabalhar na animação em duas guias do navegador: edite o Zero Block uma e abra a visualização da página na outra. Isso permite que você verifique rapidamente o resultado sem sair Zero Block. Antes de testar o resultado, não se esqueça de salvar suas alterações no Zero Block atualizar a página de visualização.

Ao usar a animação passo a passo, você pode adicionar etapas e personalizar as propriedades de cada uma delas. Isso acionará alterações nos parâmetros de cada elemento selecionado em sua página da web. Crie uma trajetória e movimentos para seus elementos na página com base em várias etapas.

Para alterar o estado inicial de um elemento — se você quiser que ele fique invisível no início, por exemplo, defina a opacidade como 0 e a duração como 0 segundos ou 0 pixels (para animação ao rolar).

Usando as configurações de etapa, você pode alterar as propriedades do elemento ao qual a animação é aplicada.

Você pode definir a posição (Mover), o tamanho (Escala), a transparência (Opacidade) do elemento e o ângulo de rotação do elemento (Girar).

Paralaxe ao rolar. Quando você aplica essa animação a um elemento, sua velocidade de movimento será diferente da velocidade de outros elementos ao rolar a página. Nas configurações, você pode definir sua velocidade de movimento — em uma velocidade baixa de 0 a 100, ele se moverá mais lentamente do que a rolagem; em uma velocidade alta de 100 a 200, ele se moverá muito mais rápido.

Paralaxe ao mover o mouse. Um elemento com este tipo de animação se move na direção oposta ao movimento do cursor. Sua amplitude de movimento vertical e horizontal pode ser definida nas configurações.

Esse tipo de animação permite bloquear elementos durante a rolagem. Nas configurações, você pode especificar a distância dentro da qual os elementos permanecem fixos em uma posição específica (o bloqueio ocorre apenas dentro do bloco). Após rolar até a distância especificada, o elemento não ficará mais fixo e será rolado junto com outros elementos da página.

As configurações também permitem especificar o que acionará o bloqueio: a borda superior da janela, a borda inferior ou o centro. O deslocamento do acionador permite controlar a distância da borda da janela, garantindo que o elemento não fique preso a ela. Também é útil quando você deseja bloquear vários elementos ao mesmo tempo a uma certa distância uns dos outros.

Se você usar animação em seu projeto, não sobrecarregue a página com muitos efeitos; geralmente, é suficiente animar 20 a 30% do conteúdo. Animações excessivas parecem intrusivas e irritantes, além de reduzirem a velocidade de carregamento da página.

Se você estiver criando um bloco do zero, vale a pena projetar toda a página primeiro para ver como esse bloco se compara aos outros. Depois de fazer isso, não se esqueça de configurar suas definições de adaptabilidade. Se você estiver traduzindo texto no Zero Block simplesmente alterando-o, verifique como ele fica em todas as versões da tela, mesmo que tudo pareça bom na primeira tela. Devido aos diferentes tamanhos de fonte e ao comprimento da linha, o texto pode parecer diferente em telas diferentes.

Se você deseja que dois elementos permaneçam na mesma posição em relação um ao outro, independentemente da resolução da tela, defina o posicionamento dos elementos como Grid Container ou Window Container.

Saiba mais sobre como configurar o posicionamento dos elementos na Central de Ajuda:

Se você estiver posicionando o texto em relação à grade e quiser que ele permaneça sempre dentro da tela, certifique-se de que seu contêiner não ultrapasse a área da grade. Criar um layout organizado é um bom hábito: assim, você evitará surpresas desagradáveis quando o bloco for publicado.

Use Zero Block criar sites impressionantes e soluções tipográficas inovadoras. É uma ferramenta útil para suas soluções de design. Adicione personalidade ao seu site com efeitos especiais, tipografia e design inovador. Agora está tudo em suas mãos!