Astra Pro Tutor LMS: corrigir layout de curso quebrado

Tipo Page Builders

Nome do erro Layout quebrado da página de curso (Tutor LMS com Astra Pro) EN: Tutor LMS course page layout broken with Astra Pro

Severidade Atenção

Descrição O layout quebrado de páginas de curso do Tutor LMS com Astra Pro acontece quando a página de curso herda o container, a sidebar ou os elementos globais do Astra em vez de usar uma largura total sem barra lateral, deixando o conteúdo do curso estreito, espremido ou desalinhado.

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

O Astra Pro controla a aparência de cada página por meio de três camadas: o layout de container (boxed, content boxed ou full width / stretched), o layout de sidebar (sem barra lateral, esquerda ou direita) e os elementos globais como título da página, breadcrumb, cabeçalho e rodapé. O Tutor LMS, por sua vez, registra um post type próprio para os cursos (courses) e renderiza a página única do curso reaproveitando o template do tema. Quando essas duas camadas não conversam, o conteúdo do curso passa a ser exibido dentro de uma área estreita com sidebar, com o título duplicado ou com margens erradas.

Na prática, o layout quebrado do Tutor LMS com Astra Pro aparece porque o Astra aplica ao post type de curso o mesmo padrão do restante do site (por exemplo, sidebar à direita e container boxed), enquanto a interface do curso foi desenhada para ocupar a largura total. O resultado é a player do curso, a grade de aulas e a barra de progresso espremidas em metade da tela. A correção não envolve código de tema: o Astra permite definir o layout por post type no Customizer e sobrescrever página a página pela meta box Astra Settings, e o Tutor LMS oferece um template próprio de curso que dispensa a estrutura do tema.

Como identificar

A página única do curso do Tutor LMS aparece estreita, em apenas metade ou dois terços da largura, com um grande espaço vazio ao lado.
Uma barra lateral (sidebar) com widgets do blog surge ao lado do conteúdo do curso, empurrando a player e a lista de aulas.
O título do curso aparece duplicado: uma vez no cabeçalho gerado pelo Astra e outra dentro do conteúdo renderizado pelo Tutor LMS.
A grade de currículo, a barra de progresso ou os botões de inscrição ficam desalinhados, quebrando linha ou saindo da área de conteúdo.
O layout fica correto em páginas comuns e posts, mas só quebra nas URLs de curso (por exemplo, /courses/nome-do-curso/).

Antes de começar: Antes de alterar o template de curso ou adicionar qualquer código ao tema, 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 fique pior do que estava.

Como prevenir

Defina o layout do post type de curso como Sem Barra Lateral e container largura total logo na instalação do Tutor LMS, antes de publicar o primeiro curso.
Use um tema filho do Astra para qualquer ajuste de template de curso, evitando que uma atualização do Astra ou do Tutor LMS apague a personalização.
Padronize o layout pelo Customizer e evite sobrescrever curso a curso pela meta box Astra Settings, para não criar páginas com configurações divergentes.
Valide o layout das páginas de curso em staging após cada atualização do Astra Pro ou do Tutor LMS, já que mudanças de template podem reintroduzir a sidebar ou o título duplicado.

Causa

O layout de sidebar do Astra para o post type de curso está definido como Barra Lateral à Direita (ou à Esquerda) em vez de Sem Barra Lateral, fazendo a página do curso reservar espaço para widgets que não cabem na interface do Tutor LMS.
O layout de container do Astra está como Boxed ou Content Boxed para a página do curso, limitando a largura útil quando a interface do Tutor LMS precisa de Full Width / Stretched para a player e a grade de aulas.
O título da página do Astra está ativado para o post type de curso e duplica o título que o próprio Tutor LMS já renderiza dentro do conteúdo do curso.
A meta box Astra Settings de uma página de curso específica está com um layout individual diferente do padrão definido no Customizer, sobrescrevendo a configuração global apenas naquele curso.
O Tutor LMS está configurado para usar o template do tema na página de curso, mas o tema ativo é o Astra com um padrão estreito, em vez de usar o template de curso largura total do próprio Tutor LMS.

