Como Adicionar uma Barra Lateral Personalizada no WordPress (Sem Código) 

Nos meus primeiros sites, lembro-me de ter lutado para encaixar menus e formulários no layout até descobrir o quão poderosa uma barra lateral poderia ser. Aprender como adicionar uma barra lateral no WordPress acabou sendo uma das melhores mudanças que fiz para manter os visitantes engajados.

É o local onde você pode manter os leitores engajados com links de navegação, posts recentes ou até mesmo um formulário de newsletter. Neste guia, mostrarei como adicionar uma barra lateral no WordPress passo a passo usando 4 métodos nos quais confio para todos os meus projetos.

Você pode adicionar uma barra lateral no WordPress em alguns cliques usando o construtor visual do SeedProd, o Aparência → Personalizador para temas clássicos, ou o Aparência → Editor para temas de blocos. Nenhum código é necessário para nenhum deles.

O que é uma Barra Lateral do WordPress?

Uma barra lateral do WordPress é uma seção vertical que fica ao lado do seu conteúdo principal, geralmente no lado esquerdo ou direito da página. É uma área de widgets onde você pode exibir conteúdo extra como menus, posts recentes, anúncios ou formulários de newsletter sem poluir o espaço do artigo principal.

Ao contrário do seu conteúdo principal, que muda de página para página, uma barra lateral geralmente permanece a mesma em todo o seu site. Você também pode configurar barras laterais diferentes para páginas diferentes, se precisar de mais flexibilidade.

Seu tema do WordPress controla se as barras laterais estão disponíveis, quantas você pode usar e onde elas aparecem. Alguns temas as incluem por padrão, enquanto outros podem exigir que você adicione as suas.

A maioria das barras laterais padrão vem com widgets básicos que nem sempre se encaixam nos seus objetivos. Se você quiser mais controle, pode criar uma barra lateral personalizada e escolher exatamente o que aparece para seus visitantes.

Para que Você Pode Usar sua Barra Lateral do WordPress?

Você pode adicionar quase qualquer conteúdo à sua barra lateral usando widgets do WordPress. Aqui estão alguns exemplos:

• Navegação – Você pode usar widgets de menu de navegação para ajudar os usuários a encontrar páginas relevantes ou um menu para filtrar seus posts de blog por categoria.
• Pesquisar – Adicionar uma caixa de pesquisa à sua barra lateral é uma excelente maneira de ajudar os usuários a encontrar o que procuram rapidamente.
• Assinatura de e-mail – Adicione um formulário de e-mail opt-in à sua barra lateral para coletar endereços de e-mail e aumentar sua lista.
• Conteúdo em destaque – Sua barra lateral é um ótimo lugar para exibir posts individuais que são mais valiosos para os usuários do que outros.
• Mídias sociais – Você pode facilmente adicionar botões de seguir redes sociais e um widget de compartilhamento em mídias sociais para aumentar seus seguidores e a conscientização da marca.
• Anúncios – Sua barra lateral é um lugar excelente para exibir anúncios se você os usa para gerar receita.
• Chamadas para ação (CTA) – Se você tem um novo curso online, produto ou oferta, pode adicionar uma CTA à sua barra lateral para incentivar os leitores a conferirem.

Até agora, você sabe o que é uma barra lateral e como ela é uma maneira fácil de exibir conteúdo valioso para os visitantes do seu site. Agora, vamos ver como adicionar uma barra lateral no WordPress.

Compartilhamos 4 métodos abaixo, usando o Personalizador do WordPress, a tela de Widgets, o Editor do Site e um construtor de sites visual. Nenhum deles requer codificação.

Qual método é o certo para você depende da sua configuração. Se você deseja controle de design e barras laterais ilimitadas, use o SeedProd (Método 1).

Se você estiver usando um tema clássico, o Personalizador é a opção mais rápida (Método 2). Se você estiver usando um tema de blocos como o Twenty Twenty-Five, vá direto para o Método 4.

