[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-animacion-de-preloader-a-wordpress-paso-a-paso\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-animacion-de-preloader-a-wordpress-paso-a-paso\/","headline":"C\u00f3mo Agregar una Animaci\u00f3n de Preloader a WordPress (Paso a Paso)","name":"C\u00f3mo Agregar una Animaci\u00f3n de Preloader a WordPress (Paso a Paso)","description":"\u00bfDesea agregar una animaci\u00f3n de precarga a su sitio de WordPress? Un precargador es una animaci\u00f3n que muestra el progreso de la carga de una ... <a title=\"C\u00f3mo Agregar una Animaci\u00f3n de Preloader a WordPress (Paso a Paso)\" class=\"read-more\" href=\"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-animacion-de-preloader-a-wordpress-paso-a-paso\/\" aria-label=\"M\u00e1s en C\u00f3mo Agregar una Animaci\u00f3n de Preloader a WordPress (Paso a Paso)\">Leer m\u00e1s<\/a>","datePublished":"2022-10-29","dateModified":"2022-10-29","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/10\/Como-Agregar-una-Animacion-de-Preloader-a-WordPress-Paso-a.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/10\/Como-Agregar-una-Animacion-de-Preloader-a-WordPress-Paso-a.png","height":385,"width":680},"url":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-animacion-de-preloader-a-wordpress-paso-a-paso\/","about":["Plugins"],"wordCount":1144,"articleBody":"\u00bfDesea agregar una animaci\u00f3n de precarga a su sitio de WordPress? Un precargador es una animaci\u00f3n que muestra el progreso de la carga de una p\u00e1gina en segundo plano.  Esto asegura a los usuarios que el sitio web se est\u00e1 cargando y puede ayudar a mejorar la experiencia del usuario y reducir la tasa de rebote general.En este art\u00edculo, le mostraremos c\u00f3mo agregar un precargador a WordPress, paso a paso.\u00bfQu\u00e9 es una animaci\u00f3n de precarga y por qu\u00e9 agregarla a WordPress?Un precargador es una animaci\u00f3n o mensaje de estado que muestra el progreso de carga de la p\u00e1gina 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\u00e1s r\u00e1pido, como el texto y el c\u00f3digo, mientras que las im\u00e1genes, los videos y los gr\u00e1ficos pueden tardar m\u00e1s.Si la mayor parte de su contenido es texto con muy pocas im\u00e1genes 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\u00e1genes e incrustaciones de video, entonces sus usuarios deber\u00e1n 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\u00e1 da\u00f1ado.  Un precargador llenar\u00e1 el espacio y le mostrar\u00e1 al usuario un indicador de progreso mientras se carga la p\u00e1gina.Puede ver un ejemplo en vivo de un precargador haciendo clic en el bot\u00f3n &#8216;Vista previa&#8217; mientras escribe una publicaci\u00f3n de blog en WordPress.WordPress abrir\u00e1 una vista previa en vivo de su publicaci\u00f3n de blog en una nueva ventana.  Mostrar\u00e1 un precargador antes de mostrar la vista previa en vivo.Dicho esto, veamos c\u00f3mo puede agregar f\u00e1cilmente un precargador a su sitio web de WordPress.  Simplemente use los enlaces r\u00e1pidos a continuaci\u00f3n para saltar directamente al m\u00e9todo que desea usar.M\u00e9todo 1. Agregar un precargador en WordPress con WP Smart PreloaderSe recomienda este m\u00e9todo porque es m\u00e1s f\u00e1cil para los principiantes y no requiere que agregue c\u00f3digo 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\u00e1s detalles, consulte nuestra gu\u00eda paso a paso sobre c\u00f3mo instalar un complemento de WordPress.Tras la activaci\u00f3n, debe visitar Ajustes \u00bb WP Smart Preloader y elija un estilo de precargador o una animaci\u00f3n de carga de p\u00e1gina. El complemento viene con seis animaciones integradas para elegir.  Simplemente seleccione la animaci\u00f3n del men\u00fa desplegable &#8216;Seleccionar precargador&#8217;.  Tambi\u00e9n puede cargar su propio HTML y CSS personalizado para crear un precargador personalizado.A continuaci\u00f3n, puede hacer que el precargador aparezca solo en la p\u00e1gina de inicio marcando la opci\u00f3n &#8216;Mostrar solo en la p\u00e1gina de inicio&#8217;.Despu\u00e9s de eso, debe desplazarse hacia abajo hasta la secci\u00f3n &#8216;Duraci\u00f3n para mostrar el cargador&#8217;.  Aqu\u00ed puede cambiar la duraci\u00f3n del precargador. La opci\u00f3n predeterminada es 1500 milisegundos o 1,5 segundos, lo que deber\u00eda funcionar para la mayor\u00eda de los sitios, pero puede cambiar esto si lo desea.Tambi\u00e9n puede establecer cu\u00e1nto tiempo tarda el cargador en desvanecerse por completo.  La opci\u00f3n predeterminada es 2500 segundos o 2,5 segundos.Una vez que haya terminado de personalizar la configuraci\u00f3n del precargador, haga clic en el bot\u00f3n &#8220;Guardar cambios&#8221; para guardar la configuraci\u00f3n.Ahora puede visitar su sitio web para ver el precargador en acci\u00f3n.M\u00e9todo 2. Agregar un precargador en WordPress con el complemento LoftLoaderOtra forma de agregar una animaci\u00f3n 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\u00e1s detalles, consulte nuestra gu\u00eda para principiantes sobre c\u00f3mo instalar un complemento de WordPress.Tras la activaci\u00f3n, debe ir a Ajustes \u00bb LoftLoader Lite para configurar los ajustes del complemento. Primero, debe asegurarse de que se haga clic en el bot\u00f3n &#8216;Habilitar LoftLoader&#8217; y que tenga una marca de verificaci\u00f3n.Despu\u00e9s de eso, puede hacer clic en la opci\u00f3n &#8216;Mostrar en&#8217;.Luego, elija si desea que el precargador se muestre en todo su sitio o solo en la p\u00e1gina de inicio.A continuaci\u00f3n, haga clic en la flecha &#8216;Atr\u00e1s&#8217; para volver a la p\u00e1gina de configuraci\u00f3n del complemento.Despu\u00e9s de eso, haga clic en la opci\u00f3n &#8216;Fondo&#8217;.Aqu\u00ed, puede elegir un nuevo color de fondo haciendo clic en el color en el cuadro &#8216;Seleccionar color&#8217;.  Tambi\u00e9n puede ajustar la opacidad del fondo y elegir una nueva animaci\u00f3n final.Despu\u00e9s de personalizar su fondo, haga clic en la flecha &#8216;Atr\u00e1s&#8217; nuevamente.A continuaci\u00f3n, haga clic en la opci\u00f3n de men\u00fa &#8216;Cargador&#8217; para cambiar su precargador predeterminado.Puede elegir una nueva animaci\u00f3n en el cuadro &#8216;Cargador de animaci\u00f3n&#8217;.  Si desea cambiar el color o el precargador, simplemente seleccione un nuevo color en el cuadro &#8216;Elegir color&#8217;.Una vez que haya hecho eso, haga clic en la flecha &#8216;Atr\u00e1s&#8217; para volver a la pantalla de configuraci\u00f3n principal.A continuaci\u00f3n, haga clic en la opci\u00f3n de men\u00fa &#8216;M\u00e1s&#8217;. Aqu\u00ed, puede establecer el tiempo m\u00e1ximo de carga para su precargador y hacer que aparezca un bot\u00f3n de cierre para que los usuarios puedan salir del cargador.Haga clic en el men\u00fa &#8216;Tiempo m\u00e1ximo de carga&#8217; para establecer un tiempo m\u00e1ximo de carga.Luego, establece tu tiempo m\u00e1ximo de carga en segundos. Despu\u00e9s de eso, puede hacer clic en el bot\u00f3n &#8216;Atr\u00e1s&#8217; para agregar un bot\u00f3n de cierre a su precargador.  Sin embargo, mantendremos la configuraci\u00f3n predeterminada para que no aparezca.Una vez que haya terminado de personalizar su precargador, aseg\u00farese de hacer clic en el bot\u00f3n &#8216;Publicar&#8217; para activar su precargador. Ahora, puede visitar su sitio web para ver su nuevo precargador en acci\u00f3n. Esperamos que este art\u00edculo le haya ayudado a aprender c\u00f3mo agregar una animaci\u00f3n de precarga a WordPress.  Tambi\u00e9n puede consultar nuestra gu\u00eda sobre c\u00f3mo obtener un dominio de correo electr\u00f3nico gratuito y nuestras selecciones sobre el mejor software de n\u00f3mina para peque\u00f1as empresas.Si te ha gustado este art\u00edculo, suscr\u00edbete a nuestro Canal de Youtube para tutoriales en v\u00eddeo de WordPress.  Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook.                                                                                                                                                                                                                                                                                                                                                                        "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Plugins","item":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo Agregar una Animaci\u00f3n de Preloader a WordPress (Paso a Paso)","item":"https:\/\/xn--adrimadiseo-beb.com\/plugins\/como-agregar-una-animacion-de-preloader-a-wordpress-paso-a-paso\/#breadcrumbitem"}]}]