Cómo agregar una animación de precarga a WordPress (paso a paso)

¿Alguna vez has notado ese ícono giratorio o animación que aparece mientras carga un sitio web? Esa es una animación de precarga, y es una herramienta útil que puedes usar en tus proyectos de WordPress.

Las precargas cumplen un propósito real. En sitios con mucho contenido, mantienen a los visitantes interesados durante esos cruciales segundos de carga, lo que puede reducir las tasas de rebote.

Y para los sitios de negocios, una precarga de marca puede incluso agregar un toque profesional.

Si piensas que esto suena complicado, no te preocupes. Hemos ideado 2 métodos para agregar una animación de precarga a WordPress, adecuados para usuarios de todos los niveles de habilidad.

¿Por qué agregar una animación de precarga en WordPress?

Una precarga o un cargador de página es una animación que ves mientras esperas que cargue una página. Le dice a los usuarios que la página web aún se está preparando y les pide que esperen pacientemente. Una vez que termina de cargar, la precarga desaparece y el visitante puede ver la página web normalmente.

Aquí tienes un ejemplo de este elemento de diseño de WordPress:

Un escenario en el que podrías querer agregar una animación de carga es si tu página web tiene muchas imágenes grandes o incrustaciones de video. En este caso, el tiempo de carga de tu página será más largo de lo normal, y querrás que los usuarios permanezcan el tiempo suficiente para que la página aparezca por completo.

Si tu página no tiene muchos elementos pesados, entonces es mejor enfocarse en mejorar la velocidad y el rendimiento de tu sitio web. También podrías considerar actualizar a un mejor proveedor de hosting de WordPress.

Dicho esto, veamos cómo puedes agregar fácilmente una animación de carga de página a tu sitio web de WordPress. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas usar:

• Cómo agregar una animación de carga simple con WP Smart Preloader
• How to Add a Customizable Loading Animation With Safelayout Cute Preloader
• Frequently Asked Questions About WordPress Preloaders

Cómo agregar una animación de carga simple con WP Smart Preloader

Una forma fácil de agregar una animación de precarga en WordPress es usando WP Smart Preloader.

Este plugin es una excelente opción si deseas una solución rápida y sencilla sin perderte en demasiada configuración.

Esto se debe a que tiene 6 animaciones de precarga de WordPress integradas que puedes usar, y no tienes que configurar muchas opciones para habilitar la animación.

Lo primero que necesitas hacer es instalar y activar el plugin WP Smart Preloader. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, ve a Ajustes » WP Smart Preloader y luego abre el menú desplegable ‘Smart Preloader’. Esto muestra todas las animaciones diferentes que puedes usar.

El plugin mostrará una vista previa de la animación que elijas, para que puedas seleccionar diferentes precargadores y ver cuál te gusta más.

Por defecto, la animación aparecerá en todo tu sitio web de WordPress, pero si lo prefieres, puedes usarla solo en tu página de inicio. Simplemente marca la casilla ‘Mostrar solo en la página de inicio’.

Si quieres crear tu propia animación CSS, simplemente escribe tu código en el cuadro de ‘CSS personalizado’.

Otra opción es crear una animación HTML5 personalizada agregando código al cuadro de ‘Animación personalizada’.

Después de elegir una animación, desplázate hasta la sección ‘Duración para mostrar el cargador’. Aquí, puedes cambiar cuánto tiempo se reproduce la precarga. 

La opción predeterminada es de 1500 milisegundos o 1.5 segundos. Esto debería funcionar bien para la mayoría de los sitios, pero puedes escribir un número diferente si lo deseas.

Por defecto, la animación tardará 2500 milisegundos o 2.5 segundos en desvanecerse por completo. Para cambiar esto, simplemente escribe un número mayor o menor en el campo ‘Cargador para desvanecer’.

Cuando estés satisfecho con la configuración de la precarga, simplemente haz clic en el botón ‘Guardar cambios’ para almacenar tu configuración.

