Zero Block: Design responsivo

Zero Block tem dois espaços de trabalho que são chamados de contêineres. A área de grade é chamada de contêiner de grade, enquanto o contêiner de janela é uma área que indica os limites da tela do navegador.

O contêiner de grade é o espaço de trabalho principal. Ele tem a mesma grade do Tilda, 1200 px. Se você colocar elementos dentro do Grid Container, eles ficarão dentro da grade de doze colunas, independentemente do tamanho da tela.

No eixo X, o Grid Container está sempre centralizado.

The same happens with the versions for different devices: when you switch between screen types, the width of the Grid Container becomes 980, 640, 480, 360px, it remains fixed and centered.

You can set the Grid Container's height in the Artboard Settings or by dragging the container up/down with your mouse. You can set a unique Grid Container's height for each resolution. The Grid Container's height is the block's height.

Se quiser que um Zero Block sempre ocupe 100% da altura da tela, será necessário definir a altura do contêiner da janela como diferente da altura do contêiner da grade. Portanto, você precisa definir a altura do contêiner da janela como 100% nas configurações da prancheta.

Depois disso, selecione o alinhamento do contêiner de grade na tela: Superior, Centralizado, Inferior ou Esticado. Por padrão, ele é centralizado.

Por padrão, todos os elementos são anexados ao contêiner da grade e a origem está no canto superior esquerdo.

Às vezes, é necessário fixar um elemento não na grade, mas na tela. Por exemplo, você deseja que o logotipo seja fixado no canto superior esquerdo em todas as telas.

Para fazer isso, abra o painel Settings (Configurações) do elemento e altere o tipo de contêiner para Window Container (Contêiner de janela). A origem será deslocada para o canto superior esquerdo do Window Container.

Agora o logotipo estará no canto superior esquerdo de qualquer tela.

Se quiser anexar um elemento, por exemplo, ao canto superior direito, você pode usar o mesmo método: selecione "Window Container" e defina a origem das coordenadas do elemento da seguinte forma: X-direita, Y-cima.

Cada elemento no espaço de trabalho tem suas próprias coordenadas que indicam sua posição em relação à origem no eixo X e no eixo Y.

Selecione um elemento, abra o painel Configurações pressionando a tecla Tab e você verá as coordenadas do elemento na parte superior do painel.

A origem padrão de todos os elementos está no canto superior esquerdo do contêiner da grade. Mas ela pode ser movida e colocada em um dos nove pontos do retângulo: superior direito, inferior esquerdo etc.

Para alterar o local da origem, abra o painel +Contêiner (por padrão, ele está minimizado).

Nós permitimos que o tamanho dos elementos também seja definido em porcentagem. Assim, você pode criar elementos "fluidos" que mudam de tamanho dependendo da janela do navegador.

Por exemplo, você gostaria que metade da tela fosse sempre amarela. Para fazer isso, adicione uma forma e abra o painel Settings (Configurações) do elemento. Defina o tipo de contêiner como Window Container, altere as unidades de medida de largura e altura para porcentagem em vez de pixels, defina a largura da tela como 50% e a altura da tela como 100%. Você também pode definir os valores dos eixos em porcentagem. Se quiser que o elemento sempre ocupe a metade direita da tela, defina o valor do eixo X como 50%.

O vídeo mostra que o lado direito do bloco sempre ocupa metade da tela.

Vamos tentar criar uma capa com os seguintes recursos:

- A imagem de fundo ocupa toda a tela.
- O título, o subtítulo e o botão estão sempre centralizados.
- A seta para baixo está fixa na parte inferior da tela.

Vejamos o que temos: a imagem de fundo ocupa toda a tela; o título, o texto e o botão estão centralizados; a seta está na parte inferior.

Por padrão, todos os elementos são anexados ao contêiner da grade. Esse é um retângulo com largura de 1200 pixels na área de trabalho. Ele está sempre centralizado na tela e tem o mesmo tamanho, independentemente da largura da tela.

Com o Auto Scale, é possível dimensionar todos os elementos que pertencem ao contêiner Grid proporcionalmente à largura da tela ou do navegador. O contêiner de grade não ocupará uma largura fixa de 1200 pixels, mas se estenderá até a largura total da tela. Todos os elementos adicionados serão proporcionalmente ampliados para ocupar a tela inteira.

Para ativar o dimensionamento automático, abra as Configurações da prancheta e localize a opção Dimensionar contêiner de grade. Selecione a opção Autoscale to Window Width (Escala automática para a largura da janela) e salve suas alterações.

This setting will adapt the website design for any resolution, including HD screens. The option will help to avoid unnecessary empty space on high resolution screens, as well as speed up the design workflow — you won't have to waste time on the adaptive layout.

If necessary, you can set automatic scaling for all screen types or, e.g., only for mobile devices, by setting up only a certain screen width range. The container of the desktop version zooms from 1200px to 1920, 4K, or even 6K. The mobile version zooms from 360px.

The block height will be dynamic: it will change in proportion to the width when you scale the block.

Botões: Para manter o botão na distância desejada das bordas da janela do navegador, mas não escalonar em diferentes resoluções, defina as coordenadas para ele no Window Container. Use a vinculação a diferentes contêineres para dimensionar alguns elementos dentro do mesmo bloco e para deixar alguns elementos com uma distância fixa das bordas do navegador, mas sem redimensionamento.

Imagens: Tenha cuidado ao fazer upload de imagens: elas devem ter o tamanho correto para que não percam a qualidade quando dimensionadas para telas maiores.

Use imagens vetoriais no formato .svg para ícones e faça upload de imagens de fundo e fotos maiores do que o necessário. No Tilda, quando você faz upload de uma imagem grande, ela é redimensionada para 1680 pixels de largura por padrão, mas se você clicar no ícone de engrenagem ao fazer upload, terá a opção de fazer upload de uma imagem com 1920 px de largura. Ative a chave de alternância "Enable 1920px wide image uploading" e carregue os arquivos. Não é possível carregar imagens maiores que 1920 px porque esse tamanho afetará o desempenho do navegador e a velocidade de carregamento do site.