Com foco em performance e flexibilidade, o novo bloco Container chega para substituir o antigo bloco “Seção”, trazendo melhorias significativas tanto em usabilidade quanto em eficiência de carregamento. Projetado especialmente para páginas landing pages, o Container permite definir se o bloco deve ser exibido apenas no desktop, apenas no mobile ou em ambos, otimizando a experiência do usuário conforme o dispositivo.

Além disso, o novo bloco possibilita a organização de elementos internos em colunas sem a necessidade do bloco tradicional de colunas, o que reduz significativamente a quantidade de código HTML gerado. Isso torna a construção das páginas mais leve, melhora o desempenho do Gutenberg e contribui diretamente para a velocidade de carregamento do portal. Neste tutorial, você vai conhecer as novas funcionalidades do bloco Container e revisitar as que já existiam no bloco seção e entender como aproveitar ao máximo esse recurso nas suas páginas.

Configurações

1 Localizando o bloco Container
Dentro do editor Gutenberg, clique no botão “+” para abrir a biblioteca de blocos. Em seguida, procure pelo bloco chamado Container, identificado com o ícone azul característico dos blocos desenvolvidos pela Seox.
Para agilizar o processo, você também pode utilizar o atalho digitando /container diretamente dentro do conteúdo da notícia. Isso abrirá o bloco de forma rápida, sem a necessidade de navegar pelo menu lateral.

2 Definindo em quais dispositivos o bloco será exibido
O novo bloco Container permite que você controle com precisão em quais dispositivos o conteúdo será exibido: desktop, mobile ou ambos. Para configurar essa exibição, selecione o bloco no editor Gutenberg e, na barra lateral direita do WordPress, localize a seção “Mostrar em”. Ali, você encontrará um switch com três opções: Ambos, Mobile ou Desktop. Basta escolher aquela que faz mais sentido para o layout da sua página.

3 Definindo a largura do container
Na aba Layout das configurações do bloco, você encontrará as opções de largura e altura. Dentro da opção largura, é possível escolher entre quatro modos diferentes, de acordo com a necessidade visual e estrutural da sua página:

  • Total: o container ocupará toda a largura da tela, ideal para blocos com fundo colorido ou elementos que devem se estender de ponta a ponta da página.
  • Normal: o bloco seguirá a largura padrão do portal, respeitando os limites definidos pelo sistema e mantendo o alinhamento com os demais conteúdos.
  • Flex: ativa o modo flexível, permitindo configurar o comportamento dos elementos internos em colunas ou linhas (falaremos mais dessa possibilidade adiante).
  • Fit: a largura do container se ajustará automaticamente ao tamanho do conteúdo interno, garantindo uma exibição mais compacta e alinhada.

Essas opções oferecem total controle sobre a estrutura do layout, contribuindo para uma página mais leve, organizada e visualmente consistente.

4 Definindo a altura do container
Na mesma aba Layout, selecione o subitem Altura para configurar como o container será exibido verticalmente. Você encontrará duas opções de controle:

  • Auto: define a altura de forma automática, ajustando-se dinamicamente ao conteúdo inserido no bloco. Essa é a opção mais prática para layouts fluídos e responsivos, sem a necessidade de ajustes manuais.
  • Manual: permite personalizar a altura do container, atribuindo valores fixos diferentes para desktop e mobile. Você pode escolher a unidade de medida que melhor se adapta ao seu projeto (px, %, em, rem, vw ou vh), garantindo mais controle visual e alinhamento preciso com o restante da página.

Essa configuração é especialmente útil em estruturas mais complexas, como páginas com seções de fundo cheio ou componentes que precisam ocupar um espaço específico na tela.

5 Organizando os elementos dentro do container
Na aba Layout, localize o grupo de campos chamado Organização Interna, é aqui que você define como os elementos inseridos no container irão se comportar visualmente.

Esse recurso permite estruturar os conteúdos sem depender do bloco tradicional de colunas, garantindo mais leveza e performance. Você poderá controlar o alinhamento horizontal e vertical, o espaçamento entre os elementos, a direção dos itens, entre outras configurações.

  • Block: Esta é a configuração padrão. Os elementos dentro do container são exibidos um abaixo do outro, como blocos independentes, seguindo o fluxo vertical da página.
  • Flex: Ativa o modo de layout flexível, permitindo agrupar elementos em linha, ajustar o alinhamento entre eles, controlar a direção (horizontal ou vertical), espaçamento e comportamento responsivo. Ideal para criar seções personalizadas com maior controle visual e estrutura adaptável.

Essa funcionalidade oferece mais liberdade editorial e contribui para uma construção de página mais leve e organizada.

