Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como criar uma página personalizada no WordPress

Deseja criar uma página personalizada no WordPress?

Uma página personalizada permite que você use um layout diferente do restante do seu site. Muitos sites do WordPress usam layouts de página personalizados para suas páginas de vendas, páginas de destino, páginas de webinar e muito mais.

Neste artigo, mostraremos a você como criar facilmente uma página personalizada no WordPress.

How to create a custom page in WordPress

Por que criar uma página personalizada no WordPress?

Sempre que você cria uma nova página, o tema do WordPress controla a aparência dessa página usando um arquivo de modelo.

Esse modelo page.php afeta todas as páginas únicas que você cria no WordPress. No entanto, talvez você não queira usar o mesmo design todas as vezes.

As páginas de destino geralmente têm conteúdo diferente das páginas normais, como uma imagem de herói grande ou uma chamada para ação (CTA). Isso significa que elas geralmente têm uma aparência completamente diferente do restante do site.

Entretanto, tentar criar designs exclusivos usando o modelo de página padrão pode levar muito tempo. Você também está limitado pelo modelo page.php e talvez não consiga criar o design exato que deseja. Isso pode dificultar a obtenção de bons resultados. Por exemplo, se estiver criando uma página de vendas, talvez não consiga muitas conversões devido ao design inadequado da página.

Dito isso, vamos ver como você pode criar uma página personalizada no WordPress, com o design, o layout e o conteúdo exatos que desejar. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar.

Método 1. Como criar uma página personalizada no WordPress usando o Block Editor (sem necessidade de plug-in)

O editor de blocos facilita a criação de seus próprios modelos usando as ferramentas com as quais você já está familiarizado.

Essa é uma boa opção se você planeja reutilizar o mesmo design em várias páginas, pois pode simplesmente aplicar o mesmo modelo. Se quiser criar um design totalmente exclusivo, outra opção é criar a página normalmente e, em seguida, editar seu layout usando o editor de site completo, que abordaremos no Método 2.

Esteja ciente de que esses métodos só funcionam com temas baseados em blocos, como o ThemeIsle Hestia Pro ou o Twenty Twenty-Three. Se você não tiver um tema baseado em blocos, recomendamos o uso de um construtor de páginas.

Para começar, basta abrir qualquer página ou postagem. Em seguida, selecione a guia “Página” no menu à direita e clique no texto ao lado de “Modelo”.

How to create a custom theme using the built-in WordPress template

As opções que você vê podem variar dependendo do seu tema do WordPress, mas o texto normalmente mostrará “Página”, “Modelo padrão” ou algo semelhante.

Na janela pop-up que aparece, clique no ícone “Add Template” (Adicionar modelo).

How to create a custom WordPress template

Na janela pop-up que aparece, digite um nome para o modelo e clique em “Create” (Criar).

O nome é apenas para sua referência, portanto, você pode usar o que quiser.

Creating a new template in the WordPress block editor

Isso inicia o editor de modelos, que funciona de forma semelhante ao editor de conteúdo do WordPress.

Para adicionar blocos ao design da página personalizada, basta clicar no botão azul “+”. Em seguida, você pode arrastar e soltar para adicionar blocos.

Editing a WordPress template using the block-based editor

Você pode adicionar conteúdo a um bloco ou alterar sua formatação usando as conhecidas ferramentas de edição de posts do WordPress. Por exemplo, você pode digitar texto em um bloco “Título”, aplicar formatação em negrito ou alterar o texto de H2 para H3.

Você também pode criar uma página personalizada usando padrões. Os padrões são coleções de blocos que costumam ser usados juntos, como uma lista de eventos, uma imagem com uma legenda ou uma tabela de preços.

Os padrões que você vê variam de acordo com o seu tema do WordPress, mas você pode ver quais padrões estão disponíveis clicando na guia “Patterns” (Padrões).

A selection of patterns in the WordPress editor

Você pode arrastar e soltar um padrão de bloco em seu layout ou clicar no padrão para adicioná-lo à parte inferior do modelo. Quando você estiver satisfeito com a aparência do modelo, clique no botão “Publish” (Publicar) e, em seguida, clique em “Save” (Salvar).

Agora você pode aplicar esse modelo a qualquer página. Basta abrir a página no editor e clicar no texto ao lado de “Modelo”.

Na janela pop-up que aparece, selecione o modelo que você acabou de criar.

