Crear páginas webs con diseños responsive ya no solo es una tendencia, si no que llega a ser algo básico para tener una web en condiciones. Con la plantilla y constructor Divi, es muy fácil crear páginas responsive o adaptables, de ancho completo y que se adapten a todo tipo de dispositivos y tamaños de pantalla.

En este post vamos a ver paso por paso, cómo añadir una sección de imágenes responsive con Divi, sin espacios, tipo masonry y además cómo añadir un botón sobre ellas o un efecto zoom al hacer scroll. Verás como con tan solo unos pequeños ajustes y sin tocar una sola línea de código, se aporta una gran calidad al diseño de tu web.

Cómo diseñar fácilmente una espectacular sección de imágenes en tu web con Divi

Añadir imágenes a Divi es muy sencillo, pero no siempre se muestran como deseas. La plantilla y constructor Divi se supera con cada actualización y ya dispone de tantas opciones de configuración que tan solo con algunos clicks podrás modificar el diseño a tu medida.

Los ajustes para diseñar un conjunto de imágenes en Divi que vamos a ver a continuación, los puedes aplicar tanto a la home de tu web como a una landing page o a cualquier otra página que quieras diseñar con el constructor Divi.

Vamos a ver cómo hacerlo partiendo desde cero.

Añadir imágenes con Divi Builder, dificultad cero.

Lo primero que tienes que hacer para comenzar a agregar imágenes en tu web es:

• Entrar en la edición de la página en concreto que deseas diseñar.
• Activar el botón morado de «Usar el constructor Divi» que aparece en la parte superior.
• Añadir una «sección estándar».
• Añadir el número de columnas y distribución de las mismas en las que quieres dividir la sección.
• Añadir un módulo. Hay varios módulos de Divi con los que se puede añadir una imagen de fondo con enlace; Módulo imagen, Módulo Anuncio, Módulo Botón, Módulo llamada a la acción… En este caso vamos a utilizar el Módulo imagen de Divi.
• Una vez hayas añadido el Módulo imagen, entra en los ajustes del módulo y sube una imagen de fondo en la casilla «URL de la imagen».

• A continuación, añade el enlace al que deseas dirigir a los usuarios cuando cliquen en esta imagen. Hazlo en el apartado de más abajo, donde indica «URL del enlace».

NOTA: Si activas la casilla «Abrir en capa emergente» (se refiere a mostrar la misma imagen en otra ventana externa) desaparecerá la casilla de añadir otra URL.

• Por último, añade de la misma forma el resto de imágenes que irán en la misma fila o sección. En este ejemplo, se ha creado una sección con 4 imágenes con enlaces. Para ello, simplemente duplica el módulo tres veces y cámbiale las imágenes de fondo.

Eliminar los espacios entre las imágenes de una sección de Divi en tan solo dos pasos.

La sección ya está creada de forma muy sencilla, pero ahora vamos a ver un paso más, cómo eliminar la separación de una galería de imágenes con el constructor Divi, para que estas se muestren unidas entre sí.

• Entra en los ajustes de la fila y ve al apartado de «Diseño».

• Activa las casillas «Hacer que esta fila tenga anchura completa» y «Uso personalizado de canalón de ancho». Te aparecerá entonces una barrita para ajustar el espacio entre columnas. Marca 1, tal y como ves en la siguiente imagen. Cuanto mayor sea este número, mayor será la separación existente entre imágenes.

Tras realizar estos cambios, previsualiza la página y comprueba que las imágenes de la galería se han unido y el espacio que había entre ellas se ha eliminado. Si realizas esta acción con el constructor visual de Divi, lo podrás visualizar en el instante.

Siguiendo con el ejemplo anterior, las imágenes se mostrarían así:

Si por ejemplo, hay varias filas de imágenes que quieres unir verticalmente, es decir, que no queden espacios entre una fila superior y otra inferior, tras hacer estos ajustes anteriores:

• Entra en los ajustes de la fila y en Diseño -> Separación -> Relleno superior / inferior (según la fila que sea) indica 0px. De esta forma indicas que el espacio entre ambas filas sea cero o nulo.

Este tipo de diseño lo puedes usar para mostrar galerías de fotografías tuyas, imágenes de productos… dependiendo de la temática de tu web.

Igualmente puedes duplicar la primera fila y después cambiar las imágenes en cada módulo, pues es una de las ventajas de la plantilla Divi para ayudarte a ahorrar tiempo.

