Ancho de contenido en móviles en Divi: cómo configurarlo

¿Alguna vez has visto tu sitio Divi en el celular y has notado que el contenido deja demasiado margen a los lados, desaprovechando el poco espacio que ya hay en una pantalla pequeña? Es un problema común. En este tutorial te muestro cómo configurar el ancho de contenido ideal en dispositivos móviles en Divi, con un par de ajustes simples que hacen que tu contenido aproveche mejor el ancho de la pantalla en móvil.

Por defecto, Divi aplica ciertos márgenes y anchos que funcionan bien en escritorio pero que en móvil pueden dejar el contenido demasiado encajonado. Con unos ajustes en las configuraciones de diseño, conseguimos que el contenido se vea más ancho y aprovechado en pantallas pequeñas, mejorando la legibilidad y la experiencia.

¿Por qué el contenido se ve estrecho en móvil?

Divi gestiona el ancho del contenido a través de los anchos de fila, los márgenes y los paddings (rellenos) de secciones, filas y columnas. Esos valores suelen estar pensados para escritorio, donde sobra espacio horizontal. En móvil, donde cada píxel cuenta, esos mismos márgenes hacen que el contenido quede con demasiado espacio en blanco a los lados. La solución es ajustar específicamente los valores para la vista móvil, sin tocar el diseño de escritorio. Para dominar el diseño responsive en Divi, el Curso de Divi 5 completo es el camino.

Paso 1: Identifica qué está limitando el ancho

Lo primero es entender de dónde viene el espacio sobrante. Normalmente son tres cosas: el ancho de la fila (que puede tener un máximo), los paddings laterales de la sección o fila, y los márgenes de las columnas. Con las herramientas de desarrollador del navegador (F12) en vista móvil, puedes inspeccionar el elemento y ver qué valor está creando el margen. Identificar la causa exacta te permite ajustar solo lo necesario.

Consejo: Divi permite definir valores distintos para escritorio, tablet y móvil en casi cualquier opción de diseño. Aprovecha eso: ajusta los anchos y paddings solo para móvil, dejando intacto el diseño de escritorio. Pasa el cursor sobre cualquier opción y verás los iconos de dispositivo para configurar cada tamaño por separado.

Paso 2: Ajusta el ancho de la fila en móvil

Entra a las opciones de la fila, ve a la pestaña Diseño → Dimensionamiento y ajusta el ancho y el ancho máximo para la vista móvil. Aumentar el ancho de la fila (por ejemplo, a 95% o 100%) en móvil hace que el contenido aproveche más la pantalla. Recuerda hacer este ajuste solo en la vista móvil, usando los iconos de dispositivo de Divi, para no afectar el escritorio.

🎓 ¿Quieres dominar el diseño responsive en Divi?
En uxdivi.com/cursos tenemos el Curso de Divi 5 completo donde aprendes a controlar el diseño en todos los dispositivos, los breakpoints y todas las opciones responsive. Accede como suscriptor y crea sitios que se ven perfectos en cualquier pantalla.

Paso 3: Reduce los paddings laterales en móvil

Otro punto clave son los paddings (rellenos) laterales de la sección y la fila. Entra a Diseño → Espaciado y reduce el padding izquierdo y derecho en la vista móvil. Estos rellenos suelen ser los grandes responsables del espacio sobrante. Reducirlos (sin eliminarlos del todo, para que el contenido no quede pegado al borde) da más ancho al contenido. Un padding lateral pequeño en móvil suele ser suficiente para que el contenido respire sin desperdiciar espacio.

Paso 4: Revisa el resultado en varios tamaños

Después de los ajustes, revisa el resultado en las vistas de tablet y móvil del Divi Builder, y si puedes, en un dispositivo real. El objetivo es un equilibrio: contenido que aproveche el ancho de la pantalla pero que mantenga un pequeño margen para no pegarse a los bordes. Verifica también que los textos sigan siendo legibles y que las imágenes se vean bien con el nuevo ancho. Si trabajas mucho con elementos de ancho completo, te puede interesar el tutorial de botón de formulario a ancho completo en Divi.

Preguntas frecuentes sobre el ancho de contenido en móvil

¿Estos ajustes afectan el diseño de escritorio?

No, si los haces correctamente. Divi permite definir valores específicos para móvil usando los iconos de dispositivo. Mientras ajustes solo la vista móvil, el escritorio queda intacto.

¿Debo poner el contenido al 100% del ancho en móvil?

No necesariamente. Lo ideal es dejar un pequeño margen para que el contenido no quede pegado a los bordes de la pantalla. Un ancho de 90-95% con un padding lateral pequeño suele ser el equilibrio perfecto entre aprovechar el espacio y mantener la respiración visual.

¿Esto aplica a toda la página o sección por sección?

Aplica al elemento que ajustes. Puedes hacerlo sección por sección, fila por fila, según donde notes el problema. Si quieres un cambio global, también puedes ajustarlo en las opciones generales de Divi, pero el control fino se hace por elemento.

¿Funciona en Divi 5?

Sí. Las opciones responsive y de dimensionamiento están disponibles en Divi 4 y Divi 5. Divi 5 incluso mejora el editor responsive, lo que facilita aún más estos ajustes.

Conclusión

Conseguir un ancho de contenido ideal en móvil es cuestión de un par de ajustes bien hechos: aumentar el ancho de la fila y reducir los paddings laterales, todo en la vista móvil sin tocar el escritorio. El resultado es un contenido que aprovecha mejor el limitado espacio de las pantallas pequeñas, con mejor legibilidad y una experiencia más cómoda. Identifica qué está creando el margen sobrante, ajústalo solo para móvil, y revisa el resultado: tu sitio se verá mucho mejor en el celular.

🎓 ¿Quieres que tu sitio se vea perfecto en todos los dispositivos?
En uxdivi.com/cursos tienes el Curso de Divi 5 completo donde dominas el diseño responsive, los breakpoints y todas las opciones para que tu sitio luzca impecable en cualquier pantalla. Accede como suscriptor y diseña sin límites.