Sobreposição da linha da grade do elementor (Pro): uma grade de projeto para layouts alinhados
Linha de grade é uma extensão Master Addons Pro que desenha uma grade de colunas sobre sua página dentro do editor Elementor Você define o número de colunas, a calha, a largura máxima e o deslocamento em Configurações de página, em seguida, alinha seções e widgets contra as colunas, a maneira como os designers trabalham na Figma A grade só mostra enquanto você edita, e os visitantes nunca a veem na página publicada.
Como usar a linha de grade no elementor
Linha de grade é uma configuração por página, então você a liga apenas onde precisar.
- Com Master Addons Pro ativo, acesse Complementos Mestres > Extensões e liga Linha Grade.
- Abra uma página no Elementor e clique no Configurações de página ícone na barra superior.
- No Configurações guia, expandir Linha Grade e definir Habilitar para On.
- Definir Colunas, Largura máxima e Calha para combinar com seu design e adicione um Compensar se o seu layout tiver margens laterais.
- Mude para tablet e visualização móvel para definir valores para essas telas.
- Alinhe suas seções e widgets nas colunas A grade não aparece na página publicada.
Colunas, Calha, Largura e Deslocamento
A seção Linha de grade nas configurações de página tem um Habilitar mudar, Cor da grade (um cinza claro translúcido por padrão), Colunas de 1 a 12, Largura máxima, Compensar, Calha e Índice Z. Colunas, largura máxima, deslocamento e calha podem assumir valores diferentes em desktop, tablet e celular.
- Predefinições: 12 colunas, largura máxima de 1140 px e calha de 15 px na área de trabalho, 1025 px e 10 px no tablet, 768 px e 8 px no celular.
- Combine seu tema: defina a Largura Máxima na largura de conteúdo do seu site para que as colunas se alinhem com o layout real.
- Visibilidade: escolha uma cor com transparência para que seu conteúdo permaneça legível e mantenha o Índice Z em 999 para que a grade fique acima do design.
Maneiras de verificar um layout em relação a uma grade no elementor
Elementor não tem sobreposição de grade de design própria Estas são as opções usuais.
| Característica | Elementor sozinho | Inspetor de grade do navegador DevTools | Linha de grade Master Addons |
|---|---|---|---|
| Preço | Grátis | Grátis | Master Addons Pro |
| Projete a grade de colunas sobre a página | Não | Somente em elementos que usam CSS Grid | Sim, em toda a página |
| Configure dentro do editor Elementor | Não | Não, você inspeciona o quadro de visualização | Sim, em Configurações de Página |
| Colunas, calha e largura por dispositivo | Não | Segue a grade do próprio elemento | Sim |
| Visível aos visitantes | Não | Não | Não |
Se o seu layout já usa o contêiner Grid do Elementor, o inspetor de grade do navegador pode mostrar essas faixas gratuitamente A linha Grid é para verificar qualquer layout, contêineres flexbox incluídos, em uma grade de design fixa como a do seu arquivo Figma.
Outros ajudantes de editores: Qual Elemento (gratuito) e Posicionamento (grátis).
Perguntas frequentes sobre a linha de grade
A grade afeta a aparência do meu site na extremidade frontal?
Não. A grade só aparece dentro do editor Elementor. Os visitantes veem a página publicada sem ela, mesmo que você deixe o Enable ligado.
Qual é a diferença entre Gutter e Offset?
Calha é o espaço entre colunasO deslocamento é o espaço entre a borda da tela e onde a grade começa Juntamente com Max Width eles permitem copiar a largura de conteúdo e o espaçamento das colunas do seu tema.
Posso usar isso com o sistema Flexbox Container da própria Elementor?
Sim. A grade é desenhada sobre toda a visualização, por isso funciona com contêineres flexbox, contêineres de grade e seções mais antigas. Ele não encaixa elementos nas colunas, então você mesmo os alinha.
A Linha de Grade é gratuita?
A linha No. Grid faz parte do Master Addons Pro.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
