Como alterar a lateral da barra lateral no WordPress (4 métodos)

Deseja alterar a lateral da barra lateral do seu tema do WordPress?

Talvez você prefira um visual limpo, alinhado à esquerda, ou talvez seu design exija que a barra lateral fique à direita para melhor equilíbrio. Seja qual for o motivo, personalizar o layout do seu site é uma ótima maneira de personalizar sua presença on-line.

Aqui na WPBeginner, ajudamos inúmeros usuários com a personalização de temas do WordPress. Hoje, mostraremos a você como alterar a lateral da barra lateral no WordPress.

Quando alterar o lado padrão da barra lateral no WordPress

A barra lateral é uma coluna em seu site WordPress, normalmente localizada à esquerda ou à direita da área de conteúdo principal.

Nos temas clássicos do WordPress, essa barra lateral é essencialmente uma área de widget em que é possível adicionar vários elementos, como formulários de contato, barras de pesquisa, feeds de mídia social, publicações recentes e muito mais, usando widgets do WordPress.

Embora os temas de bloco não usem widgets, o termo “barra lateral” ainda é comumente usado para descrever essa seção específica que geralmente exibe conteúdo adicional ou opções de menu de navegação.

Às vezes, você pode precisar alterar o lado da barra lateral por vários motivos. Por exemplo, talvez seu site atenda a idiomas que são escritos e lidos da direita para a esquerda. Ter a barra lateral do lado esquerdo se alinha melhor com o fluxo natural de leitura dos usuários.

Ou deseja melhorar a experiência do usuário. Talvez você administre um site de comércio eletrônico e perceba que os clientes em potencial costumam examinar suas páginas da Web de uma determinada maneira. Você deseja acomodar esse comportamento para que eles se sintam mais à vontade para comprar em seu site.

Alguns designs de sites também podem exigir um posicionamento específico da barra lateral para obter um layout equilibrado e visualmente atraente.

Com tudo isso em mente, vamos dar uma olhada em como alterar a lateral da barra lateral em seu blog ou site do WordPress. Apresentamos três métodos fáceis, e você pode usar os links rápidos abaixo para ir para o método que preferir:

Método 1: Como alterar a lateral da barra lateral com o personalizador do WordPress (temas clássicos)

Esse método é para pessoas que usam um tema clássico. Isso significa que você ainda pode usar o personalizador do WordPress para estilizar o design do seu site, e a seção Widgets no menu Appearance do administrador do WordPress ainda existe.

Se o personalizador de temas não estiver presente no painel do WordPress, é provável que você esteja usando um tema de bloco e deve pular para o terceiro método.

Às vezes, os desenvolvedores de temas clássicos oferecem vários posicionamentos de barra lateral que você pode escolher. Você pode confirmar se isso é verdade usando o personalizador do WordPress e escolhendo a posição da barra lateral que preferir.

Primeiro, vá para Appearance ” Customize. Estamos usando o tema Astra como exemplo.

Aqui, vemos que o tema Astra tem um menu especial “Sidebar” (Barra lateral).

Vamos clicar nele.

Como você pode ver, o Astra tem três modelos de página: um sem barra lateral, um com barra lateral esquerda e um com barra lateral direita. Isso nos permite alterar o lado da barra lateral com um clique. Aqui, alteramos o lado da barra lateral para a esquerda.

O Astra também oferece opções para alterar o estilo da barra lateral, ajustar a largura e torná-la fixa.

Depois de fazer as alterações, você pode adicionar os widgets disponíveis à barra lateral normalmente. Para obter mais informações, consulte nosso guia sobre como adicionar e usar widgets no WordPress.

Em seguida, basta clicar em “Publicar”.

Embora esse seja um recurso conveniente, tudo depende do tema. É altamente recomendável verificar a documentação do tema para ver se é possível alterar a barra lateral usando o personalizador.

Caso contrário, pule para o próximo método.

Método 2: Como alterar a lateral da barra lateral com código (temas clássicos)

