Se você busca criar um site moderno, organizado e com um design diferenciado, o conceito de Bento Grid é simplesmente perfeito. Essa técnica, inspirada nas famosas marmitas japonesas, permite organizar os elementos do site em caixas bem distribuídas, criando uma hierarquia visual que direciona o olhar do visitante de forma estratégica.
Além disso, o Bento Grid proporciona uma navegação mais fluida, melhora a experiência do usuário e deixa qualquer página muito mais bonita e profissional.
Mas afinal, como aplicar esse conceito dentro do Elementor? A seguir, você confere um passo a passo prático e descomplicado!
Passo 1: Planeje sua estrutura no Bento Grid
Antes de abrir o Elementor, é fundamental planejar sua grid. A recomendação é desenhar a distribuição dos elementos:
- Quantas linhas e colunas sua sessão terá;
- Quais elementos ocuparão mais espaço;
- E como garantir um equilíbrio visual entre texto, imagens e botões.
Por exemplo, se você quer que uma imagem ocupe duas colunas e três linhas, basta definir isso previamente. Esse planejamento facilita muito na hora de construir sua página sem dor de cabeça.
Passo 2: Criando sua sessão no Elementor
Dentro do Elementor, siga este caminho:
- Adicione um contêiner do tipo Grade (Grid).
- Configure o número de colunas e linhas de acordo com seu planejamento.
- Ajuste os espaçamentos para que nada fique colado — um bom padrão é usar 40 pixels de preenchimento interno (padding) em cada contêiner.
- Personalize as cores e bordas para manter seu padrão visual.
➡️ Dica: Sempre defina as proporções usando fr (frações) ou porcentagem. Isso garante que seu layout seja responsivo e mantenha o equilíbrio nas diferentes telas.
Passo 3: Adicionando os elementos
Agora começa a parte divertida: inserir textos, títulos, imagens, botões e até elementos decorativos como divisores.
- Use o widget Divisor para criar linhas estilizadas.
- Adicione títulos e, se quiser, utilize um pequeno código CSS para destacar uma palavra em outra cor dentro do título.
- Inclua subtítulos e dê destaque a palavras estratégicas, utilizando recursos do próprio editor de texto do Elementor.
- Configure botões com espaçamentos agradáveis, cantos arredondados e uma tipografia que combine com seu layout.
Além disso, se desejar, pode até gerar links de WhatsApp diretamente com ajuda do próprio ChatGPT ou ferramentas online.
Passo 4: Inserindo imagens corretamente
Para que suas imagens fiquem perfeitas:
- Configure a largura e altura em 100% dentro do contêiner.
- Utilize o ajuste de objeto em “cobertura” e alinhe como centro ao centro.
- Aplique bordas arredondadas (ex.: 20 pixels) e uma borda sólida transparente para manter a estética alinhada.
Passo 5: Responsividade no tablet e no mobile
O Bento Grid, por si só, já facilita muito o design responsivo. Mas, ainda assim, alguns ajustes são essenciais:
- Para tablet, reorganize sua grid se necessário — muitas vezes, duas colunas funcionam melhor do que três.
- No mobile, opte por transformar os itens em uma única coluna, ajustando espaçamentos e tamanhos de texto para melhorar a legibilidade.
- Utilize unidades de medida como VW (viewport width) para que os títulos se adaptem ao tamanho da tela automaticamente.
Passo 6: Criando a galeria no estilo Bento Grid
Para deixar seu site ainda mais profissional, adicione uma galeria de imagens no estilo Masonry. Esse tipo de galeria mantém a proporção real das imagens, criando um layout que se parece com um mosaico moderno e organizado.
➡️ E claro: não esqueça de aplicar os mesmos princípios – bordas, espaçamentos e responsividade.
Passo 7: Sobre o fotógrafo (ou sobre você)
Aqui entra uma seção super importante: apresentar o profissional.
Monte uma nova grade no estilo Bento Grid com uma imagem sua, um texto sobre sua trajetória e uma frase de impacto.
Lembre-se: não é necessário fazer uma biografia gigantesca. Textos curtos, diretos e emocionantes geram muito mais conexão.
Passo 8: CTA Final e Rodapé
Encerrando sua landing page, adicione um CTA (chamada para ação) bem direto, reforçando o objetivo da página, seja marcar uma sessão, solicitar orçamento ou entrar em contato.
O rodapé deve ser simples, com sua logo, informações básicas, política de privacidade e ícones de redes sociais. Lembre-se de ajustar tudo para desktop, tablet e mobile.
Bônus
Se você quer se aprofundar no mundo das páginas de lançamento, não pode perder nosso Workshop Páginas de Lançamento, que acontecerá nos dias 26, 28 e 30 de maio, às 19h, ao vivo.
Nesses três encontros, vamos te ensinar na prática como criar páginas profissionais, seja para seus próprios projetos ou para clientes. CLIQUE AQUI para se inscrever
Conclusão:
Criar uma landing page com Bento Grid no Elementor é, sem dúvidas, uma estratégia incrível para quem busca unir design, funcionalidade e responsividade. Afinal, além de proporcionar um visual extremamente moderno e diferenciado, esse conceito também oferece uma navegação muito mais fluida, bem como uma experiência significativamente mais agradável para quem acessa seu site.
Portanto, agora que você já conhece todo o passo a passo, chegou a sua vez de colocar a mão na massa. Com as técnicas certas, você poderá transformar seus projetos em verdadeiras obras de arte no mundo digital, encantando seus visitantes e, consequentemente, gerando muito mais resultados.
