Os designers trabalham em cima de uma grade de colunas É como manchetes, cartões e botões acabam se alinhando em vez de se afastarem alguns pixels Elementor não mostra um, então o alinhamento geralmente acontece a olho nu Linha Grade extensão em Complementos Mestres para Elementor corrige que com uma sobreposição de grade de colunas você pode ligar diretamente dentro do editor.
Você controla o número de colunas, a calha, a largura máxima, o deslocamento e a cor da sobreposição, direto das Configurações de Página do Elementor Aqui está como habilitá-lo e o que cada opção faz.
O que a extensão Grid Line faz #
Linha de grade desenha um conjunto de colunas verticais uniformemente espaçadas sobre sua página dentro do editor Elementor A sobreposição fica em cima do seu design, para que você possa verificar se suas seções e widgets realmente se alinham na grade que um designer usaria no Figma ou no Photoshop.
O padrão é uma grade de 12 colunas com largura máxima de 1280 px com calha de 40 px, a mesma convenção que a maioria dos sistemas de design usa. Cada valor é ajustável por dispositivo, e toda a sobreposição liga e desliga com uma alternância.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo. Novo no plugin? siga o guia instalação primeiro.
- Grid Line é uma extensão gratuita, portanto nenhuma licença Pro é necessária.
Como habilitar a extensão da Linha de Grade #
Passo 1: Ligue-o na guia Extensões #
Do seu painel WordPress, vá para Adições Mestres e abra o Extensões guia. A linha de grade mora no Exibir widgets grupo com um distintivo Popular, ao lado de Glassmorphism and Patterns Clique em seu alternar para que fique roxo.
Passo 2: Salve suas alterações #
Role para o topo e clique Salvar alterações. Um aviso verde “Settings salvo com sucesso do” confirma que a extensão está ativa. Se o editor Elementor estiver aberto, recarregue-o uma vez.
Como mostrar a grade no editor Elementor #
Abra qualquer página com o Elementor e clique no Configurações de página ícone na barra superior Sob o Configurações aba você encontrará um novo Linha Grade secção marcada com o distintivo MA roxo Flip Habilitar para On, e a sobreposição de colunas aparece na tela imediatamente.
Como a configuração está em Configurações de página, a grade é por página: você decide onde ela é exibida e ela não o segue em todos os documentos.
Configurações da linha de grade explicadas #
- Habilitar: liga e desliga a sobreposição desta página.
- Cor da grade: a cor das colunas Escolha a amostra global ou defina uma cor personalizada com o selecionador Um valor de baixa opacidade mantém seu conteúdo legível sob a sobreposição.
- Colunas: quantas colunas desenhar.12 é o padrão, mas você pode combinar qualquer grade que seu design usa.
- Largura máxima: a largura total da grade, 1280 px por padrão Corresponda à largura de conteúdo do seu site para que as colunas se alinhem com seu layout real.
- Compensação: empurra a grade das bordas quando seu layout precisa.
- Calha: o espaço entre colunas, 40 px por padrão.
- Índice Z: a ordem de empilhamento da sobreposição, 999 por padrão, para que a grade permaneça visível acima do seu conteúdo.
Colunas, Largura Máxima, Offset e Calha são controles responsivos: clique no ícone do dispositivo ao lado de cada um para definir valores diferentes para desktop, tablet e celular.
Alterar a cor da grelha #
Clique na amostra personalizada ao lado Cor da grade para abrir o seletor de cores Qualquer valor HEXA funciona, e o canal alfa é mais importante: algo como 50 por cento de opacidade dá colunas visíveis sem esconder o design por baixo.
Afine as colunas e a calha #
Arraste os controles deslizantes e as atualizações de sobreposição ao vivo No exemplo abaixo a calha é de até 58 px e a grade carrega uma tonalidade personalizada, para que leia claramente contra o fundo claro enquanto os cartões de preços permanecem legíveis.
Quando o layout estiver alinhado, inverta Habilitar recuar A configuração salva com a página, por isso é fácil esquecer a sobreposição.
Quando a Linha de Grade economiza seu tempo #
- Correspondendo a um arquivo de design. Reconstrua um layout Figma ou XD na mesma grade de 12 colunas em que foi projetado, em vez de distâncias oculares.
- Alinhando seções. Verifique se os elementos em diferentes seções começam e terminam na mesma coluna.
- Série de páginas consistente. Mantenha as páginas de destino construídas por diferentes membros da equipe em uma grade compartilhada.
- Polimento de modelos importados. Solte a sobreposição em uma página de a kit modelo e localize os elementos que ficam fora da rede.
- Decisões espaçamento. Use as linhas da calha como uma régua rápida ao definir as larguras e o preenchimento da coluna.
Vídeo Tutorial #
Prefere assisti-lo em movimento? este vídeo passa por habilitar Grid Line e ajustar a sobreposição no editor Elementor.
Perguntas frequentes #
O que é a extensão Grid Line em Master Addons?
É uma extensão livre que desenha uma sobreposição de grade de colunas no editor Elementor Você define o número de colunas, calha, largura máxima, deslocamento e cor das Configurações de página, em seguida, use as colunas para alinhar seções e widgets da maneira que os designers fazem na Figma.
Onde encontro as configurações da Linha de Grade?
No editor Elementor, abra as Configurações de página na barra superior e fique na guia Configurações Depois de ativar a extensão no painel de complementos mestre, uma seção Linha de grade com um emblema MA aparece lá, segurando a alternância Habilitar e todas as opções de grade.
Posso alterar o número de colunas e a calha?
Sim. o campo Colunas pega qualquer número, 12 por padrão, e o controle deslizante Calha controla o espaço entre colunas Largura máxima e deslocamento moldam a pegada da grade Cada um deles é responsivo, então desktop, tablet e celular podem usar valores diferentes.
A sobreposição da grade é exibida em todas as páginas?
Linha No. Grid é uma configuração por página dentro das Configurações de página, então você a ativa apenas nas páginas onde deseja a sobreposição. Desligue a opção Habilitar quando terminar de alinhar, e essa página volta para uma tela limpa.
A extensão da Grid Line é gratuita?
Sim. Linha de grade é fornecido com a versão gratuita de Master Addons for Elementor, no grupo Display Widgets da guia Extensões Verifique o página preços para ver o que os planos Pro adicionam além das extensões gratuitas.
Embrulhando #
A extensão Grid Line dá ao Elementor a única coisa que toda ferramenta de design já possui: uma grade de colunas real para construir contra. Habilite-o uma vez no painel, ligue-o das Configurações de página quando precisar e ajuste as colunas, calha e cor para combinar com o sistema de navegação pelo resto do Widgets e extensões Master Addons para mais ferramentas como esta, incluindo o Qual Elemento paire rótulos para o editor.
