Como Criar uma Página de Largura Total no WordPress (Guia para Iniciantes)

Você quer criar uma página de largura total no WordPress, para que possa estender seu conteúdo pela tela?

A maioria dos temas do WordPress já vem com um modelo de página de largura total integrado que você pode usar. No entanto, se o seu tema não tiver um, é fácil adicioná-lo.

Neste artigo, mostraremos como criar facilmente uma página de largura total no WordPress e até mesmo criar layouts de página totalmente personalizados sem nenhum código.

Aqui está uma visão geral rápida dos métodos neste guia:

• Método 1. Use o Modelo de Largura Total do Seu Tema
• Método 2. Crie um Modelo de Página de Largura Total Usando um Plugin
• Método 3: Projete uma Página de Largura Total no WordPress Usando um Plugin de Page Builder
• Método 4. Crie Páginas de Largura Total Completamente Personalizadas com SeedProd
• Método 5: Crie um Modelo de Página de Largura Total no WordPress Manualmente

Método 1. Use o Modelo de Largura Total do Seu Tema

Se o seu tema já vem com um modelo de página de largura total, então é melhor simplesmente usá-lo. Quase todos os bons temas do WordPress fazem isso.

Mesmo os melhores temas gratuitos do WordPress geralmente vêm com um modelo de largura total, então há uma boa chance de você já ter um.

Primeiro, você precisa editar uma página ou criar uma nova indo em Páginas » Adicionar Nova no seu painel do WordPress.

No painel ‘Documento’ à direita do editor de conteúdo, você precisa expandir a seção ‘Atributos da Página’ clicando na seta para baixo ao lado dela. Você deverá então ver um menu suspenso ‘Template’.

Se você tiver um template de largura total para o seu tema, ele será listado aqui. Ele deve ser chamado de algo como ‘Template de Largura Total’:

As opções que você vê aqui diferem dependendo do seu tema. Não se preocupe se o seu tema não tiver um template de página de largura total.

Você pode adicionar um facilmente usando os métodos abaixo.

Método 2. Crie um Modelo de Página de Largura Total Usando um Plugin

Este método é o mais fácil e funciona com todos os temas do WordPress e plugins de construtor de páginas.

Primeiro, você precisa instalar e ativar o plugin Fullwidth Templates. Se você não tem certeza de como fazer isso, confira nosso guia para iniciantes sobre como instalar um plugin do WordPress.

O plugin Fullwidth Templates adicionará três novas opções aos seus templates de página:

Essas opções são:

• FW No Sidebar: Remove a barra lateral da sua página, mas deixa todo o resto intacto.
• FW Fullwidth: Remove a barra lateral, o título e os comentários, e estica o layout para largura total.
• FW Fullwidth No Header Footer: Remove tudo o que o FW Fullwidth faz, mais o cabeçalho e o rodapé.

Se você for simplesmente usar o editor integrado do WordPress, “FW No Sidebar” provavelmente será a melhor escolha.

Embora este plugin permita que você crie um template de página de largura total, você tem opções de personalização limitadas.

Se você deseja personalizar seu template de largura total sem nenhum código, então você precisa usar um construtor de páginas.

Método 3: Projete uma Página de Largura Total no WordPress Usando um Plugin de Page Builder

Se o seu tema não tiver um template de largura total, esta é a maneira mais fácil de criar e personalizar um template de largura total.

Ele permite que você edite facilmente sua página de largura total e crie diferentes layouts de página para o seu site com uma interface de arrastar e soltar.

Para este método, você precisará de um plugin de construtor de páginas para WordPress. Neste tutorial, usaremos o Thrive Architect.

É um dos melhores plugins de construtor de páginas de arrastar e soltar, e permite que você crie layouts de página facilmente sem escrever nenhum código.

Primeiro, instale e ative o plugin Thrive Architect. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin para WordPress.

Depois de ativar o plugin, edite uma página existente ou crie uma nova no WordPress.

Em seguida, clique no botão 'Launch Thrive Architect' na parte superior da sua tela.

Em seguida, você será solicitado a escolher o tipo de página que deseja criar. Você pode escolher criar uma página normal ou uma página de destino pré-construída.

Selecione a opção 'Pre-built Landing Page' clicando nela.

Isso o levará à Biblioteca de Páginas de Destino do Thrive Architect. A partir daqui, você pode selecionar um dos modelos pré-fabricados para usar como base para sua página de largura total.

Simplesmente clique em um modelo que você gosta para selecioná-lo.

Se você escolheu um modelo da seção 'Smart Landing Page Sets', agora pode escolher entre várias páginas pré-projetadas nesse estilo.

Para este tutorial, escolheremos o modelo 'Sales Page' clicando nele. Em seguida, pressione o botão 'Apply Template' e o construtor de páginas o carregará.

Assim que você estiver no Editor Thrive Architect, você pode editar qualquer um dos elementos, como imagens, fundo, texto e assim por diante, que você deseja alterar.

Para editar um elemento na página, você só precisa clicar nele. Neste caso, clicamos no fundo deste bloco de página. Isso exibe todas as opções de personalização no menu à esquerda:

Aqui, você pode alternar o interruptor para garantir que seu conteúdo cubra toda a largura da tela.

No menu à esquerda, você também pode personalizar a tipografia, tamanho da fonte, layout, estilo de fundo, bordas, sombras e muito mais.

Você também pode adicionar novos elementos a qualquer momento ao seu layout. O Thrive Architect vem com muitos blocos básicos e avançados que você pode arrastar e soltar em sua página.

Quando terminar de editar, clique no botão de seta (^) ao lado do botão 'Salvar Trabalho' na parte inferior da tela. Em seguida, clique na opção 'Salvar e Retornar ao Editor de Postagem'.

Você pode então salvar seu rascunho ou publicá-lo.

Uma vez publicado, você pode visitar seu blog WordPress para ver sua página de largura total finalizada.

Método 4. Crie Páginas de Largura Total Completamente Personalizadas com SeedProd

Embora o Thrive Architect seja uma solução interessante, você pode estar procurando um plugin que ofereça opções de personalização ainda mais poderosas para as páginas do seu site.

Se você está procurando criar uma página de destino completamente personalizada onde deseja personalizar o cabeçalho, rodapé e todas as áreas da página, então recomendamos o uso de SeedProd.

É o melhor plugin de landing page para WordPress, e vem com uma interface de construtor de páginas de arrastar e soltar muito fácil de usar.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Após a ativação, basta ir em SeedProd » Páginas para adicionar uma nova landing page.

Você pode selecionar um de seus mais de 300 templates pré-construídos, que incluem muitas opções de largura total. Ou, você pode criar uma landing page personalizada de largura total do zero.

A melhor parte do SeedProd é que ele é extremamente rápido e vem com recursos de conversão integrados para gerenciamento de assinantes, integração com serviços de marketing por e-mail, blocos avançados do WooCommerce e muito mais.

Para instruções detalhadas, consulte nosso guia sobre como criar uma landing page no WordPress.

Além do construtor de landing pages, o SeedProd também oferece um Theme Builder completo com arrastar e soltar. Isso significa que você pode facilmente criar um tema WordPress personalizado de largura total sem editar nenhum código.

Simplesmente vá para SeedProd » Theme Builder para criar um novo tema WordPress. Novamente, você pode escolher entre modelos de tema personalizáveis ou pode projetar cada parte do seu tema do zero.

Apenas apontando e clicando, você pode editar cada parte do seu tema. Por exemplo, você pode adicionar uma nova imagem de fundo e definir a posição e a largura da seção para tela cheia.

Com o SeedProd Theme Builder, você pode personalizar todas as partes do seu site WordPress, incluindo páginas, posts, arquivos, cabeçalho, rodapé, barras laterais, páginas WooCommerce e muito mais.

Para instruções passo a passo, você pode seguir nosso tutorial sobre como criar facilmente um tema WordPress personalizado.

Método 5: Crie um Modelo de Página de Largura Total no WordPress Manualmente

Este método é um último recurso se nenhum dos métodos acima funcionar para você. Ele requer que você edite seus arquivos de tema do WordPress. Você precisará de algum conhecimento básico de PHP, CSS e HTML.

Se você ainda não fez isso antes, confira nosso guia sobre como copiar / colar código no WordPress.

Antes de continuar, recomendamos que você crie um backup do WordPress ou, pelo menos, um backup do seu tema atual. Isso o ajudará a restaurar facilmente seu site se algo der errado.

Em seguida, abra um editor de texto simples como o Bloco de Notas e cole o seguinte código em um arquivo em branco:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Salve este arquivo como full-width.php em seu computador. Talvez seja necessário alterar o 'Salvar como tipo' para 'Todos os arquivos' para evitar salvá-lo como um arquivo .txt:

Este código simplesmente define o nome de um arquivo de modelo e pede ao WordPress para buscar o modelo de cabeçalho.

Em seguida, você precisará da parte do conteúdo do código. Conecte-se ao seu site usando um cliente FTP (ou o gerenciador de arquivos do seu hospedagem WordPress no cPanel) e, em seguida, vá para /wp-content/themes/seu-pasta-de-tema/.

Agora você precisa localizar o arquivo page.php. Este é o arquivo de modelo de página padrão do seu tema.

Abra esse arquivo e copie tudo após a linha get_header() e cole-o no arquivo full-width.php em seu computador.

No arquivo full-width.php, encontre e exclua esta linha de código:

<?php get_sidebar(); ?>

Esta linha busca a barra lateral e a exibe em seu tema. Excluí-la impedirá que seu tema mostre a barra lateral ao usar o modelo de largura total.

Você pode ver esta linha mais de uma vez em seu tema. Se o seu tema tiver várias barras laterais (áreas de widgets do rodapé também são chamadas de barras laterais), você verá cada barra lateral referenciada uma vez no código. Decida quais barras laterais você deseja manter.

Se o seu tema não exibe barras laterais nas páginas, você pode não encontrar este código em seu arquivo.

Veja como todo o nosso código de full-width.php fica após fazer as alterações. Seu código pode parecer ligeiramente diferente dependendo do seu tema.

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_footer(); ?>

Em seguida, faça o upload do arquivo full-width.php para a pasta do seu tema usando seu cliente FTP.

Agora você criou e fez o upload com sucesso de um modelo de página personalizado de largura total para o seu tema. O próximo passo é usar este modelo para criar uma página de largura total.

Vá para sua área de administração do WordPress e edite ou crie uma nova página no editor de blocos do WordPress.

No painel ‘Documento’ à direita, procure por ‘Atributos da Página’ e clique na seta para baixo para expandir essa seção, se necessário. Você verá um menu suspenso ‘Modelo’ onde poderá selecionar seu novo modelo ‘Largura Total’:

Após selecionar esse modelo, publique ou atualize a página.

Ao visualizar a página, você verá que as barras laterais desapareceram e sua página aparece como uma única coluna. Ela pode ainda não estar em largura total, mas agora você está pronto para estilizar de forma diferente.

Você precisará usar a ferramenta Inspecionar para descobrir as classes CSS usadas pelo seu tema para definir a área de conteúdo.

Depois disso, você pode ajustar sua largura para 100% usando CSS. Você pode adicionar código CSS indo em Aparência » Personalizar e clicando em ‘CSS Adicional’ na parte inferior da tela.

Usamos o seguinte código CSS em nosso site de teste:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Veja como ficou em nosso site de demonstração usando o tema Twenty Sixteen.

Se você quiser usar o método manual e desejar fazer mais personalizações, você também pode usar o plugin CSS Hero, que permite modificar estilos CSS com um editor de apontar e clicar.

Para a maioria dos usuários, no entanto, recomendamos usar o modelo de largura total do seu próprio tema ou usar um plugin para criar um.

Esperamos que este artigo tenha ajudado você a aprender como criar facilmente uma página de largura total no WordPress. Você também pode querer ver nosso guia sobre os melhores plugins do WordPress para expandir seu site, e nossa comparação dos melhores plugins LMS do WordPress para criar e vender cursos.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.