Astra spacing não aplica no frontend: como corrigir

Tipo Page Builders

Nome do erro Espaçamento do Astra Pro não aplica no frontend EN: Astra Pro spacing controls not applying on frontend

Severidade Atenção

Descrição O Astra spacing não aplica no frontend quando o módulo de espaçamento do Astra Pro Addon está desativado, o arquivo de CSS dinâmico gerado pelo tema ficou em cache antigo, ou outra regra CSS mais específica sobrescreve o padding e margin definidos no Customizer.

O que é Astra spacing que não aplica no frontend?

O Astra spacing é o conjunto de controles de espaçamento (padding e margin) que o Astra Pro adiciona ao Customizer do WordPress para ajustar o respiro entre seções, containers, cabeçalho, rodapé e conteúdo. Esses controles aceitam valores por dispositivo (desktop, tablet e mobile) e dependem do Astra Pro Addon ativo, já que fazem parte de um módulo Pro que precisa estar habilitado no painel de opções do tema. Quando funcionam, o valor digitado no Customizer vira CSS aplicado ao elemento correspondente no site publicado.

A falha aparece quando o valor é salvo no Customizer mas não muda nada no frontend. Isso acontece por três frentes principais: o módulo de espaçamento do Astra Pro Addon não está ativado, então o controle até aparece mas não emite o CSS final; o Astra gera o CSS de forma dinâmica e o arquivo gerado (ou o cache de um plugin de cache ou da CDN) está servindo uma versão antiga sem a alteração; ou existe uma regra CSS de outro plugin, tema filho ou page builder com seletor mais específico que vence o padding e margin do Astra por especificidade. Identificar em qual das três o problema está é o que direciona a correção.

Como identificar

Você altera o padding ou margin nos controles de espaçamento do Astra no Customizer, clica em Publicar, mas o frontend continua com o espaçamento antigo.
O preview ao vivo dentro do Customizer mostra o novo espaçamento, porém ao recarregar a página publicada (ou em aba anônima) o valor não aparece.
O controle de espaçamento aparece esmaecido, ausente ou sem efeito, sugerindo que o módulo Pro correspondente não está ativo.
Apenas o desktop ignora o valor, enquanto tablet ou mobile aplicam, indicando valores responsivos sobrescrevendo o padrão.
No inspetor do navegador (F12), a regra de padding ou margin do Astra aparece riscada (overridden) por outra regra de um plugin, tema filho ou page builder.

Antes de começar: Antes de alternar a geração de arquivos CSS, limpar caches em produção ou adicionar CSS personalizado, faça um backup do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso o layout quebre.

Como prevenir

Mantenha o Astra Pro Addon ativo e os módulos que você usa (incluindo o de espaçamento) habilitados antes de configurar os controles no Customizer.
Sempre que ajustar espaçamento, valide o resultado em aba anônima e em desktop, tablet e mobile para flagrar cache e valores responsivos esquecidos.
Inclua a regeneração do CSS dinâmico do Astra e a limpeza de cache na sua rotina de deploy, evitando arquivos de estilo defasados no ar.
Evite acumular CSS de espaçamento concorrente entre tema, page builder e plugins; centralize o controle de padding e margin em uma única camada para reduzir conflitos de especificidade.

Causa

O módulo de espaçamento do Astra Pro Addon está desativado no painel Aparência -> Astra Options: o controle pode até existir no Customizer, mas sem o módulo Pro ativo o CSS final do espaçamento não é emitido para o frontend.
O Astra gera o CSS de forma dinâmica e a opção de geração de arquivos (File Generation) está servindo um arquivo .css cacheado antigo na pasta de uploads, sem a última alteração de padding ou margin.
Um plugin de cache (como WP Rocket ou W3 Total Cache) ou a CDN/Cloudflare está entregando uma versão minificada e antiga da folha de estilo do Astra, anterior ao ajuste de espaçamento.
Outra regra CSS de um page builder (Elementor, Beaver Builder), de um tema filho ou de um plugin tem seletor mais específico que o do Astra e sobrescreve o padding ou margin por especificidade.
O valor foi definido apenas para um dispositivo (por exemplo mobile) nos controles responsivos, deixando desktop com o valor herdado, o que dá a impressão de que o espaçamento do desktop não aplica.

Como resolver

