Como remover as barras laterais do Divi

Remover a barra lateral do modelo de página padrão do Divi pode ser feito facilmente quando você estiver usando o Divi Builder. No entanto, uma vez que os modelos de página padrão do Divi (com a barra lateral) ainda aparecem em páginas como 404 e arquivos, você pode querer remover a barra lateral de seu modelo.

A maneira mais óbvia de sobrescrever o layout padrão da barra lateral direita do Divi é usar o Divi Builder para projetar a página ou postagem. No entanto, se você não for usar o Divi Builder para uma página ou postagem, existem duas maneiras principais de remover a barra lateral. A primeira é alterar o layout da página por página ao editar uma página ou postagem individual. A segunda é substituir a página padrão ou o modelo de postagem criando um modelo personalizado no Divi Theme Builder.

Hoje vou mostrar as diferentes maneiras de remover barras laterais no modelo padrão do Divi e substituir os modelos com o Divi Builder. Esperançosamente, isso irá equipá-lo com as ferramentas de que você precisa para criar um site de largura total projetado de forma consistente.

Vamos começar!

Removendo barras laterais nas páginas usando as configurações da página Divi

Alteração do layout padrão da barra lateral direita para postagens ou páginas individuais

Para páginas ou postagens que não usam o Divi Builder, o layout de página padrão inclui uma barra lateral direita semelhante a esta:

Se você não quiser usar o Divi Builder para essa página ou postagem e simplesmente quiser remover a barra lateral por página, basta localizar a caixa Configurações da página Divi na barra lateral ao editar sua página e selecionar largura total (ou não barra lateral ) para o layout da página.

Isso removerá a barra lateral dessa postagem ou página específica.

Removendo barras laterais na página da loja do WooCommerce, na página da categoria e nas páginas de produtos usando as opções do tema Divi

Se você tiver o WooCommerce instalado, poderá encontrar algumas opções nas Opções de tema Divi para alterar o layout da página WC Shop, Categoria e Produto.

Para remover a barra lateral nas páginas WC Shop e Category, navegue até Divi> Theme Options. Na guia Geral, encontre a opção “Layout da página da loja e da página da categoria para WooCommerce” e altere o layout para “Sem barra lateral” ou “Largura total”.

Para remover a barra lateral das páginas do produto, navegue até Divi> Opções de tema. Selecione a guia Construtor. Em Integração do tipo de postagem, selecione o layout do produto “Sem barra lateral” no menu suspenso.

Removendo barras laterais criando modelos personalizados usando o Theme Builder

Remover as barras laterais de cada página / postagem com as configurações da página Divi é uma boa solução ao criar novas postagens e páginas individualmente. No entanto, isso pode ser bastante complicado, especialmente se você decidir remover as barras laterais de todas as páginas. Além disso, o modelo padrão (com uma barra lateral) ainda é exibido em páginas como 404 e arquivos. Portanto, você pode remover a barra lateral de uma página ou modelo de postagem. Para fazer isso, você pode criar modelos personalizados usando o Divi Theme Builder. Isso lhe dará controle total sobre quais páginas deseja que as barras laterais ocultem globalmente.

O Divi's Theme Builder é uma ferramenta poderosa para criar modelos globais que se aplicam a qualquer página ou postagem que você desejar. Cada vez que você cria um novo layout de corpo para um modelo, esse modelo substituirá o layout de página padrão do Divi (que inclui uma barra lateral). Portanto, tudo o que você precisa fazer para remover uma barra lateral no nível do modelo é criar um novo modelo no Divi Theme Builder e atribuí-lo às páginas ou postagens de sua escolha.

Criação de um modelo de postagem de blog com largura total usando o Divi Builder

As postagens de blog são um ótimo exemplo de onde um modelo para todo o site sem uma barra lateral pode ser necessário. As opções de conteúdo dinâmico integradas do Divi permitem que você crie um modelo de postagem de blog que será aplicado a todas as postagens de blog em todo o site usando o Divi Builder e conteúdo dinâmico. Uma vez feito isso, tudo que você precisa fazer é atualizar o conteúdo do corpo real para todas as postagens futuras. O novo conteúdo da postagem herdará o design do modelo personalizado!

Aqui está um exemplo rápido de como fazer isso:

Primeiro, crie um novo modelo e atribua-o a Todas as postagens.

Em seguida, adicione um corpo personalizado ao modelo.

Usando o Editor de layout de modelo, projete todo o layout usando o Divi Builder combinado com os módulos e opções de conteúdo dinâmico integrados do Divi.

Por exemplo, você pode usar o Módulo Título da postagem para exibir o título da postagem dinamicamente. Ou você pode puxar o título do post como conteúdo dinâmico para o corpo de um módulo de texto e envolvê-lo com tags H1.

Você pode usar um módulo de imagem para puxar a imagem em destaque como conteúdo dinâmico.

Ou use uma série de módulos de sinopse que puxam metadados específicos como conteúdo dinâmico, como autor da postagem, biografia do autor da postagem, categorias de postagem, data de publicação da postagem e contagem de comentários.

Mais importante ainda, você deve incluir o módulo Post Content ao construir qualquer layout de corpo personalizado para o seu modelo. O módulo Post Content inclui a área para página ou post conteúdo a ser exibido dentro da área do corpo do modelo.

