Cómo agregar un precargador elegante a su sitio web Divi

Complemento destacado a la venta ahora en Divi Marketplace

¡ Divi Preloader está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Divi Professional en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).

Compra en el mercado Divi

Ver una carga de pantalla es, bueno, aburrido. También puede ser preocupante si no podemos decir lo que está sucediendo. Esperamos ver algún tipo de retroalimentación cuando hacemos clic en algo. Queremos saber que la computadora aceptó nuestro clic y nos está dando lo que pedimos. Las pantallas de carga, entonces, pueden beneficiarse de un precargador.

Un precargador es un gráfico animado que aparece en la pantalla mientras se carga la página. Los precargadores son una excelente manera de mostrar algunas señales visuales de que la página se está cargando e incluso entretener al invitado mientras lo hace. En este tutorial, veremos cómo agregar un precargador a Divi usando un complemento llamado DP Preloader. Es fácil de usar e incluso puede personalizar su precargador para personalizarlo. Existen muchas soluciones para agregar una animación de carga a WordPress , pero DP Preloader se creó solo para Divi y es fácil de implementar, ¡así que comencemos!

Vamos a ver.

Vistazo

Estoy usando la página de destino del paquete de diseño de reparación de bicicletas. También estoy usando una versión personalizada del encabezado del paquete de diseño #4 Theme Builder. Seleccioné un precargador que funciona bien con los elementos del sitio y diseñé el precargador para que se ajuste al diseño de la página de destino. Este es el precargador en una pantalla de escritorio.

Así es como se ve el precargador en un teléfono. Puede hacer que se muestre en un teléfono o no, e incluso puede establecer el punto de interrupción para determinar en qué tamaño de pantalla se mostrará. Lo he dejado habilitado para teléfonos para que podamos ver cómo funciona.

Suscríbete a nuestro canal de Youtube

Instalar el precargador de DP

Compre DP Preloader en Divi Marketplace. DP Preloader es un complemento de terceros con muchas opciones sobre cómo y dónde se mostrará el precargador. Normalmente cuesta $13 e incluye uso ilimitado del sitio web y un año de soporte y actualizaciones.

Tiene 55 precargadores predefinidos, una opción de carga personalizada para usar un GIF como precargador, animaciones, la opción de mostrarlo en páginas específicas, ocultarlo en dispositivos móviles, establecer puntos de interrupción móviles, etc. No parece funcionar con plantillas en blanco, pero funciona perfectamente con la plantilla predeterminada utilizando el encabezado estándar o Theme Builder. Es una excelente opción para agregar precargadores prefabricados y personalizados a su sitio web Divi.

Una vez que haya comprado y descargado el complemento, vaya al menú de complementos en su panel de control de WordPress y haga clic en Agregar nuevo . Cuando aparezca la lista de complementos, seleccione Cargar complemento en la parte superior de la pantalla.

Seleccione Elegir archivo y navegue hasta el archivo comprimido en su computadora y selecciónelo. Haga clic en Instalar ahora y espere a que termine de instalarse.

Una vez que haya terminado de instalar, haga clic en Activar complemento . El precargador ahora está listo para configurarse para su uso con su sitio web Divi.

Opciones del precargador de DP

DP Preloader deberá configurarse antes de que se muestre en su sitio web. Vaya al menú Divi en el panel de WordPress, seleccione Opciones de tema y luego seleccione la pestaña DP Preloader . Al igual que con cualquier configuración en la pantalla Opciones de Divi, asegúrese de guardar los cambios para que la configuración surta efecto.

Opciones generales del precargador de DP

El precargador está deshabilitado de forma predeterminada, por lo que deberá habilitarse. Dejo las otras configuraciones generales en sus valores predeterminados, pero puede seleccionar ocultarlo en dispositivos móviles con un ancho de dispositivo de sus especificaciones o más pequeño.

  • Mostrar precargador en el sitio: habilitar

Configuración de imagen del precargador de DP