Ative o módulo de espaçamento no Astra Pro Addon: Confirme que o Astra Pro Addon está instalado e ativo e que o módulo de espaçamento (Spacing) está habilitado no painel de opções do tema. Sem o módulo Pro ativo, o controle do Customizer não emite o CSS final para o frontend.
```
Painel WP -> Aparência -> Astra Options
Localize o módulo de espaçamento (Spacing) e ative o toggle
Confirme em Plugins que o 'Astra Pro Addon' está ativado
```
Reaplique o valor no Customizer e publique: Abra o controle de espaçamento, confira o valor em cada dispositivo (desktop, tablet, mobile) e republique. Um valor preenchido só no mobile deixa o desktop com o espaçamento herdado, o que parece que a alteração não aplicou.
```
Painel WP -> Aparência -> Personalizar (Customizer)
Abra a seção de espaçamento do elemento (container, seção, cabeçalho ou rodapé)
Preencha o valor no ícone de desktop, tablet e mobile e clique em Publicar
```
Regenere o CSS dinâmico do Astra: O Astra grava o CSS gerado em arquivo quando a geração de arquivos (File Generation) está ligada. Force a regeneração desligando e religando a opção, o que recria o arquivo com o espaçamento mais recente.
```
Painel WP -> Aparência -> Astra Options -> aba de configurações/performance
Desligue a opção 'File Generation' (geração de arquivos CSS), salve
Ligue novamente a opção 'File Generation' e salve para recriar o arquivo
```
Limpe o cache do plugin de cache e da CDN: Mesmo com o CSS regenerado, um plugin de cache ou a CDN pode servir a folha de estilo antiga. Limpe todos os caches e purgue a CDN para o navegador buscar o CSS atualizado com o espaçamento novo.
```
Limpe o cache do plugin de cache (ex.: WP Rocket -> Limpar Cache; W3TC -> Empty All Caches)
Purgue o cache da CDN (ex.: Cloudflare -> Caching -> Purge Everything)
Recarregue o site em uma aba anônima para ignorar o cache do navegador
```
Identifique e vença a regra que sobrescreve: Se o espaçamento ainda não aplica, inspecione o elemento no navegador para ver qual regra está riscando o padding ou margin do Astra. Se outra regra mais específica vence, aplique um CSS adicional com seletor compatível para reassumir o controle.
```
No site, clique com o botão direito no elemento -> Inspecionar (F12)
Na aba Styles, veja qual regra de padding/margin está riscada e quem a sobrescreve
Adicione um CSS adicional em Aparência -> Personalizar -> CSS Adicional com seletor equivalente
```

PHP

<?php
/**
 * Força a regeneração do CSS dinâmico do Astra ao salvar o Customizer.
 * Use em um plugin utilitário ou no functions.php do tema filho.
 */
add_action( 'customize_save_after', 'full_astra_flush_dynamic_css' );
function full_astra_flush_dynamic_css() {
    // Só age se o Astra estiver ativo e expor o limpador de cache de assets.
    if ( class_exists( '\Astra_Cache_Base' ) && method_exists( '\Astra_Cache_Base', 'refresh_assets' ) ) {
        Astra_Cache_Base::refresh_assets( 'astra' );
    }

    // Dispara o purge de plugins de cache que escutam este hook padrão.
    do_action( 'litespeed_purge_all' );
    if ( function_exists( 'rocket_clean_domain' ) ) {
        rocket_clean_domain();
    }
}

Perguntas frequentes

Por que o Astra spacing não aplica no frontend mas funciona no preview do Customizer

O preview do Customizer renderiza o CSS ao vivo, enquanto o frontend serve o CSS gerado em arquivo ou cacheado. Quando o arquivo dinâmico ou o cache do plugin e da CDN ficam defasados, o site mostra o espaçamento antigo. Regenere o CSS do Astra e limpe os caches.

Os controles de espaçamento do Astra são do tema grátis ou do Astra Pro

Os controles avançados de espaçamento por elemento e por dispositivo fazem parte do Astra Pro Addon. É preciso ter o Astra Pro Addon ativo e o módulo de espaçamento habilitado em Aparência -> Astra Options para que o padding e o margin sejam emitidos no frontend.

Como faço o Astra regenerar o CSS depois de mudar o espaçamento

Quando a geração de arquivos (File Generation) está ligada, o Astra grava o CSS em arquivo. Para forçar a recriação, desligue e religue a opção de geração de arquivos em Aparência -> Astra Options e salve. Em seguida limpe os caches para o site buscar o arquivo novo.

