Como usar o Grid em dispositivos móveis

Obtenha a mais ampla variedade de layouts de grade para seu web design. Os Elementos de Grade ajudam você a tornar seus designs compatíveis com dispositivos móveis automaticamente.

As Grades permitem organizar diversos conteúdos, incluindo imagens, ícones, formas e texto em forma de células, que são muito convenientes de operar. Em nosso editor visual, você pode facilmente mover células em um Grid simplesmente arrastando uma célula sobre outra, aperfeiçoando seu layout e conteúdo para seu web design. Além disso, você pode clicar nos ícones de seta na ferramenta de contexto da célula para mover a célula.

Você pode alterar facilmente a largura da grade de Boxed para Wide e vice-versa. Selecione uma Grade e vá para o Painel de Propriedades. Localize o ícone Boxed/Wide próximo aos valores Width e Height e altere o Gird Layout clicando nesse ícone.

Se você precisar criar layouts sofisticados para suas imagens, formas e textos, poderá redimensionar as células de grade com várias larguras, dando aos seus designs uma aparência moderna.

Uma célula do elemento de grade pode ter um plano de fundo e você pode usar vários tipos para ele. Você pode aplicar o preenchimento de cor, gradiente, imagem, vídeo ou não ter nenhum plano de fundo. Selecione uma célula de grade e vá para o painel de propriedades. Escolha um tipo de plano de fundo que melhor se adapte ao seu web design.

O Grid Element é muito flexível. Você pode ajustar seu layout para os requisitos de sua ideia de web design. Para inverter a grade que você colocou em um bloco. Selecione este Elemento e vá para o Painel de Propriedades à direita. Clique na lista suspensa Virar próximo ao Layout de grade. Clique em Virar ou Girar para realizar a operação.

Você pode alterar o espaçamento entre as células da grade de acordo com seus requisitos de design da web. Para isso, você pode usar a propriedade Cell Gap no painel de propriedades. Selecione uma grade, vá para o painel de propriedades, role para baixo no painel, arraste o controle deslizante para modificar o intervalo.

Você pode alterar o layout da Grade adicionada para um Bloco a qualquer momento. Selecione o Elemento de Grade e vá para o Painel de Propriedades. Clique na seta para abrir a Lista de Predefinições de Grade e selecione o layout que melhor se adapta à sua ideia de web design. Você também pode adicionar e remover células de grade no Editor.

Os Elementos de Grade são muito úteis para construir Modos Responsivos, pois nas telas menores, as Células de Grade se movem automaticamente umas para baixo das outras. Além disso, para muitos Layouts, você pode alterar a Ordem das Células da Grade em todas as Visualizações Móveis. Escolha o Grid Element, alterne o modo responsivo na barra superior, ajuste sua grade, se necessário. Para a maioria das Grades, você não precisa fazer ajustes.

A Animação Slider é uma reação muito popular no Hover. Você pode adicionar vários efeitos para células de grade, por exemplo, Fade, Overlay, Slide, Flip, Wobble e Zoom. Selecione uma Célula de Grade e vá para o Painel de Propriedades. Clique no link Hover Slide e escolha o efeito que deseja ver no Hover da célula da grade.