Se o seu tema clássico não oferecer várias barras laterais para escolher, você poderá alterar o lado da barra lateral manualmente usando o código CSS.

Recomendamos usar um site de teste e/ou um tema filho para experimentar esse método. Dessa forma, se ocorrer um erro, ele não afetará o tema principal e/ou o site ativo.

Além disso, o uso de um tema filho pode evitar que suas alterações sejam substituídas quando houver uma atualização de tema.

Etapa 1: use a ferramenta Inspecionar para localizar a classe CSS da barra lateral

A primeira coisa que você deve fazer é abrir seu site. Em seguida, passe o mouse sobre a área da barra lateral e use a ferramenta Inspect do navegador.

Se você usa o Chrome, basta clicar com o botão direito do mouse na área e selecionar “Inspecionar”.

Para obter mais informações, consulte nosso guia básico sobre o elemento Inspect.

Agora, passe o cursor sobre as linhas HTML e CSS no canto superior direito da página.

Quando você vir que toda a área da barra lateral está destacada, clique nessa linha. Para nós, foi <aside id="secondary" class="sidebar widget-area">.

A guia “Styles” (Estilos) na parte inferior da página contém todas as propriedades CSS relacionadas à barra lateral.

No nosso caso, vimos que a classe CSS para a área da barra lateral é .sidebar. Há também regras que determinam a posição da barra lateral, que, nesse caso, é o lado esquerdo.

Sabemos disso porque, quando desmarcamos a regra margin-left, a barra lateral se move para o outro lado.

Aqui está o código da área da barra lateral do nosso tema:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Você pode copiar e colar esse código em um editor de texto, pois precisaremos dele em uma etapa posterior. Ou pode simplesmente manter essa guia aberta para mais tarde.

Agora que conhecemos a classe CSS para a área da barra lateral, também precisamos encontrar a classe para a área de conteúdo principal que exibe todas as suas postagens ou o conteúdo das postagens.

O que você pode fazer é passar o mouse sobre as linhas HTML e CSS para ver qual linha destaca a área de conteúdo principal. Aqui, descobrimos que foi a linha <div id="primary" class="content-area">.

Como antes, você pode rolar para baixo até a guia “Styles” (Estilos) para ver qual é a classe CSS dessa área. Nesse caso, era .content-area. Aqui está o código para ela:

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Novamente, você pode copiar e colar o código CSS da sua área de conteúdo em um editor de texto ou manter essa guia aberta para a próxima etapa.

Agora que conhecemos as classes CSS da barra lateral e da área de conteúdo, podemos editar o arquivo de tema style.css para alterar a lateral da barra lateral.

Etapa 2: Personalize o arquivo style.css do seu tema

Normalmente, você precisará editar o style.css diretamente usando o gerenciador de arquivos ou o cliente FTP do seu provedor de hospedagem na Web. No entanto, o arquivo style.css pode ser bastante longo e, se você cometer um erro, isso poderá afetar todo o design do site e arruinar a experiência do usuário.

É por isso que recomendamos o uso do WPCode. Esse plug-in de snippet de código torna seguro e fácil personalizar seu arquivo style.css sem precisar lidar diretamente com ele.

Se as alterações no código causarem erros não intencionais, você poderá desativá-lo com um único clique, e seu site voltará ao normal.

Para este tutorial, você pode usar a versão gratuita do WPCode, mas o upgrade para um plano premium lhe dará acesso a recursos mais avançados. Para obter mais informações, confira nossa análise completa do WPCode.

Primeiro, vá em frente e instale o WPCode em seu WordPress. Se você precisar de instruções passo a passo, leia nosso guia sobre como instalar um plug-in do WordPress.

Depois disso, vá para Code Snippets “ + Add Snippet. Em seguida, selecione “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)) e clique no botão “Use snippet” (Usar snippet).

Agora, digite um título para seu código personalizado. Pode ser algo como “Alterar lado da barra lateral”.

Em seguida, altere o Tipo de código para “CSS Snippet”.

Depois disso, você precisa inserir os trechos de código CSS da barra lateral e das áreas de conteúdo na caixa Code Preview (Visualização de código).

Você pode separá-los com um espaço vazio para facilitar a identificação, da seguinte forma:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Agora, vamos personalizar esse código CSS. O que você deseja fazer é alterar as propriedades CSS que definem o posicionamento da barra lateral e das áreas de conteúdo principal.

No nosso caso, essas classes CSS têm as propriedades float, margin, padding e width, mas isso pode parecer diferente dependendo do seu tema.

Para nossa área da barra lateral, alteramos esquerda para direita nas propriedades float e margin. Isso significa que a área da barra lateral estará na direção oposta de onde foi originalmente colocada.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Com essa parte concluída, vamos alterar o posicionamento da área de conteúdo. O que funcionou para nós foi mudar float: left para float: right e margin-right para margin-left. Isso diz ao WordPress para mover a área de conteúdo para a direita.

Além disso, adicionamos as propriedades position: relative e right: 100%. Elas garantem que nossa área de conteúdo não fique muito longe do lado direito.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Novamente, o que funciona para o nosso tema pode não funcionar com o seu, pois cada tema tem nomes diferentes para suas classes CSS e usa propriedades diferentes. Recomendamos a leitura desta referência completa de CSS para descobrir o que funciona melhor para seu tema.

Além disso, sinta-se à vontade para alterar as porcentagens da largura e das margens no código para ajustar o posicionamento da barra lateral.

Depois de alterar o snippet de código, role para baixo até a seção Inserção. Certifique-se de que o método de inserção seja “Auto Insert”.

Quanto ao local, selecione “Site Wide Footer” para que seu código possa substituir o código existente em seu arquivo style.css.

Agora, você pode clicar no botão de alternância no canto superior direito para tornar o código “Ativo” e clicar em “Salvar snippet”. Em seguida, visualize seu site para ver os resultados.

Se você observar as capturas de tela acima, verá que a barra lateral em nosso site de demonstração estava no lado direito.

Depois de editar o código em style.css, o tema agora tem uma barra lateral esquerda:

Agora que você alterou o lado da barra lateral, pode começar a alterar ou adicionar mais conteúdo à barra lateral. Aqui estão algumas ideias para ajudá-lo:

• Como adicionar uma imagem no widget da barra lateral do WordPress
• Como adicionar um link aos títulos de widgets no WordPress
• Como adicionar estilos personalizados aos widgets do WordPress
• Como desativar widgets indesejados no WordPress

Método 3: Como alterar a lateral da barra lateral com o FSE (temas de blocos)

Se você usa um tema de bloco, não verá uma seção de Widgets no seu administrador do WordPress. Você pode estar se perguntando como alterar o lado da barra lateral se esse menu não existir.

Felizmente, o processo é muito mais simples em comparação com o dos temas clássicos. Isso ocorre porque os temas de blocos usam blocos do Gutenberg e você pode simplesmente arrastar e soltar os elementos para alterar sua posição usando o editor de site completo (FSE).

Em segundo lugar, os temas de bloco geralmente têm um modelo que inclui uma barra lateral. Basta alterar isso e todas as páginas que usam o modelo serão afetadas. Você pode consultar a documentação do seu tema para ver como o modelo é chamado para acessá-lo.

Para a demonstração, usaremos o tema Twenty Twenty-Four, que por acaso tem uma página com um modelo de barra lateral.

Primeiro, vá para Appearance ” Editor em seu painel.

Aqui, você verá alguns menus para personalizar o tema do bloco.

Selecione “Templates”.

Agora, localize o modelo com a barra lateral que você deseja editar.

No Twenty Twenty-Four, essa é a “Página com barra lateral” e “Único com barra lateral”. Dependendo do seu tema, o nome do modelo pode não mencionar claramente que ele tem uma barra lateral, portanto, novamente, você deve verificar a documentação do seu tema.

Vá em frente e selecione esse modelo de barra lateral.

Na próxima página, você verá um botão de lápis “Edit” (Editar).

Clique nele para abrir o editor de blocos.

