# Como corrigir o layout quebrado da Timeline no Ultimate Addons no WordPress

A Timeline do Ultimate Addons fica com layout quebrado quando o CSS do widget não carrega na página, geralmente por cache ou minificacao agressiva, pelo carregamento condicional de assets da UAE, ou por um conflito de CSS do tema sobre a estrutura de colunas do widget.

## O que é Timeline Ultimate Addons com layout quebrado?

A Timeline e um widget do Ultimate Addons for Elementor (UAE) que exibe uma linha do tempo, roadmap ou histórico de posts em cartoes alinhados ao longo de um eixo central, com icones, conectores e suporte responsivo de alinhamento. Em telas largas os cartoes alternam de lado do eixo; em telas menores eles empilham e o alinhamento se adapta. Esse arranjo depende inteiramente do CSS próprio do widget, que posiciona o eixo, os conectores e a alternancia esquerda/direita dos cartoes.

O layout quebrado acontece quando esse CSS não chega ao navegador na página renderizada. Sem ele, os cartoes perdem o eixo, empilham em coluna única sem alinhamento, os icones saem de posicao e os conectores somem. Como a Timeline da UAE oferece dois modos, Content Timeline (conteúdo manual com data por item) e Posts Timeline (posts via Query Builder), a quebra aparece igual nos dois: e um problema de entrega de estilo, não de conteúdo.

## Como identificar

- Os cartoes da Timeline aparecem empilhados em coluna única, todos do mesmo lado, sem o eixo central nem a alternancia esquerda/direita.
- Os icones e os conectores entre os pontos da linha do tempo somem ou ficam fora de posicao.
- O layout fica correto no editor do Elementor, mas quebra na página publicada vista pelo visitante.
- O alinhamento responsivo falha: no celular os itens ficam desalinhados ou sobrepostos em vez de empilhar de forma limpa.
- No console do navegador (F12) o arquivo de CSS do Ultimate Addons retorna erro 404 ou não consta na lista de folhas de estilo carregadas.

**Antes de começar:** Antes de desativar otimizacoes de cache, atualizar plugins ou alterar o CSS em producao, faça um backup completo do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging, para reverter caso outra página dependa da configuração atual.

## Como prevenir

- Ao configurar plugins de cache, sempre exclua os arquivos de CSS do Ultimate Addons (caminho '/uael/') da minificacao e da combinacao, evitando que a otimização descarte o estilo do widget.
- Valide qualquer mudanca de cache, de versão do Elementor ou de tema em staging antes de publicar, abrindo a página da Timeline como visitante e não apenas no editor.
- Mantenha o Ultimate Addons for Elementor e o Elementor sempre na versão estavel mais recente para que markup e CSS do widget permaneçam sincronizados.
- Padronize ajustes de estilo da Timeline dentro do próprio widget ou em CSS com classes especificas, evitando regras globais de display/float/flex que atinjam colunas do Elementor.

Erros relacionados

