Hacer clic en el botón de descarga correcto para el software o las aplicaciones móviles puede resultar confuso para los usuarios si no conocen la descarga adecuada para su sistema operativo. Una solución a este problema es detectar el sistema operativo del usuario automáticamente cuando carga una página en su sitio web para que pueda mostrar los botones de descarga correctos para ese sistema operativo. Esto elimina el riesgo de perder clientes potenciales que no puedan encontrar fácilmente la descarga adecuada para su producto.
En este tutorial, le mostraremos cómo diseñar y mostrar botones de descarga para los respectivos sistemas operativos utilizando Divi y sus opciones de condición integradas. Esto le dará control total sobre qué botones se mostrarán con cada sistema operativo.
¡Empecemos!
Aquí hay un vistazo rápido a los botones de descarga condicional del sistema operativo que construiremos en este tutorial. A cada botón se le asignará una condición de visualización específica del sistema operativo.
Esto mostrará cada botón en el sistema operativo respectivo al cargar la página.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Para acelerar el proceso de diseño, vamos a utilizar el diseño de la página de inicio de la aplicación móvil del paquete de diseño de la aplicación móvil prefabricado de Divi .
Para cargar el diseño prefabricado en la página, abra el menú de configuración en la parte inferior de Divi Builder. A continuación, seleccione el icono de carga desde la biblioteca. En la ventana emergente Cargar desde la biblioteca, busque el paquete Diseño de la aplicación móvil y haga clic para usar el Diseño de la página de inicio de la aplicación móvil.
Esto cargará el diseño de la página. ¡Ahora estás listo para ir!
Para el primer botón, usaremos las opciones de condición de Divi para mostrar el botón de descarga solo en Mac OS. Para hacer esto, abra la configuración del botón existente en el encabezado del diseño y actualice el siguiente texto del botón y la URL del enlace:
- Texto del botón: Descargar (Mac OS)
- URL del enlace del botón: [agregar URL al archivo zip]
En la pestaña de diseño, actualice el icono del botón y el espaciado de la siguiente manera:
- Icono de botón: ver captura de pantalla
- Ubicación del icono del botón: Izquierda
- Mostrar solo icono al pasar el mouse por botón: NO
- Relleno (escritorio): 16 px arriba, 16 px abajo, 40 px a la izquierda, 20 px a la derecha
- Relleno (teléfono): 28 px a la izquierda, 12 px a la derecha
Para agregar la condición del sistema operativo al botón, haga lo siguiente:
- En la pestaña avanzada, haga clic para agregar una nueva condición de visualización.
- En el menú desplegable, seleccione la condición del sistema operativo.
- En la ventana emergente de configuración del sistema operativo, asegúrese de que la opción Mostrar solo si el sistema operativo está configurada como Es .
- Elija el sistema operativo Mac OS de la lista.
- Guardar ajustes.
Esto es lo que se mostrará en Mac OS…
Para el segundo botón, mostraremos un botón de descarga para el sistema operativo Windows.
Primero, duplique el botón que acaba de crear para crear un nuevo botón.
Abra la configuración del nuevo botón y actualice el siguiente texto del botón y la URL del enlace:
- Texto del botón: Descargar (SO Windows)
- URL del enlace del botón: [agregar URL al archivo zip]
En la pestaña de diseño, dale al botón un fondo degradado de la siguiente manera:
- Fondo degradado Color izquierdo: #00f2fe
- Fondo degradado Color derecho: #4facfe
- Dirección del gradiente: 90 grados
Para agregar la condición del sistema operativo al botón, haga lo siguiente:
- En la pestaña avanzada, haga clic para agregar una nueva condición de visualización.
- En el menú desplegable, seleccione la condición del sistema operativo.
- En la ventana emergente de configuración del sistema operativo, asegúrese de que la opción Mostrar solo si el sistema operativo está configurada como Es .
- Elija el sistema operativo Windows de la lista.
- Guardar ajustes.
Esto es lo que se mostrará en Windows…
Para el tercer botón, mostraremos un botón de descarga para dispositivos iOS.
Para crear el botón, duplique el primer botón que creamos.
Abra la configuración del nuevo botón y actualice el siguiente texto del botón y la URL del enlace:
- Texto del botón: Descargar en la App Store
- URL del enlace del botón: [agregar URL al archivo zip]
En la pestaña de diseño, actualice el ícono del botón a una flecha hacia la derecha (vea la captura de pantalla).
Para agregar la condición del sistema operativo al botón, haga lo siguiente:
- En la pestaña avanzada, haga clic para agregar una nueva condición de visualización.
- En el menú desplegable, seleccione la condición del sistema operativo.
- En la ventana emergente de configuración del sistema operativo, asegúrese de que la opción Mostrar solo si el sistema operativo está configurada como Es .
- Elija los dispositivos del sistema operativo iOS de la lista (iPhone, iPad, iPod).
- Guardar ajustes.
Esto es lo que mostrará en los dispositivos iOS…
Para el cuarto botón, mostraremos un botón de descarga para dispositivos Android .
Para crear el botón, duplique el botón anterior que creamos.
Abra la configuración del nuevo botón y actualice el siguiente texto del botón y la URL del enlace:
- Texto del botón: Consíguelo en Google Play
- URL del enlace del botón: [agregar URL al archivo zip]
En la pestaña de diseño, dale al botón un fondo degradado de la siguiente manera:
- Fondo degradado Color izquierdo: #a8eb9d
- Fondo degradado Color derecho: #39abc5
- Dirección del gradiente: 90 grados
Para agregar la condición del sistema operativo al botón, haga lo siguiente:
- En la pestaña avanzada, haga clic para agregar una nueva condición de visualización.
- En el menú desplegable, seleccione la condición del sistema operativo.
- En la ventana emergente de configuración del sistema operativo, asegúrese de que la opción Mostrar solo si el sistema operativo está configurada como Es .
- Elija el sistema operativo Android de la lista.
- Guardar ajustes.
Esto es lo que se mostrará en los dispositivos Android…
También puede optar por usar imágenes o insignias para sus botones para que las cosas se vean más oficiales. Por ejemplo, podría usar una de las insignias de Apple para mostrar un botón de descarga para dispositivos iOS. Si desea utilizar una imagen como botón, simplemente agregue una nueva imagen a la página.
Cargue la imagen en el módulo y proporcione la URL del enlace de la imagen para redirigir a los usuarios a la tienda de aplicaciones o a la página de descarga.
Luego actualice la condición de visualización para mostrar el botón de imagen en el sistema operativo respectivo.
Puede mostrar una imagen de botón «Descargar en la tienda de aplicaciones» en dispositivos iOS.
Y podría mostrar una imagen de botón «Get it on Google Play» en dispositivos Android.
Resultados de la prueba con Chrome DevTools
Si está utilizando el navegador Chrome, puede usar las DevTools integradas para probar la visualización de su página/botones en diferentes sistemas operativos. No importa qué sistema operativo esté ejecutando su computadora. Chrome DevTools puede falsificar el sistema operativo con fines de prueba.
Para probar su página en diferentes sistemas operativos usando Chrome DevTools, siga estos pasos:
- Abra las herramientas para desarrolladores y haga clic en el icono de tres puntos en la parte superior derecha de la ventana
- Seleccione Mostrar cajón de la consola en el menú desplegable (o simplemente puede presionar esc para que aparezca el cajón de la consola)
- En el cajón de la consola, haga clic en el menú de tres puntos en la parte superior izquierda del cajón.
- Agregue la pestaña Condiciones de red de la lista desplegable.
- En Condiciones de la red, anule la selección de la opción «Usar navegador predeterminado» para el agente de usuario.
- Luego seleccione un Navegador/SO personalizado de la lista.
Una vez hecho esto, puede actualizar la página para cargar esa página en esas condiciones de red.
Resultados finales
Aquí están los resultados finales mostrados en sus respectivos sistemas operativos.
Usar un botón Divi
Usar una imagen o insignia
Usar un botón Divi
Usar una imagen o insignia
Pensamientos finales
Crear botones de descarga en Divi es extremadamente fácil. Puede usar el módulo de botón o incluso un módulo de imagen con una URL de enlace para descargar un archivo zip o redirigir a los usuarios a una página de descarga o tienda de aplicaciones. Después de eso, puede mejorar drásticamente la UX de su página utilizando la opción de condición del sistema operativo de Divi para mostrar cada botón de acuerdo con el sistema operativo respectivo del usuario. Esto ayudará a garantizar que los usuarios obtengan lo que necesitan de manera rápida y eficiente. Y no olvide probar esos botones en diferentes condiciones de red usando Chrome DevTools para asegurarse de que los usuarios vean los botones correctos.
Espero escuchar de usted en los comentarios.
¡Salud!