Normalmente, os temas de blocos incluem a barra lateral e a área de conteúdo principal em um bloco de colunas. Isso mantém tudo limpo, organizado e bem separado um do outro.

Para alterar o lado da barra lateral, você só precisa selecionar a coluna que a compõe e movê-la.

A maneira mais fácil de fazer isso é clicar no recurso “List View” (Exibição de lista) no lado esquerdo da página.

Em seguida, clique no bloco “Columns” (Colunas) para expandi-lo e passe o mouse sobre seu conteúdo até encontrar a coluna que contém os elementos da barra lateral.

No nosso caso, ajudou o fato de o tema Twenty Twenty-Four ter uma parte do modelo chamada ‘Sidebar’, portanto, foi fácil identificá-la. Dito isso, alguns temas podem incluir apenas um grupo regular e sem nome de blocos que compõem a barra lateral.

Você saberá que selecionou a coluna da direita quando um destaque retangular e uma barra de ferramentas aparecerem ao redor de todo o grupo de blocos da barra lateral.

Agora, na barra de ferramentas da coluna da barra lateral, você verá setas que podem ser usadas para alterar o posicionamento da coluna.

Clique nele e, dependendo de como o bloco Columns foi projetado, talvez seja necessário alterar a posição até encontrar o ajuste certo.

O desenvolvedor do tema pode ter adicionado algumas colunas vazias para criar espaço entre a área de conteúdo principal e a área da barra lateral.

Se você quiser excluí-lo, basta localizar a coluna vazia à direita usando o recurso List View como antes. Em seguida, na barra de ferramentas de bloco, clique no menu de três pontos e selecione “Excluir”.

Ou, se quiser criar mais espaço entre a área da barra lateral e a área de conteúdo, abra a guia Block settings (Configurações do bloco) e vá para a seção “Styles” (Estilos).

Em seguida, na seção “Dimensions” (Dimensões), você pode arrastar o controle deslizante para o preenchimento, a margem ou o espaçamento entre blocos.

Quando terminar, clique em “Salvar”.

Em seguida, você pode visualizar todas as páginas no celular e no desktop que estão usando o modelo que você acabou de editar para ver como ficou.

E se você tiver editado o modelo, mas suas páginas ou publicações não o estiverem usando?

Tudo o que você precisa fazer é abrir a página ou o post no editor de blocos. Em seguida, no painel de configurações do post, clique no link no campo “Modelo” e selecione “Trocar modelo”.

Agora, basta escolher o modelo que está usando a barra lateral.

Depois disso, você pode atualizar a página ou o post.

Para obter mais dicas e truques sobre o uso do editor de site completo ou de blocos, consulte estes guias:

• Como editar um site WordPress (guia definitivo)
• Como personalizar as cores em seu site WordPress

Método 4: Como alterar a lateral da barra lateral com CSS Hero (todos os temas)

O próximo método usa um plug-in pago chamado CSS Hero, que é o melhor plug-in do WordPress para edição visual de CSS. Esse plug-in facilita a personalização do CSS do seu tema sem tocar em nenhum código, o que o torna excelente para iniciantes.

Esse método também funciona com todos os temas, portanto, se você achar que os métodos anteriores são um pouco limitados, poderá usar este. Dito isso, não há versão gratuita do plug-in, portanto, é necessário adquirir um plano pago.

Para obter mais informações sobre o plug-in e seu preço, confira nossa análise do CSS Hero.

Primeiro, faça o download do plug-in em seu computador e instale-o em seu site do WordPress. Para obter instruções passo a passo, confira nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Depois de instalado, você verá um menu “CSS Hero” na barra de ferramentas. Clique nele para abrir o editor visual de CSS.

Lembre-se de que, como nem todos os temas do WordPress funcionam da mesma maneira, a forma como você usa o CSS Hero para alterar a lateral da barra lateral será diferente. Portanto, recomendamos que você brinque com a plataforma para ver o que funciona para você.

Dito isso, mostraremos quais configurações personalizamos para alterar o lado da barra lateral do lado direito para o lado esquerdo.

