Recentemente, um de nossos leitores nos perguntou como alterar o lado da barra lateral de um tema WordPress.

Normalmente, recebemos essa pergunta de usuários que desejam alterar o local da barra lateral da esquerda para a direita ou da direita para a esquerda.

Neste tutorial, mostraremos como alterar a localização da barra lateral no WordPress.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então, voltemos ao porquê de estarmos aqui.

Como alterar a localização da barra lateral no wordpress e1568058176266

Por que mudar a localização da barra lateral no WordPress?

Os especialistas em usabilidade acreditam que as pessoas digitalizam as páginas da esquerda para a direita. Eles recomendam colocar conteúdo importante à esquerda para que os usuários vejam esse conteúdo primeiro. No entanto, isso pode ser revertido se o seu site estiver em um idioma RTL (direita à esquerda).

Descubra se seu blog WordPress deve ter barras laterais

Muitos sites WordPress usam o layout típico de blog com duas colunas. Uma para o conteúdo e a outra coluna para a barra lateral.

demonstração típica de conteúdo da barra lateral do WordPress

Se você é novo nos sites, deve selecionar um tema do WordPress que tenha uma barra lateral no seu local preferido.

muitos Temas do WordPress oferecem opções para alterar o lado da barra lateral nas configurações da barra lateral. No entanto, se o seu tema WordPress não tiver essa opção, você terá que alterar o lado da barra lateral manualmente. Vá mais longe descobrindo como remover a barra lateral no WordPress

Dito isso, vamos dar uma olhada no método que você precisa usar para alterar facilmente o lado da barra lateral do WordPress usando CSS.

Alterando a barra lateral com CSS

Antes de fazer qualquer alteração em seu tema WordPress, você deve primeiro considerar o criando um tema filho. Ao usar um tema filho, você poderá atualizar o tema pai sem perder as alterações.

Discover Como exibir uma barra lateral diferente para cada item no WordPress

Segundo, você sempre deve criar um backup do seu site WordPress ao fazer alterações em tempo real no seu tema ativo.

Você precisará de um cliente FTP para editar os arquivos de tema do WordPress. Consulte o orientar sobre como usar o FTP.

Faça login no seu site WordPress usando o cliente FTP e navegue até a pasta de temas. Geralmente está localizado em:

 / Yoursite / wp-content / themes / your-theme-pasta / 

Agora você precisa baixar e abrir o arquivo de folha de estilo principal do seu tema WordPress em um editor de texto como o Bloco de notas. Este arquivo é chamado style.css, e está no diretório raiz do seu tema WordPress.

Discover como gerenciar arquivos e pastas do WordPress

Neste arquivo, encontre a classe CSS da sua barra lateral. Geralmente essa classe é " barra lateral ". Neste exemplo, usamos o tema padrão do WordPress " vinte quinze Quem tem essa classe para a barra lateral:

.sidebar {flutuar: esquerda; margem direita: -100%; largura máxima: 413px; posição: relativa; largura: 29.4118%; }

Como você pode ver, a barra lateral flutua para a esquerda com uma margem de -100%. Vamos mudar o flutuador para a direita:

.sidebar {float: direita; margem esquerda: -100%; largura máxima: 413px; posição: relativa; largura: 29.4118%; }

Salve suas alterações e faça o upload do arquivo style.css no seu site usando um cliente FTP. Agora, se você visitar seu site, ele ficará assim:

website demonstração mudar a barra lateral

Na verdade, movemos a barra lateral, mas não movemos a área de conteúdo. " Vinte Fifteen Usa esse CSS para definir a posição da área de conteúdo.

.site-content {display: bloco; flutuar: esquerda; margem esquerda: 29.4118%; largura: 70.5882%; }

Vamos alterá-lo para mover o conteúdo para a direita. Como segue:

.site-content {display: bloco; flutuar: esquerda; margem direita: 29.4118%; largura: 70.5882%; }

Aqui está a aparência do seu site depois de aplicar esse código CSS.

nova apresentação movida site barra lateral

Como você pode ver, alteramos o local da área de conteúdo e da barra lateral. No entanto, ainda há um bloco branco à esquerda.

Vá além descobrindo como gerenciar arquivos e pastas do WordPress

Você freqüentemente encontrará esses erros ao trabalhar com CSS. Vai demorar algum trabalho de detetive para entender o que está causando isso e como corrigi-lo.

