Como criar um tema WordPress personalizado (6 etapas fáceis)

Você está se perguntando como criar um tema WordPress personalizado?

Isso pode ser complicado para iniciantes, pois geralmente requer experiência em codificação e profundo conhecimento do WordPress.

Neste artigo, mostraremos como criar um tema personalizado em algumas etapas simples, sem necessidade de codificação.

Vamos começar!

O que é um tema WordPress?

Para começar, vamos esclarecer o que exatamente é o tema WordPress e em que consiste.

Um tema WordPress é um conjunto de arquivos colocados em uma pasta comum no diretório WordPress Themes em sua hospedagem.

Este conjunto inclui modelos de página escritos em linguagens HTML, PHP e JavaScript, folhas de estilo CSS e gráficos.

Aqui está um exemplo de como é em um servidor:

Juntos, esses arquivos definem o layout e a aparência do seu site WordPress.

Existem 2 maneiras típicas de criar um tema personalizado do zero:

• Faça você mesmo . Requer vasta experiência em desenvolvimento web e muito tempo livre.
• Contrate um desenvolvedor ou agência web . O preço médio varia de algumas centenas a alguns milhares de dólares.

Por razões óbvias, ambos os métodos dificilmente são aceitáveis ​​para iniciantes.

Felizmente, existe uma terceira maneira de criar um tema personalizado sem gastar muito ou ser um guru da programação.

Isso é possível através do uso do plugin SeedProd. Vamos dar uma olhada em detalhes e descobrir por que é tão popular entre os usuários do WordPress.

Por que usar o SeedProd para criar um tema WordPress personalizado?

SeedProd é o plugin de construtor de sites nº 1 para WordPress, com mais de um milhão de instalações ativas.

Este é um verdadeiro divisor de águas, pois permite que você crie temas WordPress personalizados de alto nível em minutos, sem necessidade de codificação.

O ingrediente secreto é o prático e poderoso editor visual SeedProd. Com ele, você pode facilmente arrastar e soltar os elementos necessários do site, blocos ou até mesmo seções inteiras em sua página.

Aqui está uma pequena prévia de como funciona:

O SeedProd otimiza automaticamente páginas e temas para carregamento rápido. Ele permite que você garanta a melhor experiência do usuário para seus visitantes.

Eles também são responsivos e prontos para dispositivos móveis por padrão, para que você não precise se preocupar com a aparência do seu site em diferentes dispositivos.

Junto com isso, o SeedProd vem com recursos poderosos como:

• Centenas de modelos de página prontos . Não se sente inspirado para criar um tema do zero? Você pode usar um dos mais de 150 modelos pré-criados e personalizá-los facilmente para atender às suas necessidades.
• Integração WooCommerce . Vender produtos online? O SeedProd é totalmente compatível com o WooCommerce, para que você possa criar em breve páginas modernas e de checkout, grades de produtos e muito mais.
• Painel de gerenciamento de assinantes de e-mail . Você tem um boletim informativo por e-mail? O SeedProd permite que você colete e-mails e acompanhe o status de seus assinantes em um painel prático.
• Código otimizado para SEO . Preocupado com a clareza do código? O código de temas e páginas que você cria com o SeedProd é amigável para SEO e atende a todos os requisitos do mecanismo de pesquisa.

Além disso, o SeedProd tem uma equipe de suporte incrível e responsiva.

Mesmo que este plugin seja super fácil de usar, se você tiver alguma dúvida, eles estarão sempre prontos para ajudar.

Mas os números falam mais alto que as palavras. SeedProd tem mais de 4.000 comentários com uma classificação média de 4,9 de 5 estrelas .

O feedback de usuários entusiasmados não deixa dúvidas de que essa classificação é bem merecida.

Aqui está o que as pessoas estão dizendo sobre sua experiência com o SeedProd:

Agora que você sabe por que usar o SeedProd é a melhor maneira de criar um tema personalizado para iniciantes, vamos ver como você pode fazer isso.

Como criar um tema WordPress personalizado

Este tutorial detalhado tem 6 etapas fáceis. Siga-os para criar um belo tema WordPress personalizado sem tocar em uma única linha de código.

