Zero Block: Design Responsivo
A segunda parte do guia é dedicada a configurações de Zero Block mais complexas relacionadas ao web design responsivo. As principais configurações e características básicas do Zero Block foram revisadas na primeira parte do guia.
Você está aqui!
Role 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 Grid Container e sua posição no eixo X
O Contêiner de Grade é o espaço de trabalho principal. Tem a mesma grade que Tilda. Se você colocar elementos dentro do Contêiner de Grade, eles estarão dentro da grade de doze colunas, independentemente do tamanho da tela.
No eixo X, o Contêiner de Grade está sempre centralizado.
No eixo X, o Contêiner de Grade está sempre centralizado.
O mesmo acontece com as versões para diferentes dispositivos: ao alternar entre os tipos de tela, a largura do Grid Container passa a ser 980, 640, 480, 320px, permanece 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 a altura de um Grid Container exclusivo para cada resolução. A altura do Grid Container é 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 a altura de um Grid Container exclusivo para cada resolução. A altura do Grid Container é a altura do bloco.
Posição dos contêineres entre si no eixo Y
Se você quiser que um Zero Block ocupe sempre 100% da altura da tela, será necessário definir a altura do Contêiner de Janela para uma diferente da do Contêiner de Grade. Então, você precisa definir a altura do contêiner de janela para 100% nas configurações da prancheta.
Em seguida, selecione na tela o alinhamento do Grid Container: Top, Center, Bottom ou Stretch. É centralizado por padrão.
Como alterar o contêiner e a origem de um elemento
Como mudar o recipiente
Por padrão, todos os elementos são anexados ao Grid Container e a origem está no canto superior esquerdo.
Às vezes, você precisa 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 isso, abra o painel Settings do elemento e altere o tipo de container para Window Container. A origem será deslocada para o canto superior esquerdo do Window Container.
Para isso, abra o painel Settings do elemento e altere o tipo de container para Window Container. A origem será deslocada para o canto superior esquerdo do Window Container.
Agora o logotipo estará no canto superior esquerdo de qualquer tela.
Se você quiser anexar um elemento, por exemplo, ao canto superior direito, você pode usar o mesmo método: selecione "Contêiner de janela" e defina a origem das coordenadas do elemento da seguinte maneira: X—direita, Y—superior.
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 bem no topo do painel.
Selecione um elemento, abra o painel Configurações pressionando a tecla Tab e você verá as coordenadas do elemento bem no topo do painel.
A origem padrão de todos os elementos está no canto superior esquerdo do Grid Container. Mas pode ser movido e colocado em um dos nove pontos do retângulo: direita, superior, inferior esquerda, etc.
Para alterar a localização da origem, abra o painel +Container (por padrão, é 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
Previmos que o tamanho dos elementos também fosse 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 estivesse sempre amarela. Para fazer isso, adicione uma forma e abra o painel 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 para 50% e a altura da tela para 100%. Você também pode definir valores de eixo em porcentagem. Se você deseja que o elemento ocupe sempre a metade direita da tela, defina o valor do eixo X para 50%.
Por exemplo, você gostaria que metade da tela estivesse sempre amarela. Para fazer isso, adicione uma forma e abra o painel 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 para 50% e a altura da tela para 100%. Você também pode definir valores de eixo em porcentagem. Se você deseja que o elemento ocupe sempre a metade direita da tela, defina o valor do eixo X para 50%.
O vídeo mostra que o lado direito do bloco sempre ocupa metade da tela.
As configurações do retângulo amarelo: Contêiner—Contêiner de janela, largura—50%, altura—100%, deslocamento do eixo X—50%.
Dimensionar elementos para caber na largura da tela
Por padrão, todos os elementos são anexados a um contêiner Grid. Este é 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, você pode dimensionar todos os elementos que pertencem ao contêiner Grid proporcionalmente à largura da tela ou do navegador. O contêiner Grid não ocupará uma largura fixa de 1200 pixels, mas se estenderá até a largura total da tela. Todos os elementos adicionados serão ampliados proporcionalmente para ocupar a tela inteira.
Para habilitar o dimensionamento automático, abra as configurações da prancheta e localize a opção Scale Grid Container. Selecione a opção Autoscale to Window Width e salve suas alterações.
Com o Auto Scale, você pode dimensionar todos os elementos que pertencem ao contêiner Grid proporcionalmente à largura da tela ou do navegador. O contêiner Grid não ocupará uma largura fixa de 1200 pixels, mas se estenderá até a largura total da tela. Todos os elementos adicionados serão ampliados proporcionalmente para ocupar a tela inteira.
Para habilitar o dimensionamento automático, abra as configurações da prancheta e localize a opção Scale Grid Container. Selecione a opção Autoscale to Window Width e salve suas alterações.
Essa configuração adaptará o design do site para qualquer resolução, incluindo 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 do design - você não precisará perder tempo com o layout adaptativo.
Se necessário, você pode definir o dimensionamento automático para todos os tipos de tela, por exemplo, apenas para dispositivos móveis, configurando apenas um determinado intervalo de largura de tela. O contêiner da versão para desktop amplia de 1200px a 1920, 4K ou até 6K. A versão móvel aumenta de tamanho de 320px.
A altura do bloco será dinâmica: mudará proporcionalmente à largura quando você dimensionar o bloco.
Se necessário, você pode definir o dimensionamento automático para todos os tipos de tela, por exemplo, apenas para dispositivos móveis, configurando apenas um determinado intervalo de largura de tela. O contêiner da versão para desktop amplia de 1200px a 1920, 4K ou até 6K. A versão móvel aumenta de tamanho de 320px.
A altura do bloco será dinâmica: mudará proporcionalmente à largura quando você dimensionar o bloco.
Observação importante: Essa opção funciona somente para elementos anexados a um contêiner Grid e não afetará itens anexados a um contêiner Window.
Algumas características do escalonamento automático
Botões: Para manter o botão na distância desejada das bordas da janela do navegador, mas não para dimensionar em resoluções diferentes, defina as coordenadas para ele no Contêiner de janelas. Use a associação a contêineres diferentes 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 o upload de imagens: elas devem ter o tamanho certo para que não percam qualidade quando dimensionadas para telas maiores.
Use imagens vetoriais no formato .svg para ícones e carregue imagens de fundo e fotos com reserva. Quando você carrega uma imagem grande, sua largura é redimensionada para 1680 pixels por padrão, mas se você clicar no ícone de engrenagem ao fazer o upload, terá a opção de fazer o upload de uma imagem de lado grande de 1920px. Alterne o botão de alternância "Permitir carregar até 1920px" e carregue os arquivos. Imagens maiores que 1920px não podem ser carregadas porque esse tamanho afetará o desempenho do navegador e a velocidade de carregamento do site.
Imagens: Tenha cuidado ao fazer o upload de imagens: elas devem ter o tamanho certo para que não percam qualidade quando dimensionadas para telas maiores.
Use imagens vetoriais no formato .svg para ícones e carregue imagens de fundo e fotos com reserva. Quando você carrega uma imagem grande, sua largura é redimensionada para 1680 pixels por padrão, mas se você clicar no ícone de engrenagem ao fazer o upload, terá a opção de fazer o upload de uma imagem de lado grande de 1920px. Alterne o botão de alternância "Permitir carregar até 1920px" e carregue os arquivos. Imagens maiores que 1920px não podem ser carregadas porque esse tamanho afetará o desempenho do navegador e a velocidade de carregamento do site.
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á fixada na parte inferior do ecrã.
— 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á fixada na parte inferior do ecrã.
1
Carregue uma imagem de plano de fundo nas configurações da prancheta e defina a altura do contêiner da janela para 100%.
2
Defina a origem do título, subtítulo e botão como "Centro" e "Centro". Se necessário, especifique também o deslocamento do eixo Y.
3
Defina o contêiner da seta como Contêiner de janela, defina sua origem como "Centro" e "Fundo" e mova-o 70 px para cima. Dessa forma, o botão sempre será 70px maior do que o 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 são centralizados; a seta está na parte inferior.