Ahora puedes visitar tu blog de WordPress o sitio web para ver la precarga en acción.

Cómo agregar una animación de carga personalizable con Safelayout Cute Preloader

El primer plugin facilita la adición de una animación de carga en WordPress. Sin embargo, si deseas un mayor control sobre el diseño para que coincida con tu marca, puedes consultar Safelayout Cute Preloader.

Para empezar, procede a instalar y activar el plugin en tu área de administración de WordPress. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activo, navega a Ajustes » Safelayout Preloader para comenzar a configurarlo.

Paso 1: Habilita el Preloader y Elige un Preset

Primero, necesitas activar el preloader y decidir dónde aparecerá en tu sitio.

Puedes empezar en la pestaña de ‘Presets’ para elegir un diseño prehecho. Si te gusta uno, simplemente haz clic en el botón ‘Cambiar ajustes a este preloader’ debajo de la plantilla.

Luego, cambia a la pestaña de ‘Ajustes de visualización’.

Aquí, necesitas marcar la casilla ‘Habilitar Safelayout Cute Preloader’ para asegurarte de que el plugin esté funcionando.

Después, usa el menú desplegable ‘Mostrar en’ para elegir dónde mostrar el preloader. Para este tutorial, elegiremos ‘Sitio web completo’.

En esta pantalla, también puedes establecer la duración de la animación.

• Tiempo Mínimo de Carga: Esto establece la menor cantidad de tiempo que el preloader será visible. Es útil si quieres asegurarte de que tu animación de marca siempre se vea al menos por un momento, incluso si tu página se carga instantáneamente.
• Tiempo Máximo de Carga: Esto establece la mayor cantidad de tiempo que el preloader será visible. Esto actúa como una red de seguridad, ocultando automáticamente el preloader para que los usuarios no se queden viéndolo si tu página tiene un error de carga.

También puedes elegir mostrar un botón de ‘Cerrar’ después de que pasen unos segundos. Una vez que hayas realizado tus cambios, simplemente haz clic en ‘Guardar Cambios’.

Paso 2: Personaliza la Animación Principal

Ahora, puedes diseñar el aspecto de la animación en sí. Esto incluye el fondo, el icono principal y una barra de progreso opcional.

Primero, ve a la pestaña ‘Fondo’.

Aquí puedes elegir un efecto de animación, cambiar el color de fondo y ajustar su opacidad.

Si no quieres un efecto de fondo especial, simplemente selecciona ‘Sin Fondo’.

Luego, haz clic en la pestaña ‘Barra de progreso’.

Una barra de progreso es una excelente manera de mostrar a los visitantes que la página se está cargando.

Puedes elegir una forma y luego personalizar su color, posición y tamaño.

Si no quieres una, simplemente elige ‘Sin barra de progreso’.

Después de eso, dirígete a la pestaña ‘Icono’.

Este es el gráfico animado principal, como un círculo giratorio.

Puedes elegir un icono y luego cambiar su tamaño, color y estilo de animación. Si sientes que un icono es demasiado con tu otra configuración, puedes seleccionar ‘Sin icono’.

Recuerda hacer clic en el botón ‘Guardar Cambios’ al terminar de personalizar cada pestaña.

Paso 3: Agrega tu Marca y Texto

Finalmente, puedes agregar tu logo y texto personalizado para que el precargador coincida perfectamente con tu marca.

Ve a la pestaña ‘Imagen de Marca’ y marca la casilla ‘Mostrar marca’ para agregar tu logo.

Luego, haz clic en el botón ‘Biblioteca de Medios’ para subir la imagen de tu logo.

Después, puedes ajustar la posición y los márgenes del logo para que encaje bien con los demás elementos.

A continuación, veamos la pestaña ‘Contador’.

Esta configuración muestra un porcentaje del 0% al 100% para indicar el progreso de la carga. Puedes habilitarla y personalizar su posición, color y tamaño de fuente.