Aqui está um índice para ajudá-lo a navegar:

• Etapa 1: instalar e ativar o plug-in SeedProd
• Passo 2: Selecione um tema WordPress pré-construído
• Etapa 3: personalize suas partes do tema WordPress
• Etapa 4: personalize o CSS global do seu tema (sem código)
• Etapa 5: Conecte-se ao seu serviço de marketing por e-mail
• Passo 6: Publique seu tema WordPress personalizado

Etapa 1: instalar e ativar o plug-in SeedProd

Para começar, pegue sua cópia do SeedProd aqui.

Uma vez feito, você receberá um e-mail que contém seus detalhes de login e um link para acessar sua conta SeedProd.

Siga este link, faça login na sua conta SeedProd e vá para a guia Downloads .

Em seguida, clique no botão Download SeedProd para iniciar o download do arquivo ZIP do plug-in para o seu computador.

Quando terminar de baixar, copie sua chave de licença na mesma guia. Você precisará dele para ativar sua cópia do SeedProd.

O próximo passo é fazer o upload do arquivo ZIP baixado para o seu site e instalar o plugin.

Se precisar de ajuda, você pode seguir este tutorial sobre como instalar um plugin do WordPress.

Depois de instalar o plugin, vá para o painel do WordPress e clique no botão SeedProd no painel esquerdo.

Em seguida, cole sua chave de licença no campo de licença e pressione o botão Verificar chave .

Depois de ativar sua cópia do SeedProd, você está pronto para começar a criar seu tema WordPress personalizado.

Passo 2: Selecione um tema WordPress pré-construído

Para começar, navegue até SeedProd » Theme Builder no seu painel.

Nesta página, você pode gerenciar seus temas personalizados e criar novos.

A partir daqui, você tem 2 maneiras.

A primeira é criar cada parte do seu tema personalizado do zero.

Cada tema do WordPress consiste nas seguintes partes:

• Cabeçalho
• Rodapé
• Postagem única
• Página Única
• Arquivo (página do blog)
• Pagina inicial
• Barra Lateral

Essas partes compõem seu tema, e o SeedProd permite que você as crie e personalize individualmente.

Para começar a criar uma nova parte do seu tema, pressione o botão Adicionar novo modelo de tema .

Aqui você pode escolher o tipo de sua parte do tema, dar um nome a ela e começar a construí-la do zero.

Mas, se você achar que é demais para sua primeira tentativa, há uma segunda maneira de criar seu tema WordPress personalizado.

O SeedProd vem com vários modelos de temas pré-fabricados com aparência profissional. Você pode selecioná-los e personalizá-los para suas necessidades.

Neste tutorial, vamos nos concentrar exatamente dessa maneira, pois é mais fácil para iniciantes e nos permite mostrar mais recursos do SeedProd.

Para começar a personalizar um dos modelos de tema prontos, pressione o botão Temas .

Aqui você encontrará uma variedade de temas para diferentes propósitos. Por exemplo, existem temas para blogs pessoais, portfólios, sites de negócios ou comércio eletrônico e muito mais.

Para escolher um tema que você gosta, passe o cursor sobre ele e clique no ícone de marca de seleção. Por exemplo, escolheremos um dos modelos iniciais.

Depois de selecionar um modelo, o SeedProd cria automaticamente as partes que o compõem.

Como você pode ver, nosso tema não inclui apenas modelos de parte de página, como cabeçalho, rodapé e barra lateral.

Também existem modelos para páginas inteiras, como uma única página, postagem, arquivos e página inicial.

Se você não precisar de um modelo específico em seu site, poderá cancelar a publicação dele alternando a alternância ao lado dele.

Para alterar o nome de um modelo ou editar as condições quando ele deve aparecer em seu site, clique no link Editar condições .

Ele abrirá uma janela modal onde você pode nomear um modelo da maneira que desejar e alterar seu tipo, prioridade e condições.

Agora que você sabe como gerenciar partes do seu tema, está pronto para começar a personalizá-lo.

Etapa 3: personalize suas partes do tema WordPress