Use a ferramenta "Inspetor" do seu navegador para visualizar o código-fonte. Aponte o mouse para a região afetada no navegador, clique com o botão direito e selecione "Inspetor" no menu do navegador.

inspecionar ferramentas do navegador

Conforme você move o mouse ao redor da visualização do código-fonte, você notará as áreas afetadas destacadas na visualização ao vivo. No painel direito, você poderá ver o CSS usado para o elemento selecionado.

Descubra nossos 5 WordPress plugins para editar visualmente CSS no seu blog

Portanto, o CSS correspondente ao item destacado deve ser reajustado.

@media screen e (largura mínima: 59.6875em) {body: before {background-color: #fff; caixa-sombra: 0 0 1px rgba (0, 0, 0, 0.15); conteúdo: ""; display: bloco; altura: 100%; altura mínima: 100%; posição: fixa; topo: 0; esquerda: 0; largura: 29.4118%; índice z: 0; / * Corrige bug piscando com rolagem no Safari * /}

Este código CSS adiciona um bloco vazio de 29,4118% de largura e uma largura de 100% à parte superior esquerda. Veja como vamos movê-lo para a direita.

@media screen e (largura mínima: 59.6875em) {body: before {background-color: #fff; caixa-sombra: 0 0 1px rgba (0, 0, 0, 0.15); conteúdo: ""; display: bloco; altura: 100%; altura mínima: 100%; posição: fixa; topo: 0; direita: 0; largura: 29.4118%; índice z: 0; / * Corrige bug piscando com rolagem no Safari * /}

Depois de salvar e enviar a folha de estilo para o servidor, seu site ficará assim.

nova barra lateral website olhar à direita

Trabalhar com CSS pode ser confuso para iniciantes. Se você não quiser fazer todo o trabalho manual, tente o WordPress CSS Hero plugin. Ele permite que você edite CSS sem escrever código e funciona com todos os temas do WordPress.

Descubra também alguns plugins premium do WordPress  

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Zxeion

Zxeion é um poderoso WordPress Plugin premium responsável por melhorar a segurança do seu site. Este plugin contém uma coleção de ferramentas de proteção e segurança que protegerão seu site contra possíveis ataques.Os plug-ins de wordpress Zxeion protegem o site contra ataques de vírus de malware

Seu sistema de proteção em tempo real o ajudará a identificar ameaças ao seu site e bloqueá-las, sem que você precise fazer nada.

Descubra também o nosso 7 plugins para aumentar suas barras laterais no WordPress

Suas características são: proteção em tempo real, excelente suporte ao cliente, atualizações regulares, bloqueador de endereço IP, excelente documentação, interface moderna e profissional, suporte dedicado ao cliente e outros

Descarregar | Demo | hospedagem na web

2. Slaido 

Slaido é um WordPress Plugin premium que permite que você escolha entre quase 320 modelos de sliders responsivos e importe um deles para o seu site em apenas alguns cliques. É um pacote completo de templates, perfeito para Revolução Slider. Então você terá que instalá-lo primeiro para usar totalmente este WordPress PluginPacote de modelos Slaido para wordpress de revolução deslizante

Suas principais características são: um layout responsivo de seus controles deslizantes, a facilidade de importar ou exportar controles deslizantes, atualizações regulares, suporte ao cliente disponível 24/7, animações fluidas e muito legais, a disponibilidade de tutoriais em vídeo para um início rápido, suporte para Google Fonts e muito mais.

Descarregar | Demo | hospedagem na web

3. Entre em contato conosco

O Formulário de Contato é um plugin premium responsivo para WordPress e uma ferramenta simples, mas rica em opções de personalização que permite a você exibir um formulário claro e encorajador, no qual seus visitantes podem contatá-lo deixando sua mensagem.

Contate-nos form para Wordpress plugin para formulário de contato

Você poderá definir os campos necessários, escolher o melhor layout dos campos e personalizá-lo completamente para incentivar seus clientes ou visitantes a deixarem suas sugestões ou mensagens.

Também convidamos você a ler: 10 WordPress plugins para criar e gerenciar um site de restaurante

Basta configurar o endereço de e-mail em que deseja receber as mensagens e usá-lo para expandir seus negócios na direção mais lucrativa.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

Conclusão

Aqui! É isso para este tutorial. Esperamos que isso ajude você a mudar a barra lateral do seu blog do WordPress. sinta-se livre para compartilhe este artigo com seus amigos em suas redes sociais favoritas

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Se você tiver sugestões ou comentários, deixe-os em nossa seção Comentários.

...