Primeiro, clique na área da barra lateral em sua página. Você saberá que clicou no elemento certo quando todos os elementos da barra lateral forem selecionados como um grupo e tiverem um destaque retangular ao redor deles.

No lado esquerdo da página, você verá alguns menus para personalizar seus elementos.

Em nossa experiência, as configurações que podem alterar o posicionamento da barra lateral são Position, Measures e Spacings.

A posição determina como a barra lateral é posicionada em relação aos outros elementos da página. Aqui, você pode selecionar “Absolute” (Absoluto), o que lhe dará alguma liberdade sobre onde a barra lateral deve estar.

A partir daí, você pode alterar os pixels superior, direito, inferior e esquerdo para posicionar a barra lateral.

Você pode ver que agora a barra lateral e a área de conteúdo principal estão do mesmo lado.

Para corrigir isso, passe o mouse sobre o contêiner que compõe a área de conteúdo principal e clique nele.

Agora, no painel do lado esquerdo, basta ajustar as configurações de Posição até encontrar o ajuste correto.

O que fizemos foi deixar a posição como “Relativa” e ajustar os pixels da direita.

Tecnicamente, isso é tudo o que você precisa fazer. Mas se você quiser ajustar o tamanho da barra lateral, selecione a área da barra lateral e vá para as configurações de “Medidas”.

Aqui, você pode alterar a largura e a altura da barra lateral.

Se quiser alterar o espaçamento entre a área da barra lateral e a área do conteúdo principal, você pode ir para “Spacings” (Espaçamentos).

Você verá alguns controles deslizantes para ajustar o preenchimento e a margem do elemento aqui.

Novamente, recomendamos que você explore as configurações desse plug-in para alterar o lado da barra lateral de acordo com sua preferência.

Quando terminar, você pode clicar no botão “Save” (Salvar) no canto inferior direito da página.

Alternativa: Crie barras laterais personalizadas com um plug-in do WordPress Page Builder

Até agora, exploramos métodos para alterar o local da barra lateral de todo o seu site. Mas e se você quiser barras laterais específicas apenas para determinadas páginas ou tipos de post? Afinal de contas, nem todas as páginas precisam do mesmo conteúdo na barra lateral.

Por exemplo, sua página inicial pode se beneficiar de uma barra lateral mais geral com ícones de mídia social e uma chamada para ação. Entretanto, uma página de produto pode ser melhor com uma barra lateral que mostre produtos relacionados ou avaliações de clientes.

Nesse caso, talvez você queira criar barras laterais personalizadas para seu tema do WordPress. Com as barras laterais personalizadas, você pode:

• Atribua barras laterais específicas a diferentes páginas ou tipos de post. Isso permite que você personalize o conteúdo da barra lateral de acordo com as necessidades específicas de cada página.
• Crie uma experiência de usuário mais dinâmica e envolvente. Ao oferecer conteúdo relevante na barra lateral, você pode manter os visitantes envolvidos e interessados em explorar mais o seu site.

É aqui que um plug-in do construtor de páginas do WordPress é útil. Esses plugins oferecem a funcionalidade de arrastar e soltar e extensas bibliotecas de modelos, facilitando a criação de barras laterais personalizadas.

Recomendamos o uso do SeedProd, que é um plug-in popular e amigável para iniciantes de criação de páginas e temas. Com o SeedProd, você pode criar facilmente páginas e temas personalizados com sua interface amigável.

Você pode consultar estes artigos para obter mais informações:

• Como adicionar cabeçalho, rodapé ou barra lateral personalizados para cada categoria
• Como exibir uma barra lateral diferente para cada postagem e página no WordPress

Esperamos que este tutorial do WordPress tenha ajudado você a aprender como alterar a lateral da barra lateral no WordPress. Talvez você também queira conferir nosso artigo sobre como adicionar um menu responsivo de tela inteira no WordPress e nossas escolhas de especialistas dos melhores criadores de logotipo gratuitos para que você pareça um profissional.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.