# Como corrigir o layout quebrado de páginas de curso entre Tutor LMS e Astra Pro no WordPress

O layout quebrado entre Tutor LMS e Astra na página de curso ocorre quando o template de single course do Tutor entra em conflito com o container, a sidebar ou a largura de conteúdo definidos pelo tema Astra, deixando a página desalinhada, com sidebar indevida ou sobreposta ao cabeçalho.

## O que é layout quebrado do Tutor LMS com Astra?

O Tutor LMS layout com Astra quebra quando a página de curso (single course) deixa de respeitar a estrutura de container e largura que o tema Astra aplica às demais páginas do site. Na prática, o aluno abre o curso e vê o conteúdo espremido numa coluna, uma sidebar que não deveria existir, ou o player de aula sobreposto ao cabeçalho. O Astra consta na lista oficial de temas compatíveis com o Tutor LMS, então o problema quase sempre não é incompatibilidade de fato, e sim configuração de layout divergente entre os dois.

A documentação oficial do Tutor LMS afirma que o plugin foi desenhado para suportar qualquer tema WordPress, mas oferece a melhor apresentação de conteúdo com um grupo de temas recomendados, no qual o Astra está incluído. O atrito aparece porque o Tutor entrega seu próprio template para o tipo de post de curso, enquanto o Astra controla container, sidebar e largura por suas próprias configurações. Quando os dois discordam, ou quando um template do Tutor foi sobrescrito de forma desatualizada na pasta do tema, o resultado é a página de curso renderizando fora do padrão visual do restante do site.

## Como identificar

- A página de curso abre com o conteúdo dentro de uma coluna estreita, enquanto o restante do site usa largura total ou contida do Astra.
- Uma sidebar aparece na página de curso do Tutor LMS mesmo com o layout definido como largura total nas configurações do Astra.
- O cabeçalho ou o rodapé do Astra ficam sobrepostos ao player de aula ou ao conteúdo do curso, cortando parte da tela.
- Os botões e cards do Tutor LMS (matrícula, progresso, abas do curso) aparecem sem estilo ou desalinhados apenas na página de curso.
- A página de curso ignora o container do Astra (Boxed/Full Width) configurado em Aparência e renderiza com margens diferentes das outras páginas.

**Antes de começar:** Antes de remover a pasta tutor do tema, editar templates via FTP ou colar CSS personalizado 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 layout do curso quebre ainda mais.

## Como prevenir

- Defina o layout de container e sidebar para o tipo de post Course logo na configuração inicial do Astra, antes de publicar os cursos, para que toda página de curso já nasça alinhada ao site.
- Nunca copie templates do Tutor LMS para o tema sem necessidade real de customização e, quando copiar, versione os arquivos e revise a cada atualização do plugin para evitar override defasado.
- Mantenha o Tutor LMS e o Astra Pro sempre na versão estável mais recente, validando a página de curso em staging após cada atualização que mexa em layout.
- Documente as regras de CSS Adicional aplicadas ao single course para que um ajuste futuro não reintroduza conflito de especificidade com o Astra.

Erros relacionados