Changing the WordPress template

Com isso feito, você pode adicionar conteúdo à página, como qualquer outra página do WordPress.

Método 2. Como criar uma página personalizadausando o Full-Site Editor (somente temas baseados em blocos)

Se você estiver usando um tema baseado em blocos, também poderá criar uma página personalizada usando o editor de site completo. Isso permite que você altere o layout de uma página individual, sem criar um modelo personalizado.

Com isso em mente, essa é uma boa opção se você quiser criar um design totalmente exclusivo que não será reutilizado em nenhuma outra página.

Para começar, basta criar a página normalmente, acessando Pages Add New. Você pode então digitar um título, adicionar categorias e tags, carregar uma imagem em destaque e fazer quaisquer outras alterações que desejar.

Quando estiver satisfeito com a página básica, salve as alterações e vá para Appearance Editor.

Opening the WordPress full-site editor (FSE)

Por padrão, o editor de site completo mostra o modelo inicial do seu tema.

No menu do lado esquerdo, clique em “Pages”.

Editing a page layout using the full-site editor (FSE)

Agora você verá todas as páginas que criou em seu site do WordPress.

Basta localizar a página que você deseja redesenhar e dar um clique.

Create a custom page design using the full-site editor (FSE)

O WordPress agora mostrará uma visualização do design.

Para prosseguir e editar esse modelo, clique no pequeno ícone de lápis.

Create a custom page design using the block-based editor

Agora você pode editar o layout da página usando as ferramentas do editor de site completo. Por exemplo, você pode clicar no botão azul “+” para adicionar novos blocos ou clicar para selecionar qualquer bloco que queira personalizar.

Quando estiver satisfeito com as alterações feitas, clique no botão “Save” (Salvar).

Create a custom page design using the block-based editor

Agora, se você visitar essa página em seu site, verá o novo design da página em ação.

Método 3. Criar uma página personalizada no WordPress usando o SeedProd (recomendado)

No passado, você criava uma página personalizada escrevendo código, o que não era muito fácil para iniciantes. Se você cometesse um erro no código HTML, CSS ou PHP, isso poderia causar erros comuns do WordPress ou até mesmo quebrar completamente o site.

Com isso em mente, recomendamos o uso de um construtor de páginas.

O SeedProd é o melhor construtor de páginas de arrastar e soltar para WordPress. Ele vem com mais de 350 modelos, permitindo que você crie páginas personalizadas sem escrever nenhum código.

Se você estiver usando uma página personalizada para obter mais conversões, o SeedProd funciona com muitas ferramentas populares de terceiros que você já pode estar usando para obter conversões. Isso inclui os principais serviços de marketing por e-mail, WooCommerce, Google Analytics e muito mais.

Primeiro, você precisa instalar e ativar o SeedProd. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Observação: Há também uma versão gratuita do SeedProd que permite criar páginas personalizadas, independentemente do seu orçamento. No entanto, para este guia, usaremos o SeedProd Pro, pois ele tem muito mais modelos e se integra a todos os melhores serviços de marketing por e-mail.

Após a ativação do plug-in, o SeedProd solicitará sua chave de licença.

SeedProd license key

Você pode encontrar essas informações em sua conta no site da SeedProd. Depois de inserir a chave, clique no botão “Verify Key” (Verificar chave).

Escolha um modelo de página personalizado

Depois de fazer isso, vá para SeedProd ” Landing Pages e clique no botão “Add New Landing Page” (Adicionar nova página de destino).

SeedProd's page design templates

Agora você pode escolher um modelo para sua página personalizada.

Os modelos do SeedProd são organizados em diferentes tipos de campanha, como “lead”,“squeeze” e“coming soon“. Você pode clicar nas guias na parte superior da tela para filtrar os modelos com base no tipo de campanha.

The SeedProd template library

Se você quiser começar do zero, o SeedProd também tem um modelo em branco que pode ser usado.

Para examinar mais de perto qualquer design, basta passar o mouse sobre o modelo e clicar no ícone da lupa.

Previewing a ready-made template

Quando encontrar um design que lhe agrade, clique em “Choose This Template” (Escolha este modelo). Estamos usando o modelo “Course Sales Page” em todas as nossas imagens, mas você pode usar qualquer modelo que desejar.

Em seguida, digite um nome para a página personalizada. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar esse URL para o que quiser.

