Cómo Agregar Animación Precargada a WordPress (Paso a Paso)
¿Desea agregar animación precargada a su sitio web de WordPress?
Los precargadores son animaciones que muestran el progreso de la carga de la página en segundo plano. Esto asegura a los usuarios que el sitio se está cargando y ayuda a mejorar la experiencia del usuario y reduce la tasa de rebote general.
En este artículo, le mostraremos paso a paso cómo agregar un precargador a WordPress.
¿Qué es una animación de precarga y por qué se agregó a WordPress?
Los precargadores son animaciones o mensajes de estado que muestran el progreso de la carga de la página en segundo plano.
Por lo general, cuando visita un sitio web, su navegador comienza a descargar diferentes partes del sitio web. Ciertas partes se cargan más rápido, como el texto y el código, mientras que las imágenes, los videos y los gráficos pueden tardar más.
Si la mayor parte de su contenido es texto con pocas imágenes y videos, entonces realmente no necesita agregar un precargador a su sitio web. En su lugar, debe centrarse en mejorar la velocidad y el rendimiento del sitio web.
Por otro lado, si la mayor parte de su contenido son incrustaciones de imágenes y videos, sus usuarios tendrán que esperar un tiempo para ver su contenido.
Durante estas descargas parciales, su sitio web puede sentirse lento. A veces, los usuarios pueden incluso pensar que su sitio web está roto. El precargador llenará los espacios y mostrará al usuario un indicador de progreso a medida que se carga la página.
Puede ver un ejemplo en vivo del precargador haciendo clic en el botón Vista previa mientras escribe una publicación de blog en WordPress.
WordPress abrirá una vista previa en vivo de su publicación de blog en una nueva ventana. Mostrará un precargador antes de mostrar la vista previa en vivo.
Habiendo dicho eso, veamos cómo agregar fácilmente un precargador a su sitio de WordPress. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar.
Método 1. Agregue un precargador en WordPress con WP Smart Preloader
Se recomienda este método porque es más fácil para los principiantes y no requiere que agregue código a WordPress o cambie su tema de WordPress.
Lo primero que debe hacer es instalar y activar el complemento WP Smart Preloader. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.
Después de la activación, debe acceder Ajustes » WP Smart Preloader y elija un estilo de precargador o una animación de carga de página.
El complemento viene con seis animaciones integradas para elegir. Simplemente seleccione la animación del menú desplegable “Seleccionar precargador”. También puede cargar su propio HTML y CSS personalizado para crear precargadores personalizados.
A continuación, puede hacer que el precargador solo aparezca en la página de inicio marcando la opción “Mostrar solo en la página de inicio”.
Después de eso, debe desplazarse hacia abajo hasta la sección “Duración para mostrar el cargador”. Aquí puede cambiar la duración del precargador.
La opción predeterminada es 1500 milisegundos o 1,5 segundos, lo que debería funcionar para la mayoría de los sitios web, pero puede cambiar esto si lo desea.
También puede configurar el tiempo que tarda el cargador en desaparecer por completo. La opción predeterminada es 2500 segundos o 2,5 segundos.
Una vez que haya terminado de personalizar la configuración del precargador, haga clic en el botón “Guardar cambios” para guardar la configuración.
Ahora puede visitar su sitio web para ver el precargador en acción.
Método 2. Agregue un precargador en WordPress usando el complemento LoftLoader
Otra forma de agregar animaciones de precargador a su sitio de WordPress es usar el complemento LoftLoader.
Lo primero que debe hacer es instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo instalar complementos de WordPress.
Después de la activación, debe ir a Ajustes » LoftLoader Lite Configure los ajustes del complemento.
Primero, debe asegurarse de que el botón “Habilitar LoftLoader” esté marcado con una marca de verificación.
Después de eso, puede hacer clic en la opción “Mostrar en”.
Luego, elija si desea que el precargador aparezca en todo el sitio web o solo en la página de inicio.
A continuación, haga clic en la flecha Atrás para volver a la página de configuración del complemento.
Después de eso, haga clic en la opción “Fondo”.
Desde aquí, puede elegir un nuevo color de fondo haciendo clic en el color en el cuadro “Elegir un color”. También puede ajustar la opacidad del fondo y elegir una nueva animación final.
Después de personalizar el fondo, vuelva a hacer clic en la flecha Atrás.
A continuación, haga clic en la opción de menú Cargadores para cambiar su precargador predeterminado.
Puede seleccionar una nueva animación en el cuadro Loader Animation. Si desea cambiar el color o el precargador, simplemente seleccione un nuevo color en el cuadro Elegir color.
Cuando haya terminado, haga clic en la flecha Atrás para volver a la pantalla de configuración principal.
A continuación, haga clic en la opción de menú Más.
Aquí puede establecer un tiempo de carga máximo para el precargador y mostrar un botón de cierre para que el usuario salga del cargador.
Haga clic en el menú “Tiempo máximo de carga” para establecer el tiempo máximo de carga.
Luego, establezca el tiempo máximo de carga en segundos.
Después de eso, puede hacer clic en el botón “Atrás” para agregar un botón de cierre a su precargador. No obstante, mantendremos la configuración por defecto para que no aparezca.
Una vez que haya terminado de personalizar su precargador, asegúrese de hacer clic en el botón Publicar para que su precargador surta efecto.
Ahora puede visitar su sitio web para ver su nuevo precargador en acción.
Esperamos que este artículo le haya ayudado a aprender cómo agregar animaciones de precarga a WordPress. También puede consultar nuestra guía sobre cómo obtener un dominio de correo electrónico gratuito y nuestras selecciones para el mejor software de nómina de recursos humanos para pequeñas empresas.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
