Como criar seu próprio design usando nosso editor de web design Zero Block

Controle cada elemento. Você pode controlar todos os elementos do bloco, como texto, imagem, botão ou plano de fundo. Decida a posição, o tamanho e a resolução de tela em que eles serão exibidos.

Camadas. Essa é uma ferramenta conveniente para criar profundidade com técnicas de sobreposição e opacidade. Cada elemento do site pode ser posicionado em relação à grade ou às bordas de uma tela.

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

Transparência. Defina um nível de transparência em qualquer elemento e efeitos de sombra abaixo deles, ajuste a adaptabilidade. Altere todos os parâmetros, como composição, conjunto de elementos visíveis, dependendo da resolução da tela.

Painéis. Adicione painéis coloridos, cartões de conteúdo ou carregue imagens dentro de formas geométricas.

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

Adição de HTML. Adicione qualquer elemento ao Zero Block inserindo código HTML (use seu próprio código ou widgets IFrame que permitem inserir conteúdo de provedores de terceiros). Ajuste o posicionamento desses elementos em cada tela.

Dica de ferramenta. Use essa ferramenta interativa para adicionar avisos pop-up curtos. Você pode alterar as configurações, como cor, sombra, tamanho, carregar um ícone dentro de um círculo ou uma imagem acima do texto.

Formulário de feeback. Adicione campos de entrada, integrações de captura de dados, defina o estilo do formulário e anime-o.

Animação de elementos de páginas da Web. Adicione animação quando os elementos da Web aparecerem em uma página: opacidade, aumento de escala, quando os elementos são exibidos por baixo, por cima, à esquerda ou à direita.

Animação passo a passo. Torne sua página mais dinâmica e envolvente. Anime ao clicar, ao rolar, ao passar o mouse e quando o elemento aparecer na tela.

Rolagem de paralaxe. Use a rolagem de paralaxe ou crie o efeito de paralaxe a partir do movimento do mouse.

Elementos fixos durante a rolagem. Especifique a distância em que o elemento deve permanecer fixo e sua localização.

Se você desenha layouts em um editor gráfico antes de usá-los, use o Zero Block para transferi-los para o seu site como estão. Para isso, o Zero Block oferece uma grade de 12 colunas e especificações personalizáveis para cada elemento, como 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.

A interface do Zero Block é semelhante à de um editor gráfico. Basta adicionar os elementos necessários e dar a eles as coordenadas apropriadas. Isso é fácil de fazer no Zero Block, especialmente se você já tiver feito isso antes. Use o Zero Block para transferir rapidamente sua ideia de um editor gráfico para o seu site sem precisar escrever nenhum código.

Se estiver criando uma página da Web ou uma página de destino e não conseguir encontrar o bloco certo na biblioteca do Tilda, use o Zero Block. Aqui estão alguns exemplos concretos.

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.

O Zero Block funciona muito bem para reunir elementos com bordas irregulares em uma única composição, fazendo com que todas as distâncias sejam visualmente iguais.

O Zero Block funciona bem com camadas, como imagens sobrepostas, textos em um painel, botões em cima de imagens. Crie efeitos adicionais brincando com seu posicionamento.

Para simplificar as coisas quando se trata de vários elementos, use o Layers. Essa excelente ferramenta permite que você gerencie cada elemento: altere sua posição, oculte-o ou bloqueie-o.

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

O Zero Block permite que os usuários criem composições complexas a partir de vários elementos, como textos, imagens, linhas, painéis e botões.

Essa nova página de destino de fontes criada no Tilda consiste em blocos que apresentam vários elementos.

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

Perfeito para quando você deseja alterar algo em um bloco normal, mas não é possível fazê-lo alterando as configurações.

Se você selecionou um bloco Tilda geral e deseja fazer algumas alterações nele, basta usar a opção Convert to Zero Block (Converter em bloco zero). Isso permitirá que você o edite como se fosse um bloco zero. Essa opção está disponível para a maioria dos blocos Tilda.

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

Exemplo de outro bloco convertido em Zero Block:

Nossos blocos padrão têm muitas configurações. Adicione o bloco mais adequado da biblioteca, abra a guia de configurações e verifique se é possível ajustar o modelo de acordo com seu objetivo. É possível que você não precise do Zero Block.

Os exemplos abaixo são designs baseados em nossos blocos padrão.

Se antes era necessário converter um bloco regular em Zero Block, agora não é mais preciso fazer isso. O Tilda agora tem a opção de definir os recuos separadamente para computadores e dispositivos móveis.

Nossos blocos regulares são organizados em uma grade de 12 colunas. Você pode definir os recuos para cada cabeçalho igual a qualquer número de colunas. Se você projetou seu bloco em Zero Block sem levar em conta a grade, não poderá definir os mesmos recuos para os blocos regulares (será necessário convertê-los em Zero Block).

