Usar el Sistema de Vista Previa Responsiva de Divi
Gracias al sistema de vista previa responsiva de Divi, ya no es necesario usar software de terceros para probar cómo se mostrarán tus páginas web en pantallas más pequeñas.
Más del 60% de los usuarios de internet utilizan dispositivos móviles, por lo que previsualizar cómo se verán tus páginas en pantallas pequeñas es una parte importante del diseño web.
Veamos cómo usar el sistema de vista previa responsiva demostrando sus capacidades con el Paquete de Diseño Divi Streamer.
Cómo acceder al Sistema de Vista Previa Responsiva de Divi
Hay dos formas de acceder al sistema de vista previa responsiva de Divi:
Modo Vista Previa Responsiva a Nivel de Página
Modo Vista Previa Responsiva a Nivel de Módulo
- Haz clic en el ícono de engranaje de cualquier módulo.
-
Haz clic en la pestaña Diseño.
-
Expande cualquiera de los grupos de opciones, como Texto del encabezado.
-
Pasa el cursor sobre la opción Fuente del encabezado.
-
Haz clic en el ícono de teléfono para activar las Configuraciones Responsivas.
-
Haz clic en la pestaña de Tableta o Teléfono para habilitar la vista respectiva.
Ajustando los Modos de Vista Previa Responsiva de Divi
Hay múltiples preajustes disponibles dentro del sistema de vista previa responsiva.
Los modos de vista previa predeterminados son:
-
Vista de escritorio
-
Vista de tableta
-
Vista de teléfono
Para acceder a ellos, haz clic en el menú de vista previa responsiva en la esquina
Vista previa responsiva de Divi en preajustes populares de dispositivos
También tienes disponibles preajustes de dispositivos populares.
Estos preajustes te permiten previsualizar cómo se mostrará tu página según un dispositivo específico. Para acceder a la lista de dispositivos, haz clic en el primer menú desplegable.
Puedes elegir entre una lista que incluye varios dispositivos Apple y Android.
Personalizando los anchos de vista previa responsiva de Divi
Además, Divi cuenta con una función de redimensionar mediante clic y arrastre que te permitirá ajustar fácilmente el ancho de tu vista previa.
Arrastrar para redimensionar la vista previa responsiva de Divi
Ingreso de tamaño personalizado
Otra forma de personalizar tu vista previa responsiva es ajustar manualmente el ancho y alto a una dimensión específica.
1. Haz clic en el campo de dimensión y escribe el ancho deseado.
2. Haz clic en el botón Hacer vista predeterminada para teléfono para establecer ese ancho como predeterminado.
Si deseas configurar dimensiones para la vista previa de tableta, repite los pasos anteriores y luego haz clic en el botón Hacer vista predeterminada para tableta para guardar tu preajuste.
Contenido visible sin hacer scroll
Esto es útil para colocar contenido importante en la parte superior de tu diseño. El indicador above the fold cambiará según el preajuste de dispositivo que elijas.
Modos vertical y horizontal (Portrait & Landscape)
Para acceder a esta función, haz clic en el ícono a la derecha de los campos de dimensión. Al hacer clic en el ícono, cambiarás la orientación de la página, permitiéndote ver cómo se verá tu página según cómo el usuario sostenga el dispositivo. El color más oscuro indica la orientación actual.
Más recursos
Es una excelente manera de asegurar que tu contenido esté optimizado para dispositivos móviles. Para aprender algunos excelentes consejos sobre diseño responsivo, revisa estas publicaciones en el blog de Elegant Themes:
Cómo usar unidades de longitud vw y vh para diseñar un formulario de contacto responsivo en Divi
-
Cómo agregar un logo responsivo a tu módulo de menú de ancho completo en Divi
Cómo crear un módulo fluido responsivo en Divi
Popular Articles
Guía de Negocio para Resellers y Partners
En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...Ver una Demo de Scoreapps para Resellers
En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:Proporciona acceso a tus Aplicaciones
Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...Cómo Crear una App de Tienda
El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...Cómo diseñar la pantalla de inicio o portada de una App
En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
Related Articles
El sistema de gestión de colores de Divi
Cómo usar las opciones avanzadas de color de Divi. El sistema de gestión de colores de Divi ha evolucionado a lo largo de los años para convertirse en uno de los sistemas de color más robustos en el universo de WordPress. El sistema de colores de ...Cómo usar Divi Layouts IA
Aprende a aprovechar el poder de Divi Layouts IA para crear diseños profesionales y visualmente atractivos en minutos. <br> Este artículo ofrece una guía paso a paso sobre cómo usar eficazmente Divi Layouts IA para agilizar y mejorar tu ...Uso de las Opciones de Sombra de Caja en Divi
Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...Cómo usar el Editor de Imágenes de Divi IA
Aprende a usar el Editor de Imágenes de Divi IA para crear y editar fácilmente imágenes impresionantes directamente dentro del Constructor de Divi. <br> Cómo usar el Editor de Imágenes de Divi IA Este artículo te guiará paso a ...Controles de Edición de Contenido Responsivo y al Pasar el Cursor
Esta actualización introduce controles responsivos y al pasar el cursor para tu contenido, incluyendo compatibilidad nativa con SRCSET para imágenes responsivas. Edición de Contenido Responsivo y al Pasar el Cursor El nuevo control de contenido ...