Comece pelo conteúdo e mantenha a mesma informação disponível, mesmo se o layout visual mudar.
Antes de começar
Se ainda estiver definindo os princípios gerais de layout e os testes fora do editor, veja também o guia de site responsivo para celular e computador.
Na barra do editor, abra Responsive Mode e selecione Desktop, Tablet ou Mobile. Selecione o contêiner e abra Layout; nas propriedades que têm ícone responsivo, defina largura, altura, direção, alinhamento e ordem para o breakpoint escolhido.
Passo a passo
-
Exemplo: no desktop, use um contêiner em Row com texto e formulário em duas colunas; no celular, mude a direção para Column e cada filho para largura total. Se necessário, use Custom Order para manter título antes da imagem/formulário, sem ocultar informação essencial.
-
Use os presets e também larguras intermediárias; confira que texto, botões e campos não colidem nem criam rolagem horizontal. Ajuste o breakpoint onde o conteúdo deixa de caber, não só para coincidir com um modelo de aparelho específico.
-
Publique e teste a página com teclado e em celular real quando possível. Confirme a ordem do DOM/leitura e que não há conteúdo duplicado para esconder uma das versões.
Limites e cuidados
Evite esconder conteúdo essencial apenas em mobile ou criar duplicatas visuais que geram manutenção.
Próxima leitura
Explore o núcleo de ferramentas e hospedagem para ver orientações relacionadas.
Fonte oficial: design responsivo com contêineres — Elementor. Direção, ordem e dimensões podem ser ajustadas por breakpoint; os pontos de quebra configurados variam por site.