Finalmente, ve a la pestaña ‘Texto’. Por defecto, el precargador muestra el texto ‘Cargando…’, pero puedes cambiarlo por algo más creativo.

Simplemente marca la casilla ‘Mostrar texto’, escribe tu propio mensaje y personaliza su fuente, color y posición.

Una vez que hayas terminado, haz clic en el botón ‘Guardar Cambios’.

¡Y eso es todo! Tu animación de precargador debería aparecer ahora según tus configuraciones. Puedes ver tu sitio en móvil, escritorio o tableta para verlo en acción.

Así es como se ve el nuestro:

Preguntas Frecuentes Sobre Precargadores de WordPress

A lo largo de los años, muchos lectores nos han preguntado sobre el uso de precargadores. Aquí están las respuestas a algunas de las preguntas más comunes.

¿Los precargadores afectan la velocidad del sitio web?

Un precargador en sí mismo no hace que tu sitio web sea más rápido. Su propósito es mejorar la experiencia del usuario al enmascarar el proceso de carga con una animación elegante.

Para mejorar realmente la velocidad de tu sitio, deberías enfocarte en cosas como el caché con WP Rocket, optimizar tus imágenes y usar un proveedor de hosting de alto rendimiento.

¿Los precargadores son malos para el SEO?

Cuando se implementa correctamente, un precargador ligero no debería dañar tu SEO. Sin embargo, una animación mal codificada o pesada podría ralentizar la carga inicial de la página.

Esto puede afectar negativamente tus Core Web Vitals, que son importantes para los rankings de búsqueda. La clave es mantenerlo simple y rápido.

¿Puedo usar un precargador solo en páginas específicas?

Sí, absolutamente. La mayoría de los plugins de precargador te permiten elegir dónde aparece la animación.

Puedes habilitarlo en todo el sitio, solo en la página de inicio, o incluso en publicaciones y páginas específicas donde esperas tiempos de carga más largos.

¿Cuál es la diferencia entre un precargador y una página de bienvenida?

Un precargador se reproduce mientras tu contenido se carga y desaparece automáticamente.

Una página de bienvenida es una pantalla introductoria separada que requiere que el usuario haga clic en un enlace o botón para ingresar al sitio web principal.

Generalmente desaconsejamos el uso de páginas de inicio (splash pages) porque crean un paso adicional para los visitantes y pueden tener un impacto negativo en tu tasa de rebote y SEO.

Más trucos de WordPress para atraer a los visitantes de tu sitio web

Agregar una animación de precarga es solo una de las muchas maneras de mejorar tu sitio de WordPress. Si buscas ideas más creativas para cautivar a tu audiencia, te tenemos cubierto:

• Cómo agregar un efecto parallax a cualquier tema de WordPress – Crea profundidad e interés visual con esta técnica de ilusión de desplazamiento.
• Cómo agregar copos de nieve cayendo en tu blog de WordPress – Deleita a tus visitantes con un toque de magia invernal en tu sitio.
• Cómo agregar fácilmente el modo oscuro a tu sitio web de WordPress – Ofrece una experiencia de navegación más cómoda con esta popular función.
• Formas de agregar efectos de Halloween a tu sitio de WordPress – Dale un toque espeluznante a tu sitio con estos divertidos y festivos trucos de Halloween.
• Cómo agregar un fondo animado en WordPress – Haz una declaración audaz con fondos en movimiento que llamen la atención.
• Cómo agregar un video de YouTube como fondo de pantalla completa en WordPress – Crea una primera impresión impactante con fondos de video dinámicos.
• Cómo agregar scroll infinito a tu sitio de WordPress (Guía paso a paso) – Mantén a los visitantes enganchados cargando sin problemas más contenido a medida que se desplazan.

Esperamos que este artículo te haya ayudado a aprender cómo agregar fácilmente una animación de precarga a tu sitio de WordPress. También te puede interesar consultar nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar en WordPress y nuestra guía completa sobre cómo editar un sitio web de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.