Como remover a borda da barra lateral Divi

Uma coisa que quase todo usuário Divi quer saber como fazer com o tema Divi é remover a borda da barra lateral. Felizmente, essa é uma tarefa simples. Isso pode ser feito com código, mas, mais importante, é fácil de fazer com o Divi Theme Builder. Neste artigo, mostraremos como remover a borda da barra lateral Divi usando os dois métodos e veremos por que usar o Divi Theme Builder oferece os melhores resultados.

A barra lateral Divi padrão

A página padrão Divi e os layouts de postagem colocam uma linha entre o conteúdo e a barra lateral. Muitos dos elementos da barra lateral podem ser estilizados ou ajustados com o personalizador de tema, mas esta linha não é um deles. Esta é uma área em que faltam opções do WordPress.

As opções de tema Divi permitem que você mova a barra lateral para a direita ou esquerda, mas não inclui opções de estilo.

Divi também adiciona configurações que permitem que você escolha o layout da barra lateral na página e o nível de postagem. Isso inclui até a opção de remover a barra lateral para que nenhum widget seja exibido, permitindo que a área de conteúdo use toda a largura da página da web.

Essas opções fornecem controle sobre o layout, mas não sobre o estilo e não removem a borda da barra lateral. Vejamos dois métodos para estilizar ou remover a borda da barra lateral Divi.

Removendo ou estilizando a borda da barra lateral do Divi com código

Primeiro, vamos ver como remover ou estilizar a borda da barra lateral do tema Divi adicionando código ao Divi.

Você precisará adicionar algum CSS ao campo CSS personalizado de opções do tema Divi. Para acessar o campo CSS personalizado, vá para Divi > Opções de tema no menu do painel do WordPress. Permaneça na guia Geral e role até a parte inferior das configurações para colar seu código.

Aqui está o CSS de que você precisa:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

Este código informa ao WordPress que a borda da área do widget não tem largura, fazendo com que ela não seja exibida.

Cole o código no campo CSS personalizado e salve as alterações.

A borda foi removida. CSS funciona com o tema Divi para remover a borda da barra lateral, mas não é ideal e nem todo mundo quer lidar com código de qualquer tipo. E se você quiser construir a página do blog com o Divi Builder? A melhor opção é usar o Divi Theme Builder.

Como usar o Divi's Theme Builder para remover a borda da barra lateral Divi sem código

Também é possível usar o tema Divi para remover a borda da barra lateral sem código. Vá para o Divi Theme Builder selecionando Divi > Theme Builder no menu do painel do WordPress. Se você ainda não tem um layout de blog, selecione Adicionar novo modelo .

Este modelo será atribuído à sua página de blog, página de arquivo ou qualquer outra página que você quiser, portanto, certifique-se de ter esta página criada primeiro.

Um modal será aberto onde você pode selecionar onde este modelo aparecerá. Selecione a página do seu blog em Páginas específicas . Você também pode criar páginas de arquivo, páginas de autor, páginas de categoria, páginas de data, páginas de tag e muito mais. Clique em Salvar depois de fazer sua seleção.

Um modelo vazio agora está atribuído à sua página. Em seguida, você precisará criar o layout do blog. Clique na área rotulada Adicionar corpo personalizado .

Isso abre uma caixa suspensa onde você pode selecionar construir um corpo personalizado ou adicionar um da biblioteca. Clique na sua seleção. Estou selecionando construir o corpo personalizado.

Módulo Divi Sidebar

Selecionei um layout de duas colunas e coloquei um módulo de blog à esquerda e um módulo de barra lateral à direita. Como é um módulo Divi, você pode colocar a barra lateral em qualquer lugar que quiser, mas vou com o design tradicional do lado direito.

O módulo foi projetado para ser colocado no lado direito ou esquerdo e posiciona a borda de acordo. Por padrão, o módulo é configurado para ser exibido como uma barra lateral esquerda, então a borda fica no lado direito dos widgets.

Para alterar o layout, abra o módulo, selecione a guia Design , observe a seção Layout e escolha Direita na caixa suspensa Alinhamento . Este exemplo agora tem a borda à esquerda da área do widget, tornando-a uma barra lateral do lado direito.

Use esta configuração se quiser que a borda da barra lateral seja exibida. O alinhamento não importa se você deseja desativar a borda. Tenho certeza de que você já percebeu a alternância sob a caixa suspensa Alinhamento .

A segunda opção na seção Layout é uma alternância chamada Mostrar separador de borda . Isso permite que você desabilite ou habilite a borda. Está habilitado por padrão. Basta clicar no botão de alternar. A borda foi removida da barra lateral. Salve o layout e saia do editor. É tão fácil.

Por fim, selecione Salvar alterações antes de sair do Divi Theme Builder. Agora mostra um corpo personalizado para a página do Blog.

Minha página de blog agora mostra a barra lateral sem a borda. Claro, existem mais algumas coisas que você pode fazer se quiser um design melhor.

Criação de uma borda da barra lateral Divi personalizada

Se não quiser usar o tema Divi para remover a borda da barra lateral, mas não quiser a borda padrão do WordPress, você pode criar uma borda personalizada da barra lateral usando o módulo Divi da barra lateral.

Na guia Design do módulo da barra lateral, role até as configurações de Borda . Aqui, você pode adicionar uma borda a um lado do módulo. Selecione cada lado que você não deseja que a borda seja exibida e defina a largura da borda como 0. Você também pode escolher a largura da borda, escolher uma cor e selecionar um estilo. Os estilos incluem sólido, tracejado, pontilhado, duplo, sulco, cume, inserção, início e nenhum.

Para o lado que você deseja que a borda seja exibida, escolha a largura, a cor e o estilo da borda. Neste exemplo, selecionei mostrar a borda apenas no lado esquerdo do módulo. Eu defini a largura da borda como 7 pixels, a cor como laranja claro e o estilo da borda como pontilhado.

Minha página de blog agora exibe minha borda personalizada da barra lateral Divi.

Você pode até adicionar uma sombra de caixa aos outros três lados, se desejar. Neste exemplo, arredondei as bordas do lado direito. Cliquei no link do centro para que a borda pontilhada permaneça reta. Também ajustei a sombra da caixa para obter o design que desejo.

Aqui está meu design final com a borda pontilhada. A barra lateral combina bem com o design do blog.

Voltando à ideia de usar o tema Divi para remover a borda da barra lateral, aqui está o layout final do meu blog. Eu gosto de como isso acabou. Isso mostra que usar o módulo Divi abre muitas possibilidades para o design da barra lateral.

Conclusão

Esta é a nossa visão de como usar o tema Divi para remover a borda da barra lateral. É bastante simples de remover no código, mas usar o Divi Theme Builder oferece muito mais opções, o que lhe dá mais controle sobre o design. Esse recurso é extremamente básico, mas é algo que a maioria dos usuários Divi deseja aprender. Também é um bom exercício para aprender como pequenos ajustes nos módulos Divi podem fazer uma grande diferença no design do seu site.

Nós queremos ouvir de você. Você removeu a borda da barra lateral Divi usando um desses métodos? Conte-nos sobre sua experiência nos comentários abaixo.

Imagem em destaque via Andrew Rybalko / shutterstock.com