OpenByt - Su fuente definitiva de conocimientos gratuitos sobre WordPress

Mejore su sitio web Elementor con animaciones de precargador personalizadas

f Lin

Índice

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:

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 instalar plugins y personalizar la configuración.
  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.

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.

Paso 5: Ajustar el diseño y el calendario

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.

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

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

Probar y optimizar su precargador

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

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.

Salir de la versión móvil