Deseja criar uma página de largura total no WordPress?

Muitos de Temas do WordPress já vem com um modelo de página de largura total integrado que você pode usar. No entanto, alguns temas do WordPress não possuem esse recurso. neste Tutoriel, mostraremos como criar facilmente uma página de largura total no WordPress.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então, voltemos ao porquê de estarmos aqui.

Método 1: usando um modelo de largura integrado em seu tema WordPress

Este método é recomendado se o seu tema WordPress já tiver sido fornecido com um modelo de página de largura total. Se você não tiver um, verifique a seleção a seguir e obtenha um.

Primeiro você precisa editar uma página ou criar uma nova visitando " Páginas> Adicionar Uma nova página.

Na janela de edição da página, selecione Largura total como um modelo na caixa de seleção de atributos da página.

Depois de selecionar o modelo Largura totalvocê deve registrar sua página. Você pode continuar personalizando a página para adicionar mais conteúdo ou clicar no botão Visualizar para vê-la em ação.

Se você não tiver uma opção Largura total - Largura total - modelo na tela de edição de sua página, isso significa que seu tema WordPress não a tem. 

Mas não se preocupe, mostraremos como criar facilmente uma página de largura total sem alterar um tema do WordPress.

Método 2: Como criar um modelo de página com largura total

Este método requer que você edite os arquivos do tema WordPress que está usando e que tenha um conhecimento básico de PHP, CSS e HTML.

A propósito, também convidamos você a consultar o Os melhores plugins WordPress do 8 para criar facilmente seus layouts 

Mas, antes de ir mais longe, você deve crie um backup do WordPress ou pelo menos um backup do seu tema atual do WordPress. Isso o ajudará a restaurar facilmente seu site se algo de ruim acontecer. 

Primeiro, você precisa abrir um editor de texto como o Bloco de notas e colar o seguinte código em um arquivo em branco:

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

Agora você precisa salvar este arquivo como " Full-width.php No seu computador

Este código simplesmente define o nome de um modelo de arquivo e instrui o WordPress a extrair 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 gerenciador de arquivos no cPanel) e vá para " / Wp-content / themes / your-theme-pasta / ".

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

Copie tudo após a função « get_header () E cole em um arquivo " Full-width.php Que você criou no seu computador.

Agora você precisa examinar o conteúdo do arquivo "full-width.php" e excluir esta linha de código:

<?php get_sidebar(); ?>

Esta linha simplesmente pega a barra lateral e a exibe em seu tema WordPress. Ao remover isso, seu tema não mostrará a barra lateral ao usar o modelo Largura total.

Você pode ver esta linha aparecer mais de uma vez em seu tema WordPress. Se o seu tema WordPress tem vários barras laterais (áreas de widget o rodapé também são chamados de barras laterais)você verá cada barra lateral referenciada uma vez no código. Você deve decidir quais barras laterais deseja manter.

Parece que o seu site está carregando lentamente, descubra Por que você precisa começar a otimizar seu blog WordPress por imagens

Se o seu tema não exibir barras laterais na sua página, talvez você não encontre esse código no seu arquivo.

É assim que nosso código full-width.php se encarrega de fazer as alterações. Seu código pode parecer um pouco 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 -->
</div><!-- .content-area -->
<?php get_footer(); ?>

Então você tem que baixar o arquivo Full-width.php »Na pasta de temas do WordPress usando o cliente FTP.

Você criou e carregou com êxito um modelo de página de largura total personalizado para o seu tema. A próxima etapa é usar este modelo para criar uma página de largura total.

Vá para o painel e edite ou crie uma nova página.

Na tela de edição da página, localize a caixa de seleção de atributos da página e clique no menu suspenso na opção "Modelo".

Você poderá ver seu modelo. Vá em frente, selecione-o e salve ou atualize a página.

Agora, você pode visitar seu site e verá que as barras laterais desapareceram e sua página aparece como uma página de coluna única. Pode não estar cheio ainda, mas agora você está pronto para transmiti-lo de forma diferente.

Torne seu site popular descobrindo as Plugins WordPress 7 para otimizar o SEO de suas imagens

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

Depois, você pode ajustar sua largura para 100% usando CSS. Usamos o seguinte código CSS:

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

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

Aqui está como será o Twenty Seventeen.

Isso é tudo para este tutorial, espero que ele permita que você crie páginas de largura total.

Os métodos acima são gratuitos para quem pode pagar e deseja criar rapidamente layouts de largura total ou largura total facilmente.

Descubra também alguns plugins premium do WordPress  

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Construtor Divi

Divi Builder é um construtor de páginas de alta qualidade, muito apreciado por temas elegantes. Embora seja geralmente usado como parte do tema Divi WordPress, Divi Builder também é um plug-in autônomo que pode ser usado em outros temas WordPress.

Divi Builder permite que você edite seu conteúdo usando uma interface visual no front-end, bem como uma interface no back-end, embora a maioria dos usuários prefira a primeira interface.

Basicamente, em vez de barras laterais, é tudo em pop-ups e botões flutuantes. Dá-lhe acesso a 316 modelos pré-concebidos espalhados por 40 pacotes de apresentação diferentes, bem como a capacidade de guardar os seus próprios designs como modelos.

Propomos que você descubra Como criar um blog profissional

Uma das características de Divi sempre foi o controle dos estilos que ele lhe dá. Em três guias diferentes, você pode definir várias configurações, incluindo controles responsivos, espaçamento personalizável e muito mais.

Você pode até adicionar CSS customizado, pois seu editor de CSS inclui validação básica e preenchimento automático. Uma das críticas do Divi Builder sempre foi que ele confia em shortcodes. O que significa que, se você desativá-lo um dia, ele deixará vários códigos de acesso em seu conteúdo. Embora isso seja um pouco deprimente, é menos problemático agora que existem plugins como o Shortcode Cleaner.

Descarregar | Demo | hospedagem na web

2. Themify Builder

Themify Builder é, sem surpresa, a oferta da equipe Themify. Ele o integra a vários de seus temas WordPress para fornecer aos clientes opções de personalização simples. Mas você também pode comprá-lo como um plugin autônomo e usá-lo com qualquer tema WordPress.

Como o Divi Builder e o WPBakery Page Builder, o Themify Builder permite que você crie layouts no front-end ou no back-end. Outra coisa boa é que este plugin permite que você personalize seus pontos de interrupção responsivos (mas apenas no nível do site inteiro).

Discover Como instalar e configurar o WooCommerce para criar uma loja online e venda facilmente seus produtos na Internet 

Uma coisa legal sobre o Themify Builder é que ele ainda permite que você use o editor padrão do WordPress, enquanto outros construtores de páginas forçam você a usar a interface do WordPress. construtor de páginas para tudo.

Descarregar | Demo | hospedagem na web

3 Elementor

Lançado originalmente em 2016, o plugin Elementor WordPress é um dos mais jovens criadores de páginas desta lista. Apesar de seu início tardio, o Elementor rapidamente acumulou mais de 1 de instalações ativas no WordPress.org, tornando-o um dos mais populares criadores de páginas do WordPress.

O que faz sua reputação é sua interface visual fluida, suas diferentes opções de estilo e outros recursos poderosos, como a criação completa de temas do WordPress.

Sua interface é dividida em duas partes principais, com uma terceira zona para determinados parâmetros. A versão gratuita do Elementor oferece widgets gratuitos do 28. A versão Pro traz outros widgets 30, um total de widgets 58 na versão Pro. A versão gratuita inclui cerca de modelos gratuitos 40, enquanto a versão Pro traz centenas de modelos adicionais.

 Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

• Como alterar seu tema WordPress com segurança
• Como configurar as entregas no WooCommerce
• 10 premium WordPress plugins a partir de reservas e reservas
• Quando e como instalar o WordPress em um subdiretório
• 10 WordPress plugins para melhorar a velocidade do seu blog

Conclusão

Aqui está ! É isso neste tutorial. Se você tem um tema WordPress que não oferece uma página de largura total como modelo, esperamos que este tutorial tenha ajudado a resolver essa falta. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas. 

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.

...