Como recolher facilmente a barra lateral no Divi

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 manipular os seguintes códigos para poder recolher a barra lateral, o primeiro será para fazer 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’;

}

/ * Certifique-se de 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;

}

}

</style>

<script>

jQuery (function ($) {

if ($ (‘# barra lateral’). comprimento) {

if ($ (‘body.et_right_sidebar’). length) {

$ (‘body’). addClass (‘db_sidebar_collapsible db_right_sidebar_collapsible’);

$ (‘# conteúdo principal’). prefixar (

$ (‘<span id = »db_hide_sidebar» title = »Alternar barra lateral»> </span>’) .click (function () {

$ (‘body’). toggleClass (‘et_right_sidebar et_full_width_page’);

$ (‘# barra lateral’). toggle ();

})

);

$ (‘body’). addClass (‘db_collapsible_sidebar’);

} else if ($ (‘body.et_left_sidebar’). length) {

$ (‘body’). addClass (‘db_sidebar_collapsible db_left_sidebar_collapsible’);

$ (‘# conteúdo principal’). prefixar (

$ (‘<span id = »db_hide_sidebar» title = »Alternar barra lateral»> </span>’) .click (function () {

$ (‘body’). toggleClass (‘et_left_sidebar et_full_width_page’);

$ (‘# barra lateral’). toggle ();

})

);

}

}

});

</script>

 

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

Selecione a aba ” Integração “, agora habilite a opção ” Habilitar código de cabeçalho “, continue colando o código na seção ” Adicionar código ao <cabeçalho> 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 o conteúdo do blog e a barra lateral .

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

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

Agora você deve repetir os passos anteriores , com a única diferença que o código deve ser colado na seção ” Custom CSS ” , 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 é recomendável que você trate o conteúdo de uma forma que facilite a leitura . Outra maneira de conseguir isso é adicionando um menu recolhível ao seu site .

O conteúdo do seu blog deve ser organizado, para que você gere uma melhor legibilidade , isso ajuda muitas pessoas a acompanharem o conteúdo que você publica.

Você pode adicionar diferentes opções ao seu blog para torná-lo 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 as recomendações deles, mas sempre mantendo a essência do seu conteúdo .

Desta forma 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 você melhorar a visualização do seu blog.