Uma página com largura total no WordPress estende seu conteúdo por toda a janela do navegador, sem barra lateral ou caixa limitando o layout. É uma das alterações de design mais comuns que as pessoas desejam fazer e geralmente é mais rápida de configurar do que você imagina.
Já vi muitos iniciantes enfrentarem dificuldades com isso, pois 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 confinada, mesmo quando não deseja nenhuma barra lateral.
A boa notícia é que você tem várias maneiras de corrigir isso. Neste guia, vou mostrar cinco métodos para criar uma página com largura total no WordPress, desde o mais fácil (sem plugins, sem código) até o mais avançado. Também vou abordar o que fazer quando o layout com largura total não estiver funcionando como deveria.
- Use o modelo de largura total integrado ao seu tema
- Tornar blocos individuais com largura total no Editor de blocos
- Adicione um modelo de largura total com um plugin gratuito
- Crie uma página personalizada com largura total com o SeedProd
- Criar manualmente um modelo de página com largura total
- Quando usar um layout de largura total (e quando não usar)
- A página em largura total não está funcionando? Veja como corrigir isso
- Perguntas frequentes sobre como criar uma página com largura total no WordPress
Use o modelo de largura total integrado ao seu tema
A maioria dos temas do WordPress já inclui um modelo de página com 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 deseja tornar em largura total no editor do WordPress.
Passo 2: Na barra lateral direita, procure a seção Modelo. Dependendo do seu tema, ela pode aparecer em Atributos da página ou como um menu suspenso Modelo independente.
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.
Etapa 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 que 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 encontrar uma opção de largura total no menu suspenso, talvez o seu tema não inclua essa opção. Passe para o próximo método.
Tornar blocos individuais com largura total no Editor de blocos
O editor de blocos do WordPress permite definir blocos individuais para alinhamento em largura total, estendendo-os por toda a tela sem alterar o modelo da página. Isso está integrado ao WordPress, portanto, 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 deseja tornar em largura total.
Passo 2: Na barra de ferramentas do bloco, na parte superior do bloco, clique no botão Alterar alinhamento (parece um conjunto de linhas horizontais).
Etapa 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 acontecesse.
Dica: se você deseja que uma seção inteira da sua página tenha largura total, adicione primeiro um bloco Grupo. Defina o bloco Grupo para o alinhamento Largura total e, em seguida, adicione seus blocos de conteúdo dentro dele. O bloco Grupo atua como um contêiner de largura total para tudo o que está aninhado dentro dele.
Se a opção de alinhamento Full Width não aparecer na barra de ferramentas, seu tema pode não ser compatível com ela. Abordarei como corrigir isso na seção de solução de problemas abaixo.
Layouts de largura total em temas de bloco (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 do 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 bloco, vá para Aparência → Editor no painel do WordPress. A partir daí, você pode editar seus modelos de página diretamente e definir a área de conteúdo para largura total no nível do modelo.
O arquivo theme.json controla dois valores-chave: contentSize (a largura padrão para o seu conteúdo) e wideSize (a largura para blocos alinhados à largura). Ajustar esses valores altera a largura do seu conteúdo em todo o site.
Esta é a abordagem mais flexível se você estiver usando um tema de blocos moderno, pois permite 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. Não é necessário código.
Passo 1: No painel do WordPress, vá para Plugins → Adicionar novo e procure por “Fullwidth Templates”. Se precisar de ajuda com este passo, aqui está um guia sobre como instalar um plugin do WordPress.
Passo 2: Instale e ative o plugin.
Etapa 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 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 nem rodapé | Barra lateral, título, comentários, cabeçalho e rodapé |
Passo 4: Escolha o modelo que melhor se adapta às suas necessidades. Para a maioria das páginas de destino, “FW Fullwidth” é a escolha certa. Para uma tela completamente em branco, use “FW Fullwidth No Header Footer”.
Etapa 5: Clique em Atualizar ou Publicar e visualize sua página.
O plugin funciona com qualquer tema, por isso é uma opção confiável quando o seu tema não oferece um modelo de largura total por si só.
Crie uma página personalizada com largura total com o SeedProd
Quando você precisa de controle total sobre o design de uma página de destino, 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 alterar nada na sua configuração atual. Todas as páginas criadas no SeedProd têm largura total por padrão.
Veja como criar uma página com largura total usando essa função.
Passo 1: Instale e ative o SeedProd, depois vá para SeedProd → Landing Pages no seu painel de controle. Se precisar de ajuda, aqui está um guia sobre como instalar o SeedProd.
Etapa 2: Clique em Adicionar nova página de destino.
Escolha um modelo. O SeedProd inclui modelos para páginas de destino, páginas de inscrição em webinars, páginas de vendas e muito mais. Você também pode começar com uma página em branco.
Etapa 3: Digite o nome e o URL da sua página e clique em Salvar e começar a editar a página.
Etapa 4: O editor de arrastar e soltar abre com o layout da sua página. Por padrão, todas as seções ocupam toda a largura.
Se precisar ajustar a largura de uma seção, clique na seção e altere a Largura da seção para “Tela inteira” no painel de configurações.
Veja como fica uma página com largura total após essa alteração:
Você também pode tornar linhas individuais com largura total clicando em uma linha e ajustando sua largura da mesma maneira.
Etapa 5: Adicione seu conteúdo arrastando blocos: títulos, imagens, formulários, botões, tabelas de preços ou qualquer outro elemento necessário.
Passo 6: Quando estiver satisfeito com o layout, clique em Salvar e, em seguida, em Publicar.
O SeedProd é uma boa opção quando você precisa de uma página com aparência diferente do resto do seu site, como uma página de destino focada ou uma página “em breve”. Você também pode usá-lo para criar um tema WordPress totalmente personalizado com layouts de largura total integrados. Para páginas em que o modelo de tema normal funciona bem, os métodos anteriores deste guia são mais rápidos.
Se você deseja criar páginas com largura total sem escrever código, comece a usar o SeedProd hoje mesmo.
Criar manualmente um modelo de página com largura total
Se você estiver familiarizado com PHP e CSS, poderá criar um modelo de página personalizado com largura total editando diretamente os arquivos do seu tema. Esse 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 seu servidor web gerenciador de arquivos. Navegue até /wp-content/themes/your-theme-folder/.
Passo 2: Crie um novo arquivo chamado full-width.php. No topo 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 seu tema page.php arquivo e copie seu conteúdo para o seu novo full-width.php arquivo, 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 Modelo e você verá a nova opção “Largura total”.
Passo 6: Selecione o modelo e adicione CSS personalizado para esticar a área de conteúdo para a largura total. Vá para 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 funciona.
Passo 7: Atualize a página e visualize-a.
Essa abordagem oferece controle total, mas exige a manutenção do arquivo de modelo em um tema filho. Se você não se sente à vontade para editar código, um dos métodos anteriores é uma opção mais segura.
Quando usar um layout de largura total (e quando não usar)
Os 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.
| A largura total funciona melhor para | O layout contido funciona melhor para |
|---|---|
| Páginas de destino | Publicações no blog |
| Páginas iniciais | Documentação |
| Páginas do portfólio | Artigos longos |
| Vitrines de produtos | Páginas com muito texto |
| Páginas em breve | Bases de conhecimento |
O motivo é a legibilidade. Linhas longas de texto que se estendem por uma tela ampla são mais difíceis de ler do que linhas limitadas por margens mais estreitas. Para conteúdos que são principalmente texto, um layout em caixas mantém o comprimento das linhas confortável.
Você pode misturar os dois no mesmo site. Eu uso layouts de largura total para páginas importantes, como a página inicial e as páginas de destino, e um modelo padrão com uma barra lateral para as postagens do blog.
A página em largura total não está funcionando? Veja como corrigir isso
Se você definir uma página para largura total, mas ela ainda parecer encaixotada ou mostrar uma barra lateral, aqui estão as causas mais comuns e como corrigir cada uma delas.
Seu tema não suporta alinhamento em 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 oferece suporte para ela.
O tema precisa de uma única linha de código em seu functions.php arquivo:
add_theme_support( 'align-wide' );
Verifique primeiro a documentação do seu tema para ver se existe uma configuração para isso. Caso contrário, e se você se sentir à vontade para editar código, adicione essa linha ao seu tema filho functions.php arquivo. Isso habilita as opções de alinhamento Largo e Largura total no editor de blocos.
Um plugin está substituindo seu layout
Alguns plugins inserem barras laterais, widgets ou restrições de layout que substituem seu modelo de largura total. Já vi isso acontecer em muitos sites, e nem sempre é óbvio qual plugin é o responsável.
Para encontrar o conflito, desative seus plug-ins um por um e verifique sua página após cada um. Quando o layout de largura total reaparecer, você terá encontrado o culpado.
Se você não quiser afetar os visitantes ao vivo durante o teste, instale o plugin Health Check & Troubleshooting. Seu modo de solução de problemas permite desativar plugins para você mesmo, mantendo o site normal para todos os outros.
Os plugins da barra lateral e os plugins de widget são os culpados mais comuns.
As configurações de largura do 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 por toda a largura, mesmo quando você seleciona o alinhamento de largura total.
No editor de blocos, clique no ícone Configurações (ícone de engrenagem) no canto superior direito e procure a seção Layout. Se houver um valor definido para a largura do conteúdo, isso pode estar restringindo seus blocos.
Nos temas em bloco, isso é controlado pelo contentSize e wideSize valores no arquivo theme.json. Aumentar esses valores ou removê-los permite que os blocos de largura total se estendam até a borda do navegador.
O CSS está restringindo sua área de conteúdo
A folha de estilo do seu tema pode definir um max-width no contêiner de conteúdo que impede que ele se estique, mesmo com um modelo de largura total aplicado.
Para verificar, clique com o botão direito do mouse no conteúdo da sua página e selecione Inspecionar (ou pressione F12). Observe o elemento wrapper de conteúdo, que geralmente é um div com uma aula como .site-content, .entry-contentou .content-area.
Se você vir um max-width ou width propriedade que limita 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 .your-content-class com o nome real da classe do seu tema.
Perguntas frequentes sobre como criar uma página com 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 incluir, você tem duas opções. Instale o plugin gratuito Fullwidth Templates para adicionar opções de modelo de largura total a qualquer tema. Ou use um construtor de páginas como o 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 o alinhamento amplo. A maioria dos temas modernos suporta.
Criar uma página com largura total afeta a velocidade da página?
O layout em si não torna sua página mais lenta. No entanto, imagens grandes esticadas em toda a largura podem aumentar o tempo de carregamento se não forem otimizadas. Comprima e redimensione as 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 com largura total sem alterar a página inteira?
Sim. No editor de blocos, adicione um bloco Grupo ou bloco Capa e defina-o para alinhamento Largura total. Os blocos dentro dele se estenderão até a borda do navegador, enquanto o restante da sua página permanecerá com largura normal. O SeedProd também permite controlar a largura por seção.
Minha página com largura total ficará bem em dispositivos móveis?
Sim, desde que o seu tema seja responsivo. Os layouts de largura total adaptam-se automaticamente a ecrãs mais pequenos. Visualize a sua página no telemóvel antes de publicar para se certificar de que tudo está correto. Tanto o editor de blocos do WordPress como o SeedProd incluem opções de visualização no telemóvel. Veja aqui mais informações sobre como tornar um site apenas para computador compatível com dispositivos móveis.
Comece a criar páginas com largura total
Criar uma página com largura total no WordPress leva menos de um minuto, uma vez que você sabe onde procurar. Comece com o modelo integrado ao seu tema. Se precisar de mais controle sobre seções individuais, o alinhamento de largura total do editor de blocos cuida disso sem a necessidade de plug-ins.
Se você precisa de controle total sobre o design de uma página de destino ou layout personalizado, o SeedProd facilita a criação de páginas com largura total sem código.
Você também pode conferir estes guias relacionados:
- Como alterar as fontes em temas do WordPress (5 soluções)
- Como adicionar facilmente a Font Awesome ao seu tema do WordPress
- Como alterar o tema do WordPress sem perder o conteúdo
- Como personalizar cabeçalhos no WordPress (4 maneiras simples)
- Como editar sua página inicial do WordPress (maneira fácil)
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
