Introducción
Una forma eficaz de mejorar esta experiencia es añadir un precargador -un animación o imagen that appears while the page content loads in the background. This gives users a seamless transition as they wait, ensuring your site feels polished and professional. In this guide, we’ll walk through each step of setting up a precargador en Elementor Pro, allowing you to display custom animations or brand logos that reinforce your site’s identity.
Haga clic para vaya al canal de compra original de Elementor Pro.
¿Qué es un precargador y por qué utilizarlo?
A preloader is a placeholder animation or graphic that displays while your site’s content is loading. This can be especially useful for pages with heavy content that may take longer to load. Using a preloader creates a better user experience by reducing perceived load time, keeping users engaged, and preventing them from seeing partially loaded pages. Additionally, a preloader allows you to showcase your branding and add a bit of personality to your website.
Cómo crear un precargador en Elementor Pro
Paso 1: Crear una plantilla de cabecera
El primer paso es crear una cabecera plantilla que incluye el precargador. Al colocar el precargador en una plantilla de cabecera, puede asegurarse de que aparezca de forma coherente en todas las páginas de su sitio web.
Acceder al constructor de temas:
- Vaya a su Panel de ElementorNavegar Plantillasy seleccione Creador de temas.
Crear una nueva plantilla de cabecera:
- En el Creador de temas, localice el Encabezado y pulse el botón + para crear una nueva plantilla.
- Seleccione una plantilla y pulse Insertar para ir a la página.
Publicar la plantilla:
- Después de diseñar su cabecera, haga clic en Publique.
- Cuando se le soliciten las condiciones de visualización, seleccione Todo el sitio para asegurarse de que el precargador se aplica a todas las páginas de su sitio web.
- Haga clic en Guardar y cerrar.
Paso 2: Añadir un contenedor y establecer un ID CSS
Now, let’s add a contenedor que albergará la animación del precargador. Establecer un único CSS ID para este contenedor nos permitirá orientarlo con CSS y JavaScript más adelante.
Añadir un contenedor:
- Dentro de su nueva plantilla de cabecera, añada un contenedor de una sola columna.
Establezca el ID de CSS:
- Ir a la Avanzado tab of the container’s settings.
- En el CSS ID campo, introduzca abc_preload. This ID will be used to apply custom CSS and JavaScript to control the preloader’s behavior.
Paso 3: Añadir un icono o widget de imagen
Para crear el elemento visual de su precargador, puede añadir un Icono o Imagen widget to display either a loading icon or your brand’s logo.
Añadir el widget:
- Puede añadir un widget Icono o Imagen al contenedor, dependiendo de si desea un icono de carga estándar o un logotipo personalizado.
Establezca el ID CSS para el Widget:
- Ir a la Avanzado tab of the widget’s settings and set the CSS ID to abc_loader.
Estilizar el icono o la imagen:
- Navegue hasta el Estilo tab and adjust the icon or image size to suit your design. It’s often best to use icons with a size of around 1px.
Paso 4: Añadir un widget HTML para controlar el precargador
Next, we’ll add an HTML widget that contains JavaScript to control when the preloader is displayed and when it disappears. This script will hide the preloader after a short delay, allowing your content to load smoothly.
Añadir el widget HTML:
- Debajo del widget Icono o Imagen, añada un widget HTML.
Insertar código JavaScript:
- En el widget HTML, pegue el siguiente código JavaScript:
<script>
document.addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
document.getElementById('abc_preload').style.display = 'none';
document.getElementById('content').classList.add('visible');
}, 2000); // Adjust the delay as needed (in milliseconds)
});
</script>
This code will hide the preloader 2 seconds after the page content has started loading. Based on your website’s average load time, you can adjust the 2000 para aumentar o disminuir el retardo (en milisegundos).
Establezca el ID CSS para el widget HTML:
- In the HTML widget’s Avanzado establezca el ID de CSS en abc_preloader_adds para evitar el espaciado involuntario.
Paso 5: Añadir CSS personalizado para dar estilo al precargador
With the structure in place, we’ll añadir CSS personalizado para dar estilo al contenedor de precarga y a la animación de carga.
Abrir la configuración CSS personalizada:
- Pulse el botón Ajuste de página (icono de engranaje) en el panel de Elementor.
- Ir a la Avanzado y abra la pestaña CSS personalizado sección.
- Pegue el siguiente código CSS:
#abc_preload {
posición: fija;
arriba 0;
izquierda: 0
ancho: 100%;
altura: 100%;
fondo: #fff;
mostrar: flex;
alinear-elementos: centro;
justify-content: center;
z-index: 1000;
}
#abc_loader {
borde 8px solid #363636;
border-top: 8px sólido #3498db;
radio del borde: 50%;
anchura: 50px;
altura: 50px;
animación: giro 1s lineal infinito;
}
@keyframes giro {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#abc_preloader_adds {
display: none;
}
- Este código lo hará:
- Cubra toda la página con un fondo blanco hasta que se oculte el precargador.
- Centre la pala cargadora (#abc_loader) tanto vertical como horizontalmente en la página.
- Animar que el cargador gire indefinidamente.
Paso 6: Publique la plantilla y pruebe el precargador
Publicar la plantilla de cabecera:
- Haga clic en Publique y confirme las condiciones de visualización como Todo el sitio para asegurarse de que el precargador está activo en todo su sitio.
Probar el precargador:
- Visite su página web para ver el precargador en acción. Si el tiempo de carga le parece demasiado corto o largo, ajuste el retardo en el código JavaScript según sea necesario.
Conclusión
Añadir un precargador a su sitio web Elementor Pro mejora la experiencia del usuario al crear una transición fluida mientras se carga el contenido. Esta animación o gráfico atrae a los usuarios, reduciendo los tiempos de carga percibidos, y refuerza la identidad de su marca con elementos visuales personalizados como logotipos o iconos de carga. El proceso de configuración implica:
- Creación de una plantilla de cabecera.
- Añadir un contenedor para el precargador.
- Se utilizan CSS y JavaScript para controlar su aspecto y comportamiento.
Personalizable y con capacidad de respuesta, un precargador bien diseñado añade un toque pulido a su sitio web, garantizando una experiencia fluida y profesional en todos los dispositivos.
Preguntas frecuentes
1. ¿Cuáles son las ventajas de utilizar un precargador?
Un precargador puede mejorar la experiencia del usuario reduciendo el tiempo de carga percibido, manteniendo a los usuarios atentos y añadiendo un aspecto profesional a su sitio. También ayuda a evitar que los usuarios vean páginas parcialmente cargadas, creando una experiencia de navegación más fluida.
2. ¿Puedo personalizar la animación del precargador?
Sí, puede personalizar la animación del precargador modificando el CSS del código. Puede modificar el elemento #abc_loader para incluir diferentes tipos de animaciones, colores, tamaños y otros efectos visuales. Si lo desea, puede sustituir el icono por un GIF u otra animación personalizada.
3. ¿Cómo puedo ajustar la duración de la precarga?
En el código JavaScript, verá un valor 2000 en la función setTimeout, que representa el retardo en milisegundos. Puede cambiar este valor para aumentar o disminuir el tiempo que el precargador está visible. Por ejemplo, cambiándolo a 3000 hará que el precargador se muestre durante 3 segundos.