{"id":35720,"date":"2023-05-04T20:02:51","date_gmt":"2023-05-04T23:02:51","guid":{"rendered":"\/tutoriais\/?p=35720"},"modified":"2023-10-27T18:22:02","modified_gmt":"2023-10-27T21:22:02","slug":"como-criar-uma-pagina-template-no-wordpress","status":"publish","type":"post","link":"\/pt\/tutoriais\/como-criar-uma-pagina-template-no-wordpress","title":{"rendered":"Como criar uma p\u00e1gina template no WordPress"},"content":{"rendered":"<p><a href=\"\/tutoriais\/como-criar-um-site-passo-a-passo\">Criar um site<\/a> e planejar seu design pode ser um processo demorado e cansativo. Mesmo que voc&ecirc; esteja utilizando um excelente tema do WordPress ou um construtor de p&aacute;ginas espec&iacute;fico, voc&ecirc; ainda pode precisar ficar horas editando e criando suas p&aacute;ginas. Um template pode poupar muito desse tempo e ainda permitir que voc&ecirc; crie uma p&aacute;gina totalmente personalizada &mdash; ao inv&eacute;s de utilizar um layout gen&eacute;rico que j&aacute; esteja pronnto.<\/p><p>Ao criar templates do WordPress, voc&ecirc; pode aplic&aacute;-los em qualquer p&aacute;gina do seu site. Sendo assim, tamb&eacute;m &eacute; poss&iacute;vel ajustar o design web geral do seu site sem precisar atualizar cada uma das p&aacute;ginas manualmente.&nbsp;<\/p><p>Neste artigo, primeiramente vamos falar sobre os principais motivos que podem te fazer querer usar templates personalizados no seu site. Depois, voc&ecirc; vai aprender como criar uma p&aacute;gina template no WordPress. Vamos l&aacute;!<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-voce-deveria-criar-um-template-personalizado-no-wordpress\"><strong>Por Que Voc&ecirc; Deveria Criar um Template Personalizado no WordPress<\/strong><\/h2><p>Muitos temas do WordPress contam com layouts ou estilos pr&eacute;-definidos para diferentes se&ccedil;&otilde;es do seu site. Estes designs incluem &aacute;reas espec&iacute;ficas como blog posts, categorias, arquivos e p&aacute;ginas do tipo <strong>Sobre N&oacute;s<\/strong>. Normalmente, voc&ecirc; pode ajustar esses modelos de acordo com as suas prefer&ecirc;ncias, mas o n&iacute;vel de personaliza&ccedil;&atilde;o &eacute; um pouco limitado, impedindo que voc&ecirc; fa&ccedil;a uma customiza&ccedil;&atilde;o completa da p&aacute;gina.<\/p><p>Criar uma p&aacute;gina template no WordPress permite que voc&ecirc; seja mais livre e criativo com o design do seu site. Com um modelo personalizado, voc&ecirc; pode aplicar o layout criado em qualquer se&ccedil;&atilde;o, p&aacute;gina ou post do site.&nbsp;<\/p><p>Tamb&eacute;m &eacute; muito &uacute;til criar templates personalizados no WordPress caso voc&ecirc; deseje que as p&aacute;ginas do site sejam um pouco diferentes umas das outras.&nbsp;<\/p><p>Por exemplo, se voc&ecirc; &eacute; dono de um <a href=\"\/tutoriais\/como-fazer-um-portfolio-digital\">portf&oacute;lio digital<\/a> de fotografia, pode ser interessante que as p&aacute;ginas com seus projetos fotogr&aacute;ficos apare&ccedil;am num formato maior do que outras p&aacute;ginas com informa&ccedil;&otilde;es gerais. Caso voc&ecirc; <a href=\"\/tutoriais\/como-criar-um-blog\">tenha um blog<\/a>, pode decidir adicionar um elemento de barra lateral que s&oacute; ser&aacute; vis&iacute;vel nas p&aacute;ginas dos pr&oacute;prios posts.&nbsp;<\/p><p>Possuir templates de p&aacute;ginas personalizadas tamb&eacute;m economiza muito o seu tempo. Se eventualmente voc&ecirc; decidir ajustar o design ou alterar algum detalhe no estilo das p&aacute;ginas, basta fazer a mudan&ccedil;a no seu template e as atualiza&ccedil;&otilde;es ser&atilde;o aplicadas automaticamente em todas as p&aacute;ginas correspondentes. Essa configura&ccedil;&atilde;o de design poupa voc&ecirc; de ter que editar cada uma das p&aacute;ginas individualmente.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-criar-um-template-de-pagina-no-wordpress-2-metodos\"><strong>Como Criar um Template&nbsp; de P&aacute;gina no WordPress (2 M&eacute;todos)<\/strong><\/h2><p>Como vimos na se&ccedil;&atilde;o anterior, criar uma p&aacute;gina template personalizada no WordPress te d&aacute; mais liberdade para editar a apar&ecirc;ncia do seu site, al&eacute;m de te ajudar a economizar tempo no processo de constru&ccedil;&atilde;o das suas p&aacute;ginas.&nbsp;<\/p><p>Felizmente, h&aacute; diversas maneiras diferentes para criar templates de p&aacute;ginas personalizados no WordPress. Por exemplo, voc&ecirc; pode construir um modelo manualmente e ent&atilde;o fazer o upload dele no site, ou pode utilizar um plugin de constru&ccedil;&atilde;o de p&aacute;ginas.&nbsp;<\/p><p>Na pr&oacute;xima se&ccedil;&atilde;o, vamos conhecer cada um desses m&eacute;todos com mais profundidade, incluindo um passo-a-passo de como eles funcionam. Escolha aquele que for mais adequado para voc&ecirc;, de acordo com seu conhecimento t&eacute;cnico e prefer&ecirc;ncias com rela&ccedil;&atilde;o ao estilo do site.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-crie-uma-pagina-template-manualmente\"><strong>1. Crie uma P&aacute;gina Template Manualmente<\/strong><\/h3><p>Caso voc&ecirc; j&aacute; esteja familiarizado com o processo de <a href=\"\/tutoriais\/wordpress-como-criar-um-tema-responsivo-usando-html5\"><strong>criar um tema WordPress<\/strong><\/a>, pode ser interessante optar pelo m&eacute;todo manual. Essa abordagem exige um pouco de conhecimento em programa&ccedil;&atilde;o, mas oferece o maior n&iacute;vel de flexibilidade e liberdade poss&iacute;vel sobre o design e estilo do seu template personalizado.<\/p><p>\n\n\n\n<div><p class=\"important\"><strong>Importante!<\/strong> Neste tutorial vamos criar e fazer o upload do arquivo de p&aacute;gina template no tema atual que est&aacute; ativo no site de exemplo. Recomendamos que voc&ecirc; <a href=\"\/tutoriais\/como-criar-o-tema-filho-wordpress\"><strong>crie um child theme<\/strong><\/a> antes. Desse modo, voc&ecirc; n&atilde;o corre o risco de perder suas novas altera&ccedil;&otilde;es quando o parent theme for atualizado.<\/p><\/div>\n\n\n\n<\/p><p>&nbsp;&nbsp;<strong>Passo 1: Crie um Arquivo de Template&nbsp;<\/strong><\/p><p>Para come&ccedil;ar, abra o editor de texto de sua escolha e adicione nele a seguinte linha de c&oacute;digo:<\/p><pre class=\"wp-block-preformatted\">&lt;?php \/* Template Name: P&aacute;ginaCustomizada *\/ ?&gt;<\/pre><p>Voc&ecirc; pode nomear o seu template com o nome que desejar substituindo o termo P&aacute;ginaCustomizada. De todo modo, recomendamos que voc&ecirc; utilize um nome f&aacute;cil de ser identificado.<\/p><p>Por exemplo, se voc&ecirc; est&aacute; criando um modelo de p&aacute;gina personalizada para um tipo espec&iacute;fico de blog post, como guias e manuais de instru&ccedil;&atilde;o, poder&aacute; nomear o template de &ldquo;Tutoriais&rdquo;.&nbsp;<\/p><p>Da mesma forma, caso esteja criando um template que pretende excluir o menu da barra lateral do seu tema WordPress em algumas p&aacute;ginas espec&iacute;ficas do site, poder&aacute; dar o nome de &ldquo;P&aacute;ginaSemBarraLateral&rdquo; para o template.<\/p><p>Assim que voc&ecirc; adicionar o c&oacute;digo ao editor de texto, salve o arquivo com um nome semelhante a &ldquo;paginapersonalizada.php&rdquo;. Voc&ecirc; pode dar o nome que desejar ao seu arquivo de template, mas ele deve terminar com a extens&atilde;o <strong>.php<\/strong>.<\/p><p><strong>Passo 2: Fa&ccedil;a o Upload do Arquivo de Template no seu Site<\/strong><\/p><p>Depois, voc&ecirc; vai precisar enviar este arquivo para o servidor do seu site. Para fazer isso, &eacute; poss&iacute;vel utilizar um cliente <a href=\"\/tutoriais\/ftp-o-que-e-como-funciona\"><strong>FTP<\/strong><\/a> (File Transfer Protocol), como o FileZilla ou o <a href=\"\/tutoriais\/como-utilizar-o-gerenciador-de-arquivos-hostinger\"><strong>Gerenciador de Arquivos<\/strong><\/a> do seu painel de hospedagem.&nbsp;<\/p><p>Se esta &eacute; sua primeira vez utilizando o protocolo FTP, ser&aacute; necess&aacute;rio inserir suas credenciais, incluindo o nome de usu&aacute;rio e o hostname do servidor do seu site. Essas informa&ccedil;&otilde;es podem ser facilmente encontradas no painel de controle da sua <a href=\"\/pt\/alojamento-wordpress\">conta de hospedagem WordPress<\/a>.<\/p><p>Assim que tiver conectado o <a href=\"\/tutoriais\/como-configurar-o-cliente-filezilla\"><strong>cliente FTP FileZilla<\/strong><\/a> aos arquivos do seu site, navegue pelo sistema at&eacute; localizar o diret&oacute;rio <strong>wp-content\/themes\/<\/strong> e abra a pasta do seu child theme:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-36.png\" alt=\"Arquivos do site no cliente FTP - destaque para pasta do tema-filho\" class=\"wp-image-35722\" style=\"width:593px;height:259px\" width=\"593\" height=\"259\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-36.png 593w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-36-300x131.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-36-150x66.png 150w\" sizes=\"(max-width: 593px) 100vw, 593px\" \/><\/figure><\/div><p>Ent&atilde;o suba para essa pasta o arquivo de template que voc&ecirc; acabou de criar. A partir desse momento, o template da p&aacute;gina j&aacute; dever&aacute; estar dispon&iacute;vel no seu site.&nbsp;<\/p><p>Para confirmar se o processo foi conclu&iacute;do com sucesso, navegue at&eacute; o painel de administra&ccedil;&atilde;o do seu WordPress e crie uma nova p&aacute;gina (ou abra o editor de uma p&aacute;gina que j&aacute; existe). No painel de <strong>Configura&ccedil;&otilde;es<\/strong>, localize a se&ccedil;&atilde;o <strong>Template<\/strong> e clique no bot&atilde;o para ver as op&ccedil;&otilde;es dispon&iacute;veis:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"425\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-42.png\" alt=\"Selecionando template na barra lateral direita do editor do WordPress\" class=\"wp-image-35728\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-42.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-42-300x125.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-42-150x62.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-42-768x319.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Voc&ecirc; dever&aacute; ver o novo template que acabou de criar listado entre essas op&ccedil;&otilde;es. De todo modo, se voc&ecirc; definir ele como seu template oficial, e clicar no bot&atilde;o <strong>Preview<\/strong> (Pr&eacute;via) para ver uma pr&eacute;via da p&aacute;gina, aparecer&aacute; uma p&aacute;gina em branco.&nbsp;<\/p><p>Isso acontece porque ainda n&atilde;o adicionamos nada a esse arquivo. &Eacute; exatamente isso que vamos fazer no pr&oacute;ximo passo: customizar seu template!<\/p><p><strong>Passo 3: Personalize seu Arquivo de Template&nbsp;<\/strong><\/p><p>Primeiramente, voc&ecirc; precisar&aacute; copiar o template de uma das p&aacute;ginas do seu tema ativo. Para fazer isso, conecte-se aos diret&oacute;rios do seu site atrav&eacute;s do FTP &mdash; ou acesse o gerenciador de arquivos &mdash; e navegue at&eacute; a pasta do seu tema atual. Ali, localize o arquivo intitulado <strong>page.php<\/strong> e abra ele. Se estiver usando o FTP, ser&aacute; preciso usar um editor de texto.<\/p><p>Em seguida, voc&ecirc; precisar&aacute; copiar o c&oacute;digo contido no arquivo <strong>page.php<\/strong>, que deve se parecer com o seguinte:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"910\" height=\"509\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-37.png\" alt=\"captura de tela do c&oacute;digo da p&aacute;gina page.php\" class=\"wp-image-35723\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-37.png 910w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-37-300x168.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-37-150x84.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-37-768x430.png 768w\" sizes=\"(max-width: 910px) 100vw, 910px\" \/><\/figure><\/div><p>Assim que concluir, acesse o arquivo do seu template personalizado e cole o c&oacute;digo rec&eacute;m copiado logo abaixo da linha<\/p><pre class=\"wp-block-preformatted\">&lt;?php \/* Template Name: P&aacute;ginaCustomizada *\/ ?&gt;<\/pre><p>Agora, seu arquivo de template de p&aacute;gina WordPress dever&aacute; se parecer um pouco com o exemplo abaixo:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"915\" height=\"542\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-39.png\" alt=\"captura de tela do c&oacute;digo da p&aacute;gina page.php adicionado &agrave; p&aacute;gina do template rec&eacute;m criado\" class=\"wp-image-35725\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-39.png 915w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-39-300x178.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-39-150x89.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-39-768x455.png 768w\" sizes=\"(max-width: 915px) 100vw, 915px\" \/><\/figure><\/div><p>A partir desse momento, voc&ecirc; poder&aacute; editar o arquivo do seu template de p&aacute;gina personalizada. Por exemplo, caso deseje remover o rodap&eacute; (<em>footer<\/em>) da p&aacute;gina, basta deletar a seguinte linha do arquivo do template:<\/p><pre class=\"wp-block-preformatted\">&lt;?php get_footer(); ?&gt;<\/pre><p>Voc&ecirc; tamb&eacute;m pode adicionar c&oacute;digos <a href=\"\/tutoriais\/o-que-e-php-guia-basico\"><strong>PHP<\/strong><\/a> personalizados para customizar o seu template de p&aacute;gina da forma que preferir. Quando tiver conclu&iacute;do o processo de estiliza&ccedil;&atilde;o, salve as altera&ccedil;&otilde;es feitas no arquivo.<\/p><p>Agora, quando voc&ecirc; retornar ao post ou p&aacute;gina em que aplicou o template anteriormente e clicar na op&ccedil;&atilde;o de visualiza&ccedil;&atilde;o pr&eacute;via, as suas novas edi&ccedil;&otilde;es ser&atilde;o exibidas.&nbsp;<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/pt\/alojamento-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-44638\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2024\/06\/BR-New-WP_in-text-banner-768x225.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2-crie-uma-pagina-template-com-um-plugin-de-construcao-de-paginas\"><strong>2. Crie uma P&aacute;gina Template com um Plugin de Constru&ccedil;&atilde;o de P&aacute;ginas<\/strong><\/h3><p>Se voc&ecirc; n&atilde;o possui conhecimento t&eacute;cnico em programa&ccedil;&atilde;o, n&atilde;o se preocupe! H&aacute; um m&eacute;todo mais simples para criar seus pr&oacute;prios templates personalizados, e ele envolve o simples uso de uma ferramenta de constru&ccedil;&atilde;o de p&aacute;ginas.<\/p><p>Felizmente, h&aacute; diversos <a href=\"\/tutoriais\/construtor-de-paginas-wordpress\"><strong>construtores de p&aacute;ginas<\/strong><\/a> dispon&iacute;veis no WordPress. Eles s&atilde;o plugins que te permitem criar designs personalizados. Nesta se&ccedil;&atilde;o do tutorial vamos conhecer uma das op&ccedil;&otilde;es mais populares: <a href=\"\/tutoriais\/elementor-ou-beaver-builder\"><strong>o Beaver Builder<\/strong><\/a>.<\/p><p><strong>Criando uma P&aacute;gina WordPress Personalizada com o Beaver Builder<\/strong><\/p><p>O Beaver Builder &eacute; uma ferramenta muito &uacute;til que te ajuda a criar templates de p&aacute;ginas personalizadas no WordPress. Esse plugin de constru&ccedil;&atilde;o de p&aacute;ginas conta com um editor de arrastar e soltar itens, al&eacute;m de uma ampla variedade de elementos, chamados de &ldquo;m&oacute;dulos&rdquo;.<\/p><p>O Beaver Builder possui uma vers&atilde;o gratuita, mas alguns recursos s&atilde;o exclusivos da vers&atilde;o paga. Por exemplo, o software permite que voc&ecirc; salve seus designs como templates. Entretanto, essa funcionalidade s&oacute; est&aacute; dispon&iacute;vel na <a href=\"https:\/\/www.wpbeaverbuilder.com\/pricing\/\" target=\"_blank\" rel=\"noopener\"><strong>vers&atilde;o premium<\/strong><\/a> do plugin.&nbsp;<\/p><p>Neste tutorial, vamos utilizar essa op&ccedil;&atilde;o paga para te mostrar como criar uma p&aacute;gina template no WordPress.<\/p><p><strong>Passo 1: Crie o Design do seu Template<\/strong><\/p><p>Depois de instalar e ativar o plugin na sua conta WordPress, navegue pelo painel de administra&ccedil;&atilde;o at&eacute; localizar a aba do <strong>Beaver<\/strong> <strong>Builder<\/strong> &rarr; <strong>Templates<\/strong>. Ent&atilde;o, selecione a op&ccedil;&atilde;o <strong>Add<\/strong> <strong>New <\/strong>(Adicionar Novo) para adicionar um novo template:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"730\" height=\"459\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-51.png\" alt=\"Adicionando novo template pelo menu do Beaver Builder no painel do WordPress\" class=\"wp-image-35737\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-51.png 730w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-51-300x189.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-51-150x94.png 150w\" sizes=\"(max-width: 730px) 100vw, 730px\" \/><\/figure><\/div><p>Em seguida, voc&ecirc; precisar&aacute; definir um nome para o seu design e tamb&eacute;m selecionar um tipo de template:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"978\" height=\"422\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-45.png\" alt=\"Definindo tipo e nome do template pelas configura&ccedil;&otilde;es do Beaver Builder\" class=\"wp-image-35731\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-45.png 978w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-45-300x129.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-45-150x65.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-45-768x331.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/figure><\/div><p>Ap&oacute;s configurar esses detalhes, clique em <strong>Add<\/strong> <strong>Saved<\/strong> <strong>Template <\/strong>(Adicionar Template Salvo) e selecione a op&ccedil;&atilde;o <strong>Launch<\/strong> <strong>Beaver<\/strong> <strong>Builder<\/strong> (Iniciar Beaver Builder) para salvar o template e inicializar o construtor de p&aacute;ginas. Voc&ecirc; ser&aacute; redirecionado automaticamente para o editor do plugin:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-54.png\" alt=\"Editor de templates do Beaver Builder\" class=\"wp-image-35740\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-54.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-54-300x143.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-54-150x71.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-54-768x365.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>A partir da tela do construtor, voc&ecirc; poder&aacute; come&ccedil;ar a criar seu template. Basta arrastar e soltar os elementos que desejar em qualquer local da p&aacute;gina. Todos os elementos est&atilde;o dispon&iacute;veis na aba <strong>Modules<\/strong> (<strong>M&oacute;dulos<\/strong>). Para configurar os detalhes desses elementos, voc&ecirc; s&oacute; precisa clicar neles.&nbsp;<\/p><p>Alternativamente, voc&ecirc; tamb&eacute;m pode utilizar um modelo de template pr&eacute;-pronto, desenvolvido pelo pr&oacute;prio Beaver Builder:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"823\" height=\"573\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-40.png\" alt=\"Exemplo de template pr&eacute;-pronto dispon&iacute;vel no Beaver Builder\" class=\"wp-image-35726\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-40.png 823w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-40-300x209.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-40-150x104.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-40-768x535.png 768w\" sizes=\"(max-width: 823px) 100vw, 823px\" \/><\/figure><\/div><p>Quando tiver conclu&iacute;do e estiver satisfeito com a edi&ccedil;&atilde;o do seu template, clique no bot&atilde;o <strong>Done<\/strong> (Pronto), localizado no canto superior direito da p&aacute;gina. Em seguida, selecione a op&ccedil;&atilde;o <strong>Publish<\/strong> (Publicar) para concluir o processo.<\/p><p><strong>Passo 2: Aplique o Template nas suas P&aacute;ginas<\/strong><\/p><p>Assim que voc&ecirc; concluir a cria&ccedil;&atilde;o do template personalizado, j&aacute; poder&aacute; aplic&aacute;-lo em qualquer p&aacute;gina do site. Comece criando uma nova p&aacute;gina ou abrindo uma p&aacute;gina com um modelo que voc&ecirc; deseja editar. Em seguida, clique no bot&atilde;o <strong>Launch<\/strong> <strong>Beaver<\/strong> <strong>Builder <\/strong>(Iniciar Beaver Builder) para inicializar o programa:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"936\" height=\"591\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-44.png\" alt=\"Destaque para o bot&atilde;o de inicializa&ccedil;&atilde;o do Beaver Builder no editor de p&aacute;ginas do WordPress\" class=\"wp-image-35730\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-44.png 936w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-44-300x189.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-44-150x95.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-44-768x485.png 768w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/figure><\/div><p>A partir da aba de <strong>Templates<\/strong>, selecione a op&ccedil;&atilde;o de visualiza&ccedil;&atilde;o dos seus templates salvos (<strong>Saved<\/strong> <strong>Templates<\/strong>) e escolha o modelo de p&aacute;gina que acabou de criar:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"402\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-48.png\" alt=\"Op&ccedil;&otilde;es de template do Beaver Builder para aplicar na p&aacute;gina\" class=\"wp-image-35734\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-48.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-48-300x118.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-48-150x59.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/image-48-768x302.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>O Beaver Builder ir&aacute; adicionar o template automaticamente na sua p&aacute;gina. Ent&atilde;o, a partir desse momento, voc&ecirc; poder&aacute; realizar qualquer altera&ccedil;&atilde;o que desejar no estilo e design dela. Quando concluir essas configura&ccedil;&otilde;es da p&aacute;gina, clique em <strong>Done <\/strong>(Finalizado) e em seguida, em <strong>Save<\/strong> <strong>Draft<\/strong> (Salvar Rascunho) para salvar como rascunho, ou em <strong>Publish <\/strong>(Publicar) para publicar sua p&aacute;gina personalizada criada atrav&eacute;s do template.<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p>Aprender diferentes m&eacute;todos de como criar uma p&aacute;gina template no WordPress pode te poupar muito tempo e esfor&ccedil;o durante a constru&ccedil;&atilde;o do seu site. Esse processo tamb&eacute;m permite que voc&ecirc; ajuste o design do seu site de acordo com as suas prefer&ecirc;ncias. Voc&ecirc; pode criar uma variedade de layouts, incluindo templates para posts &uacute;nicos no WordPress.<\/p><p>Neste artigo, te apresentamos duas das abordagens mais comuns para construir um template de p&aacute;gina personalizado no WordPress:<\/p><ul class=\"wp-block-list\">\n<li>Manual: Crie um arquivo de template e fa&ccedil;a o upload dele na pasta do seu tema atrav&eacute;s de uma ferramenta como o cliente FTP FileZilla.<\/li>\n\n\n\n<li>Plugin: crie um template diretamente no editor de um plugin de constru&ccedil;&atilde;o de p&aacute;ginas, como o Beaver Builder.<\/li>\n<\/ul><p>Os dois m&eacute;todos te oferecem bastante liberdade para personalizar o template da sua p&aacute;gina, ent&atilde;o voc&ecirc; pode escolher aquele com o qual se sentir mais confort&aacute;vel.&nbsp;<\/p><p>Ainda possui alguma quest&atilde;o ou coment&aacute;rio sobre como criar uma p&aacute;gina template no WordPress? Compartilhe com a gente comentando na se&ccedil;&atilde;o abaixo!<\/p><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\"><strong>Conhe&ccedil;a Mais T&eacute;cnicas Avan&ccedil;adas do WordPress<\/strong><\/h4>\n                    <p><a href=\"\/tutoriais\/como-desenvolver-no-wordpress\"><strong>Como se tornar um desenvolvedor WordPress<br><\/strong><\/a><a href=\"\/tutoriais\/tutorial-wordpress\"><strong>Tutorial WordPress Completo<br><\/strong><\/a><a href=\"\/tutoriais\/folha-de-dicas-para-wordpress\"><strong>Manual WordPress: Dicas Para o CMS Mais Famoso do Mundo<br><\/strong><\/a><a href=\"\/tutoriais\/como-criar-widget-wordpress\"><strong>Como criar um widget personalizado no WordPress<br><\/strong><\/a><a href=\"\/tutoriais\/hierarquia-dos-templates-do-wordpress\"><strong>Entendendo a hierarquia dos templates do WordPress &ndash; Guia Completo<br><\/strong><\/a><a href=\"\/tutoriais\/cron-job-wordpress\"><strong>Como Configurar e Gerenciar um Cron Job do WordPress<\/strong><\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Criar um site e planejar seu design pode ser um processo demorado e cansativo. Mesmo que voc&ecirc; esteja utilizando um excelente tema do WordPress ou um construtor de p&aacute;ginas espec&iacute;fico, voc&ecirc; ainda pode precisar ficar horas editando e criando suas p&aacute;ginas. Um template pode poupar muito desse tempo e ainda permitir que voc&ecirc; crie uma [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/como-criar-uma-pagina-template-no-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":305,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Descubra como criar um template personalizado para suas p\u00e1ginas no WordPress! Poupe seu tempo e expanda as op\u00e7\u00f5es de personaliza\u00e7\u00e3o do site","rank_math_focus_keyword":"","footnotes":""},"categories":[4911],"tags":[5055],"class_list":["post-35720","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-template-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-page-template","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-uma-pagina-template-no-wordpress","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/szablon-strony-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-page-template-2\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-page-template","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-page-template","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-page-template","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-uma-pagina-template-no-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-page-template","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-page-template","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-page-template","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-page-template","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/35720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=35720"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/35720\/revisions"}],"predecessor-version":[{"id":41187,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/35720\/revisions\/41187"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=35720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=35720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=35720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}