Como colocar container lado a lado no Elementor

No Elementor, existem dois sistemas diferentes para colocar elementos lado a lado. Se você está seguindo um tutorial antigo e as instruções não fazem sentido com o que está vendo na tela, provavelmente você está usando um sistema diferente do tutorial.

Desde a versão 3.7 do Elementor (lançada em 2022), o padrão é o Flexbox Container, que substitui o sistema antigo de Seções e Colunas. Os dois ainda coexistem, mas novos projetos usam o Container por padrão.

Este conteúdo cobre os dois métodos.

Qual sistema o seu site usa?

Abra o editor do Elementor em qualquer página. Se ao clicar no botão de adicionar novo elemento você vê a opção de adicionar um Container, seu site usa o sistema moderno. Se você vê opções de Seção com escolha de número de colunas, está no sistema legado.

Outra forma de verificar: no canto superior esquerdo do editor, se aparecer a opção Container na barra de widgets, é o sistema moderno.

Método 1: containers lado a lado com o Flexbox Container

Este é o método para sites construídos com o sistema moderno do Elementor.

A lógica do Flexbox Container é de containers dentro de containers. Para ter dois containers lado a lado, você precisa de um container pai com direção horizontal, e dentro dele dois containers filhos.

Passo 1: Clique no ícone + para adicionar um novo elemento e escolha Container. Este será o container pai.

Passo 2: Com o container pai selecionado, vá na aba de configurações e localize a propriedade Direção (Direction). Defina como Linha (Row). Isso coloca os itens filhos um ao lado do outro horizontalmente.

Passo 3: Dentro desse container pai, adicione dois novos containers clicando no + interno. Cada um desses será um dos lados do layout.

Passo 4: Com cada container filho selecionado, ajuste a Largura (Width) conforme necessário. Para dois lados iguais, use 50% em cada. Para proporções diferentes, ajuste individualmente.

Passo 5: Adicione widgets dentro de cada container filho (texto, imagem, botão, etc.).

O canal [verificar nome] explica visualmente como o sistema de direção do Flexbox Container funciona na prática:

Método 2: colunas lado a lado no sistema legado

Este método funciona em sites que ainda usam o sistema antigo de Seções e Colunas do Elementor.

Passo 1: Clique no ícone + para adicionar nova seção e escolha a estrutura de 2 colunas (ou 3, dependendo da necessidade).

Passo 2: O Elementor cria automaticamente duas colunas lado a lado. Cada coluna é um espaço independente onde você pode adicionar widgets.

Passo 3: Para ajustar a proporção das colunas, clique na borda entre elas e arraste. Ou selecione uma coluna individualmente, vá em Layout e defina a largura em porcentagem.

Passo 4: Adicione os widgets desejados em cada coluna arrastando do painel esquerdo.

Dica: a soma das larguras das duas colunas deve resultar em 100% para que fiquem alinhadas corretamente sem criar quebra de linha.

Comparação entre os dois sistemas

Como ajustar para mobile (responsividade)

No Flexbox Container: selecione o container pai, mude para a visualização mobile no editor e altere a Direção de “Linha” (Row) para Coluna (Column). Isso empilha os containers verticalmente no celular, mantendo o layout lado a lado no desktop.

No sistema legado: as colunas se empilham automaticamente no mobile por padrão. Se quiser controlar a ordem em que aparecem no celular, selecione cada coluna e ajuste a configuração de ordem na visualização mobile.

Problemas comuns

Os containers não ficam lado a lado: verifique se o container pai tem a direção definida como “Linha” (Row). Se estiver em “Coluna” (Column), os containers filhos ficam empilhados verticalmente.

Um container ocupa toda a largura: cada container filho precisa ter a largura definida manualmente. Se a largura estiver em “automático”, o container pode expandir para preencher o espaço. Defina valores específicos como 50% ou 400px.

O layout quebra no mobile: se os containers estão lado a lado no desktop mas sobrepostos ou com largura incorreta no celular, verifique as configurações de responsividade. No container pai, mude a direção para “Coluna” na visualização mobile.

Não encontro a opção Container no meu Elementor: se a opção Container não aparece no editor, acesse Elementor > Configurações > Experimentos e ative o Flexbox Container. Em versões mais antigas, pode não estar disponível.

Para se aprofundar em como o Elementor funciona como um todo e o que cada recurso faz, veja o que é o Elementor. E se precisar reinstalar o Elementor por algum motivo, o processo seguro está em como desinstalar e reinstalar o Elementor.

Perguntas frequentes

Qual a diferença entre Container e Seção no Elementor?

No sistema moderno, o Container substitui tanto as Seções quanto as Colunas. Toda a estrutura é feita com containers aninhados usando o modelo Flexbox. No sistema legado, uma Seção é o bloco maior que contém Colunas. Os dois coexistem no Elementor, mas projetos novos usam o Container por padrão.

Como faço para deixar dois containers com tamanhos diferentes?

No Flexbox Container, selecione cada container filho individualmente e defina a largura desejada (ex: 30% para um e 70% para o outro). No sistema legado, selecione a coluna e ajuste a largura em porcentagem nas configurações de Layout.

Como copiar um container do Elementor para outra página?

Clique com botão direito no container, selecione Copiar e depois Colar na posição desejada, mesmo em outra página. Para salvar como template reutilizável, clique com botão direito e escolha Salvar como Template Global.

O sistema de Containers é compatível com o Elementor gratuito?

Sim. O Flexbox Container está disponível na versão gratuita do Elementor desde a versão 3.7. Não é necessário o Elementor Pro para criar layouts com containers lado a lado.

Como empilhar os containers no celular mantendo lado a lado no desktop?

Selecione o container pai, mude para a visualização mobile no editor e altere a propriedade Direção de “Linha” para “Coluna”. Essa mudança só se aplica ao mobile, mantendo o layout horizontal no desktop.