Índice

• Por qué son importantes las animaciones del precargador
• Estilos de precargadores que podría utilizar
• Paso a Paso: Cómo añadir un precargador personalizado en Elementor
  • Paso 1: Instale un plugin de precarga
  • Paso 2: Instalación de Preloader Plus
  • Paso 3: Configuración de los ajustes del precargador
  • Paso 4: Elegir su animación de precarga
  • Paso 5: Ajustar el diseño y el calendario
• Integrando el Preloader con Elementor para un mayor control
• Probar y optimizar su precargador
• Reflexiones finales: Cómo hacer que su sitio web Elementor destaque

Por qué son importantes las animaciones del precargador

Un precargador puede transformar la primera impresión de su sitio web Elementor en algo memorable. En lugar de una página en blanco o el temido spinner de carga, un precargador bien diseñado añade un toque de personalidad y mantiene a sus visitantes atentos mientras esperan a que aparezca su contenido. En este artículo, le guiaré a través del proceso de creación y personalización de animaciones de precarga en Elementor, desglosándolo en sencillos pasos que cualquiera puede seguir.

Imagínese que ha hecho clic en un enlace y se queda mirando una pantalla en blanco. Es frustrante, ¿verdad? Las animaciones de precarga resuelven este problema proporcionando información visual de que la página se está cargando activamente, manteniendo a los visitantes entretenidos y seguros de que su experiencia merecerá la pena. Los precargadores no sólo mejoran el compromiso del usuario, sino que también ayudan a transmitir la personalidad de su marca a través de la creatividad visual.

Estilos de precargadores que podría utilizar

Antes de sumergirnos en cómo añadir precargadores a su sitio web Elementor, vamos a explorar los diferentes estilos que puede utilizar:

1. Animación de la hilandera: Una elección clásica. Simple pero eficaz, la ruleta giratoria indica a los usuarios que algo está ocurriendo.
   • Caso práctico: Adecuado para sitios web minimalistas u orientados a la tecnología. Este estilo es directo y no distrae, por lo que resulta ideal para sitios web en los que la sencillez es la clave.
   • Consejos de personalización: Utilice los colores de su marca para el spinner para mantener la coherencia.
2. Barra de progreso: Ideal si desea transmitir un porcentaje exacto de carga, dando a los visitantes una idea de cuánto tiempo deben esperar.
   • Caso práctico: Ideal para sitios con mucho contenido, como los de comercio electrónico o los blogs con muchas imágenes. Las barras de progreso ofrecen a los usuarios una indicación clara del progreso de la carga, lo que reduce la frustración.
   • Consejos de personalización: Personalice el color de la barra de progreso para que se ajuste a la paleta de colores principal de su sitio web, y considere la posibilidad de añadir una etiqueta como "Cargando... Por favor espere" para hacerla más informativa.
3. Animación del logotipo: Puede animar su logotipo para mantener la marca y mostrar al mismo tiempo un toque creativo.
   • Caso práctico: Perfecto para sitios web centrados en la marca, como agencias, marcas de moda o portafolios creativos. Este tipo de precargador refuerza la identidad de la marca.
   • Consejos de personalización: Utilice herramientas como After Effects o LottieFiles para crear animaciones SVG ligeras de su logotipo. Asegúrese de que el bucle de animación sea suave y no dure más de unos segundos.
4. Fundido de entrada/salida de texto: Palabras como "Cargando..." que aparecen y se desvanecen son una opción sencilla pero impactante, que añade un toque personal.
   • Caso práctico: Ideal para blogs personales o sitios web comunitarios. Crea una sensación cálida y acogedora, haciendo que los usuarios se sientan más conectados.
   • Consejos de personalización: Personalice el texto para que se adapte a la voz de su marca: utilice algo único como "Agárrense fuerte, ¡un contenido asombroso está en camino!" para añadir personalidad.

El objetivo es elegir un precargador que se alinee con su marca, se adapte al estilo de su sitio web y mantenga a sus usuarios atentos mientras se carga el contenido.

Paso a Paso: Cómo añadir un precargador personalizado en Elementor