Por exemplo, você está alternando blocos regulares e Zero Block no design do seu site. Embora você possa colocar elementos onde quiser no bloco zero, isso não poderá ser repetido em um bloco regular. Portanto, é bom ter em mente que nossos blocos regulares podem ser posicionados somente na grade.

Recomendamos o uso de uma grade ao projetar seu site no Zero Block. Posicione os elementos principais em relação à grade - agora seu design pode ser facilmente combinado com todos os outros blocos do Tilda.

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

Você pode adicionar ou editar vídeos do YouTube e do Vimeo. Altere o tamanho e a proporção do vídeo, bem como sua opacidade, crie sombras e aplique animação.

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 de término de cada vídeo e carregar sua própria capa.

Adicione qualquer elemento com a ajuda do HTML. Esse pode ser seu próprio código ou você pode incorporar o iFrame de um widget de terceiros. Por exemplo, podem ser elementos interativos, gravações on-line, reprodutores de música, calendários, calculadoras, publicações em mídias sociais. É possível ajustar a posição desses elementos em cada tela.

A dica de ferramenta é um pequeno prompt interativo que aparece quando o cursor do mouse é posicionado sobre um elemento de um site. 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 conjunto habitacional, poderá desenhar um mapa e marcar cada edifício nesse mapa.

A dica de ferramenta tem muitas configurações úteis: altere a cor, a sombra, o tamanho ou escolha e carregue um ícone que aparecerá dentro de um círculo ou um texto que aparecerá quando passar o mouse sobre ele.

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 em telas de todas as resoluções, caso contrário, o prompt correrá o risco de ser cortado por cima, por baixo ou pelas bordas do bloco.

Adicione um formulário de feedback horizontal ou vertical ao Zero Block e altere todas as configurações, como adicionar campos de entrada ou integrações de captura de dados, mensagens de sucesso ou de erro, estilos de formulário ou animações.

É possível atribuir a cada elemento as coordenadas relativas aos quatro lados de uma tela ou grade, alterar a opacidade e a sombra, girar o elemento ou dar a ele um link com um clique.

A cada elemento pode ser atribuído um tamanho em pixels ou uma porcentagem do tamanho da tela. Por exemplo, se você quiser criar um elemento que ocupe metade da tela, independentemente do tamanho. Nesse caso, configure sua largura e altura em %, não em pixels.

Descubra muitas surpresas inesperadas com o 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 criá-lo do tamanho que quiser e pode até mesmo torná-lo redondo ajustando as configurações. Deseja que ele fique visível somente quando estiver passando o mouse? Deixe-o transparente. E, enquanto estiver fazendo isso, escolha 30% de opacidade e qualquer cor para o botão de foco.

Posicione o botão sobre os elementos que você deseja que sejam cobertos pelo efeito hover. Eles podem ser imagens ou texto. Se necessário, transforme o botão em um link.

Para fixar um elemento durante a rolagem, altere as configurações da imagem para Behavior - Fixed (Comportamento - Fixo). Esse recurso está disponível para imagens de fundo dentro de uma forma. Se você aplicar isso à imagem dentro de um painel, o tamanho da imagem se estenderá até a tela inteira, mas ficará visível somente dentro da forma. Se você usar várias formas desse tipo no bloco, a imagem dentro delas será a continuação da mesma imagem.

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

Se você quiser que alguns elementos sejam exibidos fora do Zero Block e sobrepostos aos blocos adjacentes, escolha a opção Overflow. Encontre-a nas configurações do bloco.

Os designs do Zero Block podem ser adaptados para os cinco tipos mais comuns de tela. Seu bloco sempre ficará bem em qualquer dispositivo.

Lembre-se de verificar a aparência do seu Zero Block em todas as telas. Basta pressionar o botão que representa o dispositivo de que você precisa no Zero Block.

Cada elemento em cada tela é personalizável no Zero Block, portanto, se você alterar a composição ou o conteúdo em uma das telas, um bloco em resolução mais baixa poderá ter uma aparência diferente devido à diferença no comprimento da linha ou no tamanho dos elementos.

Ao criar um Zero Block do zero, configure a adaptabilidade para cada dispositivo individualmente. É importante ter isso em mente antes de publicar o site.

Se estiver projetando o site inteiro no Zero Block, é mais conveniente dividi-lo em blocos separados. Isso permitirá desativar os blocos para telas de baixa resolução ou desativá-los temporariamente para todo o site.

Se estiver usando muitos detalhes em uma tela grande, simplifique o design para telas com resolução mais baixa para facilitar a visualização.

Aqui está um exemplo de uma composição visual individual em cada tela:

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

Cada tipo de animação tem seus próprios parâmetros. Vamos dar uma olhada no que eles significam.

Duração - A duração de uma animação em segundos. Quanto maior o valor, mais lenta será a animação.

Distância - o espaço entre a posição inicial de uma animação e sua localização final. É especificado somente para as animações em que os objetos aparecem nas laterais.

