Uma página em largura total no WordPress estica seu conteúdo por toda a janela do navegador, sem barra lateral ou contêiner delimitado limitando o layout. É uma das mudanças de design mais comuns que as pessoas querem fazer, e geralmente é mais rápido de configurar do que você imagina.
Eu já vi muitos iniciantes terem dificuldades com isso porque a maioria dos temas do WordPress adiciona uma barra lateral e restringe a largura do conteúdo por padrão. Você acaba com uma página que parece limitada, mesmo quando não quer uma barra lateral.
A boa notícia é que você tem várias maneiras de corrigir isso. Neste guia, vou mostrar cinco métodos para deixar uma página em largura total no WordPress, do mais fácil (sem plugins, sem código) ao mais avançado. Também abordarei o que fazer quando seu layout de largura total não estiver funcionando como deveria.
- Use o Modelo de Largura Total Integrado do Seu Tema
- Make Individual Blocks Full Width in the Block Editor
- Adicione um Modelo de Largura Total com um Plugin Gratuito
- Crie uma Página Personalizada em Largura Total com SeedProd
- Crie um Modelo de Página em Largura Total Manualmente
- Quando Usar um Layout de Largura Total (e Quando Não Usar)
- Full-Width Page Not Working? Here's How to Fix It
- Perguntas Frequentes sobre Como Deixar uma Página em Largura Total no WordPress
Use o Modelo de Largura Total Integrado do Seu Tema
A maioria dos temas do WordPress já inclui um modelo de página em largura total. Você pode alternar para ele no editor de páginas sem instalar um plugin ou escrever qualquer código.
Veja como verificar.
Passo 1: Abra a página que você deseja deixar em largura total no editor do WordPress.
Passo 2: Na barra lateral direita, procure a seção Modelo. Dependendo do seu tema, isso pode aparecer em Atributos da Página ou como um menu suspenso Modelo autônomo.
Passo 3: Clique no menu suspenso e procure uma opção de largura total. O nome varia de acordo com o tema. Você pode ver "Largura Total", "Sem Barra Lateral", "Em Branco" ou algo semelhante.
Passo 4: Selecione o modelo de largura total e clique em Atualizar ou Publicar.
Passo 5: Visualize a página para confirmar que a barra lateral desapareceu e o conteúdo se estende por toda a página.
É isso. Se o seu tema tiver um modelo de largura total, esta é a maneira mais rápida de usá-lo.
Se você não vir uma opção de largura total no menu suspenso, seu tema pode não incluir uma. Passe para o próximo método.
Deixe Blocos Individuais em Largura Total no Editor de Blocos
O editor de blocos do WordPress permite que você defina blocos individuais para alinhamento em largura total, esticando-os por toda a tela sem alterar o modelo da sua página. Isso é integrado ao WordPress, então você não precisa de um plugin.
Isso funciona com blocos de Grupo, blocos de Capa, blocos de Imagem e a maioria dos blocos de layout.
Passo 1: Abra sua página no editor do WordPress e selecione o bloco que você deseja deixar em largura total.
Passo 2: Na barra de ferramentas do bloco, na parte superior, clique no botão Alterar alinhamento (ele se parece com um conjunto de linhas horizontais).
Passo 3: Selecione Largura total no menu suspenso.
O bloco se estenderá até as bordas da janela do navegador. O WordPress adiciona uma classe CSS chamada .alignfull nos bastidores para que isso aconteça.
Dica: Se você quiser que uma seção inteira da sua página tenha largura total, adicione primeiro um bloco de Agrupamento. Defina o bloco de Agrupamento para o alinhamento de Largura total e, em seguida, adicione seus blocos de conteúdo dentro dele. O bloco de Agrupamento atua como um contêiner de largura total para tudo o que está aninhado dentro.
Se a opção de alinhamento Largura total não aparecer na barra de ferramentas, seu tema pode não suportá-la. Cobrirei como corrigir isso na seção de solução de problemas abaixo.
Layouts de Largura Total em Temas de Blocos (Edição Completa do Site)
Se você estiver usando um tema de blocos mais recente, como o Twenty Twenty-Five, os layouts de largura total funcionam de maneira diferente. Os temas de blocos usam o Editor de Site e um arquivo de configuração chamado theme.json para controlar as larguras do layout.
Para ajustar a largura da página em um tema de blocos, vá para Aparência → Editor no seu painel do WordPress. A partir daí, você pode editar seus modelos de página diretamente e definir a área de conteúdo como largura total no nível do modelo.
O arquivo theme.json controla dois valores-chave: contentSize (a largura padrão para seu conteúdo) e wideSize (a largura para blocos alinhados como "wide"). Ajustar esses valores altera a largura com que seu conteúdo se estende por todo o site.
Esta é a abordagem mais flexível se você estiver em um tema de blocos moderno, pois você pode controlar as larguras do layout globalmente em vez de página por página.
Adicione um Modelo de Largura Total com um Plugin Gratuito
Se o seu tema não incluir um modelo de largura total, o plugin gratuito Fullwidth Templates adiciona um a qualquer tema do WordPress. Nenhum código é necessário.
Passo 1: No seu painel do WordPress, vá para Plugins → Adicionar Novo e pesquise por “Fullwidth Templates”. Se precisar de ajuda com esta etapa, aqui está um guia sobre como instalar um plugin do WordPress.
Passo 2: Instale e ative o plugin.
Passo 3: Edite qualquer página e abra o menu suspenso Modelo na barra lateral direita.
Você verá três novas opções de modelo:
| Modelo | O que ele remove |
|---|---|
| FW Sem Barra Lateral | Apenas barra lateral |
| FW Largura Total | Barra lateral, título da página e comentários |
| FW Largura Total Sem Cabeçalho e Rodapé | Barra lateral, título, comentários, cabeçalho e rodapé |
Passo 4: Escolha o modelo que corresponde ao que você precisa. Para a maioria das landing pages, "FW Largura Total" é a escolha certa. Para uma tela em branco completa, use "FW Largura Total Sem Cabeçalho e Rodapé".
Passo 5: Clique em Atualizar ou Publicar e visualize sua página.
O plugin funciona com qualquer tema, portanto, é uma opção confiável quando seu tema não oferece um modelo de largura total por conta própria.
Crie uma Página Personalizada em Largura Total com SeedProd
Quando você precisa de controle total do design sobre uma landing page, página "em breve", página de vendas ou qualquer layout personalizado, um construtor de páginas oferece mais flexibilidade do que apenas a troca de modelos.
Eu uso o SeedProd regularmente para isso. Ele funciona em conjunto com o seu tema existente, então você não precisa mudar nada na sua configuração atual. Cada página que você cria no SeedProd é largura total por padrão.
Se você deseja criar páginas de largura total sem escrever código, comece com o SeedProd hoje mesmo.
Passo 1: Instale e ative o SeedProd, depois vá para SeedProd → Landing Pages no seu painel. Se precisar de ajuda, aqui está um guia sobre como instalar o SeedProd.
Passo 2: Clique em Adicionar Nova Landing Page.
Escolha um modelo. O SeedProd inclui modelos para landing pages, páginas de registro de webinar, páginas de vendas e muito mais. Você também pode começar com uma página em branco.
Passo 3: Insira o nome e a URL da sua página, depois clique em Salvar e Começar a Editar a Página.
Passo 4: O editor de arrastar e soltar abre com o layout da sua página. Cada seção ocupa a largura total por padrão.
Se precisar ajustar a largura de uma seção, clique na seção e altere Largura da Seção para “Tela Inteira” no painel de configurações.
Veja como fica uma página de largura total após fazer essa alteração:
Você também pode tornar linhas individuais de largura total clicando em uma linha e ajustando sua configuração de largura da mesma forma.
Passo 5: Adicione seu conteúdo arrastando blocos: títulos, imagens, formulários, botões, tabelas de preços ou qualquer outro elemento que você precise.
Passo 6: Quando estiver satisfeito com o layout, clique em Salvar e depois em Publicar.
O SeedProd é uma boa opção quando você precisa de uma página que se destaque do resto do seu site, como uma landing page focada ou uma página em construção. Você também pode usá-lo para criar um tema WordPress totalmente personalizado com layouts de largura total integrados. Para páginas onde o modelo do seu tema normal funciona bem, os métodos anteriores neste guia são mais rápidos.
If you want to build full-width pages without writing code, get started with SeedProd today.
Crie um Modelo de Página em Largura Total Manualmente
Se você se sente confortável com PHP e CSS, pode criar um modelo de página de largura total personalizado editando seus arquivos de tema diretamente. Este método não requer nenhum plugin.
Importante: Faça backup do seu site antes de editar os arquivos do tema. Além disso, faça essas alterações em um tema filho para que uma atualização do tema não sobrescreva seu trabalho.
Passo 1: Conecte-se ao seu site usando um cliente FTP ou o gerenciador de arquivos do seu provedor de hospedagem. Navegue até /wp-content/themes/seu-pasta-de-tema/.
Passo 2: Crie um novo arquivo chamado full-width.php. Na parte superior do arquivo, adicione este cabeçalho de modelo para que o WordPress o reconheça:
<?php
/*
* Template Name: Full Width
*/
get_header();
?>
Passo 3: Abra o arquivo page.php do seu tema e copie seu conteúdo para o seu novo arquivo full-width.php, abaixo do código do cabeçalho. Em seguida, localize e remova a linha que chama a barra lateral:
<?php get_sidebar(); ?>
Exclua essa linha. Isso remove a barra lateral do seu modelo.
Passo 4: Salve o arquivo e envie-o para a pasta do seu tema.
Passo 5: Volte ao painel do WordPress. Edite qualquer página, abra o menu suspenso Template e você verá sua nova opção “Largura Total”.
Passo 6: Selecione o template e, em seguida, adicione CSS personalizado para expandir a área de conteúdo para largura total. Vá em Aparência → Personalizar → CSS Adicional e adicione:
.page-template-full-width .site-content {
width: 100%;
max-width: none;
}
Os nomes exatos das classes CSS dependem do seu tema. Use a ferramenta Inspecionar do seu navegador para encontrar a classe de contêiner correta se .site-content não funcionar.
Passo 7: Atualize a página e visualize-a.
Essa abordagem oferece controle total, mas requer a manutenção do arquivo de template em um tema filho. Se você não se sente confortável editando código, um dos métodos anteriores é uma escolha mais segura.
Quando Usar um Layout de Largura Total (e Quando Não Usar)
Layouts de largura total não são a escolha certa para todas as páginas. Veja quando eles funcionam bem e quando é melhor usar um layout contido.
| Largura Total Funciona Melhor Para | Layout Contido Funciona Melhor Para |
|---|---|
| Páginas de destino | Posts de blog |
| Páginas Iniciais | Documentação |
| Páginas de Portfólio | Artigos Longos |
| Vitrine de Produtos | Páginas com Muito Texto |
| Páginas "Em Breve" | Bases de Conhecimento |
O motivo é a legibilidade. Linhas de texto longas que se estendem por uma tela ampla são mais difíceis de ler do que linhas limitadas por margens mais estreitas. Para conteúdo que é principalmente texto, um layout em caixa mantém os comprimentos das linhas confortáveis.
Você pode misturar os dois no mesmo site. Eu uso layouts de largura total para páginas importantes como a página inicial e páginas de destino, e um template padrão com uma barra lateral para posts de blog.
Página de Largura Total Não Funciona? Veja Como Corrigir
Se você definiu uma página para largura total, mas ela ainda parece contida ou mostra uma barra lateral, aqui estão as causas mais comuns e como corrigir cada uma.
Seu Tema Não Suporta Alinhamento de Largura Total
Se a opção de alinhamento “Largura Total” não aparecer na barra de ferramentas do editor de blocos, seu tema não declarou suporte para ela.
O tema precisa de uma única linha de código no arquivo functions.php:
add_theme_support( 'align-wide' );
Verifique a documentação do seu tema primeiro para ver se há uma configuração para isso. Se não houver, e você se sentir confortável editando código, adicione essa linha ao arquivo functions.php do seu tema filho. Isso habilita as opções de alinhamento Amplo e Largura Total no editor de blocos.
Um Plugin Está Substituindo Seu Layout
Alguns plugins injetam barras laterais, widgets ou restrições de layout que substituem seu template de largura total. Já vi isso acontecer em muitos sites, e nem sempre é óbvio qual plugin é a causa.
Para encontrar o conflito, desative seus plugins um por um e verifique sua página após cada um. Quando o layout de largura total reaparecer, você encontrou o culpado.
Se você não quiser afetar os visitantes ao testar, instale o plugin Health Check & Troubleshooting. O Modo de Solução de Problemas permite desativar plugins para você, mantendo o site normal para todos os outros.
Plugins de barra lateral e plugins de widget são os culpados mais comuns.
Configurações de Largura de Conteúdo Estão Restringindo Seu Layout
O WordPress e alguns temas definem uma largura máxima de conteúdo que impede que os blocos se estendam para a largura total, mesmo quando você seleciona o alinhamento Largura total.
No editor de blocos, clique no ícone de Configurações (ícone de engrenagem) no canto superior direito e procure por uma seção Layout. Se houver um valor de largura de conteúdo definido, ele pode estar restringindo seus blocos.
Em temas de blocos, isso é controlado pelos valores contentSize e wideSize no arquivo theme.json. Aumentar esses valores, ou removê-los, permite que os blocos de largura total se estendam até a borda do navegador.
CSS Está Restringindo Sua Área de Conteúdo
A folha de estilos do seu tema pode definir um max-width no contêiner de conteúdo que o impede de se estender, mesmo com um modelo de largura total aplicado.
Para verificar, clique com o botão direito no conteúdo da sua página e selecione Inspecionar (ou pressione F12). Observe o elemento de wrapper de conteúdo, que geralmente é um div com uma classe como .site-content, .entry-content ou .content-area.
Se você vir uma propriedade max-width ou width limitando o contêiner, você pode substituí-la com CSS personalizado em Aparência → Personalizar → CSS Adicional:
.your-content-class {
width: 100%;
max-width: none;
}
Substitua .sua-classe-de-conteudo pelo nome real da classe do seu tema.
Perguntas Frequentes sobre Como Deixar uma Página em Largura Total no WordPress
Por que não consigo encontrar um modelo de largura total no meu tema WordPress?
Nem todos os temas incluem um modelo de largura total. Se o seu não tiver, você tem duas opções. Instale o plugin gratuito Modelos de Largura Total para adicionar opções de modelo de largura total a qualquer tema. Ou use um construtor de páginas como SeedProd para criar páginas personalizadas de largura total com controle total do layout.
Qual é a diferença entre "largura ampla" e "largura total" no editor de blocos?
A largura ampla estende um bloco além da área de conteúdo normal, mas permanece dentro das margens da página. A largura total estende o bloco até as bordas da janela do navegador, ignorando completamente as margens. Ambas as opções exigem que seu tema suporte alinhamento amplo. A maioria dos temas modernos o faz.
Tornar uma página de largura total afeta a velocidade da página?
O layout em si não diminui a velocidade da sua página. No entanto, imagens grandes estendidas para largura total podem aumentar os tempos de carregamento se não forem otimizadas. Compacte e redimensione imagens antes de usá-las em seções de largura total para manter sua página rápida.
Posso tornar uma seção de uma página de largura total sem alterar a página inteira?
Sim. No editor de blocos, adicione um bloco de Grupo ou um bloco de Capa e defina-o para o alinhamento Largura total. Os blocos dentro dele se estenderão até a borda do navegador, enquanto o restante da sua página permanecerá na largura normal. O SeedProd também permite controlar a largura por seção.
Minha página de largura total ficará boa no celular?
Sim, desde que seu tema seja responsivo. Layouts de largura total se adaptam automaticamente a telas menores. Visualize sua página no celular antes de publicar para garantir que tudo fique correto. Tanto o editor de blocos do WordPress quanto o SeedProd incluem opções de visualização para celular. Aqui está mais sobre como tornar um site apenas para desktop compatível com dispositivos móveis.
Comece a Criar Páginas de Largura Total
Tornar uma página em largura total no WordPress leva menos de um minuto assim que você sabe onde procurar. Comece com o modelo integrado do seu tema. Se precisar de mais controle sobre seções individuais, o alinhamento de Largura Total do editor de blocos cuida disso sem plugins.
Se você precisar de controle total de design sobre uma página de destino ou layout personalizado, o SeedProd facilita a criação de páginas em largura total sem código.
Você também pode querer conferir estes guias relacionados:
- Como Alterar Fontes em Temas do WordPress (5 Soluções)
- Como Adicionar Facilmente Font Awesome ao Seu Tema WordPress
- Como Alterar o Tema do WordPress Sem Perder Conteúdo
- Como Personalizar Cabeçalhos no WordPress (4 Maneiras Simples)
- Como Editar Sua Página Inicial do WordPress (Maneira Fácil)
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