Como Criar uma Barra Lateral Personalizada no WordPress com o SeedProd?

Você deseja criar uma barra lateral personalizada ou usar várias barras laterais simultaneamente no seu site WordPress?

Para isso, você precisará de um plugin do WordPress ou do conhecimento para criar uma nova barra lateral do zero com código. Felizmente, você pode facilmente criar barras laterais personalizadas para o WordPress com um plugin poderoso e leve: o SeedProd.

SeedProd é o melhor construtor de sites WordPress de arrastar e soltar. Você pode usá-lo para criar temas e layouts de página personalizados do WordPress sem código.

O SeedProd usa modelos individuais para criar todas as partes do seu tema. Um desses modelos é a Barra Lateral, que permite adicionar uma barra lateral personalizada ao seu site com apenas alguns cliques.

Melhor ainda, você pode criar quantas barras laterais quiser com o SeedProd e exibi-las em páginas e posts específicos do seu site.

Portanto, siga os passos abaixo para adicionar uma barra lateral ao WordPress com o SeedProd.

Passo 1. Instale o Construtor de Sites SeedProd

O primeiro passo é instalar o plugin SeedProd Website Builder.

Observação: Você precisará de uma licença SeedProd Pro ou Elite para usar o recurso Theme Builder.

Você pode seguir este guia sobre como instalar um plugin do WordPress se precisar de ajuda com esta etapa.

Após instalar e ativar o arquivo .zip do plugin, vá para a página SeedProd ≫ Configurações e insira os detalhes da sua chave de licença. Você pode encontrar sua chave de licença no site do SeedProd, no painel da sua conta.

Passo 2. Crie seus Modelos de Tema do WordPress

Para criar uma barra lateral personalizada com o SeedProd, você primeiro precisará criar as diferentes partes do seu tema. Não se preocupe; é super fácil de fazer e não exigirá a edição direta de nenhum arquivo de modelo.

Primeiro, vá para a página SeedProd » Theme Builder. Você verá uma lista de modelos para o seu tema SeedProd atual nesta página.

Como ainda não começamos, temos apenas um modelo de CSS Global.

Para começar, você tem duas opções.

1. Use um dos temas SeedProd prontos como ponto de partida
2. Crie manualmente modelos de tema do zero

Sugerimos começar com um modelo de tema pré-fabricado. Ele permite que o SeedProd gere automaticamente todos os arquivos de modelo, dando a você uma vantagem na edição dos modelos de acordo com suas necessidades.

Para escolher um modelo de tema, clique no botão Temas e selecione um dos temas disponíveis. Existem temas diferentes para sites diferentes, então escolha um que melhor atenda às suas necessidades.

Após escolher um tema, o SeedProd criará automaticamente todos os modelos de tema para você. Como resultado, agora você pode editar cada modelo individualmente no editor visual de arrastar e soltar.

Passo 3. Personalize sua Barra Lateral do WordPress

Para personalizar sua barra lateral com o SeedProd, localize o modelo Sidebar e clique no link Editar Design.

Isso abrirá sua barra lateral no construtor de arrastar e soltar do SeedProd. Você verá uma prévia ao vivo do seu modelo de barra lateral na coluna da direita com um painel de edição na coluna da esquerda.

Alterar um item na sua barra lateral é tão simples quanto apontar e clicar. Por exemplo, você pode clicar no ícone da lixeira para excluir blocos.

Ou você pode clicar em qualquer bloco para ver suas configurações no painel esquerdo.

Você pode adicionar uma grande variedade de conteúdo à sua barra lateral usando os blocos de tema do SeedProd. Basta arrastar um bloco da esquerda e soltá-lo no lugar na sua barra lateral.

Alguns dos blocos que você pode escolher incluem:

• Tags de Modelo – Blocos que permitem adicionar conteúdo dinâmico do WordPress, como posts de blog, comentários, imagens em destaque, etc. Esta é uma ótima maneira de criar uma barra lateral dinâmica.
• Blocos Padrão – Estes são elementos populares de design web que a maioria dos sites usa, como imagens, botões, texto e vídeos.
• Blocos Avançados – Recursos avançados de geração de leads, como formulários de contato, perfis sociais, botões de compartilhamento, formulários de inscrição, Google Maps e muito mais.
• WooCommerce – Se você administra uma loja online, pode usar blocos do WooCommerce para exibir produtos populares, carrinhos de compras e outros recursos da loja em sua barra lateral.

Além de adicionar conteúdo à sua barra lateral, o SeedProd também permite personalizar suas cores, fontes, espaçamento, bordas e muito mais.

Por exemplo, se você clicar no ícone de configurações de uma seção, poderá ver opções para alterar a cor de fundo, carregar uma imagem de fundo e alterar a largura. Em seguida, há mais configurações na guia Avançado que permitem controlar as bordas, o espaçamento e muito mais.

Quando estiver satisfeito com sua nova barra lateral, clique no botão verde Salvar no canto superior direito da sua tela.

Agora repita este processo para os outros modelos do seu tema, incluindo:

• Página Única
• Post Único
• Índice/Arquivos do Blog
• Página inicial
• Cabeçalho
• Rodapé

Como resultado, você pode criar um tema personalizado do WordPress que atenda a todas as necessidades do seu negócio.

Passo 4. Publique sua Barra Lateral Personalizada no WordPress

Quando estiver satisfeito com sua barra lateral personalizada do WordPress, o passo final é ativá-la no seu site WordPress.

No SeedProd, você pode aplicar sua barra lateral personalizada do WordPress com uma simples troca.

Simplesmente vá para a página SeedProd » Theme Builder e alterne o interruptor ao lado da opção ‘Ativar Tema SeedProd’ para ‘Sim’.

O SeedProd agora substituirá seu design existente pelo novo tema e barra lateral do WordPress.

Agora você pode visitar seu site para ver sua barra lateral personalizada do WordPress em ação.

Como Adicionar Múltiplas Barras Laterais no WordPress com SeedProd

Agora que você tem uma barra lateral personalizada, pode editar o design quando quiser. Mas e se você quiser mais de uma barra lateral e exibi-la em diferentes seções do seu site?

Por exemplo, você pode querer criar uma barra lateral para páginas diferente da sua barra lateral do blog. Você pode fazer isso usando as partes de Modelo Globais do SeedProd.

Aqui está a parte 13 do nosso tutorial do construtor de temas que mostra como as partes globais funcionam:

Alternativamente, você pode seguir as instruções escritas abaixo.

Primeiro, vá para a página SeedProd » Theme Builder e clique no botão Adicionar Novo Modelo de Tema.

A partir daí, escolha a opção Parte Global e clique em Salvar.

Agora você pode construir sua barra lateral personalizada como fez na etapa anterior.

Após criar sua nova barra lateral, abra o modelo Página Única no editor de arrastar e soltar do SeedProd.

Para dar espaço à sua barra lateral, você precisará substituir o layout existente por uma seção de 2 colunas.

Em seguida, arraste o bloco Parte do Modelo para a segunda coluna da sua nova seção.

A partir daí, você pode escolher a nova barra lateral que criou no menu suspenso.

Clique em Salvar para armazenar suas alterações e, quando navegar para uma página, ela exibirá sua nova barra lateral personalizada automaticamente, enquanto seus posts de blog exibirão sua primeira barra lateral.

Como Adicionar uma Barra Lateral Usando o Personalizador do WordPress?

O personalizador integrado do WordPress facilita a adição de uma barra lateral personalizada ao seu site WordPress. O personalizador usa as configurações padrão do seu tema WordPress para controlar o layout, o conteúdo e o posicionamento da sua barra lateral.

Para usar este método, você precisará de um tema WordPress que inclua áreas de widgets de barra lateral. Se você ainda não tem um tema, aqui estão os temas WordPress mais populares para pequenas empresas.