Como resolver

Defina o post type de curso como Sem Barra Lateral no Customizer: No Personalizador do Astra, ajuste a barra lateral especificamente para o conteúdo do Tutor LMS para que a página do curso pare de reservar espaço para widgets. Sem Barra Lateral devolve a largura total para a interface do curso.
```
Painel WP -> Aparência -> Personalizar -> Barra Lateral
Em Página de Arquivo e Página Única, ajuste o tipo de conteúdo do curso para Sem Barra Lateral
Clique em Publicar
```
Mude o container do curso para largura total: Ainda no Personalizador, troque o layout de container da página do curso de Boxed para Largura Total / Stretched, dando à player e à grade de aulas do Tutor LMS a área completa de que precisam.
```
Painel WP -> Aparência -> Personalizar -> Global -> Container
Defina o layout do container como Largura Total / Stretched (Full Width / Stretched)
Clique em Publicar
```
Desative o título de página do Astra para o curso: Se o título aparece duplicado, desligue o título de página do Astra para o post type do curso, deixando o Tutor LMS renderizar o seu próprio cabeçalho de curso sem repetição.
```
Painel WP -> Aparência -> Personalizar -> Cabeçalho de Conteúdo (Title Área)
Desative a exibição do título de página para a página única do curso
Clique em Publicar
```
Corrija um curso específico pela meta box Astra Settings: Se apenas um curso continua quebrado, abra-o no editor e use a meta box Astra Settings para forçar Sem Barra Lateral e container largura total só naquela página, sobrescrevendo qualquer ajuste individual antigo.
```
Painel WP -> Tutor LMS -> Cursos -> abra o curso quebrado
Na meta box Astra Settings (lateral do editor), defina Sidebar: Sem Barra Lateral e Container: Largura Total
Clique em Atualizar
```
Use o template de curso do Tutor LMS quando o ajuste não bastar: Se mesmo após os ajustes do Astra a página seguir desconfigurada, oriente o Tutor LMS a usar o seu próprio template de curso de largura total em vez de herdar o template do tema, removendo o conflito de estrutura.
```
Painel WP -> Tutor LMS -> Configurações -> Design
Em opções de template/layout da página de curso, selecione o template do Tutor LMS (não o template do tema)
Salve as alterações e recarregue a página do curso no frontend
```

PHP

<?php
/**
 * Forca Sem Barra Lateral e container largura total
 * na pagina unica de curso do Tutor LMS quando usando Astra.
 * Coloque em um tema filho do Astra ou em um plugin de snippets.
 */
add_filter( 'astra_page_layout', 'full_tutor_course_no_sidebar' );
function full_tutor_course_no_sidebar( $layout ) {
    if ( function_exists( 'is_singular' ) && is_singular( 'courses' ) ) {
        return 'no-sidebar';
    }
    return $layout;
}

add_filter( 'astra_get_content_layout', 'full_tutor_course_stretched' );
function full_tutor_course_stretched( $content_layout ) {
    if ( function_exists( 'is_singular' ) && is_singular( 'courses' ) ) {
        return 'plain-container';
    }
    return $content_layout;
}

Perguntas frequentes

Por que a página de curso do Tutor LMS aparece estreita com o Astra Pro

Porque o Astra está aplicando ao post type de curso um container boxed ou uma barra lateral, reservando espaço que a interface do Tutor LMS não usa. Defina o curso como Sem Barra Lateral e container Largura Total no Personalizador do Astra para devolver a largura completa à player e à grade de aulas.

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

No Personalizador do Astra, vá em Global e depois Container e defina o layout como Largura Total / Stretched para a página única do curso, e em Barra Lateral selecione Sem Barra Lateral. Em seguida clique em Publicar para aplicar a largura total ao conteúdo do curso.

Por que o título do meu curso aparece duplicado no Tutor LMS com Astra

