¿Desea agregar una animación de precarga a su sitio de WordPress?
Un precargador es una animación que muestra el progreso de la carga de una página en segundo plano. Esto asegura a los usuarios que el sitio web se está cargando y puede ayudar a mejorar la experiencia del usuario y reducir la tasa de rebote general.
En este artículo, le mostraremos cómo agregar un precargador a WordPress, paso a paso.
¿Qué es una animación de precarga y por qué agregarla a WordPress?
Un precargador es una animación o mensaje de estado que muestra el progreso de carga de la página en segundo plano.
Por lo general, cuando visita un sitio, su navegador comienza a descargar diferentes partes del sitio web. Algunas 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 muy 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 imágenes e incrustaciones de video, entonces sus usuarios deberán esperar un tiempo antes de poder ver su contenido.
Durante estas descargas parciales, su sitio web puede sentirse lento. A veces, los usuarios pueden incluso pensar que su sitio está dañado. Un precargador llenará el espacio y le mostrará al usuario un indicador de progreso mientras se carga la página.
Puede ver un ejemplo en vivo de un 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.
Dicho esto, veamos cómo puede agregar fácilmente un precargador a su sitio web de WordPress. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar.
Método 1. Agregar 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 realice cambios en su tema de WordPress.
Lo primero que debe hacer es instalar y activar el Precargador inteligente WP enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Tras la activación, debe visitar 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 un precargador personalizado.
A continuación, puede hacer que el precargador aparezca solo 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, pero puede cambiar esto si lo desea.
También puede establecer cuánto tiempo tarda el cargador en desvanecerse 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. Agregar un precargador en WordPress con el complemento LoftLoader
Otra forma de agregar una animación de precarga a su sitio web de WordPress es usando el LoftLoader enchufar.
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 un complemento de WordPress.
Tras la activación, debe ir a Ajustes » LoftLoader Lite para configurar los ajustes del complemento.
Primero, debe asegurarse de que se haga clic en el botón ‘Habilitar LoftLoader’ y que tenga 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 se muestre en todo su sitio 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’.
Aquí, puede elegir un nuevo color de fondo haciendo clic en el color en el cuadro ‘Seleccionar color’. También puede ajustar la opacidad del fondo y elegir una nueva animación final.
Después de personalizar su fondo, haga clic en la flecha ‘Atrás’ nuevamente.
A continuación, haga clic en la opción de menú ‘Cargador’ para cambiar su precargador predeterminado.
Puede elegir una nueva animación en el cuadro ‘Cargador de animación’. Si desea cambiar el color o el precargador, simplemente seleccione un nuevo color en el cuadro ‘Elegir color’.
Una vez que haya hecho eso, 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 el tiempo máximo de carga para su precargador y hacer que aparezca un botón de cierre para que los usuarios puedan salir del cargador.
Haga clic en el menú ‘Tiempo máximo de carga’ para establecer un tiempo máximo de carga.
Luego, establece tu 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. Sin embargo, mantendremos la configuración predeterminada para que no aparezca.
Una vez que haya terminado de personalizar su precargador, asegúrese de hacer clic en el botón ‘Publicar’ para activar su precargador.
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 una animación 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 sobre el mejor software de nómina para pequeñas empresas.
.