Configurar el ancho de contenido ideal en dispositivos móviles en Divi.

En este HUB Content te mostraremos cómo configurar el ancho de contenido ideal en dispositivos móviles en Divi para éste se vea de la mejor y más provechosa manera en dispositivos móviles.

Lo lograremos moviendo algunas de las configuraciones de diseño de Divi, con un par de simples ajustes, y veremos excelentes resultados a la hora de mostrar contenido con un ancho correcto en dispositivos móviles. Vamos a ello.

Hacer más ancho el contenido en móviles.

La idea de esto, es lograr que el contenido abarque al menos un 90% del ancho de la pantalla en móvil para aprovechar el maximo posible del total del ancho de la pantalla, sin llegar a los bordes del mismo y romper el diseño.

¿Quieres hacer que todos tus diseños en móvil en Divi se vean completamente responsive? Aprende a hacerlo con nuestro tutorial premium para optimizar el diseño responsive en móvil con Divi.

Para lograr esto solo debemos ir a la fila donde tenemos el contenido que queremos que se muestre en ancho “casi completo” y modificar los valores de “anchura máxima” tanto interna como externa. Es importante saber que si tienes varias secciones y filas, debes hacer lo mismo para cada una de ellas.

Una vez que elijamos la fila que queremos modificar, iremos a la pestaña de diseño de la misma, bajamos hasta el apartado de anchura máxima, y seleccionamos dispositivo “tablet” en ambos valores de la anchura.

En el primer valor de “anchura máxima” colocaremos “100%” esto hará que esa fila entienda que quieres darle el valor de anchura máxima interna dentro de la sección que la tienes. Eso quiere decir que si en el personalizador de temas has configurado un contenedor de 1280 px por ejemplo, esta fila siempre tendrá 1280 px.

En el segundo valor de “anchura máxima” colocaremos “90%”, esto hará que la fila interprete que ahora queremos que esa fila abarque el 90% del ancho de todo el viewport de la pantalla (total de pantalla visible) y hará que el contenido abarque el 90% del ancho de la pantalla en dispositivos móviles.

Puedes ver acá el ejemplo:

Recuerda, debes ir a fila > diseño > tamaño y allí colocaras ancho completo 100% y ancho completo posterior 90% con eso lograremos un resultado así:

Con esto lograremos que nuestro contenido abarque el mayor ancho visible en dispositivos móviles sin llegar a romper el diseño.

Bastante recomendable para post del blog principalmente, pues es donde tenemos una gran cantidad de contenido, y es lo que debemos optimizar todo lo que podamos para dispositivos móviles.