Escala - o tamanho de um elemento no início de uma animação como uma porcentagem do tamanho original. Esse parâmetro é definido quando ocorre um aumento ou uma redução de escala. Se o valor for maior que 100, o elemento será maior desde o início e será reduzido até o tamanho original; se o valor for menor que 100, o elemento será aumentado até a escala original.

Atraso - o atraso da reprodução da animação, em segundos. Se o valor for zero, a animação será iniciada assim que o bloco aparecer na página.

Quando você deve usá-lo? Pode ser útil quando outro objeto se sobrepõe a um elemento significativo ou o risca. Se uma tela mostrar vários objetos animados, atribua uma função de atraso diferente a cada elemento. Isso permite que você direcione o olhar do espectador, levando-o de um elemento para o outro.

Deslocamento do acionador é a distância, medida em pixels, da borda inferior da tela em que os elementos aparecem na página. Por padrão, a animação começa assim que o elemento entra na página. Se quiser atrasar a animação até que o objeto esteja 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 desse parâmetro, ele não ficará visível até que o usuário role mais a página.

Depois de definir os parâmetros necessários, verifique a animação sem sair do editor. Ative o elemento que você animou, clique em Reproduzir elemento para um único elemento e em Reproduzir tudo se tiver animado vários elementos e quiser ver como eles estão funcionando juntos.

Se quiser ver elementos interativos na sua página com os quais os usuários queiram interagir, destaque o elemento que deseja animar e vá para a animação passo a passo nas configurações do elemento.

Os elementos aparecem e se movem quando um usuário está rolando a página para cima ou para baixo.

Exemplos de animação em rolagem:

Sinta-se à vontade para usar esses exemplos de animação em seus projetos pessoais.

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

Elemento na tela - é acionada quando um elemento cruza a parte inferior do navegador e aparece na página da Web.

Bloco na tela - é acionada quando um bloco zero contendo o elemento cruza a parte inferior do navegador e aparece na página da Web.

A animação será iniciada quando o cursor passar sobre um elemento.

A animação será iniciada quando um usuário clicar no elemento.

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

Acionador de início -um evento que aciona a animação. Escolha entre Window Top (Parte superior da janela), Window Centre (Centro da janela) e Window Bottom (Parte inferior da janela).

Um acionador Window Bottom é definido como padrão; a animação será iniciada assim que cruzar a parte inferior do navegador.

Deslocamento do acionador é a distância em pixels do acionador selecionado que inicia a animação.

Loop de animação é um parâmetro que controla a repetição perpétua da animação.

Você pode testar a animação com a ajuda do botão Play Element / Play All. Essa opção está disponível para todos os tipos de animação, exceto para animação em rolagem.

Para sua conveniência, você pode usar duas guias do navegador: uma para editar no Zero Block e a outra para abrir a visualização da página. Dessa forma, você pode verificar o resultado sem sair do Zero Block. Certifique-se de salvar todas as alterações e atualizar a página de visualização antes de testar sua página da Web.

Ao escolher a animação passo a passo, você pode adicionar etapas e personalizar as propriedades de cada etapa que acionará alterações nos parâmetros de cada elemento selecionado em sua página da Web. Crie uma trajetória e movimentos de seus elementos na página com base em um número de 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 zero e a duração como 0 segundos ou 0 pixels (para animação na rolagem).

Com a ajuda das configurações de etapa, é possível alterar as propriedades do elemento que está sendo animado.

Você pode definir sua posição (Move), tamanho (Scale), transparência (Opacity) e ângulo de rotação (Scale).

Rolagem de paralaxe. Quando você aplica essa animação a um elemento, a velocidade com que ele se move será diferente da velocidade de movimento dos outros elementos quando você estiver rolando uma página. Você pode definir a velocidade de seu movimento nas configurações da página: em uma velocidade lenta de 0 a 100, o elemento 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 ponteiro do mouse. Um elemento com esse tipo de animação se move na direção oposta em relação ao movimento do ponteiro. Você define a área de seu movimento vertical ou horizontal nas configurações da página.

Esse tipo de animação permite que você fixe os elementos durante a rolagem. Nas configurações, você pode especificar a distância em que o elemento permanecerá fixo em um lugar (sempre dentro do bloco). A distância é fixada em pixels. Após a rolagem até a distância especificada, o elemento não estará mais fixo e continuará rolando junto com a página.

Você pode definir os acionadores de rolagem nas configurações: superior, inferior ou central da janela. O Trigger Offset permite controlar a margem entre a borda da janela e o elemento. Isso também é útil quando você deseja fixar vários elementos ao mesmo tempo a uma certa distância uns dos outros.

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

Se quiser que dois elementos permaneçam na mesma posição um em relação ao outro, defina o posicionamento dos elementos como Grid Container (Contêiner de grade) ou Window Container (Contêiner de janela).

Se estiver posicionando o texto em relação à grade e quiser que ele permaneça sempre dentro da tela, tome cuidado para que o contêiner não ultrapasse a área da grade. Criar um layout organizado é um bom hábito; dessa forma, você evitará surpresas desagradáveis quando o bloco for publicado.