Você quer criar um tema personalizado do WordPress do zero?
No passado, você precisava seguir tutoriais complicados do WordPress e ter um bom conhecimento de codificação para criar um tema personalizado do WordPress. Mas, graças aos novos construtores de temas do WordPress, agora você pode criar um facilmente sem aprender nenhuma habilidade de programação.
Neste artigo, mostraremos como criar facilmente um tema personalizado do WordPress sem escrever nenhum código.
Aqui está a lista de tópicos que abordaremos neste artigo.
- Criando um Tema Personalizado do WordPress para Iniciantes
- Criando um Tema Personalizado com o SeedProd Theme Builder
- Editando um Tema com o SeedProd Theme Builder
- Alterando o Design do Site para o Seu Tema
- Aplicando e Publicando Seu Tema Personalizado do WordPress
- Criando Outros Layouts para o Seu Tema Personalizado do WordPress
Pronto? Vamos começar.
Tutorial em Vídeo
Se você preferir instruções escritas, continue lendo.
Criando um Tema Personalizado do WordPress para Iniciantes
Um site WordPress usa um tema para o layout e design do site. Esses temas são compostos por arquivos de modelo escritos em PHP, HTML, CSS e JavaScript.
Normalmente, você precisaria ter um bom entendimento de todas essas linguagens de design web ou contratar um desenvolvedor web para criar um tema personalizado do WordPress.
Se você contratou um desenvolvedor ou agência, então o custo de um tema personalizado do WordPress pode chegar a milhares de dólares.
Como muitos proprietários de pequenas empresas não podiam arcar com os altos custos de um tema personalizado do WordPress, muitos deles se contentavam com temas padrão. Aqueles que não queriam se contentar usavam um construtor de páginas do WordPress ou um framework de tema para criar um tema personalizado.
Embora os frameworks de temas do WordPress tenham facilitado a criação de um tema do WordPress, eles são uma solução para desenvolvedores, não para o proprietário médio de um site.
Por outro lado, os plugins de construtor de páginas do WordPress tornaram super fácil criar layouts de página personalizados usando uma interface de arrastar e soltar, mas eles eram limitados apenas a layouts de página única. Você não conseguia criar temas personalizados com eles.
É aqui que entra o SeedProd.
É o melhor plugin construtor de temas do WordPress que permite criar facilmente um tema personalizado do WordPress sem escrever nenhum código.
SeedProd é um construtor de páginas do WordPress com arrastar e soltar para empresas, blogueiros e proprietários de sites. Ele também vem com um novo designer de temas personalizado que permite apenas apontar e clicar para editar qualquer elemento.
Você também pode adicionar elementos de design comumente usados ao seu tema com arrastar e soltar.
A melhor coisa sobre o construtor de temas SeedProd é que ele é agnóstico em relação ao tema. Isso significa que ele não depende do seu tema WordPress existente para estilo ou funcionalidade, dando a você total liberdade e controle sobre o design do seu site.
Se você estiver procurando por uma alternativa, você também pode facilmente criar um tema personalizado do WordPress com o plugin Thrive Theme Builder.
Dito isso, vamos dar uma olhada em como criar seu tema personalizado do WordPress sem escrever nenhum código usando o SeedProd.
Criando um Tema Personalizado com o SeedProd Theme Builder
Configurar o construtor de temas do SeedProd é bastante simples, pois ele funciona com qualquer site WordPress usando qualquer tema.
Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Observação: Você precisará de pelo menos o plano Pro ou Elite para desbloquear o construtor de temas.
Após a ativação, vá para a página SeedProd » Configurações para inserir sua chave de licença do plugin. Você pode encontrar essas informações em sua conta no site do SeedProd.
Após inserir sua chave de licença, você está pronto para criar seu tema personalizado do WordPress usando o construtor de temas SeedProd.
Criar seu próprio tema personalizado do WordPress com o SeedProd é muito simples.
Primeiro, você precisa ir para a página SeedProd » Theme Builder. Aqui, você verá a lista de modelos para seu tema personalizado atual do SeedProd. Como ainda não começamos, temos apenas um modelo de CSS Global. Mostraremos como usá-lo mais tarde no tutorial.
Para começar, você tem duas opções.
- Use um dos temas SeedProd prontos como ponto de partida
- Crie modelos de tema manualmente do zero
Vamos dar uma olhada em como essas opções funcionam.
1. Começando com um Tema Pronto (Recomendado)
Recomendamos começar com um tema existente. Isso permite que o SeedProd gere automaticamente todos os arquivos de modelo. Estes são temas completos e projetados profissionalmente, o que lhe dá uma vantagem inicial na edição dos modelos de acordo com suas próprias necessidades.
Simplesmente clique no botão Temas e escolha um dos temas disponíveis. Existem temas diferentes para diferentes tipos de sites, então você pode escolher um que melhor atenda às suas necessidades.
Não se preocupe muito com o design e o layout neste momento. Todos esses temas são totalmente editáveis, então você pode alterar todos os aspectos dele dentro do construtor de temas.
Assim que você escolher um tema, o SeedProd gerará todos os modelos de tema.
Esta é a versão rascunho do seu tema personalizado do WordPress.
Mais tarde neste tutorial, mostraremos como editar esses arquivos de tema para projetar seu tema e, em seguida, publicar seu tema para aplicá-lo em seu site.
2. Crie Modelos de Tema Manualmente do Zero
Alternativamente, você pode iniciar seu tema do zero clicando no botão 'Adicionar Novo Modelo de Tema'. Você terá que dar um nome ao seu modelo e, em seguida, escolher um dos tipos de modelo para começar.
Atualmente, você tem a opção de escolher entre os seguintes tipos de modelo:
- Cabeçalho
- Rodapé
- Post Único
- Página Única
- Arquivo
- Resultados da Pesquisa
- Parte Global
- Página Personalizada
Você também pode definir condições para usar um modelo. Por exemplo, você pode aplicá-lo a todo o site ou a uma seção específica do seu site.
Assim que você salvar o modelo, o SeedProd o abrirá no construtor de temas, onde você poderá começar a editá-lo.
Editando um Tema com o SeedProd Theme Builder
Depois de gerar seus modelos de tema, você pode editá-los usando o SeedProd Theme Builder.
Simplesmente clique no link Editar Design abaixo de um arquivo de modelo para editá-lo.
Isso abrirá o arquivo do modelo no construtor de temas do SeedProd.
Você verá uma prévia ao vivo do modelo na coluna da direita com um painel de edição na coluna da esquerda.
Para alterar um item no seu arquivo de modelo, você pode simplesmente apontar e clicar para editá-lo.
Dependendo do tipo de item, você verá diferentes opções de edição na coluna da esquerda. Você poderá alterar fontes, cores, fundo, espaçamento e muito mais.
Para adicionar novos itens, você pode adicionar blocos do SeedProd da coluna da esquerda. Ele vem com vários tipos de blocos que você pode adicionar ao seu modelo.
1. Blocos de Tags de Modelo
Blocos de tags de modelo são os blocos dinâmicos que permitem gerar elementos de tema dinamicamente do seu banco de dados do WordPress.
Por exemplo, você pode usar o bloco Posts para listar suas postagens recentes ou o bloco Post Content para exibir o conteúdo da postagem ou página exibida no momento.
2. Blocos Padrão
Em seguida, você tem seus blocos padrão para adicionar elementos comuns de design da web ao modelo do seu tema.
Você pode usá-los para adicionar texto, mídia, botões, colunas, divisores e muito mais.
3. Outros Blocos
Outros blocos avançados permitem que você adicione formulários de contato, perfis sociais, botões de compartilhamento, shortcodes do WordPress, Google Maps, listas de preços, contadores regressivos e muito mais.
O SeedProd também vem com integração completa com o WooCommerce.
Se você administra uma loja online, então você pode usar os blocos do WooCommerce no seu tema.
Você pode criar modelos WooCommerce completamente personalizados com uma página de carrinho personalizada e experiência de checkout.
Usando Seções Para Layouts Rápidos de Tema
Além dos blocos, você também pode adicionar seções completas ao modelo do seu tema.
Simplesmente mude para a aba Seções no painel Design.
Seções são grupos de blocos para diferentes áreas do design de sites. Por exemplo, você encontrará seções prontas para usar para seu cabeçalho, rodapé, chamadas para ação, recursos e muito mais.
Simplesmente clique em uma seção para adicioná-la ao seu modelo de tema e, em seguida, edite-a de acordo com suas próprias necessidades.
Usando o Construtor de Sites com IA para Gerar Conteúdo Instantaneamente
O SeedProd também oferece um poderoso Construtor de Sites com IA que criará automaticamente o conteúdo escrito para o seu modelo de tema. Você pode gerar instantaneamente títulos envolventes, descrições, chamadas para ação, texto do corpo e muito mais.
Simplesmente clique em qualquer bloco de Título ou Texto do construtor do SeedProd para abrir o painel de configurações no lado esquerdo. Em seguida, clique no botão 'Gerar Texto com IA'.
Em seguida, digite um prompt no campo de texto, que é basicamente uma descrição do que você deseja que o assistente de IA escreva para você. Ou, você pode escolher um prompt sugerido da lista.
Depois disso, clique no botão 'Gerar Texto'.
Em apenas alguns segundos, o SeedProd criará o conteúdo automaticamente para você. A partir daí, você pode otimizar o texto, alterar o tom e até mesmo traduzir o texto para mais de 50 idiomas.
Quando estiver satisfeito com o conteúdo, clique no botão 'Inserir' para adicioná-lo ao seu modelo de tema.
Você também pode usar a integração DALL-E do Construtor de Sites com IA para gerar imagens originais automaticamente para o seu tema.
Basta arrastar um bloco de Imagem para a sua página e clicar nele para abrir o painel de configurações. Em seguida, clique no botão ‘Adicionar com IA’.
Em seguida, digite uma descrição da imagem que você deseja criar e clique no botão ‘Gerar Imagem’.
Assim que a imagem for gerada, o SeedProd a exibirá. Para adicionar a imagem ao seu modelo de tema, clique no botão ‘Inserir’.
Você também pode editar a imagem com IA, bem como gerar variações da imagem, para que ela corresponda à visão exata que você tinha em mente.
Salvando e Publicando Seu Modelo
Assim que estiver satisfeito com o design, você pode simplesmente clicar no botão Salvar e selecionar Publicar para salvar seu modelo.
Repita o processo para editar outros arquivos de modelo com seu próprio conteúdo e necessidades de design.
Alterando o Design do Site para o Seu Tema
Ao editar seus modelos de tema, você vai querer ter certeza de que seu design é consistente em todo o seu site.
Por exemplo, você provavelmente vai querer usar o mesmo estilo de tipografia, tamanhos de fonte, cores e outros estilos visuais em todas as páginas.
Em temas tradicionais do WordPress, você tinha que fazer isso manualmente editando arquivos CSS complexos. Esse processo exigia o uso da ferramenta de Inspeção do navegador, a localização de classes CSS, o aprendizado de código e muito mais.
O SeedProd também torna isso super fácil.
Em vez de escrever código CSS, você pode simplesmente editar o template CSS Global.
O template CSS Global permite que você visualize elementos comuns do site e, em seguida, basta clicar neles para editar suas propriedades.
Aplicando e Publicando Seu Tema Personalizado do WordPress
Uma vez que você esteja satisfeito com seu tema personalizado do WordPress, o passo final é ativá-lo em seu site WordPress.
O SeedProd permite que você aplique seu tema personalizado do WordPress com uma simples troca.
Simplesmente vá para a página SeedProd » Theme Builder e alterne o interruptor ao lado da opção 'Enable SeedProd Theme' para 'Yes'.
O SeedProd agora substituirá o tema existente do WordPress pelo tema personalizado do WordPress que você criou.
Agora você pode visitar seu site para ver seu tema personalizado do WordPress em ação.
Criando Outros Layouts para o Seu Tema Personalizado do WordPress
Agora que você criou seu tema personalizado do WordPress, você tem a opção de estender sua funcionalidade e criar mais designs e layouts com base em seu tema.
O SeedProd torna isso extremamente fácil.
Você ainda pode ajustar seu tema personalizado do WordPress e criar vários templates para diferentes seções do seu site.
Por exemplo, você pode querer adicionar um novo template de cabeçalho ao seu tema que é exibido apenas em categorias específicas.
Da mesma forma, você pode querer criar um template para páginas ou posts específicos.
Você também pode adicionar isso ao seu tema.
Que tal criar landing pages personalizadas?
O SeedProd também cuida disso para você.
Você pode simplesmente ir em SeedProd » Landing Pages e clicar no botão Adicionar Nova Landing Page para criar uma.
Para mais detalhes, veja nosso tutorial sobre como criar uma landing page com WordPress.
Usando o construtor de temas de arrastar e soltar e fácil de usar do SeedProd, você pode facilmente criar qualquer tipo de layout personalizado que precisar.
Esperamos que este artigo tenha ajudado você a aprender como criar um tema personalizado para WordPress sem precisar aprender a codificar. Você também pode querer ver nosso guia sobre como acelerar seu site WordPress para melhor SEO e experiência do usuário, ou nossas escolhas das melhores soluções de análise para WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Mrteesurez
Isso é incrível, que ferramenta incrível de uma equipe incrível. O Seedprod é realmente poderoso para criar um tema WordPress sem codificação ou lidar com jargões técnicos, ele até tem modelos de tema inicial para começar.
Mas é possível instalar o tema ou usá-lo em outro site WordPress?
WPBeginner Support
Você pode exportar seus arquivos de tema para usar em um site diferente usando o SeedProd.
Admin
Mrteesurez
Fico feliz em saber que posso exportar meu arquivo de tema e usá-lo em outro lugar, obrigado por dedicar seu tempo para responder. Significa que preciso ter o Seedprod instalado no site onde pretendo usar o tema.
Jiří Vaněk
Essa é uma ótima ideia, Mrteesurez, que na verdade nunca me ocorreu, e fico feliz que a equipe do WPBeginner tenha confirmado que é possível. Eu também tenho o SeedProd e estou interessado nessa ideia. Existe algum guia para isso em algum lugar, ou você planeja criar um?
Ayanda Temitayo
Uau, o tempo todo eu acreditei que apenas programadores PHP muito bons podiam criar temas para WordPress. Nunca pensei que você pudesse criar um tema com outro plugin do WordPress. Este é um grande desenvolvimento para o WordPress e obrigado ao WordPress e à sua comunidade de desenvolvedores entusiasmados por torná-lo incrível a cada dia que passa.
O SeedProd é muito poderoso. Estou aprendendo seus recursos e também tentarei implementá-lo.
Artigo incrível
WPBeginner Support
Thank you and glad we could share how to make a theme without the requirement of coding knowledge
Admin
Mrteesurez
Eu senti o mesmo inicialmente! É incrível como o WordPress evoluiu, tornando a criação de temas acessível a mais pessoas sem a necessidade de ser um especialista em codificação. O SeedProd é realmente um divisor de águas com seu construtor de arrastar e soltar e modelos pré-fabricados. Ele ajuda a criar temas personalizados rapidamente, o que teria levado muito mais tempo se fosse preciso codificar tudo do zero. Olhando para o futuro, estou animado com as possibilidades de integrar ferramentas de design com IA ao WordPress. É incrível como a plataforma continua inovando, tornando-a mais fácil e poderosa para usuários de todos os níveis.
Moinuddin Waheed
Até agora, havia um burburinho no mercado do WordPress sobre criação de páginas e aqui vem mais um avanço na forma de desenvolvimento de temas personalizados, mesmo sem nenhuma base de conhecimento de código.
Obrigado WordPress e sua comunidade de desenvolvedores entusiasmados por torná-lo incrível a cada dia que passa.
O SeedProd é muito poderoso. Estou aprendendo seus recursos e implementando em meus sites.
Satish
Como o wpbeginner projetou sua página inicial?
WPBeginner Support
We created a theme for ourselves
Admin
Fahad
Podemos vender esses temas?
WPBeginner Support
Você gostaria de codificar manualmente um tema em vez de usar este método se quisesse vender um tema.
Admin
Flox
Obrigado pela postagem. É realmente útil para mim criar um site. Obrigado...
WPBeginner Support
You’re welcome, glad our article was helpful
Admin
Hosli
Olá equipe,
Posso criar uma landing page usando isso?
WPBeginner Support
Embora você não precise do Beaver Themer no momento, você pode usar o Beaver Builder para criar uma página de destino
Admin
Irene
Obrigado pelo tutorial. Pergunta rápida: posso também re-adicionar minhas barras laterais depois de construir um novo tema personalizado com o Beaver. Se sim, como posso fazer isso, por favor.
WPBeginner Support
Você precisaria voltar ao personalizador para adicionar a barra lateral de volta
Admin
Louise Findlay
Quais são os benefícios de usar o Beaver Themer em vez de apenas o Beaver Builder?
WPBeginner Support
Difere com base no que edita, o Beaver Builder é para editar a área de conteúdo enquanto o Beaver Themer é para locais que não sejam a área de conteúdo
Admin
Kathy Smith
Depois que eu crio um tema, posso usá-lo para outros sites sem precisar do Beaver Builder?
WPBeginner Support
No momento, exigiria o Beaver Builder para funcionar em outros sites também.
Admin
Athena
Pergunta de novato.. o que acontece com todo o meu conteúdo existente, como páginas e widgets (atualmente usando o tema Asta), etc., enquanto estou fazendo isso, ou estou primeiro construindo um site separado dentro do WordPress e, em caso afirmativo, como transfiro tudo?
Obrigado
WPBeginner Support
Your posts and pages would remain, you would normally need to readd the widgets for the new widget areas
Admin
Vince
Não experimentei o Beaver Builder, mas ele funciona como o Divi? Eles são semelhantes? Se for, então eu diria que até agora, não importa que tipo de tema, não encontrei um tema que dê 0% de codificação.
Sim, é possível construir uma página ou um tema com 0% de codificação. MAS, normalmente existem recursos que um tema não possui, mas o cliente exigiria para o seu site e, portanto, precisaria codificar.
WPBeginner Support
If you visit the Beaver Builder site there is the option for you to try the live demo to see how it works
Admin
Sayed Ezhar
Ótimo! Vamos tentar isso. Obrigado.
WPBeginner Support
You’re welcome
Admin
Zulqar
Olá,
Sou novato e fã do site WP Beginner. Não sei programar, então esta postagem é uma revelação para mim!
Uma pergunta rápida - Tenho tentado entender o Generate Press. Parece que preciso aprender um pouco de codificação para mexer no layout ou criar botões. Você tem algum conselho para mim?
Obrigado por ajudar a comunidade WP Beginner!
Atenciosamente.
WPBeginner Support
Se você for ao site do Generate Press, eles têm uma página de documentação para ajudá-lo como ponto de partida para o plugin deles.
Admin
kat
Atualmente, estou usando o Adobe Muse para criar vários sites de clientes, porque é rápido e fácil, e WYSIWYG.
Mas a Adobe o descontinuou. Preciso converter TODOS os meus sites de clientes para outro software. Meu provedor de hospedagem tem C-panel, então posso obter o aplicativo WordPress e publicar nos domínios.
Esse processo me permitirá recriar os designs que já construí e que os clientes desejam, e quão complexo um site pode se tornar usando isso?
Eu jogo no Wordpress, eu não TRABALHO no WP.
WPBeginner Support
You would want to reach out to Beaver Builder’s support for specifics on the design depending you your needs
Admin
Mohamed Hassan
Obrigado pelas ótimas informações!
WPBeginner Support
You’re welcome
Admin
Sy
Mais um ótimo post! Obrigado.
Só estou me perguntando por que o WPBeginner sempre parece evitar o Elementor?
Construir um tema com o Elementor é muito semelhante a construí-lo com o Beaver Builder, mas o Elementor é mais rápido e você tem muito mais opções de estilo e elementos/módulos.
Adoro seu conteúdo!
WPBeginner Support
O Elementor Pro não ser compatível com GPL é uma das maiores preocupações ao recomendá-lo, dependendo do caso de uso do usuário.
Admin
Monique
Tutorial fantástico. Exatamente o que eu precisava. Obrigado!
WPBeginner Support
You’re welcome
Admin
Captaiing
Obrigado, vou experimentar
WPBeginner Support
We hope our article makes it easier for you
Admin
Muhammad Waqar
Obrigado por me ensinar sobre este plugin que é muito útil para mim. Este site é muito útil para mim. Obrigado novamente
WPBeginner Support
Glad our article could help
Admin
sajid
obrigado por compartilhar, muito informativo.
WPBeginner Support
You’re welcome
Admin
Louise Findlay
Estou considerando assumir um projeto de migração de um site do WordPress.com para a versão auto-hospedada e usar o Divi para reformulá-lo.
Seguindo a leitura do seu artigo sobre os melhores construtores de páginas do WordPress, o que você recomendaria: Beaver Builder ou Divi?
Com o Divi, você obtém uma variedade de temas e plugins da ElegantThemes, mas li críticas negativas sobre o bloqueio de temas e ser muito restritivo. Você tem alguma experiência pessoal com isso?
Com o Beaver Builder, parece que a funcionalidade do construtor de páginas é perfeita, embora pareça mais complexo com todas as opções espalhadas por várias páginas e você não obtém temas ou plugins com a assinatura.
Equipe Editorial
Ambas são excelentes opções e estão em nosso top 5.
O plugin Divi Page Builder funciona com outros temas também, então você não está preso à ElegantThemes. No entanto, como com qualquer tema, se você mudar de um tema para outro, poderá perder certos recursos. Mas é por isso que você tem que ter certeza de que o novo tema tem um conjunto de recursos comparável.
Desde que você esteja usando o plugin Divi Page Builder, você manterá os recursos de arrastar e soltar.
O benefício do Divi são os temas/layouts adicionais que a ElegantThemes oferece. No entanto, o benefício do Beaver Builder são as opções avançadas de personalização.
Admin
Richard Ross
Sem mencionar o fato de que o Beaver Builder não usa shortcodes para preencher as áreas de conteúdo.
Chris Nieass
Is not using short codes to populate content is a good thing? Be gentle, I’m a newbie
Rob Dewing
@Chris Nieass, sim, não usar shortcodes é um grande bônus do Beaver. Apenas ocasionalmente, mesmo nas melhores instalações, um construtor de páginas como Divi ou Beaver quebra. Quando o Divi quebra, você acaba com o conteúdo da página que fica feio com os shortcodes renderizados literalmente em toda a página. Se o mesmo acontecesse com o Beaver, você apenas teria seu conteúdo empilhado e legível em uma série de blocos na página, em vez de colunas bonitas.
O Divi é para designers que amam sua interface colorida e fácil de usar e o fato de que todos os seus amigos o usam. O Beaver é para pessoas que se importam com o bom funcionamento do site, facilidade de personalizações mais profundas, etc., etc.