El éxito de su sitio web depende en gran medida de cómo lo evalúen los motores de búsqueda. Cuando su sitio es más fácil de navegar, obtiene una calificación más alta.
Si el tiempo de carga de su sitio es demasiado largo, obtiene una calificación baja y se coloca detrás de otros sitios.
Los usuarios de Internet tienen una baja concentración y los tiempos de espera más largos que el promedio conducen a una mala experiencia de usuario.
En lugar de esperar a que se cargue la pantalla, el usuario puede frustrarse y decidir navegar a otro sitio. De alguna manera, los rápidos tiempos de carga de su sitio web benefician a su competencia.
Hoy en día, los sitios web suelen utilizar pequeños trucos para captar la atención del usuario. Uno de ellos es la animación de la pantalla de carga.
También conocido como Animación del precargador para WordPressmantiene al usuario interesado al reproducir una animación corta pero interesante mientras espera. También te hace ver como un profesional y hace que tu sitio web se destaque.
Por qué deberías usar la animación precargada
Los usuarios de Internet odian los retrasos. No les gusta esperar a que se cargue una página. Pero a veces estas cosas no están en nuestras manos. Por muchas razones, su sitio web puede ser lento.
Puede haber interrupciones del servidor, conexiones lentas a Internet o sobrecarga de datos. Si bien siempre podemos probar e implementar métodos para minimizarlos, no siempre son predecibles.
Las animaciones de pantalla juegan un papel importante ya que captan la atención del usuario y le dan algo de tiempo mientras carga la pantalla.
Con la animación de carga, es menos probable que el usuario abandone la página, siempre que la animación sea lo suficientemente atractiva como para captar su atención.
Preloader Animation to WordPress es una forma de engañar a un usuario haciéndole creer que el tiempo de espera es más corto de lo que realmente es.
Estas animaciones también pueden servir como una oportunidad para mostrar el logotipo de su marca. Esto sirve para construir una fuerte conexión con los visitantes de su sitio web.
Asocian esta atractiva animación con el logotipo de su empresa, y este vínculo aumenta la probabilidad de que visiten nuevamente su sitio web.
Agregar un precargador en WordPress usando un complemento
En sitios HTML estáticos, se requieren conocimientos de codificación para instalar el precargador. Sin embargo, WordPress tiene algunos complementos disponibles que podemos usar para agregar animación de precarga.
Estos incluyen LoftLoader, Preloader, Pageloader, etc. Veamos cómo agregar una animación Preloader a WordPress usando el complemento Preloader:
- Ve al panel de control de WordPress. Seleccione Agregar nuevo en el área Complementos. búsqueda WP inteligente Enchufe de precargaluego instalar y activar.
- Vaya a la configuración del precargador. Esta sencilla interfaz le permite seleccionar la imagen del precargador, el color de fondo y las páginas en las que mostrar la animación.
- Guardar cambios.
Para seleccionar un color de fondo, ingrese un código hexadecimal. La imagen del precargador se puede seleccionar a través de una URL. También puede elegir dónde desea que se muestre la animación del precargador, por ejemplo, página de inicio, página de inicio, página de error, página de categoría o todo el sitio.
Agregar un precargador a WordPress sin usar un complemento
Puede agregar manualmente Animación del precargador para WordPress utilizando CSS. Para esto, necesita el código fuente CSS para la animación de precarga.
Puede obtenerlo de varios sitios en Internet, como Spinkit, Ladda, NProgress, Pace, etc. Veamos cómo lograr esto:
- El primer paso es agregar el siguiente HTML debajo de la etiqueta del cuerpo de su sitio web index.html:
- Luego copie el código fuente CSS para la animación de precarga de cualquiera de los sitios mencionados anteriormente. Debe pegar este código en la hoja de estilo CSS de su sitio web.
- Debe ocultar la carga de elementos cubriendo toda la ventana. Para hacer esto, debe agregar el siguiente código a su hoja de estilo CSS:
.cargador-envoltorio {
puesto: establecido;
superior: 0;
izquierda: 0;
derecha: 0;
inferior: 0;
color de fondo: # ff6347;
índice z: 999999;
} - En el siguiente paso, debemos eliminar el valor de margen en la clase de cargador y cambiar el valor de posición a absoluto, superior al 48 % e izquierdo al 48 %. Por lo tanto, la ruleta se transfiere al centro de división.
- A continuación, debemos agregar jQuery para que funcione el control giratorio. En index.html, agregue el siguiente código delante de la etiqueta del cuerpo:
$ (documento) .listo (función () {
// Precargar la animación
precargadorFadeOutTime = 600;
función fadePreloader () {
var preloader = $ (‘. loader-wrapper’);
precargador.fadeOut (precargadorFadeOutTime);
}
faderprecargador ();
}); - Después de agregar Animación de precargador para WordPress, podemos agregar una transición del precargador para eliminar las secciones del precargador de la vista. Para lograr esto, abra el archivo main.css y agregue el siguiente código:
/* Cargado */
.loaded # loader-wrapper .loader-section.section-left {
-webkit-transformar: traducirX (-100%);
}.loaded # loader-wrapper .loader-section.section-right {
-webkit-transformar: traducirX (100%); }
Para ocultar el precargador, podemos establecer la transparencia en 0. Sin embargo, esto puede impedir el acceso a nuestro contenido, por lo que también debemos cambiar la visibilidad a oculto.
Publicación relacionada: 10 geniales herramientas de animación CSS para WordPress
Solicitud
Por lo tanto, la animación del precargador para WordPress se puede instalar a través de un complemento o código CSS. Usar un complemento es más simple, pero con CSS podemos personalizar el precargador para que se oculte con una determinada acción, o crear una transición del precargador para animar las secciones del precargador desde la vista.
En lugar de ver una página en blanco, sus vistas ahora verán una animación que puede captar su atención y mantenerlos interesados el tiempo suficiente para que se cargue la página.
