El diseño web responsivo y la optimización de su diseño para dispositivos móviles son más importantes que nunca. Desde 2017, la mayoría de todo el tráfico del sitio web proviene de dispositivos móviles. Aprenda cómo hacer que su sitio web sea receptivo con Divi en solo 10 minutos.
¿Qué significa Responsive Design?
En resumen, el diseño web receptivo significa que su sitio web funciona bien en todos los tamaños de pantalla. Wikipedia ofrece una definición completa:
El diseño web responsivo o diseño responsivo es un enfoque del diseño web que tiene como objetivo hacer que las páginas web se representen bien en una variedad de dispositivos y tamaños de ventana o pantalla desde el tamaño mínimo hasta el máximo para garantizar la usabilidad y la satisfacción.
Si sus visitantes móviles necesitan hacer zoom (pellizcar) para poder leer el contenido de su sitio web, no está diseñado de la manera correcta. Otro error común de diseño responsivo es colocar elementos vinculados, por ejemplo, botones, demasiado cerca unos de otros. Esto podría funcionar bien en una pantalla grande usando un cursor de mouse nítido, pero con dedos grandes en una pantalla móvil pequeña, es un mal UX. Puede sonar como una paradoja, pero las pantallas más pequeñas a menudo necesitan más espacio en blanco.
¿Es Divi un tema responsivo de WordPress?
Sí, Divi se basa en un marco receptivo. El menú de escritorio se convertirá automáticamente en un menú de hamburguesas en teléfonos inteligentes y tabletas. Y las columnas de fila se apilarán para una mejor experiencia de usuario.
También hay muchas configuraciones de diseño receptivas personalizadas para diferentes tamaños de fuente, márgenes y rellenos para teléfonos inteligentes, tabletas y dispositivos de escritorio. Todas las configuraciones de diseño se pueden guardar como estilos globales , lo que ahorra tiempo y garantiza la coherencia en su diseño web.
Incluso puede mostrar contenido diferente, por ejemplo, copia, imágenes y fondos, para diferentes dispositivos utilizando la función de contenido sensible Divi.
Descripción del modo de vista previa adaptable de Divi
¿Los cambios en el diseño de su dispositivo móvil también afectan el diseño de su escritorio? El error más común entre los principiantes de Divi es confundir el modo de vista previa receptivo con la configuración de diseño receptivo.
La vista previa responsiva de Divi
El modo de vista previa receptiva es parte de la interfaz del constructor visual Divi. Lo encontrarás en la esquina inferior izquierda después de hacer clic en la bola púrpura en la parte inferior central de la pantalla. Puede obtener una vista previa y editar su sitio web en cinco vistas diferentes: Wireframe, Zoom Out, Escritorio, Tableta y Teléfono.
❌ No utilices esta función para editar la configuración de diseño adaptable.
Sin embargo, es importante comprender que los cambios de diseño afectarán a todos los dispositivos, independientemente de la vista que esté utilizando para obtener una vista previa de su página web.
La configuración de diseño responsivo de Divi
Si desea editar, por ejemplo, el estilo h1 para teléfonos inteligentes o la sección de relleno para tabletas, debe usar la configuración de respuesta Divi en su lugar.
✅ Utilice esta función para editar la configuración de diseño adaptable en su lugar.
Comience haciendo clic en la rueda dentada de la sección, fila o módulo que desea editar. A continuación, haga clic en la pestaña Diseño y abra la configuración que desea cambiar.
Coloque el cursor sobre la configuración que desea cambiar. Si aparece un icono de teléfono inteligente a la derecha del encabezado de configuración, eso significa que hay configuraciones de diseño receptivas disponibles.
Haga clic en el icono del teléfono inteligente y elija el dispositivo que desea editar. Edite su configuración de respuesta y guarde. Esta es la forma correcta de editar el diseño responsivo en Divi.
La configuración de diseño se hereda al dispositivo más pequeño de forma predeterminada
Si no cambias la configuración de diseño de un dispositivo específico, heredará la configuración de diseño del dispositivo más grande más cercano.
Por ejemplo, si configura el relleno de 100px para dispositivos de escritorio sin cambiar la configuración de los dispositivos más pequeños, tanto la tableta como los teléfonos heredarán el relleno de 100px.
Si cambia el relleno a 50px para tabletas, tanto las tabletas como los teléfonos tendrán un relleno de 50px.
Si cambias el acolchado móvil a 25px no se heredará a ningún otro dispositivo ya que el teléfono es el más pequeño vista.
Una vez que cambie una configuración de diseño personalizada para una vista específica, no heredará el valor de los dispositivos más grandes.
¿Quieres más consejos y trucos de diseño receptivo Divi?
Mira el video Learn Divi Responsive Design in 10 Minutes para obtener más información sobre:
- Descripción del modo de vista previa adaptable de Divi
- Cambiar la configuración de vista previa móvil
- Usar accesos directos para cambiar la vista del dispositivo
- El modo de vista previa receptiva vs.
- La configuración de diseño responsivo
- La forma correcta de editar el diseño responsive en Divi
- Usar ajustes preestablecidos globales para la coherencia del diseño
- Ocultar elementos en diferentes dispositivos
- Aumentar el ancho de fila predeterminado en dispositivos móviles
¡Disfrutar!
Bono: Pruebe si su página web es compatible con dispositivos móviles
El motor de búsqueda líder en el mercado mundial, Google, ofrece una prueba gratuita de optimización para dispositivos móviles. Simplemente envíe su URL (o un fragmento de código) para obtener una respuesta si su página web es compatible con dispositivos móviles.
¡Ufff! DiviMundo.com pasó la prueba Mobile-Friendly con gran éxito.
¡Eso es todo por hoy!
Espero que hayas disfrutado de este post. Suscríbete a DiviMundo en YouTube y únete a nuestro grupo de Facebook para obtener contenido más nítido sobre WordPress y diseño web.
👉 Post relacionado: Cómo cambiar el número de columnas en el móvil en Divi
👉 Post relacionado: Seis consejos para un mejor menú móvil en Divi
👉 Curso gratuito: Crear un sitio web desde cero con Divi