Para este guia, estamos usando o Tema Astra WordPress.

Passo 1: Adicione o Layout da sua Barra Lateral do WordPress

Após instalar seu tema, vá para Aparência ≫ Temas e clique no botão azul Personalizar.

Isso o levará à página do Personalizador do WordPress, onde você pode editar o layout e o design do seu tema. As configurações que você vê nesta página variam para temas diferentes, mas mostraremos como adicionar uma barra lateral usando o tema Astra, para que você tenha uma ideia do que fazer.

Olhe no painel esquerdo dentro do personalizador e encontre o título 'Sidebar'. Clique nesse título para abrir as opções de personalização da sua barra lateral.

Na próxima tela, você pode escolher entre as seguintes opções de barra lateral:

• Layout Padrão – Sem barra lateral, barra lateral direita ou barra lateral esquerda.
• Páginas – Onde exibir a barra lateral em páginas individuais.
• Posts – Onde exibir sua barra lateral em posts individuais.
• Arquivos – Como sua barra lateral aparece em páginas de arquivo como sua página de blog.

Você também pode escolher a largura da sua barra lateral na mesma página. Quando estiver satisfeito com o layout da sua barra lateral, clique no botão Publicar.

Passo 2. Adicione Widgets à sua Barra Lateral com o Personalizador

Após escolher o layout da sua barra lateral, você pode começar a adicionar widgets a ela. Para fazer isso, encontre o título 'Widgets' no menu do Personalizador do WordPress e clique para abrir as configurações.

Na próxima tela, há uma lista de barras laterais atualmente disponíveis para aquela página específica, então clique na barra lateral que você deseja personalizar.

Agora você verá um construtor de barra lateral, pronto para exibir os widgets que você escolher. Clique no ícone de mais (+) para pesquisar um bloco ou widget que você deseja mostrar na sua barra lateral.

Clicar em um bloco o adicionará à sua barra lateral automaticamente.

Continue adicionando widgets à sua barra lateral até que ela fique do jeito que você quer. Em seguida, clique no botão Publicar para salvar suas alterações.

Agora, quando você visitar sua página, verá sua barra lateral personalizada do WordPress.

Como Adicionar Widgets à sua Barra Lateral do WordPress?

O método a seguir usa a tela de widgets do WordPress para adicionar uma barra lateral ao WordPress. É semelhante ao método anterior, mas permite apenas adicionar widgets à sua barra lateral em vez de permitir que você altere a posição da sua barra lateral.

Vá para Aparência ≫ Widgets no seu painel do WordPress para usar este método. Você pode ver todas as barras laterais que seu tema suporta atualmente nesta tela.

No nosso caso, o tema inclui 4 áreas de barra lateral personalizáveis:

1. Barra Lateral Principal
2. Cabeçalho
3. Seção 1 da Barra Inferior
4. Seção 2 da Barra Inferior

Adicionar widgets à sua barra lateral é semelhante à etapa anterior. Simplesmente clique no ícone de mais e pesquise os widgets que você deseja adicionar à sua barra lateral.

Quando terminar de criar sua barra lateral, clique no botão Atualizar. Agora você pode visitar seu site e ver sua nova barra lateral.

Como Adicionar uma Barra Lateral em um Tema de Blocos do WordPress?

Temas de blocos como o Twenty Twenty-Five não usam áreas de widgets de barra lateral tradicionais. Em vez disso, você cria um efeito de barra lateral diretamente dentro dos seus modelos de página usando o Editor de Site.

Eu mesmo já passei por essa confusão. Quando você muda para um tema de blocos, o Personalizador não controla mais a posição da barra lateral, e isso confunde muitas pessoas.

Para adicionar uma barra lateral em um tema de blocos, vá para Aparência → Editor no seu painel do WordPress. Clique em Modelos e escolha o modelo que deseja editar, como Postagem única ou Página.

