En el Foro Divi y Plugins para Divi, compartimos y enriquecemos nuestro conocimiento en... Ver más
PublicoGrupo
organizador:
Organizado por
Descripción del grupo
En el Foro Divi y Plugins para Divi, compartimos y enriquecemos nuestro conocimiento en WordPress, enfocándonos especialmente en Divi y sus plugins. Aquí colaboramos, resolvemos problemas y descubrimos continuamente nuevas herramientas y técnicas. Este espacio nos permite no solo mejorar nuestras habilidades en diseño y desarrollo web, sino también contribuir al crecimiento mutuo, aprovechando al máximo las capacidades de Divi para crear sitios web asombrosos.
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.