post

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

Publicado em: 06/05/2022

Categorias: BlogCSSElementorJavaScriptJSWordpress

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


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.

Clique aqui e entre em contato


Comentários