Skip to content

Como tornar a barra lateral facilmente recolhível em Divi (exemplo)

24 de abril de 2021

Tornar recolhível Barra lateral em Divi permite que o blog seja melhor visualizado, para que as informações sejam melhor distribuídas na tela.

Divi é um plugin para WordPress que permite criar blogs e editá-los constantemente para melhorar a experiência do leitor, desta forma você pode gerar atração para o seu blog.

Além de poder desenhar a sua página a partir de temas pré-estabelecidos, o Divi também lhe dá a possibilidade de começar do zero e assim poder criar a sua página ao seu gosto. Ao trabalhar com o design Divi, lembre-se de que você pode alterá-lo por seção.

Como recolher a barra lateral no Divi?

Bem, primeiro você deve saber que terá que acessar alguns códigos na página para poder editar esta opção.

Você deve lidar com os seguintes códigos para poder recolher a barra lateral, o primeiro será para faça a barra desaparecer mas ao mesmo tempo será apenas um botão que o usuário poderá usar para abrir e fechar a barra.

Tornar a barra lateral recolhível

@media only screen e (min-KID: 981px) {

/ * Botão expandir / recolher barra lateral * /

#db_hide_sidebar {

índice z: 10000;

preenchimento: 10px;

cursor: ponteiro;

}

.db_right_sidebar_collapsible #db_hide_sidebar {

direita: 0;

}

.db_left_sidebar_collapsible #db_hide_sidebar {

esquerda: 0;

}

.et_fixed_nav #db_hide_sidebar {

posição: fixa;

}

.et_non_fixed_nav #db_hide_sidebar {

posição: absoluta;

}

#db_hide_sidebar: antes de {

família de fontes: ‘ETModules’;

tamanho da fonte: 24px;

}

.et_right_sidebar #db_hide_sidebar: antes,

.db_left_sidebar_collapsible.et_full_width_page #db_hide_sidebar: antes de {

conteúdo: ‘ 39’;

}

.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar: antes,

.et_left_sidebar #db_hide_sidebar: antes de {

conteúdo: ‘ 38’;

}

/ * Garantir que a formatação de largura total corresponda à formatação da barra lateral * /

.db_sidebar_collapsible.et_full_width_page .et_post_meta_wrapper: first-child {

acolchoamento superior: 58px! importante;

}

}

Basta copiar este código e acessar o WordPress, uma vez lá, localize a seção Divi e selecione “Opções de temas”.

Selecione a guia “Integração“, Agora habilite a opção”Habilitar código de cabeçalho“, Continue colando o código na seção”Adicione o código ao do seu blog”.

Depois que o código for copiado, você só precisa salvar as alterações e atualizar a página ativa do seu blog para que possa ver as alterações. Uma seta aparecerá ao lado da barra lateral, permitindo que você abra e feche a barra lateral facilmente.

Remova a barra divisória entre o conteúdo e a barra lateral

Deixamos um segundo código com o qual você pode remover a barra que divide o espaço entre os conteúdo do blog e barra lateral.

Com este recurso ao recolher a barra lateral no Divi, o blog vai parecer mais amplo quando o leitor fecha a barra graças à seta que você colocou. O código é o seguinte:

# main-content .container: antes de {background: none;}

Agora você deve repita os passos acima, com a única diferença de que o código deve ser colado na seção “CSS customizado”, Salve as alterações e atualize a página ao vivo do seu blog.

recomendações

Muitos usuários usam seus smartphones para acessar seus blogs favoritos, por isso é recomendado que lidar com o conteúdo de uma forma que o torna fácil de ler. Outra maneira de conseguir isso é adicionando um menu recolhível ao seu site.

O conteúdo do seu blog deve ser organizado, assim você gera melhor legibilidade, isso ajuda muitas pessoas a seguir o conteúdo que você publica.

Layout da barra lateral Divi

Você pode adicionar diferentes opções ao seu blog para fazer isso mais interativo, como formulários de contato ou seções de comentários.

Agora aconselhamos que se você possui redes sociais e tem contato com seus leitores, leve em consideração suas recomendações, mas sempre mantendo a essência do seu conteúdo.

Desta maneira você gera engajamento Com o conteúdo que você produz, isso sempre manterá seu blog cheio de visitas, você também pode usar links para alguns produtos ou páginas que você recomenda e assim rentabilizar um pouco o seu trabalho.

Uma informação importante que o ajudará a obter visitas ao seu blog ou site é usar o BreadScrumb para melhorar o SEO e atrair visitantes.

Por fim, esperamos que nossas recomendações e este artigo sejam de grande ajuda para melhorar a exibição do seu blog.