- [Como corrigir o conflito de templates de curso entre Tutor LMS e Elementor](https://full.services/wp-fixer/corrigir-conflito-template-tutor-lms-elementor/)
- [Como corrigir o cache que quebra páginas de quiz entre Tutor LMS e WP Rocket](https://full.services/wp-fixer/corrigir-cache-quiz-tutor-lms-wp-rocket/)
- [Como corrigir o arquivo de cursos que não exibe todos os cursos no Tutor LMS](https://full.services/wp-fixer/corrigir-course-archive-tutor-lms/)

## Causa

- O template de single course do Tutor LMS foi copiado para a pasta tutor dentro do tema Astra em uma versão antiga e agora está defasado em relação ao plugin atualizado, fazendo o markup do curso não casar com o container do Astra.
- A configuração de container do Astra (Boxed, Content Boxed ou Full Width) e a opção de sidebar estão definidas para o tipo de post Course de forma diferente do restante do site, então a página de curso herda uma sidebar ou largura que destoa do layout esperado.
- O Astra Pro está com a opção de Disable Sections (desativar título da página, cabeçalho ou rodapé) aplicada por meta box no post do curso, removendo elementos que o template do Tutor espera encontrar e deslocando o conteúdo.
- A largura de conteúdo do Astra (Content Width / container width) não corresponde à largura que o player de aula do Tutor LMS assume, fazendo o vídeo ou o conteúdo da lição estourar ou ficar espremido dentro do wrapper do tema.
- Um CSS do Astra Pro (regras de .ast-container ou de sidebar do Custom Layouts) tem especificidade maior que o CSS do Tutor e sobrescreve o posicionamento dos blocos da página de curso, quebrando o alinhamento.

## Como resolver

1. Defina largura total e sem sidebar para o tipo de post Course: No Customizer do Astra, ajuste o layout do tipo de post de curso (Course) para largura total e sem sidebar, para que a página de curso do Tutor LMS use a mesma área de conteúdo do restante do site. Isso resolve a maioria dos casos de sidebar indevida e coluna estreita.

```
Painel WP -> Aparência -> Personalizar -> Sidebar
Em Layout por tipo de post, defina o curso (Course) como 'No Sidebar'
Painel WP -> Aparência -> Personalizar -> Container -> defina o curso como 'Full Width / Stretched'
```

2. Verifique o meta box de layout do Astra no próprio curso: O Astra permite sobrescrever container, sidebar e Disable Sections post a post. Abra o curso no editor e confira o painel lateral do Astra Settings, garantindo que as opções herdem o padrão global em vez de uma configuração avulsa que quebra o layout.

```
Painel WP -> Tutor LMS -> Cursos -> abra o curso afetado
No editor, localize o painel 'Astra Settings' na lateral
Defina Sidebar, Container e Disable Sections como 'Customizer Setting' (padrão), não avulso
```

3. Remova templates antigos do Tutor LMS sobrescritos no tema: Se alguém copiou templates do Tutor para a pasta tutor dentro do tema Astra, eles podem estar desatualizados e gerar markup incompatível. Via FTP, verifique a pasta de override e remova ou atualize os arquivos para que o plugin volte a usar seus templates nativos, conforme a documentação de override do Tutor LMS.

```
Acesse via FTP: /wp-content/themes/astra/tutor/
Compare os arquivos com /wp-content/plugins/tutor/templates/
Renomeie a pasta tutor para tutor-bkp para forçar o plugin a usar o template nativo e teste a página
```

4. Limpe cache e regenere o CSS do Astra: O Astra gera CSS dinâmico em cache que pode ter sido salvo com o layout antigo. Regenere os arquivos de CSS do Astra e limpe qualquer plugin de cache para que as novas regras de largura e sidebar sejam aplicadas à página de curso.

```
Painel WP -> Aparência -> Personalizar -> publique novamente para regenerar o CSS do Astra
Se usar WP Rocket ou similar, limpe o cache de página e o CSS minificado
Recarregue a página de curso com Ctrl+F5 para ignorar o cache do navegador
```

5. Ajuste o CSS residual com uma regra direcionada: Se ainda restar uma sobreposição ou desalinhamento pontual, aplique um CSS adicional em CSS Adicional do Customizer mirando apenas o container do curso, sem alterar o tema globalmente. Use o código de exemplo abaixo como base e ajuste a largura ao seu design.

```
Painel WP -> Aparência -> Personalizar -> CSS Adicional
Cole a regra direcionada ao single-course (ver bloco de código)
Publique e valide em desktop e mobile
```


## Código

```css
/* Alinha a pagina de curso do Tutor LMS ao container do Astra. */
/* Mire apenas o single-course para nao afetar o resto do site. */
.single-courses .ast-container {
    max-width: 100%;
}

.single-courses #primary {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Garante que nenhuma sidebar do Astra force coluna no curso. */
.single-courses #secondary {
    display: none;
}

/* Evita sobreposicao do conteudo do curso com cabecalho/rodape. */
.single-courses .tutor-course-single-content {
    clear: both;
}
```

## Perguntas frequentes

### Por que a página de curso do Tutor LMS aparece com sidebar no tema Astra

Porque o layout do tipo de post Course no Astra está configurado para exibir sidebar, ou o curso tem um meta box do Astra com sidebar avulsa. Defina o curso como 'No Sidebar' no Customizer do Astra, em Sidebar, e confira o painel Astra Settings dentro do próprio curso.

### O tema Astra é compatível com o Tutor LMS

Sim. O Astra consta na lista oficial de temas compatíveis da documentação do Tutor LMS, que afirma suportar qualquer tema WordPress e recomendar um grupo de temas para a melhor apresentação de conteúdo. O layout quebrado costuma ser configuração divergente, não incompatibilidade real.

### Como deixar a página de curso do Tutor LMS em largura total no Astra

No Customizer do Astra, em Container, defina o tipo de post Course como Full Width ou Stretched, e em Sidebar selecione No Sidebar para esse tipo de post. Assim a página de curso usa a mesma largura das demais páginas do site.

### Preciso editar arquivos de template para corrigir o layout do curso

Na maioria dos casos não. O ajuste resolve pelo Customizer e pelo meta box do Astra. Editar template só é necessário se alguém já sobrescreveu os arquivos do Tutor na pasta tutor do tema, caso em que convém removê-los para voltar ao template nativo.

### Removi a pasta tutor do tema e o curso voltou ao normal, isso é seguro

Sim, desde que você não dependesse daqueles templates customizados. Sem a pasta de override, o Tutor LMS usa seus templates nativos atualizados, que tendem a casar melhor com o Astra. Mantenha o backup da pasta caso precise recuperar alguma customização.

### O player de aula fica sobreposto ao cabeçalho do Astra, como resolver

Isso costuma vir de uma largura de conteúdo divergente ou de um Disable Sections aplicado no curso. Ajuste o Container e a Content Width do Astra para o tipo Course e revise o meta box do curso, e só então aplique um CSS direcionado se restar sobreposição.

### Por que o layout só quebra na página de curso e não nas outras páginas

Porque o Tutor LMS entrega um template próprio para o tipo de post Course, enquanto as páginas comuns seguem o layout padrão do Astra. A divergência entre o template do curso e as configurações de container e sidebar do tema explica por que só o curso destoa.

### Limpar o cache ajuda a corrigir o layout do curso no Astra

Sim, é um passo importante. O Astra gera CSS dinâmico em cache e plugins como o WP Rocket guardam a página minificada. Depois de ajustar container e sidebar, regenere o CSS do Astra e limpe o cache para as novas regras valerem na página de curso.

**Fonte:** [Tutor LMS — Documentação oficial (Themeum)](https://docs.themeum.com/tutor-lms/)