# Como corrigir estilos que não aplicam entre Ultimate Addons e Astra Pro no WordPress

O problema dos estilos do Ultimate Addons e Astra Pro que não aplicam acontece quando o CSS dos widgets UAEL fica preso em arquivos gerados desatualizados, em cache do site ou é sobrescrito pelo CSS dinâmico do Astra Pro, deixando o widget sem visual no frontend.

## O que é estilos do Ultimate Addons e Astra Pro que não aplicam?

Os estilos do Ultimate Addons e Astra Pro que não aplicam é a situação em que um widget do Ultimate Addons for Elementor (UAEL) aparece estilizado no editor do Elementor, mas perde cores, espaçamentos, bordas e fontes quando a página é vista no frontend do site rodando o tema Astra Pro. O conteúdo é renderizado, mas o CSS específico do widget não chega ao navegador, deixando o bloco com a aparência crua do tema.

Na prática, esse comportamento é quase sempre um problema de geração e entrega de CSS, não de bug do widget. O Elementor grava o CSS de cada página em arquivos externos dentro de wp-content/uploads/elementor/css, o UAEL grava os assets dos próprios widgets, e o Astra Pro gera o seu CSS dinâmico em arquivo. Quando qualquer um desses arquivos fica desatualizado, é servido em cache antigo, ou quando a folha de estilo do Astra vence a do widget por ordem de carregamento e especificidade, o resultado é o estilo que some no frontend mas continua certo no editor.

## Como identificar

- O widget do Ultimate Addons aparece estilizado no editor do Elementor, mas perde cores, espaçamentos e bordas quando a página é aberta no frontend.
- Depois de atualizar o UAEL, o Astra ou o Elementor, widgets que funcionavam ficam sem estilo no site público até limpar o cache.
- O frontend mostra o conteúdo do widget com a fonte e as cores padrão do tema Astra, ignorando os ajustes feitos no painel de estilo do UAEL.
- No inspetor do navegador, as regras de CSS do widget aparecem riscadas porque uma regra do Astra Pro com maior especificidade está prevalecendo.
- A aba Network do navegador mostra o arquivo de CSS do Elementor ou do UAEL retornando 404, ou servindo uma versão antiga sem as regras novas do widget.

**Antes de começar:** Antes de regenerar CSS, alternar o método de impressão do Elementor ou mexer em permissões de pasta em produção, faça um backup completo do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso o frontend quebre.

## Como prevenir

- Sempre que atualizar Ultimate Addons, Elementor ou Astra Pro, rode Regenerar CSS e Dados e limpe o cache do site para servir os estilos novos no frontend.
- Valide grandes atualizações de plugin e tema em staging antes de aplicar em produção, para detectar conflitos de CSS entre o UAEL e o Astra antes de afetar o site público.
- Mantenha a pasta wp-content/uploads/elementor/css com permissão de escrita para que o método External File grave os arquivos de estilo de cada página.
- Prefira ajustar a aparência dos widgets pelo painel de estilo do próprio UAEL, evitando CSS solto que dependa de ordem de carregamento e brigue por especificidade com o Astra Pro.

Erros relacionados

