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

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]

Você quer criar uma página de largura total no WordPress?

Muitos de Temas 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 com largura total no WordPress.

Antes de começar, descubra Como instalar um blog WordPress em etapas 7

Método 1: Usando um modelo de largura integrado no seu tema WordPress

Esse método é recomendado se o seu tema WordPress já tiver um modelo de página de largura total. Se você não tiver um, consulte a seguinte seleção e obtenha um.

Primeiro, você precisa 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 sob a caixa de seleção 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 de visualização para vê-lo em ação.

Se você não tiver uma opção de largura total - largura total do modelo - na tela de edição da página, isso significa que o tema WordPress não tem 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 uma largura total

Este método requer que você edite os arquivos de tema do WordPress que você usa e tenha uma compreensão básica de PHP, CSS e HTML.

By the way, também convidamos você a consultar o 8 melhores plugins WordPress para criar facilmente seus layouts

Mas antes de ir mais longe, você precisa criar um backup do WordPress ou pelo menos um backup do seu tema atual do WordPress. Isso ajudará você a restaurar facilmente seu website 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.

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

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 cPanelentão vá para " / Wp-content / themes / your-theme-pasta / ".

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

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]

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

Agora você tem que olhar o conteúdo do arquivo "full-width.php" e deletar esta linha de código:

? <Get_sidebar Php (); ?>

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

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

Seu site parece estar carregando devagar, 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 em 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ê precisa baixar o arquivo Full-width.php Na sua pasta de temas do WordPress usando o cliente FTP.

Você criou e enviou com sucesso um modelo de página de largura completa personalizado para o seu tema. O próximo passo é usar esse modelo para criar uma página de largura total.

Dirija-se ao seu 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 sob a 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 única página de coluna. Pode não estar completo ainda, mas agora você está pronto para difundi-lo de maneira diferente.

Torne seu site popular descobrindo o 7 WordPress plugins 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.

Então você pode ajustar sua largura para 100% usando CSS. Nós 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 vai parecer com o Twenty Seventeen.

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]

Isso é tudo para este tutorial, espero que ele permita criar páginas com largura total.

Os métodos acima são gratuitos para aqueles que podem pagar e desejam criar rapidamente layouts de largura total ou largura total com facilidade;

Se você está procurando outras soluções para criar seu site, aqui estão as alternativas premium do 3 que você pode usar para realizar essa tarefa.

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, o Divi Builder também é um plug-in autônomo que você pode usar em outros temas do WordPress.

Ao contrário dos dois construtores anteriores, o 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 está em botões pop-up e flutuantes. Ele oferece acesso a modelos pré-definidos 316 espalhados pelos diferentes pacotes de apresentação do 40, bem como a capacidade de salvar seus próprios designs como modelos.

Nós propomos que você descubra Como criar um blog profissional

Um dos traços 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 o editor CSS integra a validação básica e o preenchimento automático. Uma das críticas do Divi Builder sempre foi que ele é baseado em códigos de acesso. O que significa que se você desativá-lo um dia, ele deixará um monte de códigos de acesso em seu conteúdo. Embora isso seja um pouco deprimente, é um problema menor agora que existem plugins como o Shortcode Cleaner.

Download | Demonstração | Web Hosting

2 Elementor

Originalmente lançado em 2016, o plugin WordPress Elementor é um dos jovens construtores de páginas que listam. Apesar de seu início tardio, Elementor rapidamente acumulou mais de instalações ativas 1 000 000 no WordPress.org, tornando-se uma das páginas dos construtores WordPress mais populares.


O que faz a sua reputação é a 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 grátis 28. A versão Pro traz sobre 30 outros widgets, um total de widgets 58 na versão Pro. A versão gratuita inclui sobre modelos gratuitos 40, enquanto a versão Pro traz centenas de modelos adicionais.

Download | Demonstração |Web Hosting

3. Themify Builder

Themify Builder é, sem surpresa, a oferta da equipe Themify. Integra-o em muitos dos seus temas WordPress para fornecer aos clientes opções simples de personalização. 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 back-end. Outra coisa boa é que este plugin permite que você personalize seus pontos de interrupção responsivos (mas apenas no nível de todo o site).

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

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

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

Download | Demonstração |Web Hosting

Outros recursos recomendados

Descubra outros recursos do nosso blog consultando os links abaixo:

Conclusão

Portanto, se você tiver um tema WordPress que não tenha uma página de largura total como modelo, esperamos que este tutorial tenha ajudado a resolver esse problema. Se você tiver algum comentário ou sugestão, será bem-vindo.

Acima de tudo, não se esqueça de compartilhar este artigo sobre o seu diferente redes sociais.

...

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

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