Cómo mostrar botones de descarga para los respectivos sistemas operativos en Div

Al hacer clic en el botón de descarga correcto para el software y/o las aplicaciones móviles, se puede confundir para los usuarios si no conocen la descarga correcta para su sistema operativo. Una solución a este problema es la detección automática del sistema operativo del usuario al cargar una página desde su sitio web, por lo que puede mostrar los botones de descarga correctos para el sistema operativo respectivo. Esto elimina el riesgo de perder clientes potenciales que no encuentren fácilmente la descarga correcta para. Div. Esto le dará control total sobre los botones que se mostrarán con cada sistema operativo.
¡Vamos a empezar! Mirar las zapatillas de deporte es un vistazo rápido a los botones de descarga condicionales del sistema operativo que construiremos en este tutorial. A cada botón se le asignará una cierta condición de mostrar el sistema operativo.

Esto mostrará cada botón en el sistema operativo respectivo al cargar la página.

Descargue el aspecto gratuito para poner su mano en los modelos en este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “read” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a Div Free Weekly Layout Div!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Una vez terminado, el aspecto de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿sí? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página frontal (generador visual). Elija la opción “Build desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Para acelerar el proceso de diseño, utilizaremos la página inicial de la aplicación móvil en el paquete de aplicaciones móviles prefabricadas. Para cargar la apariencia prefabricada en la página, abra el menú Configuración en la parte inferior de Divi Builder. Luego seleccione el icono de carga de la biblioteca. En la ventana de carga emergente en la biblioteca, busque el paquete de apariencia de la aplicación móvil y haga clic para usar la apariencia de la página de inicio.
Esto cargará la apariencia en la página. ¡Ahora estás listo para irte! Cómo mostrar los botones de descarga para los sistemas operativos respectivos en la División 1: Muestra el botón de descarga del sistema operativo Mac Para el primer botón, usaremos las opciones de división 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 de apariencia y actualice el siguiente texto del botón y la URL del enlace:
El texto del botón: Descargar (Mac OS)

Botón de enlace de URL: [Agregar URL al archivo zip] En la pestaña Diseño, actualice el icono y el espacio del botón de la siguiente manera:
Icono del botón: ver captura de pantalla

Colocación del icono del botón: izquierda
Solo muestre el icono al cruzar el cursor para el botón: no
Relleno (escritorio): 16px arriba, 16px hacia abajo, 40px izquierda, 20px a la derecha
Llenado (teléfono): 28px izquierda, 12px a la derecha
Para agregar la condición del sistema operativo al botón, continúe de la siguiente manera:
En la pestaña avanzada, haga clic para agregar una nueva condición de visualización. En el menú desplegable, seleccione el estado del sistema operativo.

En la ventana emergente de la configuración del sistema operativo, asegúrese de que la opción de visualización solo si el sistema operativo está configurado en E.
Elija el sistema operativo Mac OS de la lista.
Guarde la configuración.
Esto es lo que se mostrará en Mac OS …
Parte 2: Muestre el botón Descargar para el sistema operativo de Windows para el segundo botón, mostraremos un botón de descarga para el sistema operativo de Windows. Primero duplique el botón que acaba de crear para crear un nuevo botón.
Abra la configuración del botón nuevo y actualice el siguiente texto del botón y URL del enlace:

Texto del botón: Descargar (Windows del sistema operativo)

Botón de enlace de URL: [Agregar URL al archivo zip]
En la pestaña de diseño, le dé al botón un fondo de gradiente, de la siguiente manera:
Fondo degradado Izquierda: #00F2FE
Color de fondo derecho con gradiente: #4facfe

Dirección de gradiente: 90 grados
Para agregar la condición del sistema operativo al botón, continúe de la siguiente manera:
En la pestaña avanzada, haga clic para agregar una nueva condición de visualización.
En el menú desplegable, seleccione el estado del sistema operativo.

En la ventana emergente de la configuración del sistema operativo, asegúrese de que la opción de visualización solo si el sistema operativo está configurado en E.
Elija el sistema operativo Windows de la lista.
Guarde la configuración.
Esto es lo que se mostrará en Windows …
Parte 3: Muestre el botón Descargar para iOS (iPhone, iPad, iPod) Para el tercer botón, mostraremos un botón de descarga para dispositivos iOS.
Para crear el botón, duplique el primer botón creado por nosotros.

Abra la configuración para el botón Nuevo y actualice el siguiente texto del botón y URL del enlace: Botón Texto: Descargar desde la App Store


