Como corrigir o rodapé do Divi

No tutorial Divi de hoje, mostraremos como criar um rodapé fixo para o seu site em vez de um normal. Em um post anterior, mostramos como torná-lo aderente, o que na verdade é diferente de corrigi-lo, embora possam parecer iguais a princípio. Se você não estava procurando torná-lo fixo, mas sim consertado, este post irá ajudá-lo.

Adicionar um rodapé fixo ao seu site pode ser uma solicitação que você teve de um de seus clientes ou uma necessidade que você tem do seu próprio site. Embora não seja tão frequentemente usado como um cabeçalho fixo, pode ser uma daquelas coisas com as quais você está lutando. Mostraremos duas maneiras de deixar seu rodapé adesivo no site Divi. O primeiro será usando algumas linhas CSS e o segundo será usando código jQuery. Ambas as formas farão modificações na folha de estilo CSS do rodapé em seu site.

Aqui você tem um exemplo de como o rodapé fixo se parece ao rolar:

Quando usar um rodapé fixo

Existem vários motivos pelos quais você gostaria de ter um rodapé fixo em seu site. Um desses motivos pode ser a relevância das informações que seu rodapé contém. Você poderia, por exemplo, colocar seus ícones sociais em seu rodapé e porque deseja incentivar os visitantes que estão em seu site a explorar seus canais de mídia social. Outra razão pode ser que você simplesmente goste do efeito que isso dá ao seu site.

Se estiver usando um rodapé fixo, você deve estar ciente de que uma parte da janela do visitante ficará ocupada o tempo todo. Isso significa que eles precisarão rolar mais para ver o mesmo conteúdo que veriam se não houvesse um rodapé fixo. Isso é um desafio porque os visitantes gostam de se esforçar o mínimo possível.

No entanto, se o seu rodapé não for tão grande, isso pode aumentar o número de ações que estão sendo realizadas nele. Desencorajamos o uso de um cabeçalho fixo, menu principal e rodapé ao mesmo tempo. Ao tornar todos os três fixos, o conteúdo exibido será reduzido drasticamente, o que pode levar a uma taxa de rejeição mais alta.

Diferença entre rodapé fixo e pegajoso

Antes de começarmos, explicaremos a diferença entre um rodapé fixo e um adesivo.

Um rodapé fixo é geralmente um pouco mais complexo. É feito para se comportar como um rodapé fixo se uma página não tiver conteúdo suficiente para empurrar o rodapé para a parte inferior da tela. Nos casos em que as páginas são longas o suficiente, o rodapé se comportará como um normal e será empurrado para baixo até o final da página, portanto, não a tela.

Vamos começar

Inscreva-se no nosso canal no Youtube

Começaremos imediatamente mostrando como adicionar o rodapé fixo ao seu site de duas maneiras; por meio de código CSS e por meio de código jQuery. Ambos os métodos funcionam, mas tudo depende de qual você prefere usar para o site que você precisa.

Adicionar rodapé fixo por meio de CSS

A primeira e mais fácil maneira de criar um rodapé fixo é adicionando algumas linhas CSS. Com o Divi Builder e o WordPress, podemos adicionar essas linhas em diferentes lugares. Vamos dar uma olhada neles.

Adicionar código CSS por meio de CSS personalizado para uma página

A primeira maneira de adicionar o código CSS é adicioná-lo a uma página em particular. Embora seja melhor fazer um rodapé fixo igual para cada página em seu site (para ter essa consistência em seu site), você pode optar por permitir que ele se aplique a uma página em particular também.

Abra a página em que deseja adicionar as linhas de código CSS e clique no botão a seguir do Divi Builder.

Role para baixo e adicione o seguinte código ao campo CSS personalizado:

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

Adicionar código CSS por meio do personalizador de tema

Outra forma de adicionar o código é por meio do Theme Customizer. Ao usar o Theme Customizer, você verá os resultados acontecerem em tempo real no seu site. O código que você adiciona por meio do Theme Customizer se aplica a todas as páginas do seu site.

Vá para Theme Optimizer em seu site> CSS Adicional> Cole as seguintes linhas de código CSS:

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

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

A última maneira de adicionar o código CSS ao seu site é por meio das Opções de tema. Quando você adiciona seu código no campo Custom CSS das Opções de tema, o código também se aplica a todo o site. Essa é a maneira mais usada de adicionar código CSS personalizado a todo o site Divi.

Vá para Divi> Opções de tema> Geral> Role para baixo e adicione o seguinte código ao campo CSS personalizado:

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

Adicionar rodapé fixo por meio de jQuery

Outra possibilidade que temos é fazer as alterações CSS por meio de algumas linhas de código jQuery. Quando você usa um rodapé fixo, geralmente quer ter certeza de que ele se aplica a todas as páginas do seu site. Esse tipo de consistência torna mais fácil para os visitantes navegar pelo seu site sem se confundir.

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

Abra a página onde deseja que o rodapé fixo seja aplicado e adicione uma nova seção padrão ao topo da página. Em seguida, escolha uma linha de largura total e adicione um Módulo de Código a ela. Abra o Módulo de Código e cole o seguinte código jQuery na Caixa de Conteúdo:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Ao adicionar o código jQuery por meio do Módulo de Código em uma página específica, o código se aplicará apenas a essa página. O resto do seu site terá um rodapé normal, enquanto aquele em que você usou o Módulo de Código terá um rodapé fixo.

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

A última opção para adicionar o código jQuery que torna seu rodapé fixo é através das Opções de Tema. As linhas de código serão aplicadas imediatamente a todo o seu site e oferecerão a consistência de que seu site precisa.

Vá para Divi> Opções de Tema> Integração> e cole as seguintes linhas de código no <head> de seu site:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Pensamentos finais

Mostramos como fazer um rodapé fixo em uma das postagens anteriores. Esta postagem tratou especialmente de como fazer um rodapé fixo para seu site. O rodapé fixo ficará sempre na parte inferior da tela do visitante durante a visita ao seu site. Se você tiver alguma dúvida ou sugestão, deixe 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 Zeeker2526 / shutterstock.com