Como criar uma barra lateral personalizada do WordPress sem código

Você quer aprender como criar uma barra lateral personalizada do WordPress sem código?

Uma barra lateral bem projetada melhora a experiência do usuário e facilita a navegação para eles. Mas personalizar sua barra lateral usando as configurações padrão do WordPress nem sempre é muito simples. E a codificação é ainda mais difícil.

Neste post, mostraremos como adicionar uma barra lateral no WordPress em algumas etapas simples.

Por que você deve adicionar uma barra lateral personalizada do WordPress

As barras laterais fornecem uma maneira simples, mas eficaz, de exibir informações importantes que você gostaria que os visitantes vissem. Em muitos sites WordPress, é comum dedicar barras laterais para fornecer links rápidos para postagens relacionadas, páginas de mídia social e formulários de optin.

Isso ajuda você a garantir a melhor experiência do usuário para seus usuários e permite que você direcione os visitantes para as áreas do seu site que você gostaria que eles vissem. Como resultado, as barras laterais permitem aumentar as visualizações de página, o tempo de permanência, o engajamento e as conversões.

Embora muitos temas do WordPress venham com barras laterais prontas, eles não fornecem o tipo de personalização visual fácil que você obtém com alguns plugins do WordPress.

SeedProd é o melhor plugin do WordPress para criar barras laterais com fácil funcionalidade de arrastar e soltar. Portanto, usaremos o SeedProd para mostrar como adicionar uma barra lateral no WordPress sem nenhum código.

Como criar uma barra lateral personalizada do WordPress sem código

Para saber como adicionar uma barra lateral no WordPress, basta seguir os passos abaixo:

1. Instalando o SeedProd
2. Escolhendo um modelo de tema
3. Personalizando sua barra lateral do WordPress
   • Adicionando um formulário de contato na barra lateral
   • Adicionando Posts Recentes na Barra Lateral do WordPress
   • Excluindo itens da barra lateral
4. Salvando alterações e publicando a barra lateral

Vamos começar.

1. Instalando o SeedProd

Para começar, você precisa ter o SeedProd instalado em seu site. Se você não sabe como instalá-lo, veja este tutorial sobre como instalar um plugin WordPress.

Para acessar o recurso de construtor de temas do WordPress do SeedProd (que você precisará para criar uma barra lateral), você precisará comprar a licença do SeedProd Pro. Quando você fizer sua compra e criar uma conta no SeedProd, faça login na área da sua conta e navegue até a guia Downloads . Aqui, você encontrará sua chave de licença. Copie-o (vamos precisar disso mais tarde).

No painel do WordPress, navegue até SeedProd » Configurações. Nesta tela, você deve ver o campo Chave de licença . Cole a chave de licença aqui e clique no botão Verificar .

Agora que o SeedProd está configurado em seu site, vamos usar alguns templates para facilitar nossa tarefa de criação de barra lateral.

2. Escolhendo um modelo de tema

Na área de administração do WordPress, clique em SeedProd » Theme Builder.

Este é o painel principal onde você pode controlar as configurações de todos os seus diferentes elementos de tema, incluindo a barra lateral.

Agora, clique no botão laranja Temas .

O SeedProd tem vários temas para diferentes tipos de empresas e organizações, incluindo agências de marketing, restaurantes, corretores de hipotecas e muito mais. Você pode escolher um tema que melhor se adapte ao seu negócio e, em seguida, personalizar a barra lateral até que fique exatamente do jeito que você deseja.

Para este exemplo, usaremos o tema Starter, que funciona muito bem para sites simples. Quando você seleciona o tema, a área do construtor de temas agora será preenchida automaticamente com todas as partes essenciais que compõem o tema.

Você pode habilitar e desabilitar cada parte diferente dependendo de suas necessidades. Como usaremos apenas uma barra lateral para a página do blog em nosso exemplo, manteremos apenas a Barra Lateral e o Índice do Blog, Arquivos, Pesquisa, partes ativadas.

Usando os botões de alternância sob o título Publicado , desabilitamos outras partes do tema e deixamos a Barra Lateral com o status SIM .

Agora, estamos prontos para começar a personalizar a Barra Lateral.

3. Personalizando sua barra lateral do WordPress

Para começar a personalizar sua barra lateral do WordPress, passe o cursor sobre a opção Barra lateral no painel do construtor de temas SeedProd e clique em Editar design.

Isso abrirá a interface do construtor de temas. A barra lateral do tema Starter tem uma barra de pesquisa, categorias e ícones de mídia social ativados por padrão.

Mas você pode adicionar mais elementos à barra lateral ou substituir os existentes por outra coisa. No painel esquerdo, você encontrará vários blocos que você pode arrastar e soltar na área à direita, que é uma visualização ao vivo da sua barra lateral.

Abaixo, mostraremos como realizar algumas personalizações comuns da barra lateral, mas todas são etapas opcionais.

Adicionando um formulário de contato na barra lateral

Neste exemplo, mostraremos como adicionar um formulário de contato simples à sua barra lateral. Mas primeiro, certifique-se de ter o WPForms instalado. Se precisar de ajuda com isso, consulte este documento sobre a instalação do WPForms.

O WPForms se integra automaticamente ao SeedProd. Portanto, todos os formulários que você criou com WPForms podem ser adicionados como um bloco na barra lateral usando o SeedProd.

Para fazer isso, basta digitar “formulário de contato” na barra de pesquisa na guia Blocos . Em seguida, arraste e solte o bloco Formulário de contato para onde deseja colocá-lo na barra lateral.

Após colocar o formulário na barra lateral, clique no bloco WPForms para abrir as opções do formulário. A partir daqui, você pode adicionar um formulário já criado ou até mesmo criar um novo pressionando o botão +Novo Formulário .

Vamos usar um formulário que já criamos com WPForms clicando no menu suspenso Select a Form e escolhendo um da lista.

É assim que o formulário se parece.

Se você precisar editar o formulário, clique no botão Editar o formulário selecionado. Isso abrirá o construtor WPForms na mesma janela e você poderá fazer as alterações desejadas sem precisar sair da tela do construtor de temas.

Fora isso, você pode personalizar o design do formulário acessando a guia Avançado . Aqui, o SeedProd fornece opções para alterar o estilo, atributos, espaçamento e visibilidade do dispositivo do formulário.

Por exemplo, se você quiser ocultar a barra lateral quando seu site for visualizado em dispositivos móveis, basta clicar no menu Visibilidade do dispositivo e alternar no botão Ocultar no celular .

Em seguida, mostraremos como adicionar postagens recentes na barra lateral do seu blog.

Adicionando Posts Recentes na Barra Lateral do WordPress

Mais uma vez, use o campo de pesquisa na guia Blocos do construtor de temas e digite “postagens recentes”. Agora, arraste e solte o bloco de Postagens Recentes na área que deseja exibir.

O widget Postagens recentes é preenchido automaticamente à medida que novas postagens do blog são publicadas em seu site.

Se você clicar no widget quando ele estiver no lado direito do construtor, poderá acessar configurações como controlar o número de postagens que deseja exibir.

Existem apenas 3 posts em nosso site de teste de exemplo. Mas é uma boa regra incluir 5 posts recentes para mostrar na sua barra lateral.

Excluindo itens da barra lateral

Com o construtor de temas SeedProd, excluir elementos da barra lateral é tão fácil quanto adicionar novos itens.

Em nosso exemplo, vamos remover o bloco da barra de pesquisa da barra lateral. Cabe a você decidir quais partes deseja remover da barra lateral. Estamos removendo a barra de pesquisa apenas para demonstração.

Normalmente, é considerado uma prática recomendada manter sua barra lateral simples e focada, portanto, tente não incluir muitos widgets em sua barra lateral.

Para excluir um bloco, passe o mouse até que um contorno laranja apareça ao redor do bloco que deseja excluir e pressione o ícone da lixeira.

Você verá um prompt para confirmar a ação de exclusão. Pressione Sim, exclua-o! botão para ir em frente.

Isso é tudo o que é preciso para excluir qualquer bloco ou elemento da sua barra lateral.

4. Salvando Alterações e Publicando a Barra Lateral

Quando terminar de personalizar a barra lateral ao seu gosto, clique no botão Salvar no canto superior direito.

Agora, clique no botão cruzado para sair do construtor de temas.

Esta ação adicionará a barra lateral à página do seu blog. Abra a página do blog do seu site no frontend para ver a barra lateral do WordPress recém-criada. (Neste exemplo, temos apenas os ícones de mídia social e o formulário de contato ativados).

E é isso! Agora você sabe como adicionar uma barra lateral no WordPress e personalizá-la para ficar do jeito que você gosta.

Em seguida, configure um subdomínio de e-mail

Você quer manter sua reputação de e-mail e manter altas taxas de entrega? Você deve considerar a configuração de um subdomínio de e-mail nesse caso. Consulte nosso guia sobre subdomínios de e-mail para saber como gerenciar melhor sua reputação de e-mail e configurar um subdomínio de e-mail.

Você também pode querer aprender sobre entregabilidade de e-mail e sua importância. Você pode conferir nosso artigo sobre como melhorar a capacidade de entrega de e-mail para obter mais detalhes.

Pronto para corrigir seus e-mails? Comece hoje com o melhor plugin SMTP para WordPress. O WP Mail SMTP Elite inclui a configuração White Glove completa e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e Twitter para mais dicas e tutoriais sobre WordPress.