- [Como corrigir o conflito de JavaScript entre Ultimate Addons e WP Rocket](https://full.services/wp-fixer/corrigir-conflito-js-ultimate-addons-wp-rocket/)
- [Como corrigir o erro da Pricing Table no Ultimate Addons](https://full.services/wp-fixer/corrigir-pricing-table-ultimate-addons/)
- [Como corrigir estilos que não aplicam entre Ultimate Addons e Astra Pro](https://full.services/wp-fixer/corrigir-estilos-ultimate-addons-astra-pro/)

## Causa

- Um plugin de cache ou otimização (como WP Rocket ou Autoptimize) minifica e combina o CSS e descarta ou adia a folha de estilo do Ultimate Addons, deixando a Timeline sem as regras de posicionamento do eixo e dos cartoes.
- A opção de carregamento condicional de assets do Elementor (Recursos > Configurações > Recursos: 'Improved Asset Loading') so injeta o CSS do widget quando ele e detectado no conteúdo; em templates, popups ou conteúdo montado por shortcode a Timeline renderiza sem o seu CSS.
- O cache da página foi servido a partir de uma versão antiga, gerada antes da publicação ou da atualização da UAE, entregando HTML da Timeline sem referenciar a folha de estilo nova do widget.
- Uma regra de CSS do tema ou de outro plugin sobrescreve as classes do widget Timeline (por exemplo display, float ou flex aplicados de forma global a colunas), desmontando a alternancia esquerda/direita dos cartoes.
- A versão do Ultimate Addons ou do Elementor esta desatualizada e a estrutura de markup do widget mudou, fazendo o CSS em cache não casar mais com as classes presentes no HTML renderizado.

## Como resolver

1. Limpe todos os caches e confirme se o layout volta: Comece pelo mais comum: cache servindo HTML ou CSS antigo. Limpe o cache do plugin de cache, do Elementor e do CDN, depois recarregue a página da Timeline sem cache do navegador para ver se o layout se restabelece.

```
Painel WP -> (seu plugin de cache, ex.: WP Rocket) -> Limpar cache
Painel WP -> Elementor -> Ferramentas -> Regenerar CSS e Dados
Recarregue a página pública com Ctrl + Shift + R (hard refresh)
```

2. Suspenda a minificacao e a combinacao de CSS no cache: Se a Timeline volta ao normal com o cache desligado, o problema esta na otimização de CSS. Desative temporariamente minificar e combinar CSS para confirmar; depois exclua o CSS do Ultimate Addons da otimização em vez de desligar tudo.

```
Painel WP -> WP Rocket -> Otimização de Arquivos -> desmarque 'Minificar CSS' e 'Combinar CSS'
Salve, limpe o cache e recarregue a página da Timeline
Se resolver, reative a otimização e adicione os arquivos de '/uael/' aos CSS excluidos da minificacao
```

3. Desligue o carregamento condicional de assets do Elementor: O 'Improved Asset Loading' do Elementor so carrega o CSS do widget onde ele e detectado. Em popups, templates e conteúdo via shortcode a Timeline renderiza sem estilo. Desative essa opção para forcar o carregamento do CSS da UAE em toda página e confirme se o layout volta.

```
Painel WP -> Elementor -> Configurações -> aba Recursos (Features/Experiments)
Localize 'Improved Asset Loading' (Carregamento aprimorado de assets) e defina como Inativo
Salve, limpe o cache do Elementor e recarregue a página da Timeline
```

4. Atualize Ultimate Addons e Elementor: Markup do widget desatualizado em relacao ao CSS em cache quebra o alinhamento. Atualize o Ultimate Addons for Elementor e o Elementor para as versões estaveis mais recentes e regenere o CSS para alinhar markup e estilo.

```
Painel WP -> Plugins -> atualize 'Ultimate Addons for Elementor' e 'Elementor'
Painel WP -> Elementor -> Ferramentas -> Regenerar CSS e Dados
Limpe o cache do site e recarregue a página
```

5. Isole um conflito de CSS do tema ou de outro plugin: Se mesmo com o CSS carregando o layout continua torto, ha uma regra global sobrescrevendo o widget. Use o inspetor do navegador sobre um cartao da Timeline para ver qual folha de estilo aplica display, float ou flex indevido, e neutralize a regra com um CSS específico para as classes do widget.

```
Abra a página, clique com o botão direito num cartao da Timeline -> Inspecionar
Na aba Styles, identifique a regra (tema ou plugin) que altera display/float/flex do cartao
Painel WP -> Aparencia -> Personalizar -> CSS Adicional -> adicione a regra de correção específica
```


## Código

```php
<?php
/**
 * Exclui o CSS do Ultimate Addons for Elementor da minificacao do WP Rocket,
 * preservando o estilo do widget Timeline quando a otimizacao esta ativa.
 * Coloque em um plugin de snippets (ex.: Code Snippets), nao no core.
 */
add_filter( 'rocket_exclude_css', 'full_excluir_css_uael' );
function full_excluir_css_uael( $excluded ) {
    $excluded[] = '/wp-content/plugins/header-footer-elementor/(.*).css';
    $excluded[] = '(.*)/uael/(.*).css';
    return $excluded;
}
```

## Perguntas frequentes

### Por que a Timeline do Ultimate Addons aparece certa no editor e quebrada na página publicada

No editor o Elementor carrega todos os assets, entao o CSS do widget sempre esta presente. Na página pública, cache, minificacao ou o carregamento condicional de assets podem não entregar a folha de estilo da Timeline, e sem ela o eixo e o alinhamento dos cartoes desmontam.

### O WP Rocket pode quebrar o layout da Timeline da UAE

Pode. A minificacao e a combinacao de CSS do WP Rocket as vezes descartam ou adiam a folha de estilo do Ultimate Addons. Desative essas opções para testar e, ao confirmar, exclua os arquivos de '/uael/' da otimização em vez de desligar o recurso inteiro.

### O que e o Improved Asset Loading do Elementor e por que afeta a Timeline

E uma opção que carrega o CSS de cada widget apenas onde ele e detectado no conteúdo, para deixar a página mais leve. Em popups, templates e conteúdo via shortcode a Timeline pode renderizar sem o seu CSS. Desative essa opção em Elementor para forcar o carregamento do estilo.

### Limpei o cache e a Timeline continua desalinhada, o que faço

Regenere o CSS do Elementor em Ferramentas, atualize o Ultimate Addons e o Elementor e desligue o carregamento condicional de assets. Se o estilo já carrega mas o layout segue torto, use o inspetor do navegador para achar a regra do tema ou plugin que sobrescreve o widget.

### Como sei se o CSS do Ultimate Addons esta realmente carregando na página

Abra a página, pressione F12 e va na aba Network ou Sources. Procure pelo arquivo de CSS do Ultimate Addons (geralmente com 'uael' no caminho). Se ele retornar 404 ou não aparecer, o estilo não esta sendo entregue e a Timeline quebra por falta dele.

### A Timeline da UAE funciona tanto com conteúdo manual quanto com posts

Sim. O widget tem o modo Content Timeline, com conteúdo e data por item adicionados a mao, e o modo Posts Timeline, que busca posts pelo Query Builder com imagem destacada e data. A quebra de layout afeta os dois modos da mesma forma, pois e um problema de CSS, não de origem do conteúdo.

### Preciso editar arquivos do plugin para corrigir o layout da Timeline

Não. A correção se resolve no painel: limpando cache, ajustando a otimização de CSS, desligando o carregamento condicional de assets, atualizando os plugins e, se houver conflito, adicionando CSS específico no Personalizar. Nunca edite arquivos dentro da pasta do Ultimate Addons.

### Excluir o CSS da UAE da minificacao deixa o site mais lento

O impacto e mínimo. Você exclui apenas os arquivos do widget que estão quebrando, mantendo a minificacao do restante do CSS. E uma troca pequena de peso por um layout que renderiza corretamente, e mais segura que desativar a otimização inteira.

**Fonte:** [Ultimate Addons for Elementor — Timeline Widget (UAE)](https://ultimateelementor.com/widgets/timeline/)