Como deixar o rodapé do divi aderente

Neste tutorial, mostraremos exatamente como tornar o rodapé em seu site Divi aderente. Usar um rodapé fixo pode ser uma das solicitações que você recebe ao projetar um site para um cliente ou uma necessidade que você tem ao criar seu próprio site. Mostraremos duas possibilidades que farão seu rodapé pegajoso. A primeira forma é através do código CSS e a segunda através do código jQuery. Ambas as formas funcionam, mas tudo depende de qual você prefere usar para criar o efeito pegajoso para o seu site.

Adicionar um rodapé fixo ao seu site não é algo que você pode fazer automaticamente no Divi builder. É por isso que vamos mostrar como chegar ao resultado exato que você deseja sem ter que se esforçar muito. Basta seguir este post passo a passo, copiar e colar algumas linhas de código e colocá-las no lugar certo.

Por que usar um rodapé autocolante?

Um rodapé adesivo é geralmente usado por um motivo principal; se você tiver uma página ou várias páginas em seu site que não têm conteúdo suficiente disponível para preencher uma tela inteira. Você pode, é claro, certificar-se de que tem conteúdo suficiente em uma página, mas se isso não agregar valor à página; não há necessidade de fazer isso.

Agora, caso não haja conteúdo suficiente para preencher toda a tela, a página terá um rodapé flutuante logo após o término do conteúdo. Isso geralmente não parece bom e não é o resultado que você deseja obter. Felizmente, você pode usar um rodapé adesivo para se livrar do rodapé flutuante. O rodapé adesivo garante que ele permaneça na parte inferior da página, sem criar espaço desnecessário. O comprimento da página permanecerá o mesmo e cada vez que você ajustar o tamanho da sua janela, o rodapé se modificará para a tela.

Aqui você tem a imagem de uma página curta que não possui um rodapé adesivo:

E aqui está a mesma imagem dessa página depois que um rodapé adesivo foi adicionado:

Diferença entre rodapé fixo e fixo

Nem todo mundo decide usar um rodapé em seu site, mas quando o faz; há muitas maneiras de estilizá-lo. Tudo depende de como é a estrutura do seu site e se você deseja incluir um 'manual' e um rodapé com um estilo diferente feito com o Divi builder.

Mas se estiver usando um rodapé padrão, você pode escolher como deseja estilizá-lo e como deseja que seja posicionado em seu site. As três posições principais que um rodapé pode ter em um site são flutuante, fixa e pegajosa.

Ao comparar o rodapé adesivo e o rodapé fixo; eles podem parecer iguais à primeira vista, mas não são. O rodapé fixo está sempre visível ao rolar por uma página em seu site, enquanto o rodapé fixo trata especificamente de páginas em que o conteúdo não é longo o suficiente para chegar à parte inferior da tela. Nesse caso específico em que o conteúdo não é longo o suficiente; ele se comportará como um rodapé fixo e ficará preso ao final da página; criando aquele 'efeito de rodapé fixo'.

No entanto, se o conteúdo for longo o suficiente, o rodapé aderente se comportará como de costume e a página empurrará o rodapé para a parte inferior da página para garantir que ele não apareça continuamente na tela. Na maioria dos casos, esse método é preferível a ter um rodapé fixo em todo o site porque dá mais espaço na janela para que o conteúdo apareça.

Crie um rodapé fixo em seu site Divi por meio de CSS

Sem mais atrasos, vamos começar a criar um rodapé adesivo para o seu site. O código que usaremos é muito simples, mas dá conta do recado. Você irá rapidamente passar de um rodapé flutuante em sua página para uma página onde o rodapé é empurrado para baixo se o conteúdo não for longo o suficiente.

Adicionar código CSS por meio das configurações da página (para uma página em particular)

Em certos casos, você quer fazer o sticky rodapé em apenas uma página particular. Nesta parte da postagem, mostraremos como fazer isso exatamente adicionando o código CSS ao campo CSS personalizado de uma página. Ao fazer isso, você garante que o código CSS se aplica apenas a essa página em seu site. O que também significa que o código CSS só será carregado quando alguém abrir essa página específica. Esse método geralmente é usado nos casos em que há apenas algumas páginas mais curtas no site para as quais você deseja inserir o rodapé.

Comece abrindo a página em que deseja que o rodapé fixo esteja ativo ou criando uma nova página onde deseja aplicá-lo. Em seguida, abra as configurações da página clicando no seguinte ícone em seu Divi builder:

Continuando, adicione o seguinte código ao campo Custom CSS na janela que você acabou de abrir:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

A partir do momento em que você visualiza sua página, o código CSS deve ser aplicado e tornar o rodapé fixo.

Adicionar código CSS por meio do personalizador de tema (visualização em tempo real)

Outra forma de adicionar o código é através do Theme Customizer. Se você estiver adicionando o código CSS dessa forma, ele se aplicará automaticamente a todo o site. Cada página terá este código CSS aplicado a ela. Ao adicionar o código por meio do Theme Customizer, você também pode ver diretamente as mudanças que acontecem em seu site.

Para adicionar o código CSS ao Theme Customizer, clique em 'Theme Customizer' no back end do seu site WordPress. Em seguida, role a página para baixo e abra a opção CSS adicional. Você verá todos os códigos CSS personalizados que usou até agora aparecer. Vá em frente e adicione o seguinte código a ele:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Adicionar código CSS por meio das opções do tema Divi

Por último, mas não menos importante, você também pode adicionar o código por meio das Opções do tema Divi. Essa é a maneira mais usada de adicionar código a um site onde você deseja que todo o site se beneficie do código.

Vá para Divi> Opções de tema> Role a página para baixo> Adicione o seguinte código CSS à caixa CSS personalizada:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Crie um rodapé fixo no seu site Divi por meio do JQuery

Adicionar código jQuery por meio do módulo de código (para uma página em particular)

Você pode adicionar o código jQuery usando o Code Module dentro do Divi builder. Isso, novamente, é usado principalmente quando não há muitas páginas com conteúdo curto e se você não deseja carregar o código jQuery para todo o site.

Adicione uma seção com uma linha de largura total à página em que você está trabalhando.

Continue adicionando um módulo de código a essa linha de largura total e cole o seguinte código nela:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Adicionar código jQuery por meio de opções de tema Divi

Outra possibilidade de adicionar o código jQuery é através das Opções do Divi Theme. Ao adicionar o código jQuery para todo o site, há um local específico nas Opções do tema Divi onde podemos fazer isso; no <head & gt; campo da guia Integração. É exatamente onde vamos adicionar o código agora.

Abra seu site WordPress> Vá para Divi> Abra as Opções de tema> Vá para a guia Integração e adicione o seguinte código jQuery ao <head> de seu site:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Pensamentos finais

Adicionar um rodapé fixo é geralmente necessário nos casos em que você tem uma página sem muito conteúdo. Você deseja se livrar do rodapé flutuante para que a estrutura da página pareça mais natural. Se você tiver algum comentário ou sugestão para postagens futuras em nossa seção de blog; certifique-se de deixar um comentário na seção de comentários abaixo para que possamos entrar em contato!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Vintagio / shutterstock.com