Guía completa para crear precargadores profesionales con Elementor Pro para mejorar la experiencia de carga del sitio web

Al crear un sitio web con Elementor, es fundamental crear una experiencia visual fluida para los 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 Crear 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. Vaya al panel de control de Elementor en la carpeta plantilla > Generador de temas.

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

3. Cuando haya terminado de configurar la plantilla, haga clic en escriba a y aplica 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 Todo el sitio web garantizará que este título se muestre 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 contener la animación precargada.
Procedimiento operativo:

1. En la página de edición de la plantilla de título, añada un iconocontenedor monocolumna.

2. Haga clic en el botónalto 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 nivelestablezca el ID de CSS en der_loader.

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

Paso 4: Añadir widget HTML para ejecutar scripts

A continuación, añade el widget HTML e inserta 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:

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

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ñade algo de código CSS para embellecer el efecto de precarga.

1. Haga clic en 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 { posición: fijo; arriba: 0; izquierda: 0; ancho: 100%; alto: 100%; fondo: #fff; pantalla: flex; alinear-elementos. 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) escriba aen la ventana emergente de condiciones de visualización, seleccione Todo el sitio web.

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, has creado con éxito un precargador personalizado de Elementor Pro. El precargador se puede personalizar aún más ajustando el código CSS y JavaScript para alinearlo con el estilo de tu marca.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: [email protected]
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres