Elemento de grade do site

O Grid é um elemento de contêiner que você pode usar para colocar elementos de página da web em células. Recomendamos o uso do Elemento de grade, pois ele é bom para designs responsivos, pois as células se movem uma sob a outra automaticamente em telas menores.
Rede Elemento de grade do site

Navegue por categorias de recursos

Redimensionar células de grade

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.

Mover células de grade

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.

Intervalo da célula da grade

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.

Alterar layout da grade

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.

Grade encaixotada e larga

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.

Inversão de layout de grade

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.

Tipo de plano de fundo da célula de 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.

Grade em modos responsivos

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.

Passe o cursor em uma célula de grade

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.

Mais de 80 layouts de grade

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.

Grade para dispositivos móveis

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.

Modelos grátis com Rede

Comece com nossos melhores modelos, ótimos para qualquer negócio. Crie e personalize-os com nosso poderoso e gratuito construtor de sites sem código. Todos os modelos são compatíveis com dispositivos móveis e têm uma aparência excelente em qualquer dispositivo.