Deseja criar um tema personalizado para WordPress que tenha exatamente a aparência que você imaginou? Neste guia, eu o orientarei no processo exato que usei para criar meu próprio tema, cada página, cor e layout, sem tocar no código.
Quando lancei meu site WordPress pela primeira vez, usei um tema pronto, mas sempre me deparei com obstáculos. Não conseguia mover as seções para onde queria, as cores da minha marca nunca ficavam corretas e pequenas alterações levavam horas. Aprender a criar um tema personalizado para o WordPress resolveu tudo isso, e mostrarei a você exatamente como fazer isso também.
A maneira mais fácil de criar um tema personalizado para WordPress:
- Etapa 1. Instalar o SeedProd e escolher um modelo
- Etapa 2. Personalizar o cabeçalho e o rodapé do WordPress
- Etapa 3. Criar uma página inicial personalizada do WordPress
- Etapa 4. Criar modelos de página de blog e de postagem única
- Etapa 5. Criar uma página sobre
- Etapa 6. Configure uma página de contato
- Etapa 7. Ajustar as configurações globais do tema
- Etapa 8. Publicar o tema personalizado do WordPress
O que é um tema WordPress personalizado?
Um tema personalizado do WordPress é um design de site que você cria para atender exatamente às suas necessidades, em vez de usar um tema pré-fabricado que vem com layouts e estilos definidos. Com um tema personalizado, você escolhe a aparência e o funcionamento de cada parte do seu site, desde o cabeçalho e o rodapé até os layouts do blog e os estilos dos botões.
Tradicionalmente, você tinha que escrever PHP, CSS e HTML para criar um tema. Agora, com criadores de temas visuais como o SeedProdvocê pode criar um tema WordPress totalmente personalizado sem tocar no código. Você cria cada parte do seu site arrastando e soltando seções, alterando cores e fontes e visualizando tudo ao vivo.
Isso significa que você não precisa fazer pequenos ajustes no design de outra pessoa. Você pode criar um tema que corresponda à sua marca, carregue mais rápido e ofereça aos visitantes a experiência exata que você deseja que eles tenham.
Por que criar um tema personalizado para WordPress (em vez de usar um tema pré-fabricado)?
Quando comecei, achei que escolher um tema popular economizaria tempo. Isso aconteceu por cerca de uma semana. Depois, me deparei com um obstáculo. Não conseguia mover as seções para onde queria, as fontes pareciam erradas e cada alteração significava vasculhar configurações confusas.
Foi então que comecei a procurar uma maneira de criar meu próprio tema sem precisar programar. Encontrei o SeedProdum construtor visual de temas para WordPress que permite que você crie todas as partes do seu site arrastando e soltando. Sem arquivos PHP, sem edições de CSS e sem precisar procurar o menu certo.
Com o SeedProd, eu poderia:
- Corresponder à minha marca desde o início. Cores, fontes e espaçamento exatamente como eu imaginava.
- Eliminar o excesso de conteúdo. Apenas os layouts e recursos de que eu realmente precisava, o que tornou o carregamento do meu site mais rápido.
- Faça alterações em minutos. Ajuste layouts, troque imagens ou redesenhe seções inteiras sem tocar no código.
- Planejar meu site em função dos meus visitantes. Criar páginas na ordem que fizesse sentido, em vez de forçar o conteúdo na estrutura de outra pessoa.
Quando vi como era mais fácil trabalhar em meu próprio tema do SeedProd em vez de lutar com um tema pré-fabricado, eu sabia que não voltaria atrás.
O que você deve fazer antes de criar um tema WordPress personalizado?
Antes de criar um tema do WordPress com o SeedProd, você deve se certificar de que tem uma rede de segurança. Se já tiver um site existente com conteúdo que deseja manter, faça um backup da sua instalação do WordPress, por precaução.
Para evitar qualquer contratempo no desenvolvimento do tema em seu site ativo, você também deve criar um site de teste. Isso lhe dá um ambiente separado e privado para experimentar o SeedProd e desenvolver o tema sem afetar o site ativo.
Como você pode criar um tema para WordPress sem código?
Lembra que eu disse que não sabia programar? Bem, isso não foi problema algum. O SeedProd tornou incrivelmente fácil a criação de um tema personalizado, passo a passo visual. Veja como eu fiz isso.
Etapa 1. Instalar o SeedProd e escolher um modelo
Primeiro, adquira o plano SeedProd Pro. Ele oferece todos os recursos de que você precisa (inclusive o criador de temas) a um preço acessível.
Depois de instalado, você estará pronto para criar um tema WordPress personalizado a partir de um kit inicial e adaptá-lo ao seu site.
Depois de obter a chave de licença, vá para o site de teste e instale o plug-in. A instalação do SeedProd é tão simples quanto carregar o arquivo do plug-in e clicar em "Activate" (Ativar).
Com o plug-in ativo, acesse o menu SeedProd em seu painel do WordPress e clique em "Theme Builder". Em seguida, clique no botão "Theme Template Kits" para escolher seu tema inicial.
O SeedProd tem tantos modelos de temas de blocos projetados profissionalmente que, devo admitir, até eu fiquei um pouco sem opções.
Você pode filtrar os modelos do SeedProd por categoria e classificar por popularidade ou recência. Basta escolher o que mais se aproxima de seu estilo, pois você personalizará tudo posteriormente.
Não se preocupe se não estiver perfeito. Você pode personalizar cada centímetro dela na próxima etapa.
Por fim, optei pelo Elite Consulting Business Theme. Seu visual limpo e moderno combinava perfeitamente com a atmosfera que eu estava buscando.
Para importar o arquivo de tema, passe o cursor do mouse sobre o kit de tema e clique no ícone de marca de seleção.
Clique aqui para visualizar o modelo que selecionei para este design, para que você possa compará-lo com a versão personalizada.
Depois de escolher um kit, você pode ver todos os modelos individuais que compõem os componentes de um tema do WordPress. O meu incluía uma página inicial, cabeçalho, rodapé, página do blog e barra lateral, por exemplo.
Ele também tinha modelos personalizados para seções temáticas distintas, como uma seção de prêmios, uma página de serviços, uma tabela de preços, um modelo de página personalizado para produtos e muito mais.
É provável que você não precise de todos eles para o seu site. Portanto, concentre-se no que você precisa e exclua os modelos que não deseja clicando em "Lixeira".
Se não se sentir confortável com isso, você sempre poderá desativar a opção "Published" (Publicado) para que o modelo não apareça em seu site.
Etapa 2. Personalizar o cabeçalho e o rodapé do WordPress
Com os blocos de construção básicos do tema prontos, você pode começar a editar cada seção do tema. No meu site, comecei com as seções de cabeçalho e rodapé.
Para editar qualquer seção do tema, basta passar o mouse sobre ela e clicar no link Edit Design.
Ao editar uma seção de tema no SeedProd, você acessará o construtor visual de arrastar e soltar. Nessa tela, você pode personalizar o cabeçalho do seu tema simplesmente apontando e clicando.
O modelo de cabeçalho original tinha um layout de três colunas, que era um pouco ocupado demais para o meu gosto. Nesse caso, você pode simplesmente excluí-lo e arrastar um bloco de layout de duas colunas do painel esquerdo.
Adicionar um logotipo também é muito fácil com o bloco Image - basta selecioná-lo na biblioteca de mídia e usar os controles de apontar e clicar para ajustar o tamanho e o posicionamento.
Esse também é um bom momento para verificar novamente suas decisões de design. Aqui está uma lista de erros comuns de design do WordPress que vejo os iniciantes cometerem ao personalizarem seus temas.
Para o menu de navegação, você pode usar o bloco Nav Menu do SeedProd e escolher a configuração "Simple Menu". Isso permite que você crie facilmente a estrutura de menu exata que tem em mente.
Quando estiver satisfeito com seu cabeçalho, vá em frente e salve as alterações. Em seguida, volte ao construtor de temas e abra o modelo Footer (Rodapé) para personalizar a seção do rodapé.
O rodapé original do meu modelo tinha um pouco mais de informações do que eu precisava, então o simplifiquei excluindo blocos desnecessários.
Mantive as informações da empresa e os itens do menu de mídia social, mas centralizei-os para obter uma aparência mais equilibrada. Depois, apenas troquei o conteúdo do espaço reservado pelo meu próprio conteúdo.
Faça alterações semelhantes em seu modelo de rodapé para obter a aparência desejada para seu tema personalizado.
Depois que o cabeçalho e o rodapé tiverem uma aparência elegante e moderna, é hora de abordar o coração do seu site: a página inicial. Lembre-se de que você pode encontrar seus arquivos de modelo em SeedProd " Theme Builder.
Etapa 3. Criar uma página inicial personalizada do WordPress
Se você já se perguntou como criar um tema do WordPress visualmente, esta parte mostra como é simples.
Seu principal objetivo ao personalizar a página inicial provavelmente é criar uma primeira impressão forte, mostrar sua experiência e fornecer aos clientes em potencial motivos convincentes para escolher você ou sua empresa.
Pessoalmente, gostei do layout geral da página inicial do tema Elite Consulting Business, mas queria simplificá-lo ainda mais e acrescentar meu toque pessoal.
Mantive a seção de herói na parte superior, pois é uma ótima maneira de fazer uma declaração ousada. Simplesmente troquei a imagem padrão por uma que refletisse melhor a minha marca e atualizei o título e a descrição.
Da mesma forma, também alterei o estilo do botão CTA. Você pode fazer isso clicando nas configurações avançadas do bloco. Ele fornece acesso a um seletor de cores, onde você pode selecionar uma nova cor de fundo e arredondar os cantos do botão para obter uma aparência mais suave.
Para criar confiança e mostrar minha experiência, eu:
- Adicionei uma faixa de logotipos de marcas com as quais trabalhei,
- Contadores de números atualizados para destacar as principais estatísticas
- Criou um carrossel de depoimentos com citações de clientes
- Incluiu um mini portfólio de redação usando blocos de imagens e títulos
Com alguns cliques e arrastamentos, sua página inicial começará a ter a aparência que você deseja.
Etapa 4. Criar modelos de página de blog e de postagem única
Na verdade, eu não precisava dessa etapa porque não estava planejando ter um blog no meu site. Mas sei que muitos de vocês vão querer compartilhar seus pensamentos e conhecimentos com o mundo, portanto, aqui está um resumo rápido de como o SeedProd facilita a criação de páginas de blog impressionantes e modelos de postagem única.
Modelo de página de blog
Seu modelo de página de blog pode ser encontrado na lista de modelos de tema em "Blog Index, Archives, Search" ou, no meu caso, "Blog Page". Como o modelo de página personalizado anterior, você pode personalizá-lo clicando no link "Edit Design".
Aqui, você pode personalizar a forma como as postagens do blog são exibidas - você pode optar por mostrar imagens em destaque, trechos, informações do autor e muito mais.
Você também pode adicionar elementos como uma barra de pesquisa, botões de compartilhamento de mídia social ou até mesmo uma chamada para ação para incentivar os visitantes a explorar mais.
Modelo de postagem única
Assim como o modelo de página personalizada de blog, você pode editar e personalizar o modelo de postagem única de blog.
Para obter uma aparência consistente, o SeedProd permite que você estilize a exibição de elementos como o título do post, a imagem em destaque, a meta descrição e até mesmo a biografia do autor.
Elas são chamadas de tags de modelo no WordPress. Elas extraem automaticamente os dados do seu site sem que você precise criá-las manualmente.
Por exemplo, com as tags de modelo Featured Image, você pode exibir automaticamente as imagens em destaque em sua única página de blog.
Etapa 5. Criar uma página sobre
Depois da página inicial, a página Sobre é, sem dúvida, a parte mais importante de qualquer site pessoal. É nela que os clientes e colaboradores em potencial conhecem a pessoa por trás dos serviços. Eu queria que a minha fosse autêntica e envolvente e desse uma ideia clara de quem eu sou e do que ofereço.
O tema Elite Consulting Business já incluía um modelo básico de página personalizada do WordPress para uma página sobre, que eu podia acessar acessando Pages " All Pages em meu painel do WordPress e clicando em "Edit with SeedProd".
Decidi manter as duas primeiras seções do design original, que se concentravam na minha experiência profissional e nos serviços que presto. Apenas troquei o conteúdo e as imagens do espaço reservado por minhas próprias imagens.
Em seguida, eu queria mostrar minhas certificações para aumentar a credibilidade. Foi aí que as partes do modelo do SeedProd foram úteis.
Pense nas partes do modelo como seções pré-fabricadas que podem ser inseridas e reutilizadas em diferentes páginas do seu site - uma grande economia de tempo. O tema veio com uma parte do modelo chamada "Prêmios e reconhecimento".
Simplesmente editei esse modelo para incluir minhas certificações e, em seguida, inseri-o facilmente em minha página "Sobre".
Para finalizar, criei uma seção final com um toque mais pessoal. Compartilhei alguns dos meus hobbies, onde moro e outras informações que ajudariam os visitantes a se conectarem comigo em um nível mais pessoal.
Essas personalizações me ajudaram a criar meu próprio tema do WordPress sem precisar de um desenvolvedor.
Etapa 6. Configure uma página de contato
A última coisa que eu queria era uma página de contato desordenada e confusa. Embora o tema Elite Consulting Business viesse com uma página de contato pré-construída, ela parecia um pouco sobrecarregada.
Decidi simplificar drasticamente as coisas. Excluí a maior parte do conteúdo padrão e o substituí pelo bloco Formulário de contato do SeedProd. Esse bloco facilita muito a integração com o WPForms, um dos plug-ins de criação de formulários mais populares do WordPress.
Observação rápida: o WPForms não vem junto com o SeedProd, mas você pode baixar a versão gratuita do WPForms no diretório de plug-ins do WordPress - ele tem tudo o que você precisa para um formulário de contato básico.
Com o WPForms instalado, é possível criar um formulário de contato diretamente no SeedProd, sem a necessidade de mexer em configurações complicadas ou códigos de acesso.
Etapa 7. Ajustar as configurações globais do tema
Meu site estava realmente começando a ficar pronto. Agora, era hora de dar os toques finais que o deixariam com uma aparência super polida e profissional. Entre nas configurações globais do SeedProd.
O modelo Global CSS está nalista de modelos de tema- basta clicar em "Edit Design" para abri-lo. Esse é o seu centro de comando para controlar a aparência geral do seu site.
Cores
Primeiro, você deve garantir a consistência das cores em todas as páginas. O SeedProd facilita isso, permitindo que você defina cores globais para tudo, desde cabeçalhos e textos até botões, links e planos de fundo.
Fontes e tipografia
Embora eu gostasse da fonte padrão do tema Elite Consulting Business, queria ajustar o peso e as cores das fontes dos cabeçalhos e links para que correspondessem melhor à estética da minha marca.
Histórico
Para manter a consistência, alterei a cor geral do plano de fundo da página. O SeedProd permite até mesmo adicionar uma imagem de fundo aqui, se você quiser caprichar.
Botões
Os botões são essenciais para as chamadas para ação, portanto, certifique-se de que eles se destaquem. Brinque com diferentes estilos de fonte, cores e raio de borda até encontrar o visual ideal.
CSS personalizado
O SeedProd ainda oferece a opção de adicionar seu próprio CSS personalizado. É aqui que as coisas ficam um pouco mais técnicas, mas isso lhe dá ainda mais controle sobre seu design.
Por exemplo, usei um trecho de CSS personalizado para fazer com que o botão de envio de formulário do WPForms correspondesse ao estilo de meus outros botões.
Se quiser, você pode seguir meu guia sobre como adicionar CSS personalizado no WordPress.
Etapa 8. Publicar o tema personalizado do WordPress
Depois de dedicar tanto cuidado ao design do seu tema WordPress personalizado, não deixe de fazer as verificações finais. Use o recurso de visualização integrado para verificar novamente a aparência de tudo em diferentes tamanhos de tela, de desktops a tablets e smartphones.
Você deve garantir que seu tema tenha uma aparência fantástica, independentemente de como as pessoas o visualizem.
É claro que você também deve testar seus elementos interativos. Envie uma mensagem de teste por meio do seu formulário de contato (e faça uma dancinha da vitória quando ela chegar à sua caixa de entrada! 🎉)
Cliquei em todos os botões e links do menu, só para ter certeza de que eles levavam aos lugares certos.
Finalmente, o momento da verdade. Volte para o SeedProd Theme Builder, respire fundo e encontre a opção "Enable SeedProd Theme" (Ativar tema do SeedProd) no canto superior direito. Com um clique satisfatório, coloque-o na posição "ligado".
Seu tema personalizado do WordPress está no ar! Agora você pode visitar seu site e vê-lo em ação.
Outras maneiras de criar um tema WordPress personalizado (sem o SeedProd)
Agora, entendo que nem todos que estão lendo este guia desejam seguir meu processo de criação de modelos e temas personalizados. Com isso em mente, pesquisei algumas outras maneiras de criar um design de site profissional.
| Método | Dificuldade | Codificação? | Melhor para |
|---|---|---|---|
| Codificação tradicional | Avançado | Sim (PHP, HTML, CSS, JS) | Desenvolvedores, agências |
| Sublinhados (_s) | Intermediário | Sim (PHP, CSS) | Desenvolvedores aprendendo sobre desenvolvimento de temas |
| Temas infantis | Iniciante/Intermediário | Algumas CSS | Entusiastas do WordPress |
| Temas de blocos | Intermediário | Não | Usuários modernos do WordPress |
Cada um deles tem seu lugar, mas ainda assim podem parecer limitadores se você estiver tentando criar um tema do WordPress sem codificação. Os temas filhos exigem ajustes de CSS, e os temas de bloco nem sempre são fáceis de usar para iniciantes. O SeedProd oferece uma verdadeira experiência sem código com controle total do design visual, para que você possa criar um tema totalmente personalizado sem tocar no código.
Se você estiver procurando uma maneira rápida e flexível de criar um tema com a aparência exata que deseja, o SeedProd é a opção que sempre utilizo.
Exemplos de temas personalizados do WordPress para sites reais
Não tem certeza do que criar com seu tema personalizado? Aqui estão exemplos reais que você pode seguir para criar o site perfeito para a sua rede, todos criados com o construtor visual do SeedProd e alguns ajustes simples.
- Profissionais de condicionamento físico: Siga este guia para criar um site de personal trainer que mostre serviços, depoimentos e opções de reserva.
- Igrejas e organizações sem fins lucrativos: Saiba como criar um site de igreja com eventos, sermões e recursos de doação.
- Restaurantes e cafeterias: use este tutorial para criar um site de restaurante completo com menus, horários e formulários de reserva.
- Lojas on-line: Deseja vender produtos? Este guia mostra como configurar uma loja on-line no WordPress com um tema personalizado e controle total do layout.
- Fotógrafos e profissionais de criação: Veja como criar um site de fotografia que destaque seu trabalho com layouts arrojados e visuais.
- Agentes imobiliários: Siga este guia para criar um site de imobiliária com grades de listagem, formulários de leads e incorporação de mapas.
- Autores e blogueiros: Saiba como criar um site de autor no WordPress para promover seus livros, recursos de mídia e eventos.
- Casamentos e eventos: Use este passo a passo para criar um site de casamento com formulários RSVP, seções de histórias e galerias de fotos.
Perguntas frequentes
Criar um tema personalizado para qualquer site WordPress
Com as ferramentas certas, qualquer pessoa pode projetar um tema personalizado do WordPress e criar um site que se adapte exatamente à sua visão, sem a necessidade de um desenvolvedor. Quer esteja criando um blog pessoal, um site comercial ou algo totalmente exclusivo, agora você tem controle total sobre a aparência e o funcionamento do site.
Se você estiver pronto para ir ainda mais longe, aqui estão mais alguns guias úteis que combinam bem com seu novo tema personalizado:
- Como criar uma página de blog no WordPress
- Como duplicar uma página no WordPress
- Como criar uma imagem em destaque para postagens de blog
- Como iniciar um blog para mães no WordPress
- Como iniciar um blog de viagens e ganhar dinheiro
Obrigado pela leitura! Se tiver dúvidas ou quiser compartilhar seu tema personalizado, deixe um comentário abaixo. E siga-nos no YouTube, X (antigo Twitter) e Facebook para obter mais dicas e tutoriais sobre o WordPress.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
