Zero Block: Design responsivo
A segunda parte do guia é dedicada a configurações mais complexas do Zero Block relacionadas ao design responsivo da Web. As principais configurações e os recursos básicos do Zero Block foram analisados na primeira parte do guia.
Você está aqui!
Role a tela para baixo para ler
Introdução aos contêineres
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 e sua posição no eixo X
O contêiner de grade é o espaço de trabalho principal. Ele tem a mesma grade que 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.
No eixo X, o Grid Container está sempre centralizado.
O mesmo acontece com as versões para diferentes dispositivos: ao alternar entre os tipos de tela, a largura do contêiner de grade passa a ser 980, 640, 480, 320px, permanecendo fixo e centralizado.
Você pode definir a altura do contêiner de grade nas configurações da prancheta ou arrastando o contêiner para cima/para baixo com o mouse. Você pode definir uma altura de contêiner de grade exclusiva para cada resolução. A altura do contêiner de grade é a altura do bloco.
Você pode definir a altura do contêiner de grade nas configurações da prancheta ou arrastando o contêiner para cima/para baixo com o mouse. Você pode definir uma altura de contêiner de grade exclusiva para cada resolução. A altura do contêiner de grade é a altura do bloco.
Posição dos contêineres entre si no eixo Y
Se quiser que o site 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.
Como alterar o contêiner e a origem de um elemento
Como trocar o contêiner
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 anexar um elemento não à grade, mas à 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.
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.
Coordenadas do elemento
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.
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).
Se você definir a origem como "Center Center", será mais fácil criar uma versão adaptável para telas diferentes.
Como criar elementos fluidos
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%.
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.
As configurações do retângulo amarelo: Container-Window Container, largura-50%, altura-100%, deslocamento do eixo X-50%.
Exemplo: Como criar uma capa em tela cheia
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.
- 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.
1
Carregue uma imagem de fundo nas configurações da prancheta e defina a altura do contêiner da janela como 100%.
2
Defina a origem do título, subtítulo e botão como "Center" e "Center". Se necessário, especifique também o deslocamento do eixo Y.
3
Defina o contêiner da seta como Window Container (Contêiner da janela), defina sua origem como "Center" (Centro) e "Bottom" (Parte inferior) e mova-o 70 px para cima. Dessa forma, o botão sempre estará 70px acima do canto inferior da janela do navegador.
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.
Dimensionamento de elementos para que se ajustem à largura da tela
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 aumentados proporcionalmente 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.
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 aumentados proporcionalmente 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.
Essa configuração adaptará o design do site para qualquer resolução, inclusive telas HD. A opção ajudará a evitar espaços vazios desnecessários em telas de alta resolução, além de acelerar o fluxo de trabalho de design - você não precisará perder tempo com o layout adaptável.
Se necessário, você pode definir o dimensionamento automático para todos os tipos de tela ou, por exemplo, somente para dispositivos móveis, configurando apenas um determinado intervalo de largura de tela. O contêiner da versão para desktop aumenta o zoom de 1200px para 1920, 4K ou até 6K. A versão para dispositivos móveis aumenta o zoom de 320px.
A altura do bloco será dinâmica: ela mudará proporcionalmente à largura quando você dimensionar o bloco.
Se necessário, você pode definir o dimensionamento automático para todos os tipos de tela ou, por exemplo, somente para dispositivos móveis, configurando apenas um determinado intervalo de largura de tela. O contêiner da versão para desktop aumenta o zoom de 1200px para 1920, 4K ou até 6K. A versão para dispositivos móveis aumenta o zoom de 320px.
A altura do bloco será dinâmica: ela mudará proporcionalmente à largura quando você dimensionar o bloco.
Observação importante: essa opção funciona apenas para os elementos anexados ao contêiner Grid e não afetará os itens anexados ao contêiner Window.
Alguns recursos do Escalonamento automático
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 certo 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. Em Tilda, quando você carrega uma imagem grande, ela é redimensionada para 1680 pixels de largura por padrão, mas se você clicar no ícone de engrenagem ao fazer o upload, terá a opção de carregar 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.
Imagens: Tenha cuidado ao fazer upload de imagens: elas devem ter o tamanho certo 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. Em Tilda, quando você carrega uma imagem grande, ela é redimensionada para 1680 pixels de largura por padrão, mas se você clicar no ícone de engrenagem ao fazer o upload, terá a opção de carregar 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.
