Como criar um layout personalizado do WordPress (passo a passo)

layouts personalizados, construtor de castores


Deseja criar layouts personalizados do WordPress para o seu site para dar uma aparência única?

Independentemente do seu conjunto de habilidades, é fácil criar um layout personalizado do WordPress sem a necessidade de contratar um desenvolvedor.

Neste artigo, mostraremos como criar um layout personalizado do WordPress usando um plug-in de renome do construtor de páginas do WordPress, Beaver Builder.

Muitos de vocês devem estar se perguntando por que criar um layout personalizado quando podem simplesmente escolher um tema premium e iniciar sua página com um de seus layouts pré-criados..

Por que criar layouts personalizados do WordPress

Você encontrará vários temas premium do WordPress que oferecem vários layouts internos impressionantes, prontos para serem usados ​​imediatamente. Você pode definitivamente optar por esses belos layouts e dar ao seu site uma aparência atraente.

Mas o problema com esses layouts é que, devido à sua disponibilidade imediata, eles são amplamente utilizados por centenas e milhares de usuários na web.

Isso significa que, se você estiver usando um layout predefinido para o seu site WordPress, não poderá dar uma aparência distinta, a menos que a personalize muito. Além disso, esses layouts também podem não atender aos seus requisitos. Construir um layout personalizado é a melhor opção nesses casos.

Criando um layout personalizado para WordPress

A melhor maneira de criar layouts personalizados visualmente impressionantes para o seu site é usar o plug-in Beaver Builder. O Beaver Builder é um popular plugin para arrastar e soltar páginas que permite criar alguns dos layouts mais impressionantes em questão de minutos.

Beaver Builder

A melhor coisa sobre esse plug-in é o nível de flexibilidade, se for oferecido. Você pode assumir o controle de quase tudo.

Cores, textos, fontes, imagens – tudo pode ser totalmente personalizado para obter a aparência exata com que você sempre sonhou.

Outra coisa que você vai adorar no Beaver Builder é que, diferente de qualquer outro plug-in do construtor de páginas, é totalmente amigável para iniciantes e você não precisa gastar horas tentando descobrir como usá-lo. Além disso, também oferece dezenas de modelos visualmente impressionantes para ajudar você a começar.

Confira nossa análise do Beaver Builder aqui. Vamos agora ver como criar seus layouts personalizados usando este plug-in.

Etapa 1: instalando e configurando o Beaver Builder no WordPress

O primeiro passo é instalar e ativar o Beaver Builder no seu site. Você pode baixar o plug-in acessando o site do Beaver Builder. Depois de ativado, vá para Configurações »Construtor de Páginas.

Configurações do Beaver Builder

Aqui você pode inserir a chave de licença para ativar o suporte e receber atualizações. Depois de pronto, você está pronto para criar seu primeiro layout personalizado.

Etapa 2: Criando seu primeiro layout personalizado

Para criar seu primeiro layout personalizado, vá para Todas as páginas »Adicionar novo no seu painel do WordPress. No seu editor de texto, você terá a opção de mudar para o construtor de páginas.

Basta clicar nesta opção e você verá a guia do criador de páginas sendo lançada. Você verá várias opções de modelo aqui. Então selecione o que você mais gosta no seu layout. Você também pode clicar na seta suspensa e selecionar o tipo de layout que deseja. Pode ser para suas páginas de destino ou suas páginas de conteúdo.

Feito isso, 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 clicar nele e começar a personalizar seu design..

Você pode adicionar até 6 colunas, barras laterais, áudios, imagens, separadores e muito mais aos seus layouts. Para adicionar linhas e barras laterais, clique no ícone Layouts de linha guias. Em seguida, arraste o número de colunas que você deseja e solte-o no seu construtor visual.

Depois que suas colunas forem adicionadas, basta clicar nelas e personalizá-las para atender aos seus requisitos. Você pode alterar o plano de fundo, a cor do texto, adicionar links, textos, bordas e muito mais às suas colunas. Essas colunas e linhas também podem ser salvas para uso posterior. Para isso, basta clicar no Salve  botão no final do pop-up.

Para outros elementos, você precisa usar o Módulos Básicos opção. Você também tem vários outros elementos que podem ser adicionados ao seu layout, como botões, acordeões, tabelas de preços, mapas, temporizadores de contagem regressiva 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. Por exemplo, se você deseja adicionar um novo título, basta clicar em Título arraste e solte no seu layout. Depois disso, clique no elemento Título para personalizá-lo.

Você terá três guias diferentes aqui. Geral, Estilo e Avanço. O primeiro permite adicionar textos, links etc. aos seus cabeçalhos. A segunda guia permite estilizar seu cabeçalho com diferentes cores, fontes, etc. Avançado A opção permite trabalhar nas margens, visibilidade, capacidade de resposta, animação, etc..

Você pode adicionar quantos elementos e módulos desejar usando o mesmo método e personalizá-lo para atender aos seus requisitos.

Depois de editar seus layouts, clique no ícone Feito no canto superior direito da tela. Você verá um novo pop-up com várias opções diferentes, como as mostradas na captura de tela abaixo.

construtor castor salvar layout

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 a qualquer momento. Para usar esta opção, vá para Ferramentas no canto superior direito da tela. Você verá as seguintes opções na tela.

ferramentas construtor castor

Agora, dependendo dos seus requisitos, selecione a opção. Se você deseja usar o modelo para uso posterior, clique no Salvar modelo opção e nomeie seu layout. Depois que bateu o Salve  botão.

layouts wordpress salvar tempate

Etapa 4: Gerenciando seus modelos

Os layouts criados com o Beaver Builder podem ser usados ​​em sites ilimitados. Os modelos criados por seus usuários são armazenados em um tipo de postagem personalizado chamado modelos.

Por padrão, esta opção está oculta. Você pode torná-lo visível acessando Configurações »Construtor de Páginas» Modelos aba.

Agora clique no Ativar administrador de modelos opção e pressione o Salvar configurações do modelo botão. Ao fazer isso, você notará um novo item de menu chamado Modelos, aparecendo na sua barra de administração do WordPress. Todos os layouts de página que você salvar como modelo aparecerão nessa página.

Exportando seus layouts do WordPress

Como os layouts criados são salvos como um tipo de postagem personalizado, é possível exportar facilmente seus modelos do Beaver Builder. Para isso, você tem o recurso de exportação embutido no WordPress. Para usar esse recurso, vá para Ferramentas »Exportar página.

exportação de layout wordpress

Agora selecione Modelos. Clique na seta suspensa e selecione o modelo que deseja exportar. Depois disso, pressione o Baixar arquivo de exportação botã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 em que deseja que esse layout seja importado. Agora vá para Configurações »Importar» WordPress. Clique na opção Instalar agora na guia WordPress. Isso fará o download e instalará o plugin importador do WordPress.

Após o download do plug-in, você pode fazer o upload do arquivo XML que você acabou de baixar. Seu layout agora está pronto para ser usado em outro site também.

E é isso. Esperamos que você tenha gostado do nosso artigo. Se você o fez, também poderá conhecer algumas das outras alternativas do Beaver Builder que pode experimentar.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map