Se você quer modernizar o visual dos seus sites com um layout super atual e criativo, o estilo Bento Grid é uma escolha certeira. Além disso, com a atualização 3.27 do Elementor, ficou muito mais fácil criar esse tipo de design sem dor de cabeça.
A partir de agora, você vai descobrir neste post como usar a funcionalidade de Grade Flexível do Elementor para montar layouts dinâmicos, responsivos e incrivelmente criativos em poucos cliques.
O que é o Bento Grid?
O Bento Grid é um estilo de layout que ganhou destaque em 2024 e continua em alta em 2025. Em geral, sua estética é marcada por:
- Blocos arredondados
- Distribuição criativa das informações
- Visual amigável e moderno
Ou seja, trata-se de uma abordagem visual que equilibra organização e criatividade — ideal para quem quer impressionar o visitante logo no primeiro olhar.
Elementor 3.27: A Revolução do Grid Flexível
A versão 3.27 do Elementor trouxe uma funcionalidade poderosa: a Grade Flexível. Anteriormente, para criar um layout em grade, era preciso configurar diversos contêineres manualmente — o que demandava bastante tempo e cuidado.
- Criar linhas e colunas com mais liberdade
- Redimensionar elementos individualmente
- Fazer sobreposições assimétricas com facilidade
Em resumo: ficou muito mais simples criar layouts criativos direto no Elementor.
Como Criar um Bento Grid no Elementor
1. Ative a Grade Flexível
- Vá ao Elementor no seu WordPress com a versão 3.27 instalada
- Adicione o widget Grade diretamente no layout
- Personalize o número de colunas e linhas conforme seu projeto
2. Adicione Elementos à Grade
- Use o navegador lateral para selecionar corretamente os elementos
- Adicione imagens, textos ou contêineres dentro das células da grade
3. Redimensione Elementos
- Clique no elemento (imagem, por exemplo)
- Vá em Avançado > Item da Grade
- Ajuste a extensão da linha e da coluna para personalizar o espaço ocupado
📌 Dica: Coluna = eixo horizontal | Linha = eixo vertical (sim, é o contrário do que aprendemos na escola)
Criando Layouts Assimétricos com Bento Grid
Agora que você já conhece o básico, vamos explorar o verdadeiro diferencial do Bento Grid: os layouts assimétricos.
- Combinar diferentes tamanhos de blocos
- Sobrepor elementos com proporções únicas
- Usar contêineres internos para ajustes mais refinados
Exemplo prático:
- Um elemento ocupa 2 colunas
- Outro ocupa 2 linhas
- Um terceiro contêiner interno abriga dois sub-blocos empilhados
Dessa forma, o resultado final é um layout com movimento visual, muito mais atraente do que grades simétricas tradicionais.
Manipulando Textos e Imagens Criativamente
Além disso, você pode usar essa estrutura para destacar conteúdos específicos. Veja algumas possibilidades:
- Distribuir texto em colunas diferentes
- Criar composições com imagem de um lado e descrição do outro
- Misturar elementos para gerar contraste e destaque
Ou seja, com apenas alguns cliques, você transforma um layout básico em algo original e envolvente.
Um Aviso Importante: Hospedagem Conta (E Muito!)
Antes de continuar, vale destacar: um layout bonito de nada adianta se o site for lento ou instável.
Por isso, é fundamental contar com uma hospedagem confiável.
A Hostinger, por exemplo, oferece planos a partir de R$ 6,99/mês, com:
- 50 GB de armazenamento SSD
- SSL grátis
- Criador de sites com IA integrado
Use o cupom aescoladesites e garanta um desconto exclusivo.
👉 Clique aqui para conhecer os planos da Hostinger
Conclusão: Domine o Bento Grid com o Elementor
Com a nova Grade Flexível do Elementor 3.27, criar layouts modernos, criativos e assimétricos nunca foi tão fácil. Em resumo, agora você consegue:
- Designs assimétricos
- Layouts criativos e responsivos
- Personalizações com muito menos esforço
Essa atualização dá um verdadeiro upgrade no visual dos seus sites sem complicação. Se quiser um tutorial completo focado só em Bento Grid, deixa aí nos comentários que a gente prepara com todo carinho!
Assista o vídeo completo no YouTube para um tutorial mais completo.
