Como criar uma revelação de rodapé com Divi

No tutorial Divi de hoje, mostraremos como alcançar um certo efeito que você provavelmente nunca pensou em integrar em seu próprio site ou no de um cliente. Mais precisamente; vamos mostrar a você como criar uma revelação de rodapé. A revelação do rodapé basicamente espera até que você esteja no final da página e revela o rodapé de acordo com a maneira como você está rolando. Depois de percorrer toda a página, o rodapé será mostrado em sua forma original.

Adicionar um rodapé ao seu site pode trazer aquele toque extra que você gostaria de dar ao rodapé do seu site. Também é a última coisa que as pessoas verão ao rolar por qualquer página do seu site. Para mostrar o que exatamente queremos dizer com uma revelação de rodapé, vamos dar uma olhada no resultado final:

Você pode ver que, além de revelar o rodapé, também adicionamos uma sombra sutil ao conteúdo principal do nosso site. Fazendo isso, criamos uma espécie de perspectiva entre o conteúdo principal e o rodapé.

Como criar uma revelação de rodapé com Divi

Inscreva-se no nosso canal no Youtube

Adicione o código CSS necessário

Para obter o resultado da revelação do rodapé, precisaremos, em primeiro lugar, de algumas linhas de código CSS. Como existem diferentes maneiras de adicionar o código CSS ao seu site Divi, mostraremos a você todas as três. Primeiramente, mostraremos como adicionar o código às Opções de Tema. Em segundo lugar, adicionaremos o código por meio do Theme Customizer. Ao adicionar o código por meio de um dos dois métodos, a exibição do rodapé será aplicada imediatamente a todo o site. Por outro lado, se quiser que o código se aplique a uma página em particular, você também pode fazer isso. Ao mostrar como adicionar o código à página em que está trabalhando, você pode criar esse efeito exclusivamente para uma página.

As duas coisas principais de que precisamos em nosso código são o índice z e uma margem inferior para o conteúdo principal. Para garantir que o rodapé se encaixe perfeitamente, precisamos saber a altura do rodapé. Normalmente, o rodapé que está sendo usado tem um valor de 53px. Mas, pode ser que você tenha alterado a altura de acordo com suas necessidades. Depois de mostrar como adicionar a revelação do rodapé de maneira padrão, também mostraremos como ajustá-la à altura de qualquer rodapé.

Adicione o código CSS necessário por meio das opções de tema

A primeira maneira de mostrar como adicionar o código CSS é por meio das Opções de tema Divi. Este é o método usado com mais frequência para adicionar qualquer código CSS adicional ao seu site. Ao adicionar o código CSS nesta área, você o aplicará imediatamente a todo o site.

Para adicionar o código, vá para o painel do WordPress> Divi> Opções de tema> e copie e cole as seguintes linhas do código CSS no campo CSS personalizado na parte inferior da guia:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Depois de adicionar o código, vá para o seu site e observe o rodapé revelar fazer seu trabalho.

Adicionar o código CSS necessário por meio do personalizador de tema

Outra forma de adicionar o código CSS ao seu site Divi é por meio do Theme Customizer. Adicionar o código por meio do Customizador de tema ou Opções de tema é o mesmo. Depois de remover o código nas Opções de tema, ele também será removido no Personalizador de temas e vice-versa. Uma das vantagens de adicionar código por meio do Theme Customizer é que você pode ver tudo acontecer em tempo real. Os ajustes adicionais que você fizer no código, portanto, fornecerão imediatamente uma imagem clara do resultado final que você obterá.

Para adicionar o código ao Personalizador de tema, vá para o Painel do WordPress> Aparência> Personalizar> Role para baixo até 'CSS adicional'> e adicione as seguintes linhas de código CSS:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Adicione o código CSS necessário a apenas uma página

A última maneira de adicionar o rodapé para revelar as linhas de código CSS é adicionando-o a uma página em particular. Isso pode ser interessante se você quiser dar algum valor agregado às páginas que têm menos conteúdo de interação, por exemplo. Ao adicionar uma revelação de rodapé, você ainda tornará a página um pouco mais interativa e colocará o foco no conteúdo que está sendo fornecido no rodapé, como os ícones de mídia social.

Para adicionar o código CSS a uma página em particular, abra essa página específica. No canto superior direito do Divi Builder nessa página, você verá o seguinte ícone.

Clique no ícone e cole as seguintes linhas de código no campo CSS personalizado:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

Depois de salvar as configurações, você verá o rodapé aparecer nessa página em particular.

Alterar altura do rodapé

Agora, o método que explicamos acima conta apenas para o rodapé padrão fornecido. Uma vez que você está lidando com outra altura, o código não fará seu trabalho corretamente. Levamos isso em consideração e mostraremos como fazer o rodapé revelar para outras alturas também.

A qualquer momento, você pode escolher a altura que deseja atribuir ao seu rodapé. Temos que definir a altura para dois CSS IDs: o rodapé principal e a parte inferior do rodapé. Ajustando a altura nesses dois lugares, o rodapé se ajustará no lugar. Claro, depois de fazer isso, você também precisa alterar a margem inferior do seu conteúdo principal. Se você quiser um rodapé com altura de 60 px, por exemplo, precisará das seguintes linhas de código:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Você pode ver que há três lugares onde precisamos do valor '60px'. Se você tiver outro valor de altura que gostaria de atribuir ao seu rodapé, certifique-se de alterá-lo em todos os três lugares; o conteúdo principal, rodapé principal e parte inferior do rodapé.

Adicionar CSS Box Shadow

Outra coisa que você pode fazer para adicionar um pouco de perspectiva e interação ao seu site é adicionar um pouco de sombra de caixa ao conteúdo principal. O rodapé já mostra que ele está localizado 'abaixo' do conteúdo principal. Depois de adicionar a sombra da caixa, você vai enfatizar isso. Por ter uma sombra, a distância ilusória em altura entre o conteúdo principal e o rodapé parecerá maior.

Para adicionar a sombra da caixa ao rodapé, use as seguintes linhas de código:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

É isso! Sua revelação de rodapé agora deve funcionar bem.

Pensamentos finais

No post de hoje, mostramos como você pode criar um efeito de revelação de rodapé em seu site. Certifique-se de usar o código CSS personalizado fornecido para criar o efeito e garantir que ele se ajuste à altura do seu rodapé. Se você quiser dar uma perspectiva adicional a ele, recomendamos adicionar a sombra da caixa ao conteúdo principal, conforme mostrado na etapa acima. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

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 Demja / shutterstock.com