Ir para o conteúdo principal

Como criar uma largura de página inteira no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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 no 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, consulte a seleção a seguir e obtenha um.

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

Na janela para editar a 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 tem uma opção Largura total - modelo de largura total - na tela de edição da sua página, significa que o tema do WordPress não possui essa página.

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 de tema do WordPress que você usa e tenha um entendimento 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ê precisa crie um backup do WordPress ou pelo menos um backup do seu tema atual do WordPress. Isso ajudará você a restaurar facilmente seu site se algo sério 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 / * Nome do modelo: * Full-largura / get_header (); ?>

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

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

Então 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 / ".

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Então você precisa localizar o arquivo chamado " page.php ". Este é o arquivo de modelo de página padrão para o 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:

? <Get_sidebar Php (); ?>

Essa linha simplesmente recupera a barra lateral e a exibe no seu tema WordPress. Ao remover isso, seu tema não exibirá a barra lateral ao usar o modelo Largura total.

Você pode ver essa linha aparecer mais de uma vez no seu tema WordPress. Se o seu tema WordPress tiver 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 / * * Nome do Modelo: Full-Width * / get_header (); ?> <div id = "primary" class = "area de conteúdo"> <main id = "main" class = "site-main" role = "main"> <? php // Inicia o ciclo. while (have_posts ()): the_post (); // Inclua o modelo de conteúdo da página. get_template_part ('template-parts / content', 'page'); // Se os comentários estiverem abertos, como fazemos isso? if (comments_open () || get_comments_number ()) {comments_template (); } // fim do loop. EndWhile; ?> </ main> <! - .site-main -> </ div> <! - .content-area -> <? php get_footer (); ?>

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

Você criou e enviou com êxito um modelo de página de largura total personalizado para o seu tema. O próximo passo é usar esse 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, procure 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 se foram e sua página aparece como uma única coluna. Pode não estar cheio ainda, mas agora você está pronto para difundi-lo de maneira 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 usadas pelo seu tema para definir a área de conteúdo.

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

-Largura de área de exploração-.page-molde .content {largura: 100%; margem: 0px; fronteira: 0px; padding: 0px; } .page-molde de largura total .site {margem: 0px; }

Aqui está como será o Twenty Seventeen.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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 outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência 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 geralmente seja usado como parte do tema Divi do WordPress, o Divi Builder também é um plug-in independente que você pode usar em outros temas do WordPress.

O Divi Builder permite editar seu conteúdo usando uma interface visual no front-end e uma interface no back-end, embora a maioria dos usuários prefira a primeira interface.

Basicamente, em vez de barras laterais, tudo está em pop-ups e botões flutuantes. Ele fornece acesso a modelos predefinidos do 316 espalhados por diferentes pacotes de apresentação do 40, além da capacidade de salvar 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 personalizado, porque seu editor de CSS integra validação básica e preenchimento automático. Um dos críticos do Divi Builder sempre foi o fato de ser baseado 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 muitos de seus temas WordPress para fornecer aos clientes opções simples de personalização. Mas você também pode comprá-lo como um plug-in independente e usá-lo com qualquer tema do WordPress.

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

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

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

Descarregar | Demo |hospedagem na web

3 Elementor

Originalmente lançado no 2016, o plugin do WordPress Elementor é um dos mais jovens construtores desta lista. Apesar de seu início tardio, a Elementor acumulou rapidamente mais instalações ativas do 1 000 000 no WordPress.org, tornando-o um dos construtores WordPress mais populares.


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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

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 que o acompanharão na criação e gerenciamento de seu site.

Conclusão

Portanto, se você tem um tema do WordPress que não possui uma página de largura total como modelo, esperamos que este tutorial tenha ajudado a resolver esse problema. 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.

...

Este artigo contém 1 comentário
  1. Olá; oi,
    Eu tenho o tema "thethetheen" e segui o método 2 x para criar uma casa sem barras laterais. Funciona no sentido de que, à esquerda, deixa a barra de menus vazia, mas a cor permanece. Você vê a barra lateral vazia e assim a página cmq é assimétrica

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
10 ações
ação8
chilrear1
Enregistrer1