6 Organização Interna – Configurações Flex
Ao ativar o modo Flex no bloco Container, você desbloqueia uma série de configurações que permitem organizar os elementos internos com muito mais controle e flexibilidade.

  • Direção: Defina se os itens dentro do container devem ser organizados na horizontal ou na vertical. Dois switches adicionais oferecem ainda mais personalização: um permite a quebra automática de linha caso os elementos ultrapassem o espaço disponível, e o outro ativa o modo “empilhar” apenas para dispositivos móveis, ideal para garantir boa visualização em telas menores.
  • Alinhamento Vertical: Escolha como os itens serão alinhados verticalmente dentro do container, no topo, ao centro ou na base.
  • Justificação (Alinhamento Horizontal): Controle como os elementos se distribuem na horizontal, à esquerda, ao centro, à direita ou com espaçamento uniforme entre eles.
  • Espaço entre os itens (Gap): Defina o espaçamento interno entre os elementos do container.

Exemplo Prático

Se você deseja montar uma seção com múltiplas colunas, como antes era feito combinando o bloco “Seção” com o bloco “Colunas”, agora você pode fazer tudo isso diretamente com o bloco Container, de forma mais leve e eficiente. Veja o passo a passo:

  1. Adicione um bloco Container no Gutenberg.
  2. Defina o layout como flexível na aba Layout > Organização Interna > Flex para ativar o comportamento de colunas.
  3. Defina a direção como horizontal, caso queira colunas lado a lado.
  4. Ative a opção “quebrar linha” se desejar que as colunas se ajustem automaticamente em telas menores.
  5. Configure os alinhamentos verticais e horizontais nos campos alinhamento e justificação.
  6. Ative o switch de empilhamento no mobile, para garantir boa responsividade.
  7. Use o campo “Espaçamento entre os itens (Gap)” para definir a distância entre as colunas.

Feito isso, o container pai já estará preparado para receber os elementos internos. Agora é o momento de definir quais itens irão compor esse bloco. Você pode inserir praticamente qualquer recurso disponível no Gutenberg, como imagens, parágrafos, cartões, ícones ou títulos. Neste exemplo, vamos trabalhar com um cenário mais avançado, utilizando um container dentro de outro container.

  1. Adicione um bloco Container dentro do container principal e insira nele os conteúdos que deseja organizar, como imagens, textos ou títulos. Em seguida, acesse as configurações desse container interno e vá em Layout > Largura > Flex. Aqui, você terá duas opções: Colunas ou Expandir. Selecionando “Colunas”, será possível definir a proporção de espaço que o container ocupará em desktop e mobile, utilizando uma grade de 12 colunas como referência.

    Na prática, se a ideia for criar três colunas iguais, cada container interno deve ocupar 4 colunas, pois 3 containers de 4 colunas completam as 12 unidades totais da grade. Essa lógica garante uma organização precisa e responsiva, substituindo com eficiência os blocos antigos de seção e colunas.
  2. Dica: Configure o primeiro item dentro do container principal com todos os ajustes desejados. Em seguida, duplique esse container interno para replicar rapidamente a estrutura, mantendo a consistência e economizando tempo de edição.

7 Personalizando os estilos do Container
Ao lado da aba “Layout”, você encontrará a aba “Estilos”, onde ficam as opções de estilização visual do container. Nessa aba, você poderá personalizar os seguintes itens:

  • Padding: Define a margem interna do container. É possível configurar valores distintos para desktop e mobile, garantindo maior controle sobre o espaçamento dos elementos internos.
  • Margem: Refere-se à margem externa do container. Use esta opção caso deseje separar o bloco de outros elementos da página, criando respiro visual.
  • Background: Permite personalizar o fundo do container com três opções: cor, gradiente ou imagem. Isso amplia as possibilidades de design e destaque do bloco.
  • Bordas: Aqui você pode adicionar bordas ao container, ajustando a espessura, a cor e aplicando cantos arredondados conforme desejado.

8 Adicionando um clique ao container e definindo darkmode
Ao lado da aba “Estilos”, você encontrará a aba “Avançado”. Nela, é possível definir a estrutura HTML do container e ativar recursos adicionais. Um dos principais é o switch de Darkmode: ao habilitá-lo, todos os elementos internos do container receberão automaticamente seus atributos de estilo escuro, garantindo consistência visual em layouts que suportam esse modo.

Tags HTML

  • Div: Estrutura padrão do bloco, utilizada na maioria dos casos. É a opção mais comum e segura para organizar os conteúdos.
  • Section: Indicado quando o container marca o início de uma nova seção da página. Essa escolha deixa o código HTML mais semântico e organizado.
  • a (link): Transforme todo o container em um grande link clicável. Ao selecionar essa opção, será necessário preencher o campo “Link” com a URL de destino desejada.
Assuntos