Como inverter o layout da grade para alterar a aparência do bloco

Use o Grid Element para fazer os modos responsivos facilmente. Nas telas menores, as Células da Grade se movem umas sob as outras automaticamente.

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.

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.

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.

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.

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.

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.

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.

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.

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.