Um URL descritivo também ajudará os mecanismos de pesquisa a entender do que se trata a página para que possam mostrá-la aos usuários certos, o que melhorará o SEO do WordPress.

Para dar à sua página personalizada a melhor chance de aparecer nos resultados de pesquisa relevantes, adicione as palavras-chave que estão faltando no URL. Para obter mais detalhes, consulte nosso guia sobre como fazer pesquisa de palavras-chave.

Creating a custom page for your WordPress website

Quando estiver satisfeito com as informações inseridas, clique no botão “Save and Start Editing the Page” (Salvar e começar a editar a página).

Crie sua página personalizada

O SeedProd abrirá o modelo escolhido em seu editor de arrastar e soltar de fácil utilização. Você verá uma visualização ao vivo de sua página à direita e algumas configurações de bloco à esquerda.

The SeedProd courses template

Para personalizar um bloco, basta clicar para selecioná-lo no editor de páginas. A barra de ferramentas do lado esquerdo mostrará todas as configurações desse bloco.

Na imagem a seguir, estamos alterando o texto dentro de um bloco “Headline”.

Editing the headline for your custom page

Você pode formatar o texto, alterar seu alinhamento, adicionar links e muito mais usando as configurações no menu à esquerda.

Também é fácil editar imagens usando o construtor de páginas SeedProd. Basta clicar em qualquer bloco de “Imagem” e usar as configurações para adicionar texto alternativo, carregar uma nova imagem ou fazer outras alterações.

Editing images in a custom page design

Se você quiser remover um bloco da página personalizada, basta clicar para selecionar esse bloco.

Em seguida, clique no ícone da lixeira na mini barra de ferramentas.

Removing a block from a SeedProd custom page

Para adicionar novos blocos ao seu design, basta localizar um bloco no menu à esquerda e arrastá-lo para o editor.

Em seguida, você pode clicar para selecionar o bloco e fazer alterações no menu à esquerda.

Adding a social sharing block to WordPress

O SeedProd também vem com “Seções”, que são modelos de linhas e blocos que podem ajudá-lo a criar uma página personalizada rapidamente. Por exemplo, se você estivesse criando uma página de destino de anúncios do Google, poderia usar as seções Hero, Call To Action ou Features já prontas do SeedProd.

Para ver todas as seções disponíveis, basta clicar na guia “Seções”.

SeedProd's ready-made sections

Para ver uma seção mais de perto, passe o mouse sobre ela e clique no ícone da lupa.

Quando encontrar uma seção que deseja adicionar ao seu design, basta mover o mouse sobre ela e clicar no pequeno ícone “+”.

Adding a section to a custom page

Isso adiciona a seção à parte inferior da página. Você pode mover as seções e os blocos pelo seu design usando o recurso de arrastar e soltar.

Se você cometer um erro ou mudar de ideia, não se preocupe. Você pode reverter sua última alteração clicando no botão “Desfazer” na parte inferior da barra de ferramentas à esquerda.

Aqui, você também encontrará um botão de refazer, histórico de revisão, navegação de layout e configurações globais.

The SeedProd global settings bar

Esses botões extras facilitam a criação de uma página personalizada no WordPress.

Na parte inferior da barra de ferramentas, você também encontrará um botão de visualização móvel que permite visualizar a versão móvel da página personalizada.

Previewing a custom page on mobile

Isso pode ajudá-lo a projetar uma página personalizada que tenha uma aparência tão boa em dispositivos móveis quanto em seu computador.

Quando estiver satisfeito com a página personalizada, é hora de publicá-la, clicando na seta suspensa ao lado de “Save” (Salvar) e selecionando a opção “Publish” (Publicar).

Publishing a custom page

Sua página personalizada será ativada em seu blog do WordPress.

Se você quiser editar a página personalizada a qualquer momento, basta acessar SeedProd ” Landing Pages no painel do WordPress. Você pode encontrar a página que deseja alterar e clicar no link “Edit” (Editar).

Fine-tuning a custom page in WordPress

Isso abrirá o design no editor do SeedProd, pronto para que você faça suas alterações.

Método 4. Usando o Thrive Architect para criar uma página personalizada no WordPress

Você também pode criar uma página personalizada usando o Thrive Architect. O Thrive Architect é outro construtor de páginas de arrastar e soltar popular para WordPress.

Ele vem com mais de 300 modelos projetados profissionalmente para ajudá-lo a obter mais conversões.

Custom page example built with Thrive Architect

Primeiro, você precisa instalar e ativar o plug-in Thrive Architect. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para Pages ” Add New (Páginas ” Adicionar novo ) no painel de administração do WordPress para criar uma página personalizada. Em seguida, clique no botão “Launch Thrive Architect”.

Launch Thrive Architect

Em seguida, você pode escolher se deseja criar uma página normal ou uma página de destino pré-criada.

Recomendamos clicar em “Pre-built Landing Page” (Página de destino pré-construída), pois isso lhe dá acesso a todos os modelos de página de destino do Thrive. Esses modelos são totalmente personalizáveis, portanto, você pode ajustá-los para que se adaptem ao seu site WordPress.

Choose the Pre-built Landing Page option in Thrive Architect

Quando você encontrar um conjunto de que goste, basta clicar para selecioná-lo.

Na imagem a seguir, estamos selecionando “Smart Landing Page Sets”.

Pick a template for your custom page in Thrive Architect

Na próxima tela, você precisa escolher um modelo específico do conjunto.

Selecione um modelo clicando nele e, em seguida, pressionando o botão “Apply Template” (Aplicar modelo).

Apply Thrive Architect template

Isso abrirá o modelo no Thrive Architect Editor. A partir daqui, você pode personalizar facilmente o modelo de página para corresponder ao seu blog, site ou loja on-line.

Por exemplo, você pode alterar o “Título” clicando nele e digitando sua própria mensagem personalizada.

Customize page elements in Thrive Architect

Agora você verá todas as opções de personalização no menu do lado esquerdo. Aqui, você pode alterar a tipografia, o tamanho da fonte, a cor, a formatação e muito mais.

No painel esquerdo, você também pode ajustar outras configurações da sua página personalizada, como layout, estilo do plano de fundo, bordas, animações e comportamento de rolagem, só para citar algumas.

Customize page settings in Thrive Architect

Semelhante aos blocos do SeedProd, o Thrive Architect vem com muitos elementos pré-criados que você pode adicionar à sua página personalizada.

Para adicionar um novo elemento à página, clique no botão “Adicionar elemento (+)” no lado direito da tela.

Click the Add Element button

Agora você pode escolher entre elementos como imagens, botões, formulários de geração de leads, tabelas de preços, cronômetros de contagem regressiva e muito mais.

Para adicionar um elemento, basta arrastá-lo do menu à direita e soltá-lo em sua página.

Drag and drop elements onto your page

Novamente, você pode editar qualquer um dos novos elementos adicionados à sua página clicando neles.

Quando você estiver satisfeito com a aparência da página, clique no botão de seta (^) ao lado do botão “Save Work” (Salvar trabalho). Em seguida, clique na opção “Salvar e retornar ao Post Editor”.

Save custom page in Thrive Architect

Em seguida, você pode salvar a página como rascunho ou publicá-la para que seja exibida em seu site do WordPress.

Depois que sua página personalizada for publicada, você poderá visitar seu site para vê-la em ação.

Publish custom page

Esperamos que este artigo tenha ajudado você a aprender como criar uma página personalizada no WordPress. Talvez você também queira ver nosso guia sobre como aumentar o tráfego do seu blog e nossas escolhas de especialistas dos melhores plugins de formulário de contato para WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

233 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rajee Pandi

    awesome. I think it is not free. Thank you so much.

    • WPBeginner Support

      There is a paid option but 1 and 2 are free options :)

      Administrador

  3. Moinuddin Waheed

    Using seedprod for making a custom page is promising as it takes less efforts and makes awesome looking design in no time.
    Thanks for this guide, I have been already using seedprod to many of my websites and utilising this feature.

  4. Brend

    Thanks for the great article. I often use your site for assistance with WordPress.
    I followed your tutorial to manually create a new template file. When selecting the template there is no CSS attached to the page. Did I miss something?

    • WPBeginner Support

      It would depend on the specific theme you’re using, if you check with your theme’s support they should be able to let you know why their CSS is not being applied to your page properly.

      Administrador

  5. Muhammed

    Perfect article.
    I have a q
    can i make a custom page and then make it the main website page or Home page?
    I don’t like to have too much content in my firs page and i want to make every thing in the main home page by my own ( i mean with HTML, CSS, JS ).
    is there any way to do that?

    • WPBeginner Support

      For customizing everything in that manner you would want to look at the method for manually creating a page template :)

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.