Você deseja criar layouts personalizados do WordPress para o seu site para dar a ele um visual único?
Independentemente do seu conjunto de habilidades, é fácil criar um layout personalizado do WordPress sem precisar contratar um desenvolvedor.
Neste artigo, mostraremos como criar um layout personalizado do WordPress usando o melhor plugin construtor de páginas do WordPress, o SeedProd. Também mostraremos como fazer isso usando o Beaver Builder.
Muitos de vocês devem estar se perguntando, por que criar um layout personalizado quando você pode simplesmente escolher um tema premium e iniciar sua página com um de seus layouts pré-construídos.
Por que Criar Layouts Personalizados do WordPress
Você encontrará uma série de temas premium do WordPress que oferecem vários layouts impressionantes integrados, prontos para serem usados imediatamente. Você definitivamente pode optar por esses belos layouts e dar ao seu site um visual atraente.
Mas o problema com esses layouts é que, devido à sua disponibilidade imediata, eles são amplamente utilizados por centenas e milhares de usuários em toda a web.
Isso significa que, se você estiver usando um layout pré-construído para o seu site WordPress, não conseguirá dar um visual distinto, a menos que o personalize bastante. Além disso, esses layouts podem não atender aos seus requisitos. Criar um layout personalizado é a melhor opção nesses casos.
Se você optar por usar o Gutenberg (editor de blocos), não terá a facilidade e a liberdade de projetar seu site da maneira que deseja. Pode ser necessário adicionar seu próprio CSS para aprimorar seus modelos de postagem única personalizados.
Criando um Layout Personalizado do WordPress com SeedProd
A melhor maneira de criar layouts personalizados visualmente impressionantes para o seu site WordPress é usar o construtor SeedProd.
SeedProd é amigável para iniciantes e oferece a capacidade de editar o front-end do seu site visualmente. Você nunca precisará usar codificação ou fazer alterações cegas apenas para ver uma prévia e perceber que não funciona.
SeedProd é, sem dúvida, a melhor maneira de criar layouts personalizados para WordPress. Você pode ler mais sobre este plugin aqui: Revisão do SeedProd.
Para criar um layout personalizado para o seu site, você precisará instalar e ativar o SeedProd em seu site.
Em seguida, vá para o seu painel wp-admin, e você verá o SeedProd na barra de tarefas esquerda.
Isso permitirá que você acesse o painel do SeedProd. Dentro, você pode escolher usar um kit de tema pré-fabricado ou construir páginas de destino individuais. Para este tutorial, selecionaremos Construtor de Temas » Kits de Modelos de Temas.
Agora você verá uma biblioteca de kits que pode escolher. Esses kits vêm com imagens de destaque e conteúdo fictício que você pode editar rapidamente para torná-los seus.
Depois de escolher um kit, todas as páginas e posts do kit serão importados e publicados em seu site. Você pode usar isso para criar modelos para suas páginas e posts.
Para personalizar o layout do post, selecione Editar Design em Post Único.
Agora o construtor visual de arrastar e soltar será aberto, onde você verá uma prévia ao vivo da sua página, juntamente com opções de personalização para editá-la.
Para fazer edições no seu modelo de página personalizado, você pode simplesmente selecionar qualquer post e você terá opções para editar o conteúdo, tipografia, cor, fundo e muito mais. Para adicionar novos blocos, basta arrastar um bloco do menu esquerdo e colocá-lo onde desejar em seu design, assim:
Você verá blocos pré-fabricados para adicionar:
- Posts
- Título da Postagem
- Conteúdo do Post
- Resumo do Post
- Biografia do Autor do Post
- Comentários
- Logo do Site
- Navegação de Postagem
…e muito mais. Você também verá blocos para adicionar texto, espaçamento, imagens, botões, colunas, formulários de contato, contadores regressivos, sorteios e outros widgets.
O SeedProd também se integra com WooCommerce, para que você possa adicionar campos personalizados como grades de produtos, botões de adicionar ao carrinho e checkout e muito mais.
Basicamente, você tem controle total sobre cada nova postagem que publica no seu blog WordPress.
O SeedProd é tão fácil de usar que, mesmo para iniciantes, não há muito o que aprender.
Mostraremos o básico e você poderá explorar os recursos avançados por conta própria. Ao selecionar um bloco, você verá que ele é destacado em laranja. Em seguida, você verá um menu aparecer acima do bloco onde você pode mudar sua posição, excluí-lo, duplicá-lo e muito mais.
Para alterar ou excluir uma linha inteira, você pode selecionar a linha e verá que ela é destacada em roxo.
Assim, você pode destacar a linha e usar o símbolo de Mais para adicionar uma nova linha. Você verá layouts dos quais pode escolher.
Em seguida, você pode selecionar o ícone de navegação para arrastá-lo e soltá-lo em outra área da página. Para reordenar linhas e blocos, tudo o que você precisa fazer é segurá-lo e movê-lo para onde quiser.
O SeedProd vem com seções e blocos inteligentes que você pode adicionar à sua página. No menu esquerdo, selecione a aba 'Seções'. Aqui, você encontrará cabeçalhos prontos, chamadas para ação, FAQs, rodapés e muito mais.
Você pode escolher blocos de conteúdo de largura total ou selecionar um com um layout pré-fabricado. Usando esses recursos, você pode criar um layout personalizado para seu site em pouco tempo. Você também pode adicionar um nome de modelo e salvá-lo para uso futuro.
Os designs são automaticamente responsivos. Você pode até usar a visualização móvel para garantir que o design do seu site fique bom em dispositivos móveis.
É isso! É realmente simples criar um layout personalizado para o seu site com o SeedProd.
O SeedProd é, sem dúvida, a melhor opção para criar um layout personalizado no WordPress. Você obtém modelos de postagem simples pré-fabricados que facilitam a criação de diferentes layouts para o seu site.
Além disso, você pode continuar a criar novas postagens do WordPress usando este modelo que você criou.
Existe uma versão gratuita do SeedProd no repositório de plugins do WordPress. A versão pro lhe dá acesso a recursos incríveis para o seu site.
Criando um Layout Personalizado do WordPress com o Beaver Builder
O plugin Beaver Builder é um popular construtor de páginas de arrastar e soltar que permite criar layouts deslumbrantes para o seu blog WordPress em poucos minutos.
A melhor coisa sobre este plugin é o nível de flexibilidade que ele oferece. Você pode controlar quase tudo.
Cores, textos, fontes, imagens – tudo pode ser totalmente personalizado para obter o visual exato que você sempre sonhou.
Outra coisa que você vai adorar no Beaver Builder é que, ao contrário de outros plugins de construtor de páginas, ele é totalmente amigável para iniciantes e você não precisa passar horas descobrindo como usá-lo. Além disso, ele também oferece dezenas de modelos visualmente impressionantes para ajudá-lo a começar.
Confira nossa análise do Beaver Builder aqui. Vamos agora ver como criar seus layouts personalizados usando este plugin.
Passo 1: Instalando e Configurando o Beaver Builder no WordPress
O primeiro passo é instalar e ativar o Beaver Builder em seu site. Você pode baixar o plugin acessando o site do Beaver Builder. Assim que estiver ativado, vá para Configurações » Page Builder.
Aqui você pode inserir a chave de licença para habilitar o suporte e receber atualizações. Feito isso, você estará pronto para criar seu primeiro layout personalizado.
Passo 2: Criando Seu Primeiro Layout Personalizado
Para criar seu primeiro layout personalizado, vá para Todas as Páginas » Adicionar Nova no seu painel do WordPress. No seu editor de texto, você terá a opção de alternar para o construtor de páginas.
Basta clicar nesta opção e você verá a aba do construtor de páginas sendo iniciada. Você verá várias opções de modelos aqui. Então selecione o que você mais gosta para o seu layout. Você também pode clicar na seta suspensa e selecionar o tipo de layout que deseja. Isso pode ser para suas páginas de destino ou suas páginas de conteúdo.
Assim que isso for feito, você será direcionado para o construtor de arrastar e soltar. Para editar um campo específico, basta passar o mouse sobre essa área específica e, em seguida, clicar nela e começar a personalizar seu design.
Você pode adicionar até 6 colunas, barras laterais, áudios, imagens, separadores e mais aos seus layouts. Para adicionar linhas e barras laterais, clique nas abas Layouts de Linha. Em seguida, arraste o número de colunas que você deseja e solte-o em seu construtor visual.
Isso permite que você organize a hierarquia do seu modelo.
Assim que suas colunas forem adicionadas, basta clicar nelas e personalizá-las para atender às suas necessidades. Você pode alterar o fundo, a cor do texto, adicionar links, textos, bordas e mais às suas colunas. Essas colunas e linhas também podem ser salvas para uso posterior. Para isso, basta clicar no botão Salvar no final do pop-up.
Para outros elementos, você precisa usar a opção Módulos Básicos. Você também tem vários outros elementos que pode adicionar ao seu layout, como botões, acordeões, tabelas de preços, mapas, contadores regressivos e muito mais.
Você simplesmente precisa arrastar os elementos da direita e soltá-los no construtor visual à sua esquerda. Cada um desses elementos é personalizável. Então, por exemplo, se você quiser adicionar um novo título, basta clicar em Título e arrastá-lo e soltá-lo em seu layout. Depois disso, clique no elemento Título para personalizá-lo.
Você terá 3 abas diferentes aqui. Geral, Estilo e Avançado. A primeira permite adicionar seus textos, links, etc. aos seus títulos. A segunda aba permite estilizar seu título com cores, fontes, etc. diferentes. A opção Avançado permite trabalhar nas margens, visibilidade, responsividade, animação, etc.
Você pode adicionar quantos elementos e módulos quiser usando o mesmo método e, em seguida, personalizá-lo para atender às suas necessidades. Os menus suspensos aqui facilitam muito isso.
Depois de editar seus layouts, clique no botão Concluído no canto superior direito da sua tela. Você verá um novo pop-up com várias opções diferentes, como as mostradas na captura de tela abaixo.
Usando essas opções, você pode Salvar seu rascunho, Publicá-lo ou descartá-lo.
Etapa 3: Reutilizando seu layout
O Beaver Builder também permite salvar seu layout personalizado do WordPress e reutilizá-lo sempre que quiser. Para usar esta opção, vá para Ferramentas no canto superior direito da sua tela. Você verá as seguintes opções na sua tela.
Agora, dependendo de suas necessidades, selecione a opção. Se você quiser usar o modelo para uso posterior, clique na opção Salvar Modelo e, em seguida, nomeie seu layout. Depois disso, clique no botão Salvar.
Seu novo arquivo de modelo é salvo e está pronto para uso futuro a qualquer momento.
Etapa 4: Gerenciando seus modelos
Os layouts que você cria com o Beaver Builder podem ser usados em sites ilimitados. Os modelos criados por seus usuários são armazenados em um tipo de post personalizado chamado templates.
Por padrão, esta opção está oculta. Você pode torná-la visível acessando a aba Configurações » Page Builder » Templates.
Agora clique na opção Habilitar Administração de Templates e pressione o botão Salvar Configurações de Template. Ao fazer isso, você notará um novo item de menu chamado Templates aparecendo na sua barra de administração do WordPress. Todos os layouts de página que você salvar como um modelo aparecerão nessa página.
Exportando Seus Layouts do WordPress
Como os layouts que você cria são salvos como um tipo de post personalizado, você pode exportar facilmente seus modelos do Beaver Builder. Para isso, você tem o recurso de exportação integrado no WordPress. Para usar este recurso, vá para Ferramentas » Exportar página.
Agora selecione Templates. Clique na seta suspensa e selecione o modelo que você deseja exportar. Depois disso, pressione o botão Baixar Arquivo de Exportação e o WordPress enviará um arquivo XML para você baixar.
Importando Layouts do Beaver Builder
Para importar um layout, vá para o painel do site onde você deseja que este layout seja importado. Agora vá para Configurações » Importar » WordPress. Clique na opção Instalar Agora sob a aba WordPress. Isso baixará e instalará o plugin importador do WordPress.
Assim que o plugin for baixado, você poderá carregar o arquivo XML que acabou de baixar. Seu layout agora está pronto para ser usado em seu outro site também.
E é isso. Você agora pode criar layouts de post personalizados em pouco tempo sem nunca tocar em arquivos PHP, HTML e outras codificações. Esperamos que você tenha gostado do nosso tutorial.
Se você gostou, talvez também queira conhecer algumas das outras alternativas ao Beaver Builder que você pode experimentar.
Comentários Deixe uma Resposta