post #1674

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

Publicado em: 06/05/2022 / Atualizado em: 06/05/2022

Categorias: BlogCSSElementorJavaScript (JS)JSWordpress

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

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para 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 e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato