No Elementor, o Loop Grid é uma ferramenta poderosa para criar loops personalizados de posts, mas às vezes pode ser desafiador garantir que todos os itens tenham a mesma altura. Neste artigo, vou mostrar como resolver esse problema utilizando um código CSS simples e prático.
Problema Comum
Muitos usuários relatam que, ao ativar a opção “Equal Height” no Loop Grid, os itens internos não se ajustam corretamente, resultando em uma aparência desalinhada. Isso ocorre porque a propriedade de altura igual não é aplicada aos contêineres internos.
Solução
Para corrigir isso, você pode adicionar um pouco de CSS personalizado ao seu site. Aqui está o código que você precisa adicionar:
selector {
height: 100%;
}Passos para Aplicar a Solução
- Adicionar o CSS Personalizado: Insira o código acima no arquivo de estilos do seu tema ou em um plugin de personalização CSS, como o Custom CSS do Elementor.
- Verificar o Resultado: Volte para o seu editor Elementor e desative a opção “Equal Height” no Loop Grid. Agora, os itens devem ter a mesma altura, alinhando-se corretamente.
Vídeo Tutorial
Para uma demonstração visual detalhada, confira este vídeo tutorial de autoria do Wicky Design. Ele explica passo a passo como corrigir o problema de altura igual no Loop Grid do Elementor.
Conclusão
Com essa solução simples, você pode garantir que todos os itens do seu Loop Grid tenham a mesma altura, proporcionando uma aparência mais organizada e profissional ao seu site.
