[Jefferson Maldonado]

¡Hola Simón!

Gracias por compartir tu caso y por adjuntar las capturas, así es mucho más sencillo entender exactamente lo que necesitas. Para lograr que la imagen ocupe completamente la columna izquierda en tu diseño con Divi, el truco está en trabajar con una sección normal (no especial), ya que las secciones especiales de Divi suelen limitar la personalización del ancho y la altura de las columnas.

Paso a paso para lograr el efecto

Mi recomendación es que utilices una sección normal (azul) y dentro de ella agregues una fila con dos columnas. En la configuración de la fila, ajusta tanto el ancho como el ancho máximo al 100% para asegurarte de que la fila ocupe todo el ancho de la pantalla. Luego, en la columna donde tienes tu formulario de registro o login (columna 2), coloca los módulos necesarios y, en la pestaña de CSS avanzado de esa columna, añade el siguiente código en “Elemento principal”:

min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;

Esto hará que la columna tenga siempre la altura de la pantalla y que los módulos se centren verticalmente. Además, te sugiero agregar un padding lateral de unos 60px para que el formulario no quede pegado al borde.

En la columna 1, donde irá la imagen, solo tienes que poner la imagen como fondo en la configuración de la columna y elegir la opción “Cover” (cubrir) para que la imagen se adapte a todo el espacio disponible de esa columna. Así conseguirás que la imagen ocupe siempre el 100% tanto en ancho como en alto.

Por último, te recomiendo revisar el diseño en móvil. En la mayoría de los casos lo ideal es ocultar la columna de la imagen y dejar solo visible la del formulario, ajustando el padding para que todo siga viéndose bien.

Consejo extra

Existen más maneras de lograr este efecto, pero este método es el más rápido y confiable en Divi 4 y versiones posteriores. ¡Espero que esta guía te ayude a conseguir el resultado que buscas! Si tienes alguna otra duda, aquí estoy para apoyarte.

Un saludo,

Jefferson – UXDivi

• Esta respuesta fue modificada 2 semanas por  Jefferson Maldonado.

[Simón Marín]

Hola Jefferson,

Muchas gracias por compartir el código y por explicar tan bien los conceptos detrás de la solución. Lo probé en mi proyecto y me funcionó perfectamente para lograr que la imagen ocupe el 100 % del ancho y la altura de la columna según lo necesitaba.

Realmente aprecio la claridad y los ejemplos que incluiste, ya que hicieron que fuera mucho más fácil entender e implementar la solución. Me ayudó a resolver un problema que había estado complicando mi diseño.

De nuevo, muchas gracias por tu ayuda.