Ao criar uma página de destino no Elementor, a grelha de desktop parece perfeita: três colunas, ordem rigorosa, tudo respira. Abra-a num tablet e a terceira coluna cai, quebra o ritmo e deixa um espaço vazio à direita. Parece-lhe familiar?

Por predefinição, o Elementor ajusta as colunas que não cabem numa linha em ecrãs estreitos. Mas e se num tablet precisar não de três, mas exatamente de duas colunas por linha, sem quebras e sem espaços vazios? Ou no telemóvel, não uma, mas duas?

Abaixo estão dois métodos funcionais: integrado (para versões do Elementor 2024+) e CSS personalizado (para controlo total em qualquer versão). Ambos estão testados e não entram em conflito com a otimização do DOM.

💡 Resumo rápido:

• Defina as larguras das colunas no Elementor através do separador Avançado para cada ponto de quebra separadamente
• Se as definições padrão não forem suficientes, adicione CSS personalizado com flex-wrap e media queries
• Verifique o layout em todos os dispositivos: as colunas reorganizam-se sem quebras e espaços vazios

O processo é mostrado claramente neste vídeo:

1. Método integrado: larguras de coluna responsivas

A partir do Elementor 3.18+ (e especialmente com a transição para contentores Flexbox em 2024), pode controlar as larguras das colunas em cada dispositivo sem uma única linha de código.

Criar uma secção com colunas

Adicione uma nova secção e escolha uma estrutura de três colunas:

Duplique cada uma das três colunas para obter seis. Isto é necessário para que, em tablets, as colunas se reorganizem em duas linhas de duas, em vez de deixar a terceira sozinha:

Para ver o layout, preencha as colunas com números usando o widget "Título", para que a pré-visualização mostre imediatamente qual foi para onde:

Definir a largura para cada dispositivo

Vá às definições de cada coluna → separador Avançado. Na secção Largura, mude para o modo responsivo (ícone tablet/telemóvel) e defina os valores de acordo com a documentação do Elementor:

• Desktop: três colunas por linha (a largura será dividida automaticamente)
• Tablet: duas por linha
• Telemóvel: uma por linha (ou duas, se também precisar de duas no telemóvel)

Ponto-chave: a largura é definida para cada uma das seis colunas separadamente, o Elementor aplica o valor a todas as colunas dentro de uma secção. Não haverá quebra porque, em tablets, seis colunas resultam exatamente em duas linhas de duas.

2. CSS personalizado: controlo total

O método integrado cobre a maioria dos cenários, mas às vezes precisa de um número diferente de colunas em tablets (2 em vez de 3) e, no telemóvel, não padrão (2 em vez de 1). Ou tem uma versão antiga do Elementor sem larguras responsivas. Então, CSS.

Atribuir uma classe CSS à secção

Abra as definições da secção → separador Avançado → campo Classes CSS. Introduza uma classe única, por exemplo, elementor-custom-columns:

Adicionar regras CSS

Insira o código nas definições da secção (separador Avançado → CSS personalizado) ou no personalizador do tema (Aparência → Personalizar → Estilos adicionais). Aqui está a versão atual:

1
selector.elementor-custom-columns .elementor-container {
2
  flex-wrap: wrap;
3
  justify-content: center;
4
}

Agora, as larguras das colunas para cada dispositivo através de media queries. Para secções (Sections) use o seletor .elementor-top-column, para contentores (Containers), .e-con-inner > .e-con:

1
/* Base: three columns on desktop */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Tablet: two columns */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Mobile: one column */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

O que está a acontecer aqui: flex-wrap: wrap permite a quebra de colunas quando não cabem numa linha, e justify-content: center centra as colunas restantes (sem um espaço à direita). As media queries substituem a largura em cada ponto de quebra, exatamente com tantas colunas por linha quantas as necessárias.

Resultado nos dispositivos

No desktop, três colunas organizadas:

No tablet, exatamente duas por linha, sem quebras e espaços:

