Al construir un sitio web con Elementor, es fundamental crear una experiencia visual fluida para sus usuarios.precargadorEs posible mostrar animaciones de carga antes de que el contenido de la página esté completamente cargado. A continuación, le daremos una guía paso a paso sobre cómo se puede utilizar la función Elementor Pro Cree un precargador en el

¿Qué es un precargador?

Un precargador suele ser una imagen o animación que un sitio web muestra antes de que el contenido se cargue por completo. Con los precargadores, se pueden mostrar logotipos de marcas o animaciones específicas para ofrecer a los usuarios una experiencia de navegación más profesional y fluida.

Paso 1: Crear una plantilla de título

En primer lugar, es necesarioCrear una plantilla de títulopara aplicar el precargador a todas las páginas del sitio.
Procedimiento operativo:

1. Navegue hasta el panel de control de Elementor en la sección plantilla > Generador de temas.

2. golpe (en el teclado) leyenda y, a continuación, pulse el botón + para crear una nueva plantilla de título.

3. Cuando haya terminado de configurar la plantilla, haga clic en Correo electrónico: y aplique las condiciones de visualización.

El sistema mostrará Condiciones de visualización Ventana. Aquí, seleccione el rango de páginas al que desea aplicar esta plantilla de cabecera. Seleccione la Página web completa garantizará que este título aparezca en todas las páginas. Confirme la selección y haga clic en Guardar y cerrar para completar la liberación.

Paso 2: Añadir el contenedor y establecer el ID CSS

Dentro de la plantilla de título, añada un contenedor para alojar la animación precargada.
Procedimiento operativo:

1. En la página de edición de la plantilla de título, añada uncontenedor de una columna.

2. Haga clic en elalto nivelestablezca el ID de CSS en der_preload.

Paso 3: Añadir un icono o imagen de widget

Añada efectos visuales al precargador, como iconos o logotipos de marca.
Procedimiento operativo:

1. En el contenedor, añada el icono (informática) tal vez imágenes Widget.

2. En el widgetalto nivelmenú, establezca el ID de CSS en der_loader.

3. entrar entipocambie el tamaño del icono (el ajuste recomendado es 1) para adaptarlo a sus necesidades de diseño.

Paso 4: Añadir widget HTML para ejecutar scripts

A continuación, añada el widget HTML e inserte el código JavaScript para controlar la visualización y ocultación del precargador.
Procedimiento operativo:

1. Añadir debajo del icono o widget de imagen HTML Widget.

2. Inserte el siguiente código:

<script> document.addEventListener('DOMContentLoaded', function () { setTimeout(function () { document.getElementById('der_preload').style.display = 'none'; document.getElementById('content').classList.add('visible'); }, 2000); }); </script>

3. En el widget HTMLalto nivelestablezca el ID de CSS en der_preloader_addspara ocultar el widget y evitar espacios en blanco innecesarios.

Paso 5: Añadir CSS personalizado

Para que el precargador funcione, añada algo de código CSS para embellecer el efecto de precarga.

1. Pulse el icono de configuración de página para abrir elalto nivelMenú.

2. Pegue el siguiente código en el campo CSS personalizado:

#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items. center; justify-content: center; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border- radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #der_preloader_adds { display: none; }

Paso 6: Publicar y probar el precargador

Publique su plantilla yAjuste de las condiciones de visualizaciónpara asegurarse de que el precargador se muestra correctamente en la página especificada.
Procedimiento operativo:

1. golpe (en el teclado) Correo electrónico:, en la ventana emergente de condiciones de visualización, seleccione Página web completa.

2. Guarde la configuración y visite la página de su sitio web para comprobar si el precargador funciona como se espera.

resúmenes

Con los pasos anteriores, ha creado con éxito un precargador personalizado de Elementor Pro. El precargador puede personalizarse aún más ajustando el código CSS y JavaScript para alinearlo con el estilo de su marca.