Dentro do editor de modelos, clique no botão + e pesquise por Colunas. Insira um layout de duas colunas e redimensione para que a coluna da barra lateral seja mais estreita que a coluna de conteúdo.

Adicione o conteúdo principal da sua página à coluna mais larga usando um bloco de Conteúdo da Postagem. Na coluna mais estreita, adicione conteúdo da barra lateral como Postagens Recentes, Pesquisar ou um bloco de HTML Personalizado.

Quando estiver satisfeito com o layout, clique em Salvar. Sua barra lateral agora aparecerá em todas as páginas que usam esse modelo.

Lembre-se de que isso se aplica apenas a temas de blocos. Se você estiver usando um tema clássico, os Métodos 1, 2 ou 3 acima são a escolha certa.

Perguntas Frequentes sobre Como Adicionar uma Barra Lateral ao WordPress

Como adiciono uma barra lateral esquerda e direita no WordPress?

Para uma barra lateral direita, vá para Aparência → Personalizar e encontre as configurações de Layout ou Barra lateral do seu tema. Escolha Barra lateral direita ou Barra lateral esquerda nas opções de layout. Com o SeedProd, você define a posição das colunas diretamente no editor de arrastar e soltar. Para temas de blocos, use o bloco Colunas do Editor de Site e coloque o conteúdo da barra lateral em qualquer coluna que desejar.

O que é uma barra lateral no WordPress?

Uma barra lateral do WordPress é uma área vertical de widgets que fica ao lado do seu conteúdo principal, geralmente no lado esquerdo ou direito da página. Você pode preenchê-la com menus de navegação, postagens recentes, formulários de inscrição por e-mail ou anúncios. A maioria dos temas clássicos do WordPress inclui uma barra lateral por padrão. Temas de blocos não incluem uma, a menos que você a adicione através do Editor de Site.

Como edito minha barra lateral do WordPress?

Para temas clássicos, vá para Aparência → Widgets e adicione ou reorganize blocos na sua área de barra lateral. No Personalizador, vá para Aparência → Personalizar → Widgets em vez disso. Com o SeedProd, abra o Construtor de Temas, encontre o modelo de Barra Lateral e clique em Editar Design para atualizá-lo no editor visual. Suas alterações entram em vigor quando você salva e publica.

O que devo fazer se o meu tema do WordPress não tiver uma barra lateral?

Se o seu tema clássico não incluir uma barra lateral, mude para um tema que suporte áreas de widgets ou use o Construtor de Temas do SeedProd para criar uma. Para temas de blocos, as configurações da barra lateral do Personalizador não aparecerão porque os temas de blocos usam o Editor de Site. Vá para Aparência → Editor, abra seu modelo e adicione um bloco Colunas para criar o layout da barra lateral.

Posso mostrar barras laterais diferentes em páginas diferentes no WordPress?

Sim. Muitos temas clássicos permitem que você atribua diferentes áreas de barra lateral a tipos de página específicos, como postagens, páginas e arquivos, através do Personalizador. Com o SeedProd, você pode criar barras laterais ilimitadas e atribuir cada uma a um modelo ou página específica. Isso facilita a exibição de uma barra lateral de blog em postagens e uma barra lateral diferente em suas páginas de serviço ou de destino.

Obter o controle correto da barra lateral significa que cada página trabalha mais para você. Você pode direcionar os leitores para o seu melhor conteúdo e mantê-los engajados sem alterar seu layout principal.

Para a máxima flexibilidade de design, o Theme Builder da SeedProd permite que você crie barras laterais personalizadas ilimitadas e as atribua a qualquer página ou postagem. Não é necessário código.

Você também pode gostar deste post sobre os melhores exemplos de lead magnet para aumentar sua lista. E se você quiser barras laterais mais personalizadas, veja este guia sobre Como Adicionar uma Barra Lateral Diferente para Páginas Diferentes no WordPress

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.