Introducción

Una forma eficaz de mejorar esta experiencia es añadir un precargador -un animación o imagen que aparece mientras el contenido de la página se carga en segundo plano. Esto proporciona a los usuarios una transición fluida mientras esperan, asegurando que su sitio se sienta pulido y profesional. En esta guía, recorreremos cada paso de la configuración de un precargador en Elementor Pro, permitiéndole mostrar animaciones personalizadas o logotipos de marca que refuercen la identidad de su sitio.

Haga clic para vaya al canal de compra original de Elementor Pro.

¿Qué es un precargador y por qué utilizarlo?

Un precargador es una animación o gráfico de marcador de posición que se muestra mientras se carga el contenido de su sitio. Esto puede ser especialmente útil para páginas con contenido pesado que pueden tardar más en cargarse. El uso de un precargador crea una mejor experiencia de usuario al reducir el tiempo de carga percibido, mantener a los usuarios atentos y evitar que vean páginas parcialmente cargadas. Además, un precargador le permite mostrar su marca y añadir un poco de personalidad a su sitio web.

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

Ahora, añadamos un 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 de los ajustes del contenedor.

• En el CSS ID campo, introduzca abc_preload. Este ID se utilizará para aplicar CSS y JavaScript personalizados para controlar el comportamiento del precargador.

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 para mostrar un icono de carga o el logotipo de su marca.

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 de los ajustes del widget y establezca el ID CSS en abc_loader.

Estilizar el icono o la imagen:

• Navegue hasta el Estilo y ajuste el tamaño del icono o de la imagen para adaptarlo a su diseño. Suele ser mejor utilizar iconos con un tamaño de alrededor de 1px.

Paso 4: Añadir un widget HTML para controlar el precargador

A continuación, añadiremos un widget HTML que contenga JavaScript para controlar cuándo se muestra el precargador y cuándo desaparece. Este script ocultará el precargador tras un breve retardo, permitiendo que su contenido se cargue sin problemas.

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>

Este código ocultará el precargador 2 segundos después de que el contenido de la página haya comenzado a cargarse. Basándose en el tiempo medio de carga de su sitio web, puede ajustar el 2000 para aumentar o disminuir el retardo (en milisegundos).

Establezca el ID CSS para el widget HTML:

• En el widget HTML 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

Con la estructura en su lugar, vamos a 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.