post
Preload (Splash Screen) com JS e CSS no WordPress Elementor
Publicado 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.
Link de compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/1674
ID de Referência: 1674
Sugira uma publicação
Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.