El ejemplo anterior con dos filas de imágenes se mostrarán de la siguiente forma:

¡La sección responsive de galería de imágenes en tu web con Divi ya estaría terminada!

También puedes hacer lo mismo pero añadiendo una sección especial, en vez de una sección estándar, de forma que puedas crear un grid de imágenes responsive en Divi que se muestren a distintos tamaños y alturas, algo así como se muestran en Pinterest.

¿Y si quieres añadir botones con las imágenes de fondo?

Pero, ¿qué ocurre si el objetivo de esta sección es dirigir a realizar una acción específica?

Hablo, por ejemplo, de añadir un botón de llamada a la acción sobre una imagen, con el fin de que el usuario de tu web clique y pueda ver tus productos, tus servicios, tus cursos, las categorías de tus productos…

En este caso puedes seguir exáctamente los mismos pasos anteriores, pero con la diferencia de que en vez de utilizar el Módulo Imagen (te permite añadir enlace pero no botón), utilices el Módulo Anuncio de Divi o el Módulo Llamada a la acción de Divi.

Para personalizar el botón:

• Añade el «texto del botón» y el «enlace del botón» en el apartado de Contenido.
• Personaliza el estilo del botón (color y tamaño de texto, color de fondo, estilo en hover, efecto…) en el apartado de Diseño > Botón > Utilizar Estilos Personalizados para Botón.
  

El resultado se mostrará así:

¿Y si quieres añadir efectos a las imágenes?

Con las últimas actualizaciones de Divi, se han ido añadiendo varias opciones de efectos para los diseños.

Estos los encontrarás en el apartado de Diseño de cada módulo, sección y fila, y entre otras cosas, podrás añadir sombras al botón, añadir sombras a la fila, añadir filtros a la imagen o añadir animación cuando se muestre la imagen (desvanecer, diapositiva, zoom, invertir…).

Por ejemplo, en este caso, vamos a seleccionar dentro de los ajustes del Módulo Llamada a la acción, el efecto zoom en la imagen de Divi. También vamos a seleccionar que solo se repita una vez y que la duración total sea de 1 segundo (selecciona 1000ms).

De esta forma, al hacer scroll, la imagen aparecerá acercándose con efecto de zoom.

¿Por qué no se muestran las imágenes completas?

A veces, las imágenes no se adaptan al espacio y no se muestran completas, como ocurre en el siguiente ejemplo:

En ese caso… ¡Qué no cunda el pánico! Es muy sencillo ampliarla hasta que se muestre correctamente.

Para hacer que las imágenes se muestren completas, te aconsejo que utilices el constructor visual de Divi (editor front-end) y vayas viendo como va quedando el diseño sobre la marcha.

Después entra en los ajustes de cada módulo y en el apartado de Diseño > Separación, ve jugando con el Relleno personalizado o padding.

Añade espacio en píxeles, tanto en la parte superior como en la inferior, hasta que se muestre tal y como deseas. Por ejemplo, 200px en Relleno superior y 200px en Relleno inferior.

Añade el mismo relleno a cada imagen para que se muestren todas a la misma altura.

Por último, una vez termines de diseñar una sección de imágenes en ancho completo en Divi, revisa cómo se quedan todos los cambios en el formato de pantalla móvil y tablet. Divi se adapta bastante bien a cada dispositivo, aunque sí es verdad que, a veces, deberás tocar algunos ajustes.

Ten en cuenta que en dispositivos móviles, estas imágenes se mostrarán una a una verticalmente, lo que a veces suele prolongar en exceso el diseño. Para ello, puedes desactivar la sección en los ajustes avanzados y crear secciones específicas que solo se muestren en dispositivos móviles.

Como ves, además de ser una tendencia en diseño web, con Divi se pueden hacer infinitas combinaciones de ajustes para añadir conjuntos de imágenes en bloques, de forma que se llene mejor el espacio de la pantalla y todo resulte más visual y atractivo.

Por cierto, otra ventaja de contar con la plantilla Divi en tu web, son las layouts que Elegant Themes ofrece a su comunidad. En este post puedes descargarte 5 layouts con galerías de imágenes muy profesionales ¡solo tendrás que subirlas a tu biblioteca y sustituir las imágenes de ejemplo por las de tu web!

¿Y tú? ¿Cómo diseñas los bloques de imágenes de tu web en Divi?