Ahora, entremos en los detalles de cómo puede añadir una animación de precarga personalizada a su sitio web Elementor. No hay necesidad de preocuparse si usted no es un experto en codificación-este método es amigable para principiantes.

Paso 1: Instale un plugin de precarga

La forma más sencilla de añadir una animación de precarga en Elementor es utilizando un plugin. Algunas de las opciones más populares incluyen:

• LoftLoader: Un plugin altamente personalizable que se integra bien con Elementor.
• Precargador Plus: Ofrece una gran flexibilidad para añadir animaciones y ajustar la configuración.
• PageLoader: Una opción premium con un amplio control sobre el diseño y la visualización.

Para este tutorial, vamos a utilizar el Precargador Plus plugin como ejemplo, ya que es fácil de usar y ofrece mucha personalización sin necesidad de tocar ningún código.

Paso 2: Instalación de Preloader Plus

1. Navegue hasta el panel de control de WordPress.
   • Acceda a su panel de administración de WordPress.
   • Desde el panel de control, tendrá acceso a la instalación de plugins y a la personalización de los ajustes.
2. Vaya a Plugins > Añadir nuevo.
   • Haga clic en Plugins en la barra lateral izquierda y, a continuación, haga clic en Añadir nuevo.
3. Busque "Preloader Plus" en la barra de búsqueda.
   • Escriba "Preloader Plus" en la barra de búsqueda y pulse Intro.
4. Haga clic en Instalar ahora y luego Active.
   • Una vez que encuentre el plugin, haga clic en Instalar ahora.
   • Una vez finalizada la instalación, pulse Active para habilitar el plugin en su sitio web.

Una vez activado, verá la configuración de Preloader Plus en su panel de control de WordPress.

Paso 3: Configuración de los ajustes del precargador

1. Abra la configuración de Preloader Plus del salpicadero.
   • Ir a Ajustes > Preloader Plus para acceder a las opciones de configuración.
2. Navegue hasta el Ajustes generales ficha.
   • Aquí puede activar o desactivar el precargador y configurar su comportamiento básico.
3. Habilitar el precargador encendiendo la palanca.
   • Esto activará el precargador en todo su sitio web en función de la configuración que elija.

A continuación, es el momento de decidir cuándo y dónde quiere que esté activo su precargador. Puede que sólo lo quiera para su página de inicio, o tal vez para todo el sitio.

• Páginas a mostrar: Seleccione las páginas en las que desea que sea visible el precargador (por ejemplo, Página de inicio, Todas las páginas, etc.).
  • Sugerencia: Para mejorar la experiencia del usuario, considere la posibilidad de activar el precargador sólo en las páginas con contenidos pesados que tarden más en cargarse.
• Mostrar frecuencia: Elija si desea mostrarlo en la sólo carga de la primera página o por cada vez que un visitante navega a una nueva página.
  • Sugerencia: Utilizarlo sólo para la carga de la primera página puede mejorar la experiencia general de navegación al reducir las animaciones de carga repetitivas.

Paso 4: Elegir su animación de precarga

1. Ir a la Ajustes de estilo ficha.
   • En esta pestaña puede configurar la apariencia de su precargador.
   • Ejemplo: Puede visitar https://example.com para ver cómo un precargador de animación de logotipo puede mejorar la imagen de marca de una cartera creativa.
2. Seleccione el tipo de precargador: Elija entre un spinner, una barra de progreso o una animación personalizada.
   • En función del estilo de su marca, seleccione el tipo de precargador que mejor se adapte a sus necesidades.
   • Ejemplo: Para un sitio web de comercio electrónico como https://shopdemo.comuna barra de progreso funciona bien para mantener informados a los usuarios.
3. Para Precargador personalizado, cargue un GIF o SVG de su logotipo si desea una animación de marca.
   • Haga clic en Cargue para añadir su animación de precarga personalizada.

Un GIF personalizado del logotipo de su marca puede ser una excelente forma de dejar una impresión en sus visitantes. Puede utilizar herramientas como Canva o Figma para crear sencillas animaciones de logotipos.

• Sugerencia: Asegúrese de que su animación personalizada es ligera para evitar ralentizar el proceso de carga. Procure que el tamaño del archivo de animación sea inferior a 200KB para un rendimiento óptimo.

