Criar seu primeiro site WordPress pode ser complicado. Com milhares de temas para escolher, pode ser difícil encontrar o ideal para sua marca.
É aí que entra a criação de um tema personalizado que atenda a todos os seus requisitos.
No entanto, a parte complicada para iniciantes é que geralmente requer experiência em codificação e conhecimento profundo de WordPress.
Mas com o construtor de temas WordPress certo, você pode simplesmente usar um construtor de arrastar e soltar para criar seu próprio tema.
Neste artigo, mostraremos como criar um tema personalizado em algumas etapas simples, sem necessidade de codificação.
O que é um Tema WordPress?
Para começar, vamos esclarecer o que exatamente é um tema WordPress e do que ele é composto.
Um tema WordPress é um conjunto de arquivos colocados em uma pasta comum no diretório Temas do WordPress em sua hospedagem.
Este conjunto inclui modelos de página escritos em linguagens HTML, PHP e JavaScript, folhas de estilo CSS e gráficos.
Quando se trata de criar um tema personalizado do zero, existem 2 maneiras típicas:
- Faça você mesmo: Requer ampla 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 esses métodos são dificilmente aceitáveis para iniciantes.
Felizmente, existe uma terceira maneira de criar um tema personalizado sem gastar muito ou ser um guru da codificação.
Isso é possível através do uso de um construtor de sites WordPress como o SeedProd. Vamos dar uma olhada em detalhes e descobrir por que ele é tão popular entre os usuários do WordPress.
Por que Usar o SeedProd para Criar um Tema WordPress Personalizado?
SeedProd é o plugin construtor de sites nº 1 com IA para WordPress, fácil de usar para iniciantes.
Isso é uma verdadeira revolução, pois permite criar temas WordPress personalizados de ponta em minutos, sem necessidade de codificação.
O ingrediente secreto é o editor visual prático e poderoso do SeedProd. Usando-o, você pode facilmente arrastar e soltar os elementos, blocos ou até mesmo seções inteiras do site necessários em sua página.
Aqui está uma breve 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, então você não precisa se preocupar com a aparência do seu site em diferentes dispositivos.
Além disso, 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 200 modelos pré-construídos e personalizá-los facilmente para atender às suas necessidades.
- Integração com WooCommerce: Vende produtos online? O SeedProd é totalmente compatível com o WooCommerce, então você pode criar páginas modernas de "em breve" e "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 coletar e-mails e acompanhar 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 dos motores de busca.
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 estão sempre prontos para vir em seu resgate.
O feedback de usuários animados não deixa dúvidas de que essa classificação é bem merecida.
Veja 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 Personalizado do WordPress
Este tutorial detalhado tem 6 etapas fáceis. Siga-as para criar um belo tema personalizado do WordPress sem tocar em uma única linha de código.
Aqui está um índice para ajudá-lo a navegar:
- Etapa 1: Instalar e Ativar o Plugin SeedProd
- Etapa 2: Selecionar um Tema Pré-construído do WordPress
- Etapa 3: Personalizar as Partes do Seu Tema do WordPress
- Etapa 4: Personalizar o CSS Global do Seu Tema (Sem Código)
- Etapa 5: Conectar ao Seu Serviço de Marketing por E-mail
- Etapa 6: Publicar Seu Tema Personalizado do WordPress
- Bônus: Criar Formulários de Pesquisa Personalizados e Página de Resultados
Etapa 1: Instalar e Ativar o Plugin SeedProd
Para começar, você pode obter sua cópia do SeedProd aqui.
Em seguida, você pode fazer login na sua conta SeedProd e ir para a guia Downloads.
Em seguida, clique no botão Download SeedProd Pro para começar a baixar o arquivo ZIP do plugin para o seu computador.
Quando terminar de baixar, copie sua chave de licença na mesma guia. Você precisará dela mais tarde 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, você verá a tela de boas-vindas do SeedProd. Aqui, você pode ir para o seu painel do WordPress e clicar 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.
Assim que você ativar sua cópia do SeedProd, estará pronto para começar a criar seu tema personalizado do WordPress.
Etapa 2: Selecionar um Tema Pré-construído do WordPress
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 de começar.
A primeira é criar cada parte do seu tema personalizado do zero.
Todo tema do WordPress é composto pelas seguintes partes:
- Cabeçalho
- Rodapé
- Post Individual
- Página Individual
- Arquivo (Página do Blog)
- Página 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 da sua parte do tema, dar um nome a ela e, em seguida, começar a construí-la do zero.
Mas, se você sentir que é muito complicado para sua primeira tentativa, há uma segunda maneira de criar seu tema personalizado do WordPress.
O SeedProd vem com um monte de modelos de temas pré-fabricados com aparência profissional. Você pode selecioná-los e personalizá-los para suas necessidades.
Neste tutorial, vamos focar nesta maneira, pois é mais fácil para iniciantes e nos permite mostrar mais recursos do SeedProd.
Para começar a personalizar um dos modelos de temas prontos, pressione o botão Kits de Modelos de Tema.
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 eCommerce, e muito mais.
Para escolher um tema que você goste, 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 partes de página, como cabeçalho, rodapé e barra lateral.
Existem também modelos para páginas inteiras, como uma página individual, post, arquivos e página inicial.
Se você não precisar de um modelo específico em seu site, pode desativá-lo alternando o seletor ao lado dele.
Para alterar o nome de um modelo ou editar as condições de quando ele deve aparecer em seu site, clique no link Editar Condições.
Isso abrirá uma janela modal onde você pode nomear um modelo como quiser e alterar seu tipo, prioridade e condições.
Quando terminar, simplesmente clique no botão Salvar.
Agora que você sabe como gerenciar as partes do seu tema, está pronto para começar a personalizá-lo.
Etapa 3: Personalizar as Partes do Seu Tema do WordPress
Primeiro, vamos personalizar o cabeçalho, pois é a primeira coisa que os visitantes veem ao acessar seu site.
Cabeçalho
Para começar, role a página Construtor de Temas para baixo, encontre o modelo Cabeçalho e clique nele.
Observação: O cabeçalho e o rodapé são comuns a todo o site. Isso significa que toda alteração que você fizer neles será visível em todas as páginas do seu site.
Como você pode ver, nosso cabeçalho é composto por 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 para a página.
Vamos tentar mudar o logotipo. Para fazer isso, basta clicar nele, e uma barra lateral aparecerá onde você pode 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 seu 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 você queira substituir o logotipo padrão pelo seu.
Para fazer isso, clique na imagem do logotipo atual e, em seguida, você pode selecionar a imagem que deseja usar em vez dela.
Veja como nosso novo logotipo fica em nosso site de teste:
Agora, vamos mudar a cor de fundo do cabeçalho.
Para fazer isso, passe o cursor sobre o 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. Ele tem o tipo de elemento Linha.
Na guia Conteúdo, você pode alterar a cor de fundo do seu 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, passe o cursor sobre o menu e clique nele.
Agora, no campo Tamanho da Fonte na barra lateral esquerda, insira o tamanho da fonte desejado.
Simplesmente mova o controle deslizante ou insira um número para alterar o tamanho da fonte.
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.
Página Inicial
Para fazer isso, encontre o modelo Página Inicial entre os outros modelos de tema e clique nele.
O 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 do negócio
- Depoimentos
- Seção de Perguntas Frequentes
- e mais…
Assim como no cabeçalho, você pode interagir com cada elemento da página e alterar sua aparência.
Por exemplo, você pode ver como alterar facilmente o título, a descrição e o texto do botão na seção principal com apenas alguns cliques:
Agora, vamos tentar adicionar algo novo à nossa página.
Se nenhum elemento na página estiver selecionado no momento, na barra lateral esquerda, você pode ver a aba Blocos.
Existem muitos blocos prontos que você pode adicionar à sua página com alguns cliques, sem necessidade de codificação.
Por exemplo, você pode encontrar blocos como o autor do post, 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 Contagem Regressiva à seção de Recursos:
Além disso, se você for para a aba Seções, encontrará dezenas de seções prontas que também pode adicionar à sua página, como:
- Cabeçalhos
- Rodapés
- Chamada para ação
- Recursos
- Depoimentos
- e muitos outros…
Para adicionar uma nova seção à página, passe o mouse sobre a seção desejada e clique no ícone de mais.
Por exemplo, vamos adicionar uma nova seção Chamada para Ação à 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 a borda superior dela, escolha a opção Mover Seção e arraste-a da mesma forma que um bloco.
Quando terminar de personalizar sua página inicial, você pode 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 blocos ou seções que não pareçam corretos, você pode movê-los.
Dessa forma, você pode garantir que sua versão móvel ofereça 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.
Página de Índice do Blog, Arquivos e Pesquisa
Vamos agora olhar um modelo chamado Índice do Blog, Arquivos, Pesquisa.
Como você pode supor pelo nome, este modelo é responsável por exibir a página de posts do blog, arquivos e resultados de pesquisa.
Isso é útil, pois você pode alterar a aparência de 3 páginas de uma 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 Posts, poderá alterar a ordem dos posts, excluir posts de categorias, tags ou autores específicos e muito mais.
Além disso, você pode personalizar totalmente o layout da lista de posts.
Ou seja, você pode alterar o número de colunas e posts 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 é mais um motivo para a popularidade do SeedProd.
Post Individual
Quando terminar de personalizar sua página de blog, vamos também editar o modelo Post Único .
Um post de blog típico tem as seguintes partes:
- Imagem em destaque
- Título da postagem
- Informações da postagem
- Conteúdo da postagem
- Caixa do autor
- Seção de comentários
A melhor parte é que, com o SeedProd, você pode personalizar completamente cada uma dessas partes.
Por exemplo, se você clicar no elemento Informações da postagem, 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 algo mais que você queira especificar.
Por exemplo, digamos que queremos exibir o número de comentários em nossa seção de informações da 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 da postagem.
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á para 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 posts recentes, formulário de inscrição e muitos outros.
O SeedProd também permite que você personalize totalmente sua barra lateral da mesma forma que outros modelos.
Por exemplo, você pode adicionar um formulário de inscrição de newsletter por e-mail à sua barra lateral com alguns cliques.
Para fazer isso, basta arrastar e soltar o elemento Formulário de Optin da aba Blocos para sua barra lateral:
Em seguida, se você clicar nele, poderá alterar o número de campos, seus tipos e muito mais.
Agora que você sabe como trabalhar dentro do editor visual do SeedProd, está pronto para personalizar o CSS global do seu tema.
Etapa 4: Personalizar 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 código que determina a estilização 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 seu site.
Todo tema WordPress tem seu próprio arquivo CSS. Normalmente, para fazer alterações nele, você precisa ter algum conhecimento em desenvolvimento web.
Mas o 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 CSS Global no painel de modelos do seu tema.
Isso o levará ao editor visual de configurações de CSS global.
No lado esquerdo, você encontrará abas onde pode alterar a cor, fontes, plano de fundo do seu site e muito mais.
E no lado direito, você pode ver os resultados das alterações que fez em tempo real.
Por exemplo, vamos alterar a fonte dos cabeçalhos.
Para fazer isso, você pode clicar na aba Fontes.
Para alterar a fonte de todos os cabeçalhos de H1 a H6, selecione uma nova fonte no menu suspenso sob o título Fonte do Cabeçalho.
Há também uma opção para alterar a cor da fonte.
Se você quiser alterar a fonte de um cabeçalho específico, pode alternar o controle deslizante Mostrar Configurações H1 – H6.
Em seguida, clique no botão Editar ao lado da opção Tipografia de um cabeçalho escolhido e selecione a fonte que deseja.
Por exemplo, alteraremos a fonte do cabeçalho 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 este caminho, você pode personalizar muitas coisas relacionadas à aparência do seu tema personalizado do WordPress.
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: Conectar ao Seu Serviço de Marketing por E-mail
O SeedProd tem integração perfeita com os serviços de marketing por e-mail mais populares. Esta lista inclui, mas não se limita a, Mailchimp, Constant Contact e Drip.
Esta é uma ótima notícia se você já tem uma base ativa de assinantes de e-mail ou deseja começar a crescer sua primeira lista de e-mail.
Para conectar sua conta de marketing por e-mail, primeiro navegue até a aba Construtor de Temas e clique em qualquer modelo.
Em seguida, vá para a aba Conectar no painel superior.
Uma vez lá, posicione 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á os e-mails dos visitantes que preencheram seu formulário de optin e os adicionará à sua base de e-mails.
Etapa 6: Publicar Seu Tema Personalizado do WordPress
O passo final é publicar seu tema personalizado e torná-lo ativo em seu site.
Para fazer isso, primeiro, vá para SeedProd » Construtor de Temas no seu painel do WordPress.
Em seguida, ative o controle deslizante Ativar Tema SeedProd no canto superior direito.
É isso. Seu tema personalizado do WordPress está ativo e você pode vê-lo em seu site.
Para fazer isso, basta visitar seu site e ver o novo tema personalizado.
Por exemplo, aqui está nossa página inicial personalizada em nosso site de demonstração:
E aqui está o modelo de postagem de blog única que também personalizamos com apenas alguns cliques usando o SeedProd:
Bônus: Criar Formulários de Pesquisa Personalizados e Página de Resultados
Agora, você gostaria também de aprimorar a experiência de busca em seu novo site com tema personalizado do WordPress?
A busca padrão do WordPress carece de muitos recursos e muitas vezes falha em entregar resultados relevantes, especialmente se você tiver muitos artigos ou produtos em seu site.
É aqui que SearchWP pode ajudá-lo. É o melhor plugin de busca para WordPress e aprimora a busca padrão, permitindo que você inclua campos personalizados, tags, categorias, detalhes de produtos, arquivos de mídia, documentos e muito mais no processo de busca.
Com o SearchWP, você pode configurar formulários de pesquisa personalizados e vinculá-los a mecanismos de pesquisa específicos. Ele também oferece layouts pré-construídos e muitas opções de personalização.
Isso não é tudo! O SearchWP também vem com um modelo de resultados para WordPress. Você pode personalizar como os resultados da pesquisa aparecerão em seu site e selecionar entre modelos pré-construídos.
Para saber mais, consulte nosso guia sobre como criar uma página de pesquisa com aparência profissional no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como criar um tema personalizado do WordPress em 6 etapas fáceis, sem necessidade de codificação. Você também pode consultar nosso guia sobre os melhores plugins de pesquisa do WordPress para impulsionar a pesquisa do seu site e como criar uma página de pesquisa no WordPress.
Se você também deseja melhorar a pesquisa do WordPress, então você pode começar com o SearchWP aqui.