No telemóvel, uma coluna em largura total:

Para quem ativou a otimização do DOM

Se nas definições do Elementor (Elementor → Definições → Experiências) a opção Otimização Melhorada do DOM estiver ativa, os seletores mudam, o .elementor-row desaparece. CSS adaptado para este modo:

1
selector.elementor-custom-columns {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
}
6
 
7
.elementor-custom-columns .elementor-top-column {
8
  width: 33.33%;
9
}
10
 
11
@media (min-width: 768px) and (max-width: 1024px) {
12
  .elementor-custom-columns .elementor-top-column {
13
    width: 50%;
14
  }
15
}
16
 
17
@media (max-width: 767px) {
18
  .elementor-custom-columns .elementor-top-column {
19
    width: 100%;
20
  }
21
}

Um exemplo de código verificado para este cenário também está disponível no GitHub Gist do oooh-boi, funcional, testado no Elementor 3.19+ com otimização do DOM ativada.

Qual o método a escolher: tabela comparativa

Se tiver uma versão recente do Elementor e uma grelha padrão (2-4 colunas), use o método integrado, é mais rápido e não requer CSS. Se precisar de um layout não padrão, estiver a usar uma versão antiga do plugin ou tiver ativado a otimização do DOM, o CSS personalizado dá-lhe controlo total.

⁉️🤔 Perguntas frequentes

Porque é que as colunas quebram com um salto nos tablets?

Por predefinição, o Elementor usa flex-wrap: nowrap para a linha de colunas. Quando três colunas não cabem na largura do tablet, forma-se uma quebra: segunda coluna na primeira linha, a terceira vai para a segunda e fica sozinha. Com flex-wrap: wrap e larguras de coluna a metade da linha em tablets, seis colunas encaixam exatamente em três linhas de duas, sem quebras. justify-content: center centra as colunas se houver menos do que o necessário na última linha. Solução: ou largura responsiva através da IU (método 1), ou flex-wrap: wrap com media queries (método 2).

O método funciona com contentores (Flexbox Containers)?

Sim, mas os seletores são diferentes. Para contentores, em vez de .elementor-top-column use .e-con-inner > .e-con, e em vez de .elementor-container, o próprio contentor. O método responsivo integrado (n.º 1) funciona com contentores sem edições.

É obrigatório duplicar as colunas?

Sim, se em tablets precisar de menos colunas por linha do que no desktop. Por exemplo: desktop, 3 colunas, tablet, 2. Três colunas originais não podem ser reorganizadas em duas linhas organizadas de duas. Seis colunas (cada uma duplicada) reorganizam-se em três linhas de duas.

Isto entra em conflito com plugins de cache?

As regras CSS adicionadas através do CSS Personalizado da secção ou do personalizador entram nos estilos inline ou no wp_head, passam por qualquer plugin de cache (WP Rocket, W3 Total Cache, LiteSpeed) sem problemas. Depois de alterar o CSS, limpe a cache.

O que fazer se as colunas forem demasiado estreitas no telemóvel?

Verifique se a largura não está a ser herdada do ponto de quebra do tablet. No Elementor, as definições são em cascata: o telemóvel herda do tablet, o tablet herda do desktop. Defina explicitamente a largura em cada ponto de quebra, mesmo que o valor corresponda ao do nível superior.

Vale a pena preocupar-se com CSS em 2026?

As definições responsivas integradas do Elementor são suficientes para a maioria das tarefas, use-as como a ferramenta principal. Mas quando em tablets precisa não de duas, nem de três, mas, digamos, quatro colunas com larguras desiguais, o CSS personalizado continua a ser a única forma de fazer exatamente o que foi planeado.

Experimente ambos os métodos numa página de teste: comece pelo integrado (mais rápido) e, se lhe faltar flexibilidade, use a abordagem CSS. A competência de configurar media queries para o Elementor será útil para outras tarefas: tipos de letra personalizados em dispositivos, ocultação de blocos, espaçamento não padrão para tablets.