O Astra renderiza o título de página e o Tutor LMS também exibe o nome do curso dentro do próprio conteúdo, gerando a duplicação. Desative o título de página do Astra para a página única do curso na seção de Cabeçalho de Conteúdo do Personalizador para manter apenas o título do Tutor LMS.

Preciso editar arquivos do tema para corrigir o layout do curso

Não na maioria dos casos. O Astra permite definir sidebar, container e título por post type no Personalizador e sobrescrever página a página pela meta box Astra Settings, sem tocar em código. Recorra ao template do Tutor LMS ou a um tema filho só se os ajustes pelo painel não resolverem.

O ajuste vale para todos os cursos ou só para um

As configurações feitas no Personalizador do Astra valem para todos os cursos do post type de uma vez. Se você quiser mudar apenas um curso, use a meta box Astra Settings dentro do editor daquele curso, que sobrescreve o padrão global somente naquela página.

O layout do curso quebrou depois de atualizar o Astra ou o Tutor LMS, e agora

Atualizações podem redefinir o template ou reintroduzir a sidebar na página de curso. Reabra o Personalizador, confirme Sem Barra Lateral e container Largura Total para o curso e, se você usa personalização de template, verifique se ela está em um tema filho para não ser sobrescrita.

Uma sidebar com widgets do blog aparece ao lado do curso, como removo

Essa sidebar vem do layout padrão do Astra aplicado ao post type de curso. No Personalizador, em Barra Lateral, defina a página única do curso como Sem Barra Lateral e publique, que os widgets do blog deixam de ocupar o espaço ao lado do conteúdo do curso.

Grave

Como corrigir conflito entre Elementor e tema WordPress

O conflito entre Elementor e o tema do WordPress aparece quando o tema sobrescreve estilos do Elementor, não declara os hooks de conteúdo ou limita a largura, deixando o layout quebrado, botões invisiveis ou o cabeçalho e rodape duplicados. A causa quase sempre e um tema que não foi feito para construtores de página.

Grave

Como corrigir o erro de licença ao ativar o Elementor Pro

O erro de licença do Elementor Pro impede a ativação dos recursos pagos quando a chave não conecta ao servidor da Elementor, o limite de sites do plano foi atingido ou a licença ainda consta ativa em outro domínio.

Atenção

Como corrigir o Gallery Field do ACF PRO quando o lightbox não funciona

O lightbox do Gallery Field do ACF PRO não funciona porque o ACF não inclui lightbox próprio: ele só entrega os dados das imagens, e o efeito de ampliar ao clicar depende de o seu template renderizar o link para a imagem cheia com o atributo que a biblioteca de lightbox do tema ou plugin reconhece.

Grave

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

O Theme Builder não aplica em todas as páginas quando o template foi salvo como rascunho, ficou sem condicao de exibicao, ou perde para outro template do mesmo tipo com condicao mais específica. O ajuste e definir Include corretamente e revisar a especificidade entre templates concorrentes.

Grave

Como corrigir a incompatibilidade entre JetThemeCore e Astra

A incompatibilidade entre JetThemeCore e Astra aparece quando o Theme Builder do Crocoblock não consegue substituir o cabeçalho, o rodape ou o body do Astra, e a página sai com o layout nativo do tema em vez do template criado. O Override theme header, body e footer parece não ter efeito e o template publicado e ignorado no front-end.

Atenção

Como corrigir o Relationship Field no ACF PRO

O Relationship field do ACF PRO que não funciona acontece quando get_field() devolve um array inesperado, o loop com setup_postdata mostra o post errado por falta de wp_reset_postdata, ou a meta_query usa igualdade em vez de LIKE no valor serializado.

Setores

Extensões

Integrações

Como corrigir o layout quebrado de páginas de curso do Tutor LMS com Astra Pro no WordPress

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

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir conflito entre Elementor e tema WordPress

Como corrigir o erro de licença ao ativar o Elementor Pro

Como corrigir o Gallery Field do ACF PRO quando o lightbox não funciona

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

Como corrigir a incompatibilidade entre JetThemeCore e Astra

Como corrigir o Relationship Field no ACF PRO

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