Botón de enlace de URL: [Agregar URL al archivo zip] En la pestaña Diseño, actualice el icono del botón en una flecha derecha (ver captura de pantalla).

Para agregar la condición del sistema operativo al botón, continúe de la siguiente manera:
En la pestaña avanzada, haga clic para agregar una nueva condición de visualización.
En el menú desplegable, seleccione el estado del sistema operativo.

En la ventana emergente de la configuración del sistema operativo, asegúrese de que la opción de visualización solo si el sistema operativo está configurado en E.

Elija dispositivos del sistema operativo iOS de la lista (iPhone, iPad, iPod).
Guarde la configuración.
Esto es lo que se mostrará en los dispositivos iOS …
Parte 4: Muestre el botón de descarga para Android para el cuarto botón, mostraremos un botón de descarga para dispositivos Android. Para crear el botón, duplique el botón anterior creado por nosotros.
Abra la configuración del botón nuevo y actualice el siguiente texto del botón y URL del enlace:
Botón de texto: consíguelo en Google Play

Botón de enlace de URL: [Agregar URL al archivo zip]
En la pestaña de diseño, le dé al botón un fondo de gradiente, de la siguiente manera:

Fondo degradado Izquierda: #A8EB9D
Fondo de color derecho con gradiente: #39ABC5
Dirección de gradiente: 90 grados

Para agregar la condición del sistema operativo al botón, continúe de la siguiente manera:
En la pestaña avanzada, haga clic para agregar una nueva condición de visualización.
En el menú desplegable, seleccione el estado del sistema operativo.
En la ventana emergente del sistema operativo, asegúrese de que la opción de visualización solo si el sistema operativo está configurado es. Elija el sistema operativo Android.

Guarde la configuración.
Esto es lo que se mostrará en los dispositivos Android …
Parte 5: El uso de imágenes o insignias para botones también puede elegir usar imágenes o insignias para sus botones para que las cosas se vean más oficiales. Por ejemplo, puede usar una de las insignias de Apple para mostrar un botón de descarga para dispositivos iOS. Si desea usar una imagen como botón, simplemente agregue una nueva imagen en la página.
Cargue la imagen en el modo y proporcione la URL del enlace de la imagen para redirigir a los usuarios a la tienda de aplicaciones o la página de descarga.
Luego actualice la condición de visualización para mostrar el botón de imagen en el sistema operativo. Puede mostrar una imagen del botón “Descargar en la App Store” en dispositivos iOS.
Y puede mostrar una imagen con el botón “Obtener Google Play” en los dispositivos Android.

Prueba de resultados con Chrome DevTools Si usa el navegador Chrome, puede usar los DevTools incorporados para probar la 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 utilizando Chrome DevTools, siga estos pasos:

Abra las herramientas de desarrollador y haga clic en el icono de tres puntos y derecho de la ventana

Seleccione Mostrar espectáculo de cajón en el menú desplegable (o simplemente puede presionar ESC para mostrar 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.

Agregue las condiciones de red de la lista vertical.

En condiciones de red, anule la opción “Use el navegador predeterminado” para el agente de usuario.

Luego seleccione un navegador/hueso personalizado de la lista.
Una vez terminado, puede actualizar la página para cargar esa página en esas condiciones de red. Los resultados finales aquí son los resultados finales que se muestran en sus respectivos sistemas operativos. Botón de descarga para Mac OS
Botón de descarga para el sistema operativo Windows
Botón de descarga para dispositivos iOS usando un Div
Usando una imagen o insignia
Descargar botón para dispositivos Android usando un DIV
Usando una imagen o insignia


Los pensamientos finales para crear botones de descarga en la división son extremadamente fáciles. Puede usar el módulo de botones o incluso un módulo de imagen con una URL de enlace para descargar un archivo zip o para redirigir a los usuarios a una página de descarga o una tienda de aplicaciones. Después de eso, puede mejorar drásticamente el UX de su página utilizando la opción de estado del sistema operativo Divic para mostrar cada botón de acuerdo con el sistema operativo del usuario. Esto lo ayudará a asegurarse de que los usuarios obtengan lo que necesitan de manera rápida y eficiente. Y no olvide probar esos botones en diferentes condiciones de red utilizando Chrome DevTools para asegurarse de que los usuarios vean los botones correctos. Espero con ansias las noticias tuyas en los comentarios. ¡Suerte!