Depois que o modelo é criado, você pode criar facilmente uma nova postagem de blog usando o editor de postagem padrão do WordPress e fazer com que essa postagem herde o design do modelo de postagem de blog que você criou usando o Divi Theme Builder.

Para mais informações, verifique nossa postagem sobre como criar um modelo de postagem de blog com o Divi's Theme Builder.

Criação de um modelo de página de produto WooCommerce de largura total usando o Divi Builder

Se você quiser remover a barra lateral padrão das páginas de produtos, também pode criar um bom modelo de layout de largura total para todos os seus posts. Semelhante ao que fizemos com o modelo de postagem do blog, você também pode usar os módulos WooCommerce (ou Woo) integrados da Divi para criar um modelo de página de produto personalizado para todo o site, sem barra lateral.

Para fazer isso, basta criar um novo modelo e atribuí-lo a “Todos os produtos”.

Em seguida, adicione um corpo personalizado ao modelo e clique para construir o layout do corpo usando o editor de modelos.

Em seguida, use o Divi Builder para incluir os Módulos Woo dinâmicos para projetar o modelo de página do Produto.

Agora, você cria um novo produto no backend usando o editor de página de produto padrão, o produto herdará automaticamente o design do modelo de corpo atribuído.

Para mais informações, verifique nossa postagem sobre como criar um modelo de página de produto woo para todo o site.

Criação de modelos de página de arquivo de largura total usando o Divi Builder

O Theme Builder também facilita a criação de modelos de Archive Page sem barras laterais. A chave para criar um modelo para uma página de categoria é criar um novo modelo e atribuí-lo a um dos muitos modelos de arquivo disponíveis no Divi Builder. Por exemplo, você pode atribuí-lo a todas as páginas de arquivo em todo o site ou pode atribuí-lo ao modelo de página de categoria para que ele mostre apenas nas páginas que exibem um arquivo de postagens dentro de uma categoria.

O primeiro elemento essencial de conteúdo dinâmico para um modelo de arquivo deve incluir o título da postagem / arquivo.

O segundo elemento essencial do conteúdo dinâmico é o arquivo real de postagens a serem exibidas. Para fazer isso, adicione um módulo de blog e escolha a opção de exibir as postagens da página atual.

Para uma explicação completa, verifique nossa postagem sobre como construir um modelo de página de categoria para o seu blog usando o Divi Theme Builder.

Criação de um modelo de página 404 de largura total usando o Divi Builder

O Theme Builder também facilita a criação de um modelo de página 404 para o seu site Divi sem a barra lateral padrão. Uma página 404 não depende necessariamente de nenhum conteúdo dinâmico, então sinta-se à vontade para projetar o que quiser usando o Divi Builder.

Para uma explicação completa, confira nossa postagem sobre como criar um modelo de página 404 usando o Divi Theme Builder.

Criação de um modelo de página de pesquisa de largura total usando o Divi Builder

O Theme Builder também facilita a criação de um modelo de página de resultados de pesquisa para o seu site Divi sem a barra lateral padrão. Como os modelos de página de categoria, a chave para criar um modelo para resultados de pesquisa é criar uma área de corpo personalizada e incluir o seguinte:

1: Um título de postagem / arquivo como conteúdo dinâmico

2: O Módulo de Blog para exibir as postagens da página atual.

3: Um Módulo de Pesquisa para permitir que os usuários continuem as pesquisas conforme necessário.

Para uma explicação completa, confira nossa postagem sobre como construir um modelo de página de resultados de pesquisa para o seu site usando o Divi Theme Builder.

Não crie um modelo de corpo de largura total para todas as páginas, a menos que você tenha um motivo específico

Criar um modelo personalizado com um layout de corpo de largura total para todas as suas páginas pode parecer uma boa ideia inicialmente. No entanto, pode não funcionar como esperado. Por exemplo, você pode limitar a área em que pode usar o Divi Builder para a página ou criar uma área do corpo que seja muito larga para as páginas que não usam o Divi Builder. É por isso que é melhor criar um modelo de página apenas para as páginas que não usarão o Divi Builder.

Para mais informações, verifique a documentação sobre a construção de um modelo de corpo global.

Retirando a barra lateral padrão com CSS personalizado

Se você estiver usando os layouts de página de tema padrão do Divi sem usar o Divi Builder, ou se quiser se livrar da barra lateral em todo o site sem ter que substituí-la usando configurações de página individuais ou modelos de criador de tema, você pode usar alguns CSS à moda antiga .

Navegue até Divi> Opções de tema. Na guia Geral, cole o seguinte código na caixa CSS personalizado na parte inferior da página:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Pensamentos finais

Ao construir um site, é importante que todas as suas páginas mantenham o mesmo layout e design consistentes. Portanto, se você estiver construindo um site com um layout de largura total usando o Divi Builder, você pode querer manter esse layout para todas as suas páginas por padrão. Isso pode melhorar a experiência do usuário. De qualquer forma, agora você tem o poder de personalizar as exibições da barra lateral da maneira que achar melhor.

Espero que isso seja útil para o seu site e projetos futuros.

Estou ansioso para ouvir de você nos comentários.

Saúde!