Using Divi Responsive Preview System
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
How to Create an App for Restaurants (with or without Delivery)
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Radio
The function of Radio allows the addition of radio broadcast within its application. In addition to this function To add this function to your application go to step "Functions" and click on the icon "Radio": Once added you must name this new ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...APPS: Audio & Music
How to add this feature To add this feature to your application go to step "FUNCTIONS" and click on the " iconAudio": Then give this new section of the application a name. Then click on the + icon to add a new Playlist Then add a title and an image ...QR Promotions
This function would allow you to create discount coupons that would be unlocked by scanning a specific QR code. Once unlocked, the customer can use the discount whenever they want. The coupon would not appear in the application until the user has ...
Related Articles
The Divi Color Management System
How to use Divi advanced color options. Divi's color management system has evolved over the years to become one of the most robust color systems in the WordPress universe. Divi's color system, combined with the ability to edit and create saved, ...Using Divi Layers View
Using Divi Layer View Divi Layer View provides an efficient way to navigate the items on your page while designing. The Divi Layers Viewadds a very fast and simple way to view, rearrange, edit and rename your elements. This is especially useful when ...Using Divi Visibility Options
Las opciones de visibilidad de Divi te dan control sobre cuándo los elementos son visibles u ocultos. Las opciones de visibilidad de Divi te dan control sobre cuándo los elementos son visibles u ocultos. Esto es útil cuando deseas mostrar u ocultar ...Using Border Options in Divi
Divi border options allow you to easily add and stylize edges on any item on the page. With Divi Edge Options, it is possible to create truly unique designs for your website. You can apply custom edges to Divi elements, including sections, rows, and ...Using Spacing Options in Divi
It is easy to customize spacing into sections, rows and modules with Divi Spacing Options. Spacing is an important element in web design. It helps organize your content and keep things clear and balanced. With Divi, it is easy to customize spacing in ...