Paso 5: Ajustar el diseño y el calendario

• Color de fondo: Ajuste el color de fondo para que coincida con la paleta de su marca. Puede utilizar un color que contraste con su logotipo para que destaque.
  • Instrucciones: Haga clic en el selector de color de la Color de fondo y elija un color que complemente el tema de su página web.
• Duración de la animación: Establezca la duración de la reproducción de la animación. Normalmente, manteniéndolo por debajo de 3 segundos funciona mejor para retener la atención del usuario sin frustraciones.
  • Sugerencia: Pruebe diferentes duraciones para encontrar el punto dulce en el que la precarga no se sienta ni demasiado rápida ni demasiado lenta.
• Fundido de entrada/salida de página: Utilice efectos de fundido de entrada/salida para proporcionar una transición más suave entre el precargador y el contenido real.
  • Sugerencia: Un ligero efecto de fundido puede hacer que la transición parezca más pulida y menos brusca.

Integrando el Preloader con Elementor para un mayor control

Si desea un control más granular sobre dónde y cuándo aparece su precargador, puede integrar Preloader Plus con Elementor utilizando CSS personalizado de Elementor característica.

• En Elementor, editar la página donde desea añadir el precargador.
  • Navegue hasta la página que desea editar y haga clic en Editar con Elementor.
• Abra el Avanzado y desplácese hacia abajo hasta CSS personalizado.
  • Haga clic en Avanzado en el panel de la izquierda, luego desplácese hacia abajo hasta encontrar la pestaña CSS personalizado campo.
• Añada código CSS para crear animaciones de precarga para secciones específicas de la página. Por ejemplo:

/* CSS personalizado para el precargador */
.preloader-section {
  animación: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% { opacidad: 0; }
  100% { opacidad: 1; }
}

• Sugerencia: Utilice esta función para añadir precargadores sólo a las secciones críticas que tardan más en cargarse, como las galerías de imágenes o los vídeos incrustados. Esto ayuda a mantener el resto de la página rápida y sensible.

Probar y optimizar su precargador

Ahora que ha configurado su precargador, es importante probarlo. Aquí tiene algunos consejos:

• Comprobar en diferentes dispositivos: Utilice herramientas como BrowserStack para ver el aspecto de su precargador en las vistas de móvil, tableta y escritorio. Asegúrese de que ofrece una experiencia coherente en todos los dispositivos.
  • Instrucciones: Abra BrowserStack, seleccione los dispositivos en los que desea realizar la prueba y navegue hasta su sitio web.
• Velocidad de carga del monitor: Recuerde que un precargador debe mejorar la experiencia sin ralentizar significativamente su página. Utilice herramientas como GTmetrix o Google PageSpeed Insights para garantizar la optimización de la velocidad de carga de su sitio web.
  • Sugerencia: Si su precargador está afectando negativamente a los tiempos de carga, considere optimizar el tamaño del archivo de animación o limitar el uso de precargadores a páginas específicas.
• Evite el uso excesivo: Las animaciones de precarga son eficaces, pero utilizarlas en exceso en todas las páginas puede frustrar a los visitantes. Utilícelas estratégicamente, sobre todo en las páginas más pesadas que necesitan más tiempo para cargarse.
  • Sugerencia: Pruebe el comportamiento del usuario con y sin precargadores en páginas específicas utilizando herramientas como Hotjar para ver si los precargadores mejoran o entorpecen la experiencia del usuario.

Reflexiones finales: Cómo hacer que su sitio web Elementor destaque

Un precargador bien diseñado es algo más que una pantalla de carga: es una poderosa herramienta de branding y de mejora de la experiencia del usuario. Para llevar su sitio web Elementor al siguiente nivel, no se limite a añadir un precargador. Optimice continuamente el rendimiento de su sitio y tenga en cuenta cómo cada interacción -desde los precargadores hasta las animaciones de página- contribuye a la historia de su marca.

Con estos pasos y consejos, ya tiene todo lo que necesita para crear un precargador personalizado que no sólo mantenga la atención de los visitantes, sino que también refuerce la identidad de su marca.