Primeiro, vamos personalizar o cabeçalho, pois é a primeira coisa que os visitantes veem depois de acessar seu site.

Cabeçalho

Para começar, role a página do Theme Builder para baixo, encontre o modelo de cabeçalho e clique nele.

Nota: O cabeçalho e o rodapé são comuns a todo o site. Isso significa que todas as alterações que você fizer neles ficarão visíveis em todas as páginas do seu site.

Como você pode ver, nosso cabeçalho consiste em duas partes. Há a parte esquerda com o logotipo do site e a parte direita com o menu de navegação.

O SeedProd possui um editor visual de arrastar e soltar. Você pode interagir com qualquer elemento na página e adicionar novos simplesmente arrastando-os na página.

Vamos tentar mudar o logotipo. Para isso, clique nele e aparecerá uma barra lateral onde você poderá editar as configurações do elemento.

Cada tipo de elemento no editor SeedProd tem seu próprio conjunto de configurações e opções de personalização.

Por exemplo, nosso logotipo tem o tipo Imagem . Portanto, ele tem todas as configurações que você normalmente esperaria de uma imagem, como arquivo de origem, texto alternativo, tamanho e muito mais.

Você também pode alternar entre as guias Conteúdo , Modelos e Avançado na barra lateral esquerda para descobrir ainda mais opções de personalização.

Agora, digamos que queremos substituir o logotipo padrão pelo nosso.

Para fazer isso, clique na imagem do logotipo atual e, em seguida, selecione a imagem que deseja usar.

Aqui está a aparência do nosso novo logotipo em nosso site de teste:

Agora vamos alterar a cor de fundo do cabeçalho. Para fazer isso, aponte o cursor sobre seu cabeçalho até que ele tenha um contorno azul e clique nele.

Depois disso, você verá as opções de personalização do cabeçalho na barra lateral esquerda. Tem o tipo de elemento Row .

Na guia Conteúdo , você pode alterar a cor de fundo do cabeçalho, substituí-la por uma imagem e escolher a largura do cabeçalho.

Para alterar a cor de fundo, clique no ícone da paleta de cores e selecione a cor desejada.

Em seguida, na guia Avançado , você pode adicionar uma sombra ou borda ao seu cabeçalho, alterar suas configurações de espaçamento e muito mais.

Como toque final, vamos aumentar um pouco a fonte do menu de navegação. Para fazer isso, aponte o cursor sobre o menu e clique nele.

Agora, no campo Tamanho da fonte na barra lateral esquerda, insira o tamanho da fonte desejado.

Quando terminar de personalizar o cabeçalho, pressione o botão Salvar no canto superior direito.

Em seguida, pressione o ícone de saída para sair do editor visual e voltar para a página de modelos de tema.

Em seguida, vamos personalizar a página inicial .

Pagina inicial

Para fazer isso, encontre o modelo de página inicial entre os outros modelos de tema e clique nele.

Nosso modelo inicial tem uma página inicial com recursos que você pode encontrar em um site comercial típico, como:

• Seção de descrição do negócio
• Lista de clientes com seus logotipos
• Recursos de negócios
• Depoimentos
• Seção de perguntas frequentes
• e mais…

Assim como no cabeçalho, você pode interagir com todos os elementos da página e alterar sua aparência.

Por exemplo, no gif abaixo você pode ver como alteramos facilmente o título, a descrição e o texto do botão na seção hero com apenas alguns cliques:

Agora vamos tentar adicionar algo novo à nossa página.

Se nenhum elemento da página estiver selecionado no momento, na barra lateral esquerda, você poderá ver a guia Blocos .

Existem muitos blocos prontos que você pode adicionar à sua página com apenas alguns cliques, sem necessidade de codificação.

Por exemplo, você pode encontrar blocos como o autor da postagem, tabela de preços, formulário de pesquisa e muitos outros.

Para adicionar um bloco específico à sua página, arraste e solte-o no local desejado.

Por exemplo, vamos adicionar um bloco Countdown à seção Features:

Além disso, se você for até a guia Seções , encontrará várias seções pré-criadas que também podem ser adicionadas à sua página, como:

• Cabeçalhos
• Rodapés
• Chamada para ação
• Características
• Depoimentos
• e muitos mais…

Para adicionar uma nova seção à página, passe o mouse sobre a seção desejada e clique no ícone de adição.

Por exemplo, vamos adicionar uma nova seção de Call to Action à nossa página.

Por padrão, a nova seção aparecerá no final da página.

Para alterar a posição da seção, aponte o cursor sobre sua borda superior, escolha a opção Move Section e arraste-a da mesma forma que um bloco.

Quando terminar de personalizar sua página inicial, você poderá ver como ela fica em dispositivos móveis.

Para fazer isso, clique no ícone de visualização móvel no canto inferior esquerdo.

Se houver alguns blocos ou seções que não parecem corretos, você pode movê-los até ter certeza de que sua versão móvel oferece a melhor experiência do usuário.

Quando estiver satisfeito com sua página inicial, não se esqueça de pressionar o botão Salvar para salvar todas as alterações feitas.

Índice do blog, arquivos e páginas de pesquisa

Vejamos agora um modelo chamado Índice de blogs, Arquivos, Pesquisa .

Como você pode supor pelo nome, este modelo é responsável por exibir a página de postagens do blog, arquivos e resultados de pesquisa.

Isso é útil, pois você pode alterar a aparência de 3 páginas de uma só vez.

Como você já aprendeu a personalizar páginas e adicionar novos blocos e seções a elas, vamos nos concentrar na configuração de elementos específicos.

Por exemplo, se você clicar no elemento Postagens , poderá alterar a ordem das postagens, excluir postagens de categorias, tags ou autores específicos e muito mais.

Além disso, você pode personalizar totalmente o layout da lista de postagens.

Ou seja, você pode alterar o número de colunas e postagens por página, alterar a visibilidade do nome do autor, data de publicação, hora e contagem de comentários.

É raro que um construtor de sites permita que você controle essas coisas, sem necessidade de codificação, o que é outra razão para a popularidade do SeedProd.

Postagem única

Quando terminar de personalizar a página do seu blog, vamos editar também o modelo de postagem única .

Uma postagem de blog típica tem as seguintes partes:

• Imagem em destaque
• Título da postagem
• Informações da postagem
• Publicar conteúdo
• Caixa do autor
• Seção de comentários

O melhor é que, com o SeedProd, você pode personalizar totalmente cada uma dessas partes.

Por exemplo, se você clicar no elemento Post info , poderá adicionar novos dados úteis a ele.

Pode ser um horário de publicação ou modificação, informações adicionais sobre o autor da postagem ou qualquer outra coisa que você queira especificar.

Por exemplo, digamos que queremos exibir o número de comentários em nossa seção de informações de postagem. Para começar, pressione o botão Adicionar item .

Em seguida, clique no menu suspenso Tipo e selecione a opção Comentários .

Depois disso, você verá que o número de comentários agora é exibido dentro do elemento de informações do post.

Dessa forma, você pode personalizar facilmente qualquer elemento da página.

Barra Lateral

Vamos também alterar a aparência da barra lateral do nosso tema. Vá até o painel do construtor de temas e clique no modelo Barra lateral .

A barra lateral é muito popular entre os proprietários de sites WordPress. É um ótimo lugar para colocar elementos relevantes do site, como uma lista de postagens recentes, formulário de inscrição e muitos outros.

E há boas notícias. SeedProd permite que você personalize sua barra lateral totalmente da mesma forma que outros modelos.

Por exemplo, você pode adicionar um formulário de inscrição em um boletim informativo por e-mail à sua barra lateral com apenas alguns cliques.

Para fazer isso, basta arrastar e soltar o elemento Optin Form da guia Blocks para sua barra lateral:

Então, se você clicar nele, poderá alterar o número de campos, seu tipo e muito mais.

Agora que você sabe como trabalhar no editor visual SeedProd, está pronto para personalizar o CSS global do seu tema.

Etapa 4: personalize o CSS global do seu tema (sem código)

Primeiro, vamos esclarecer o que é CSS e como você pode alterar a aparência global do seu site editando este arquivo.

CSS significa folhas de estilo em cascata. É um arquivo que contém o código que determina o estilo global, a tipografia e as cores do seu site.

Quando você altera a aparência de um elemento no arquivo CSS, essas alterações se aplicam a esse elemento em todo o site.

Cada tema WordPress tem seu próprio arquivo CSS. Normalmente, para fazer alterações, você precisa ter algum conhecimento em desenvolvimento web.

Mas, SeedProd permite que você personalize o CSS global do seu site em um editor simples e amigável para iniciantes.

Para começar, clique no modelo Global CSS em seu painel de modelos de tema.

Isso o levará ao editor visual de configurações CSS globais.

No lado esquerdo, você encontrará guias onde poderá alterar a cor, as fontes, o plano de fundo e muito mais do seu site.

E no lado direito, você pode ver os resultados das alterações feitas em tempo real.

Por exemplo, vamos alterar a fonte dos títulos. Para fazer isso, clique na guia Fontes .

Para alterar a fonte de todos os títulos de H1 para H6, selecione uma nova fonte no menu suspenso sob o título Header Font .

Se você quiser alterar a fonte de um título específico, você pode alternar a alternância Mostrar H1 – H6 Settings .

Em seguida, clique no botão Editar ao lado da opção Tipografia de um título escolhido e selecione a fonte que deseja ter.

Por exemplo, alteraremos a fonte do título H1 para Comic Sans . Como você pode ver, a fonte mudou instantaneamente.

Quando terminar de ajustar as configurações de CSS, clique no botão Salvar para salvar as alterações feitas.

Seguindo esse caminho, você pode personalizar muitas coisas relacionadas à aparência do seu tema WordPress personalizado.

Agora que você sabe como editar as configurações globais de CSS, está pronto para seguir em frente e conectar sua conta de serviço de marketing por e-mail.

Etapa 5: Conecte-se ao seu serviço de marketing por e-mail

O SeedProd possui integração perfeita com os serviços de email marketing mais populares. Esta lista inclui, mas não se limita a Mailchimp, Constant Contact e Drip.

Esta é uma ótima notícia se você já possui uma base ativa de assinantes de e-mail ou deseja começar a aumentar sua primeira lista de e-mail.

Para conectar sua conta de email marketing, primeiro navegue até a guia Theme Builder e clique em qualquer modelo.

Em seguida, vá para a guia Conectar no painel superior.

Uma vez lá, aponte o cursor sobre um serviço que você está usando, pressione o botão Conectar e siga as instruções na tela.

Quando terminar de conectar seu serviço de e-mail, pressione o botão Salvar no canto superior direito para salvar as alterações.

Agora, o SeedProd coletará e-mails de visitantes que preencheram seu formulário de inscrição e os adicionará à sua base de e-mail.

Passo 6: Publique seu tema WordPress personalizado

A etapa final é publicar seu tema personalizado e torná-lo ativo em seu site.

Para fazer isso, primeiro, vá para SeedProd » Theme Builder no seu painel do WordPress.

Em seguida, alterne a alternância Ativar tema SeedProd no canto superior direito.

É isso. Seu tema WordPress personalizado está ativo e você pode vê-lo em seu site.

Para fazer isso, pressione o botão Visitar o site abaixo do nome do seu site no canto superior esquerdo do painel do WordPress.

Aqui está nossa página inicial personalizada:

Aqui está a página do arquivo:

E aqui está o modelo de postagem de blog único que também personalizamos com apenas alguns cliques usando o SeedProd:

Neste artigo, você aprendeu como criar um tema WordPress personalizado em 6 etapas fáceis, sem necessidade de codificação.

Se você está pronto para começar a criar seu próprio tema WordPress personalizado, você pode pegar sua cópia do SeedProd aqui.

Procurando o poderoso plugin WordPress para aprimorar a pesquisa em seu site? Confira os melhores plugins de pesquisa do WordPress para aumentar a vitrine de pesquisa do seu site.

Vai lançar uma loja online? Dê uma olhada na melhor vitrine de plugins de comércio eletrônico do WordPress para downloads digitais.