post #1674
Preload (Splash Screen) com JS e CSS no WordPress Elementor
Publicado em: 06/05/2022 / Atualizado em: 06/05/2022
Neste artigo vou mostrar de maneira rápida um código que pode ser usado para criar uma tela de preload, que irá aparecer antes do carregamento total da pagina.
Com o código abaixo, é possível adicionar em sites WordPress, que estão usando o plugin Elementor com o tema Hello Elementor.
Porem, você pode adaptar facilmente o código para qualquer website, pois o código é super simples.
Segue abaixo o trecho de código para ser copiado.
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($) {
$('.loader').delay(200).fadeOut('slow');
});
});
</script>
<style>
.elementor-element-edit-mode .loader {
display: none;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('LINK_DA_IMAGEM_OU_LOGO') 50% 50% no-repeat #ffffff;
background-size: 400px; /* <- Ajusta o tamanho da imagem ou logo*/
}
</style>O código acima, deve ser colocado em um “custom code” do elemento. Para isso acesse: Elementor > Custom Code, no menu lateral.
Em seguida, crie um “custom code”, e defina sua localização “Location” como “body – start”, e cole o código no campo logo abaixo. Salve!
OBS: Não se esqueça de trocar “LINK_DA_IMAGEM_OU_LOGO” no código pelo link da imagem ou logo que deseja mostrar antes do carregamento da pagina.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=1674
ID de Referência: 1674
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.