Preload (Splash Screen) com JS e CSS no WordPress Elementor

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.

Fonte: https://www.youtube.com/watch?v=d8PKyPz4Zsc