- [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/)
- [Como corrigir conflito entre Elementor e tema WordPress](https://full.services/wp-fixer/corrigir-conflito-elementor-tema/)
- [Como corrigir Elementor com widgets que não aparecem](https://full.services/wp-fixer/corrigir-elementor-widgets-nao-aparecem/)

## Causa

- Os arquivos de CSS gerados pelo Elementor em wp-content/uploads/elementor/css estão desatualizados: o widget recebeu novos estilos no editor, mas o arquivo externo servido no frontend ainda é o antigo, sem essas regras.
- O Astra Pro está com a geração de CSS em arquivo (file generation) ativa e servindo um arquivo de dynamic CSS em cache antigo, que não reflete as últimas alterações de aparência da página.
- Uma regra de CSS do Astra Pro carrega depois e com especificidade maior que a do widget UAEL, sobrescrevendo cores e tipografia definidas no painel de estilo do Ultimate Addons.
- Um plugin de cache ou minificação como WP Rocket ou Autoptimize está servindo uma versão combinada e antiga das folhas de estilo, sem incluir o CSS recém-gerado do widget do UAEL.
- O CSS Print Method do Elementor está como External File e o servidor não conseguiu gravar em wp-content/uploads/elementor/css por falta de permissão de escrita, então o arquivo de estilo do widget não existe no frontend.

## Como resolver

1. Regenere o CSS e os dados do Elementor: O primeiro passo é forçar o Elementor a recriar os arquivos de CSS externos servidos no frontend, incluindo os estilos dos widgets do Ultimate Addons. Isso reescreve os arquivos em wp-content/uploads/elementor/css com as regras mais recentes.

```
Painel WP -> Elementor -> Ferramentas -> aba Geral
Clique em Regenerar CSS e Dados (Regenerate CSS & Data)
Aguarde a confirmação e recarregue a página no frontend com Ctrl+F5
```

2. Atualize a geração de CSS dinâmico do Astra: O Astra grava o próprio CSS dinâmico em arquivo e pode servir uma versão em cache antiga que ignora os estilos do widget. Salve as configurações do Personalizar para forçar o Astra a regravar o arquivo de dynamic CSS atualizado.

```
Painel WP -> Aparência -> Personalizar
Abra qualquer seção, clique em Publicar para regravar o CSS dinâmico do Astra
Se houver a opção em Astra Options, desative e reative a geração de CSS em arquivo (file generation)
```

3. Limpe todo o cache do site e do navegador: Plugins de cache e minificação combinam folhas de estilo e podem servir a versão sem o CSS novo do widget. Limpe o cache da página, do CSS minificado e do CDN, e teste em uma aba anônima para descartar cache do navegador.

```
Painel WP -> abra o plugin de cache (ex.: WP Rocket, LiteSpeed, Autoptimize) -> Limpar cache
Em WP Rocket, use também Limpar e pré-carregar cache e Limpar CSS usado
Abra a página em uma janela anônima do navegador para confirmar sem cache local
```

4. Confira o CSS Print Method e a permissão de escrita: Se o estilo continua faltando, verifique se o Elementor consegue gravar os arquivos de CSS. Com o método External File, a pasta de uploads precisa ter permissão de escrita; alternativamente, troque para Internal Embedding para embutir o CSS no HTML e descartar o problema de gravação.

```
Painel WP -> Elementor -> Configurações -> aba Avançado
Confira o CSS Print Method (External File ou Internal Embedding)
Garanta permissão de escrita em wp-content/uploads/elementor/css (geralmente 755 na pasta)
Se o servidor não grava o arquivo, troque o CSS Print Method para Internal Embedding e teste
```

5. Isole o conflito de especificidade com o Astra Pro: Se o CSS do widget chega mas é sobrescrito, o problema é especificidade ou ordem de carregamento. Use o inspetor do navegador para achar a regra do Astra que vence e ajuste o estilo pelo painel do widget ou por um CSS adicional mais específico.

```
Abra o frontend, clique com o botão direito no widget -> Inspecionar (F12)
Veja qual regra está riscada e qual seletor do Astra prevalece
Ajuste cor e tipografia pela aba Estilo do widget UAEL ou em Personalizar -> CSS adicional com seletor mais específico
```


## Código

```css
/* CSS adicional em Aparencia -> Personalizar -> CSS adicional.
   Vence a regra do Astra Pro elevando a especificidade SEM usar !important.
   Troque .uael-button pelo seletor real do widget visto no inspetor. */
.elementor .uael-button .uael-button-wrapper a.uael-button-link {
    color: #ffffff;
    background-color: #2b6cb0;
    border-radius: 6px;
    font-family: inherit;
}
```

## Perguntas frequentes

### Por que o estilo do Ultimate Addons aparece no editor mas some no frontend do Astra

O editor mostra o CSS ao vivo, mas o frontend serve arquivos de CSS gerados pelo Elementor e pelo Astra. Se esses arquivos estão desatualizados ou em cache antigo, o estilo do widget não chega ao navegador. Regenere o CSS do Elementor e limpe o cache para sincronizar.

### Como regenerar o CSS do Elementor para corrigir os widgets do Ultimate Addons

Vá em Elementor, Ferramentas, aba Geral e clique em Regenerar CSS e Dados. Isso reescreve os arquivos em wp-content/uploads/elementor/css com as regras mais recentes dos widgets do UAEL. Depois recarregue o frontend com Ctrl+F5 para ver o estilo atualizado.

### O Astra Pro pode sobrescrever o estilo dos widgets do Ultimate Addons

Sim. Quando uma regra do Astra Pro carrega depois e com especificidade maior, ela vence a do widget e troca cor ou tipografia. Identifique a regra no inspetor do navegador e ajuste pelo painel de estilo do UAEL ou por um seletor mais específico no CSS adicional.

### Limpar o cache resolve os estilos do Ultimate Addons que não aplicam

Em muitos casos, sim. Plugins como WP Rocket, LiteSpeed e Autoptimize combinam e servem CSS antigo sem as regras novas do widget. Limpe o cache da página, do CSS usado e do CDN, e teste em uma aba anônima para descartar cache do navegador.

### O que é o CSS Print Method do Elementor e como ele afeta o estilo

É a forma como o Elementor entrega o CSS: External File grava arquivos na pasta de uploads, e Internal Embedding embute o CSS no HTML da página. Se o servidor não consegue gravar o arquivo externo, o estilo do widget some. Nesse caso, troque para Internal Embedding e teste.

### Preciso de permissão de escrita na pasta de uploads para o estilo funcionar

Com o método External File, sim. O Elementor precisa gravar em wp-content/uploads/elementor/css para criar a folha de estilo de cada página. Sem permissão de escrita, o arquivo não é criado e o widget aparece sem estilo no frontend.

### O conflito de estilo entre Ultimate Addons e Astra é um bug do plugin

Quase nunca. Na grande maioria dos casos é geração ou entrega de CSS: arquivo desatualizado, cache antigo ou especificidade. Regenerar o CSS, atualizar o CSS dinâmico do Astra e limpar o cache costuma restaurar o visual sem precisar de correção no plugin.

### Como saber se o estilo está faltando ou apenas sendo sobrescrito

Abra o inspetor do navegador no widget. Se a regra do UAEL não existe, é problema de geração ou cache de CSS. Se a regra existe mas aparece riscada, outro seletor, geralmente do Astra, está prevalecendo por especificidade e você deve ajustar o seletor.

**Fonte:** [Ultimate Addons for Elementor — Documentação oficial (Brainstorm Force)](https://ultimateelementor.com/docs/)