DP Preloader nos permite elegir colores para el icono y la superposición de fondo de pantalla completa. Antes de ver mi configuración, quería mostrar de dónde obtengo mis ideas de diseño. Para la Configuración de imagen, estoy usando colores de mi diseño. La página de destino de Reparación de bicicletas tiene un fondo blanco con reflejos rojos. Usaré el rojo que se encuentra en todo el diseño para el ícono y el blanco para el fondo.

  • Rojo – #ea3900
  • Blanco – #ffffff

Hay varias colas de diseño en mi diseño que puedo consultar al elegir el precargador. Estoy mirando específicamente los iconos para ver sus formas, colores y tamaños. El diseño tiene muchas ruedas y engranajes. Hay algunas herramientas también. Dado que varios de los precargadores tienen formas similares a las herramientas, también son candidatos para ideas de diseño. Por ahora, sin embargo, me centraré en las ruedas y los engranajes.

Hay 55 precargadores para elegir. He elegido uno que me recuerda a los engranajes. Algunos de los precargadores tienen colores predeterminados, pero podemos ajustar el color de cada uno de los precargadores en la siguiente sección, por lo que no tenemos que elegir uno en función del color.

Debajo de los precargadores hay otro conjunto de opciones donde puede cargar un precargador personalizado como un GIF. También puede ajustar su ancho y alto. Como estoy usando uno de los precargadores incorporados, no necesitaré hacer ajustes para el tamaño. Estos permanecerán en su configuración predeterminada, pero quería mostrar la configuración en caso de que quisiera cargar su propio precargador.

Configuración de color del precargador de DP

Tiene control sobre el precargador y los colores de fondo tanto para el color como para la opacidad. Para el precargador, seleccione el punto de color e ingrese el código hexadecimal en el campo o use el selector para elegir su color. Haz lo mismo con el color de fondo. El color de fondo ya es el color que quiero, así que dejo el color de fondo predeterminado.

  • Rojo – #ea3900
  • Blanco – #ffffff

Configuración de animación del precargador de DP

Para la configuración de la animación, tiene control sobre cuál de los dos efectos se muestran (FadeOut o SlideUp), la velocidad de desvanecimiento, el tiempo de retraso y la opacidad del cuerpo. Cambié el efecto a SlideUp, seleccioné una velocidad de atenuación lenta para que el precargador sea más visible y agregué 2000 ms (2 segundos) al tiempo de retraso para que el precargador permanezca en la pantalla por más tiempo para mi ejemplo.

  • Efectos de precarga – SlideUp
  • Velocidad de desvanecimiento del precargador: lento
  • Tiempo de retardo del precargador: 2350

Resultados

Así es como se ve el precargador en una computadora de escritorio. Funciona exactamente como se esperaba y coincide bien con mi diseño. Parece que pertenece a mi sitio web, lo cual es importante para la consistencia de la marca.

Así es como se ve el precargador en un teléfono.

Decidí probar una opción invertida con el rojo como fondo y el blanco como precargador. El único cambio que hice en los colores fue agregar un 75 % de opacidad al fondo para que la página pueda verse mientras se carga. También seleccioné un precargador diferente solo para que podamos ver algo diferente y cambié los efectos del precargador a FadeOut. Esta es la vista del escritorio.

Esta es la vista del teléfono.

pensamientos finales

Ese es nuestro vistazo a cómo agregar un precargador elegante a su sitio web Divi. Agregar un precargador a su sitio web Divi ayuda a informar al usuario que algo está sucediendo en segundo plano. DP Preloader es excelente para esto. Es fácil de usar. Tiene muchos precargadores para elegir y tiene control sobre los colores del precargador y el fondo. Si desea personalizarlo aún más, puede cargar su propio GIF y usarlo como precargador.

¡Ahora puede agregar fácilmente un precargador personalizado a su sitio web Divi!

Queremos escuchar de ti. ¿Ha agregado un precargador a su sitio web Divi? Háganos saber al respecto en los comentarios a continuación.

Imagen destacada a través de FastMotion / shutterstock.com