Por que só o desktop ignora o espaçamento que defini no Astra

Os controles de espaçamento do Astra são responsivos e guardam valores separados por dispositivo. Se você preencheu apenas o ícone de mobile ou tablet, o desktop fica com o valor herdado. Abra o controle e preencha o valor também no ícone de desktop.

Um plugin de cache pode impedir o espaçamento do Astra de aparecer

Sim. Plugins de cache e CDNs servem uma versão salva da folha de estilo. Após alterar o espaçamento, limpe o cache do plugin de cache e purgue a CDN, depois recarregue o site em aba anônima para ignorar o cache do navegador e ver o CSS atualizado.

Como descobrir se outra regra CSS está sobrescrevendo o espaçamento do Astra

Inspecione o elemento no navegador com F12 e abra a aba Styles. Se a regra de padding ou margin do Astra aparecer riscada, outra regra mais específica de um plugin, tema filho ou page builder está vencendo por especificidade. Aplique um CSS adicional com seletor equivalente para reassumir o controle.

Posso resolver o conflito de espaçamento com CSS adicional

Sim. Em Aparência -> Personalizar -> CSS Adicional você pode declarar o padding ou margin no mesmo seletor que o Astra usa, garantindo que a regra desejada vença. Prefira seletores específicos o suficiente sem recorrer a !important, que dificulta ajustes futuros.

Mudei o tema filho e o espaçamento parou de aplicar, o que houve

Um tema filho pode incluir CSS próprio que sobrescreve o espaçamento do Astra por especificidade ou ordem de carregamento. Inspecione o elemento para identificar a regra do tema filho e ajuste o style.css dele ou use o CSS adicional do Customizer para alinhar com o valor desejado.

Atenção

Como corrigir o preset que não aplica estilos no Happy Addons

O Happy Addons preset não funciona quando a licença Pro está inativa, o widget escolhido não tem suporte a preset, estilos manuais sobrepõem o preset ou o CSS do Elementor está em cache, fazendo o Design dropdown não aplicar a aparência ao widget.

Atenção

Como corrigir fontes personalizadas que não carregam no Astra Pro

A fonte personalizada do Astra não carrega quando o site exibe a fonte de fallback no lugar da enviada, porque o plugin Custom Fonts está inativo, o peso do arquivo enviado não bate com o peso escolhido na tipografia, ou o cache de página entrega o head antigo sem o @font-face. A correção ativa o módulo, alinha os pesos e limpa o cache.

Crítico

Como corrigir Elementor que não salva alterações

O Elementor que não salva alterações deixa o botão Atualizar girando para sempre ou retorna erro, e o trabalho se perde ao recarregar. A causa quase sempre é o max_input_vars do PHP baixo demais para a página, ou uma regra de mod_security/WAF bloqueando a requisição de salvamento (admin-ajax.php).

Grave

Como corrigir o conflito de Header Builder entre Elementor Pro e Astra Pro

O conflito de header entre Elementor Pro e Astra Pro ocorre quando os dois constroem o cabeçalho ao mesmo tempo: o site mostra dois headers empilhados, ou o template de Header do Theme Builder some porque o Astra ainda renderiza o seu. A correção e deixar uma única camada controlar o cabeçalho.

Grave

Como corrigir o Happy Addons que não carrega no Elementor

Quando o Happy Addons não carrega, os widgets do plugin somem do painel do editor Elementor, em geral porque foram desativados no Feature Controller, porque a versão do Elementor ficou abaixo da exigida ou porque o cache de assets do editor ficou desatualizado.

Grave

Como corrigir o JetEngine Relations que não conecta posts

JetEngine Relations que não conecta posts quase sempre vem dos controles do objeto parent ou child desligados na relação, do post type não bater com o objeto escolhido, ou do post não ser salvo com Atualizar após a conexão. Ativar os controles e salvar resolve.

Setores

Extensões

Integrações

Como corrigir Spacing Controls que não aplicam no frontend no Astra Pro

O que é Astra spacing que não aplica no frontend?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o preset que não aplica estilos no Happy Addons

Como corrigir fontes personalizadas que não carregam no Astra Pro

Como corrigir Elementor que não salva alterações

Como corrigir o conflito de Header Builder entre Elementor Pro e Astra Pro

Como corrigir o Happy Addons que não carrega no Elementor

Como corrigir o JetEngine Relations que não conecta posts

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos