Deseja aprender como tornar uma página de largura total no WordPress?
Uma página de largura total tem um layout com conteúdo que abrange toda a largura da tela, sem barras laterais ou colunas extras. É uma opção popular para portfólios e páginas de destino porque tem uma aparência limpa e organizada, com amplo espaço para exibir seu conteúdo.
Neste guia, mostraremos passo a passo como tornar uma página de largura total no WordPress.
Por que tornar uma página de largura total no WordPress?
Aprender a tornar uma página de largura total no WordPress é uma excelente maneira de destacar o conteúdo importante. Sem barras laterais ou outras distrações, é mais provável que os visitantes se concentrem no conteúdo principal. Elas são particularmente úteis para páginas de destino em que você deseja orientar o usuário para uma chamada para ação (CTA) específica.
Além disso, a criação de uma página de largura total pode dar ao seu site uma aparência moderna e visualmente atraente. Com uma aparência limpa e organizada, seu conteúdo se torna instantaneamente mais atraente.
Aqui estão mais alguns motivos para considerar um layout de largura total em seu site WordPress:
- Melhor experiência em dispositivos móveis: Os layouts de largura total geralmente são mais compatíveis com dispositivos móveis. Eles se adaptam bem a telas menores, proporcionando uma melhor experiência de navegação para usuários móveis.
- Versatilidade: As páginas de largura total são flexíveis, permitindo que você as use para vários tipos de conteúdo, inclusive portfólios, mostruários de produtos e conteúdo de formato longo.
- Melhoria da experiência do usuário: O espaço adicional permite um layout mais organizado, facilitando o consumo do conteúdo pelos visitantes. Isso pode aumentar o tempo de permanência na página e reduzir as taxas de rejeição.
- Liberdade criativa: Um layout fullwidth oferece mais liberdade criativa. Você pode usar o espaço extra para imagens maiores, vídeos incorporados ou outros elementos visuais que não se encaixariam bem em um layout mais restrito.
- Melhor para SEO: O maior tempo gasto em uma página e as menores taxas de rejeição podem afetar positivamente seu SEO. Um layout de largura total que melhore a experiência do usuário pode contribuir para essas métricas.
Como tornar uma página de largura total no WordPress: 4 métodos
Há várias maneiras de criar layouts de página de largura total no WordPress. Você pode usar um plug-in do WordPress, escrever códigos CSS e HTML personalizados ou até mesmo usar um construtor de páginas do WordPress.
Para ajudá-lo a encontrar a melhor solução, confira abaixo os métodos que abordaremos neste guia:
Dito isso, vamos nos aprofundar no primeiro método.
Método 1: Criar páginas personalizadas de largura total com o SeedProd
Os plug-ins do construtor de páginas são uma excelente maneira de adicionar páginas de largura total ao seu site do WordPress, especialmente se o seu tema do WordPress não incluir uma opção de página de largura total. Eles permitem que você crie e edite páginas de largura total e as personalize com uma interface de arrastar e soltar.
Alguns construtores de páginas populares incluem o Thrive Architect, o Elementor e o Beaver Builder. Para este guia, usaremos o SeedProd, o melhor construtor de páginas do WordPress, porque ele oferece controle total sobre todo o layout do seu site.
Com o SeedProd, você pode criar páginas de destino personalizadas e personalizar outros elementos, inclusive o cabeçalho, o rodapé, a página inicial e quaisquer outras áreas da página sem código. Sua interface de arrastar e soltar é amigável para iniciantes e funciona perfeitamente com seu tema atual.
Para criar uma página personalizada de largura total com o SeedProd, primeiro instale e ative o plug-in SeedProd em seu site do WordPress.
Se precisar de ajuda, consulte nossa documentação sobre a instalação do SeedProd. Ela o orienta no processo de ativação e mostra como ativar sua chave de licença para desbloquear recursos adicionais.
Observação: para este guia, estamos usando o SeedProd Pro. No entanto, se você quiser personalizar sua loja WooCommerce, recomendamos usar o SeedProd Elite.
Criação de uma página de destino
Depois de ativar o plug-in, navegue até SeedProd " Landing Pages e clique no botão Add New Landing Page.
Agora, você verá a biblioteca de modelos, onde poderá escolher entre mais de 180 modelos de páginas de destino pré-criados. Muitos desses modelos incluem opções de largura total por padrão, ou você pode criar uma página personalizada de largura total do zero.
Depois de encontrar um modelo que lhe agrade, clique no ícone de marca de seleção.
Em seguida, preencha as informações de nome e URL da página de destino e clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ).
Após o lançamento do novo modelo, você verá uma interface com blocos, seções e configurações à esquerda e uma visualização ao vivo à direita. Você pode clicar em qualquer lugar da visualização para selecionar diferentes elementos da página e editar suas configurações.
Como tornar uma página de largura total com o SeedProd
Um bom exemplo é a personalização de uma seção de modelo para torná-la de largura total. No modelo abaixo, a seção é de tela fixa, o que significa que o conteúdo não ocupa toda a tela.
Para alterar isso, destaque a seção para que ela tenha uma borda roxa e abra o painel de configurações. A partir daí, role para baixo até o título "Section Width" (Largura da seção) e escolha tela cheia no menu suspenso.
Em seguida, ao visualizar a página, você verá essa seção cobrindo toda a tela.
Você pode continuar esse processo em qualquer outra seção para tornar a página inteira de largura total. É possível até mesmo tornar linhas e colunas individuais de largura total usando etapas semelhantes.
Lembre-se de salvar e publicar sua página quando terminar de personalizá-la.
Juntamente com o construtor de páginas de destino, o SeedProd também inclui um construtor de temas WordPress do tipo arrastar e soltar. Com esse recurso, você pode criar um tema WordPress personalizado sem escrever nenhum código.
Para começar, acesse SeedProd " Theme Builder em seu painel do WordPress e clique no botão Theme Template Kits para escolher entre mais de 80 kits de temas de sites totalmente personalizáveis.
A personalização de um tema com o SeedProd é semelhante ao recurso Page Builder. Aqui, basta escolher um arquivo de tema da lista, abri-lo no construtor de páginas e apontar e clicar para tornar qualquer seção de largura total como antes.
O criador de temas permite que você personalize cada parte do seu site, incluindo páginas, layouts de blog, arquivos, cabeçalho, rodapé, barras laterais, páginas do WooCommerce e muito mais. Além disso, as opções de personalização incluem estilo para fontes, cores, planos de fundo, espaçamento e até mesmo animações.
Para obter detalhes completos, consulte nosso guia sobre como criar um tema WordPress personalizado.
Método 2: Tornar uma página de largura total no WordPress com um plug-in
O próximo método que abordaremos também é simples e funciona com a maioria dos plug-ins, temas e criadores de páginas do WordPress.
Para isso, usaremos o plug-in Fullwidth Templates, portanto, faça o download do plug-in e instale-o em seu site do WordPress.
Para obter ajuda, consulte este guia sobre como instalar um plug-in do WordPress.
Após a ativação do plug-in, ele adicionará três novas opções de arquivo de modelo ao editor de páginas do WordPress. Você pode encontrá-las editando uma página existente ou adicionando uma nova e encontrando o título "Template" no painel à direita.
Os três modelos são os seguintes:
- FW No Sidebar (Sem barra lateral): essa opção remove a barra lateral de sua página, deixando o restante do conteúdo intacto.
- FW Fullwidth: essa opção remove a barra lateral, os comentários e o título e estende o layout da página para a largura total.
- FW Fullwidth No Header Footer (Largura total sem cabeçalho e rodapé): Essa opção remove tudo o que a configuração FW Fullwidth faz, bem como o cabeçalho e o rodapé.
A opção mais popular para usar com o editor do WordPress é a FW No Sidebar, pois ela mantém sua página igual, mas remove apenas a barra lateral.
Em última análise, esse plug-in facilita a criação de uma página de largura total. Entretanto, ele não tem muitas opções de personalização, por isso recomendamos o uso de um construtor de páginas.
Método 3: Use o modelo de largura total do seu tema
Muitos dos melhores temas do WordPress já vêm com um modelo de página de largura total por padrão. Portanto, é melhor usar essa opção se seu tema a tiver.
Normalmente, você pode ver se o seu tema tem um modelo de largura total observando a seção de atributos da página no editor do WordPress.
Neste exemplo, estamos usando o popular tema Hestia do WordPress. Como você pode ver, as opções de modelo estão sob o título "Templates" no painel do lado direito.
As opções de modelo de página fullwidth incluem:
- Modelo de largura total
- Página com barra lateral
- Criador de páginas em branco
- Construtor de páginas de largura total
As opções que você vê podem variar dependendo do seu tema ativo do WordPress. Basta escolher um modelo de sua preferência e salvar sua página para torná-la de largura total.
Método 4: Tornar uma página de largura total no WordPress manualmente
Um método final para criar páginas de largura total no WordPress envolve a criação de um modelo de página de largura total por conta própria. Recomendamos esse método somente se nada mais funcionar e se você se sentir à vontade para editar os arquivos de tema do WordPress.
Antes de começar, faça backup do seu site WordPress e do tema atual. Isso o ajudará a restaurar seu site rapidamente se algo der errado.
Criação de um modelo personalizado
Para começar, abra um editor de texto como o Bloco de Notas e copie e cole o seguinte código no arquivo em branco:
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
Em seguida, salve esse arquivo com o nome full-width.php e altere a opção "Salvar como tipo" para "Todos os arquivos". Isso garante que o arquivo não será salvo automaticamente como um arquivo .txt.
Esse arquivo informará ao WordPress o nome do arquivo e buscará o modelo de cabeçalho.
A próxima etapa é editar a parte de conteúdo do código. Portanto, conecte-se ao seu site usando um cliente FTP ou o gerenciador de arquivos do seu host da Web e navegue até /wp-content/themes/your-theme-folder/.
Dentro dessa pasta, você precisará encontrar o arquivo page.php, que é o arquivo de modelo de página padrão do seu tema. Abra esse arquivo em seu editor de texto e copie todo o código abaixo da linha get_header().
Em seguida, cole o código que você copiou no arquivo de texto full-width.php que você criou anteriormente.
Remover a barra lateral
No mesmo arquivo full-width.php, localize e exclua a seguinte linha de código:
<?php get_sidebar(); ?>
Isso impedirá que seu tema exiba a barra lateral ao usar o modelo de largura total.
Você poderá encontrar esse código mais de uma vez se o seu tema tiver várias barras laterais, como áreas de widgets de rodapé. Decida quais barras laterais você deseja manter e remova as que não forem necessárias.
Se o seu tema não exibir barras laterais nas páginas, talvez você não encontre esse código no arquivo.
Depois de fazer as alterações, o código do novo arquivo full width.php poderá ser semelhante a este, embora o seu possa ser diferente, dependendo das opções do tema:
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php
while ( have_posts() ) :
the_post();
?>
<?php get_template_part( 'content', 'page' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // End of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
Por fim, salve esse arquivo e carregue-o na pasta do tema usando seu cliente ftp.
Agora você criou e carregou com sucesso um modelo de página de largura total personalizado em seu tema do WordPress. A próxima etapa é usá-lo para criar uma página de largura total.
Para fazer isso, acesse o administrador do WordPress e crie ou edite uma nova página.
No painel "Page" (Página) à direita, procure por "Templates" (Modelos) e clique no menu suspenso "Template" (Modelo), onde você pode selecionar seu novo modelo "Full Width" (Largura total).
Depois de selecionar esse modelo, clique em Publicar ou Atualizar para salvar suas alterações.
Adição de CSS personalizado para tornar a página de largura total
Ao visualizar a página, você não verá nenhuma barra lateral, e a página será exibida como uma única coluna. Em alguns casos, ela pode não ter largura total ainda, portanto, você precisará adicionar alguns estilos de CSS.
Para fazer isso, use a ferramenta Inspecionar para localizar as classes CSS que seu tema usa para definir a área de conteúdo. Depois disso, ajuste sua largura para 100% usando CSS.
Agora você pode adicionar o código CSS personalizado ao seu tema acessando Appearance " Customize e clicando na guia Additional CSS na parte inferior.
O CSS que usamos tem a seguinte aparência:
.page-template-full-width .site-content {
width:100%;
}
Esta é a aparência da nossa página em nosso site de demonstração usando o tema Twenty Twelve.
A seguir, mais maneiras de personalizar seu tema do WordPress
Esperamos que este guia tenha ajudado você a aprender como tornar uma página de largura total no WordPress.
Para obter ainda mais tutoriais úteis sobre o WordPress, confira estas sugestões principais:
- 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 trechos de postagens no WordPress (sem código)
- Como personalizar cabeçalhos no WordPress (4 maneiras simples)
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
