Cómo crear un diseño de cuadrícula de imagen sensible con CTA y superposiciones de desplazamiento en Divi

Los diseños de cuadrícula receptivos son perfectos para mostrar una colección de imágenes con enlaces (o CTA) porque se ven bien en todos los dispositivos. El constructor Divi tiene algunos fantásticos módulos incorporados que usan pantallas de cuadrícula, incluida Portfolio Grid, Blog Grid y Gallery Grid. Pero a veces es posible que desee crear su propio diseño de cuadrícula de imágenes personalizado con CTA. Esto le brinda más control sobre el diseño y el contenido que desea que se muestre para cada elemento de la cuadrícula sin tener que recurrir a un complemento.

Hoy, le mostraremos cómo crear un diseño de cuadrícula de imagen receptivo con CTA utilizando las opciones de diseño integradas de Divi. Para hacer esto, seremos creativos con la forma en que organizamos la cuadrícula usando una sección especial y agregaremos superposiciones a cada imagen usando un módulo de Llamado a la acción.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Creación de un diseño de cuadrícula de imagen sensible con CTA y superposiciones de desplazamiento en Divi

Parte 1: Creación del diseño de la sección especial

Para comenzar, agregue una nueva sección de especialidades con un diseño de barra lateral izquierda de un tercio y dos tercios.

Elimine la sección regular predeterminada para que solo quede la nueva sección de especialidad.

Abra la configuración de la sección y actualice el color de fondo de la siguiente manera:

• Color de fondo: #84dbda

En la pestaña de diseño, actualice las opciones de tamaño, ancho y relleno de la siguiente manera:

• Igualar alturas de columna: SÍ
• Usar ancho de canalón personalizado: SÍ
• Ancho del canalón: 1
• Ancho interior: 100%
• Ancho máximo interno: 1080 px (escritorio), 500 px (tableta y teléfono)
• Acolchado: 12vh arriba, 12vh abajo
• Relleno de la columna 1: 0px arriba, 0px abajo

Una vez que los estilos de sección estén en su lugar, agregue una fila de una columna a la sección.

Configuración de fila

Actualice la configuración de la fila de la siguiente manera:

• Ancho del canalón: 1
• Igualar alturas de columna: SÍ
• Relleno: 0px arriba, 0px abajo

Para crear una segunda fila, duplique la primera fila.

Luego actualice la fila duplicada con un diseño de dos columnas.

Parte 2: agregar imágenes como imágenes de fondo de columna

Ahora que todas las filas y columnas están en su lugar, estamos listos para agregar nuestras imágenes a nuestro diseño de cuadrícula. Para asegurarnos de que las imágenes respondan dentro del diseño de la cuadrícula, vamos a agregar cada una de nuestras imágenes como imágenes de fondo en cada una de las cuatro columnas de la sección. Debido a que cada imagen de fondo tendrá un tamaño de fondo de «cubierta», la imagen siempre llenará toda la columna al ajustar el tamaño del navegador.

Imagen de fondo de la columna de la fila superior

Para comenzar, abra la configuración de columna para la columna en la fila superior.

Luego agregue una imagen de fondo a la columna.

Imágenes de fondo de las columnas de la fila inferior

A continuación, abra la configuración de la columna 1 en la segunda fila (inferior) y agregue una imagen de fondo a esa columna también.

Luego, agregue una imagen de fondo a la columna 2 en la misma fila.

Imagen de fondo de la columna 1 de la sección especial

Y finalmente, abra la configuración de la sección de especialidades y agregue una imagen de fondo a la columna 1.

Parte 3: agregar la llamada a la acción de superposición de imagen a cada columna

Ahora que nuestras imágenes de fondo se han agregado a cada columna del diseño de la cuadrícula, vamos a agregar un módulo de llamado a la acción a cada columna que servirá como una superposición para la imagen con un botón CTA. El uso de un módulo de llamada a la acción como una superposición en la parte superior de la imagen de fondo de la columna le permitirá agregar estilos de superposición de fondo personalizados y efectos de desplazamiento a la imagen con facilidad. Además, también te da la opción de agregar un CTA personalizado sobre la imagen. Para este ejemplo, simplemente usaremos el elemento de botón en el módulo de Llamado a la acción, pero también puede agregar fácilmente contenido de título o cuerpo sobre el botón usando las opciones de contenido.

Creación del módulo de llamada a la acción

Para agregar la primera llamada a la acción superpuesta a la imagen, agregue un módulo de llamada a la acción en la columna de la fila superior.

Contenido

Actualice el contenido de la llamada a la acción de la siguiente manera:

• eliminar el texto del título
• eliminar el texto del cuerpo
• URL del enlace del botón: #
• Color de fondo: transparente (escritorio), rgba (255,235,77,0.5) (desplazamiento)

NOTA: Agregar un «#» para la URL del enlace del botón es solo un relleno por ahora para que aparezca el botón. Agregar el color de fondo semitransparente al pasar el mouse le dará un bonito color de superposición personalizado al pasar el mouse sobre el módulo (y la imagen detrás de él).

Estilos de botones

Continúe actualizando la configuración de diseño de llamada a la acción para el botón de la siguiente manera:

• Usar estilos personalizados para el botón: SÍ
• Tamaño del texto del botón: 22px
• Color del texto del botón: #ffeb4d
• Color de fondo del botón: #000 (escritorio), #ec5f00 (desplazamiento)
• Ancho del borde del botón: 0px
• Radio del borde del botón: 100px
• Fuente del botón: Arena movediza
• Peso de la fuente del botón: semi negrita
• Relleno del botón: 0,5 em arriba, 0,5 em abajo, 2 em izquierda, 2 em derecha

Tamaño, relleno y borde

A continuación, debemos asegurarnos de que nuestro módulo tenga cierta altura para exponer la imagen de fondo de la columna detrás de él. Para hacer esto, agregaremos algo de relleno en la parte superior e inferior del módulo. También agregaremos un borde sutil al módulo para darle un poco de separación de otras imágenes en el diseño de cuadrícula.

Actualice lo siguiente:

• Ancho: 100%
• Acolchado: 15vh arriba, 15vh abajo
• Ancho del borde inferior: 5px
• Ancho del borde izquierdo: 5px
• Color del borde: rgba(255,255,255,0.5)

NOTA: El uso de la unidad de longitud vh para el relleno hará que el valor del relleno sea relativo a la altura de la ventana del navegador. Por lo tanto, los elementos de la cuadrícula de imágenes aumentarán y disminuirán en altura a medida que la ventana del navegador aumente y disminuya en altura.

Centrar verticalmente el contenido de la CTA

Para garantizar que el contenido dentro del módulo de llamada a la acción permanezca centrado verticalmente, podemos agregar un pequeño fragmento de CSS personalizado usando la propiedad flex.

En la pestaña avanzada, agregue el siguiente CSS al elemento principal:

display:flex;
flex-direction:column;
justify-content:center;

Agregar la superposición de llamada a la acción a las otras columnas

Ahora que el primer módulo de llamada a la acción tiene estilo, copie y pegue el módulo en las otras 3 columnas a lo largo del diseño, incluidas las 2 columnas en la fila inferior y la columna 1 en la sección de especialidad.

Para asegurarse de que el módulo de llamado a la acción abarque la altura completa de la columna 1 en la sección de especialidad, actualice la altura mínima al 100 %.

Normalmente, esto no funcionaría para un módulo en una columna normal. Pero, debido a la propiedad flexible en la columna, el módulo es esencialmente un elemento secundario flexible, por lo que el valor de altura mínima del 100 % funcionará.

Eso es todo. Veamos el resultado final.

Resultado final

Aquí está el resultado final del diseño de cuadrícula de imagen receptiva en una página en vivo.

Y aquí están los efectos de desplazamiento.

Y así es como responde el diseño al ajustar el tamaño del navegador.

Pensamientos finales

Los diseños de cuadrícula de imágenes receptivas continúan siendo un aspecto popular de muchos sitios web. El aspecto visual proporcionado por la imagen de fondo combinada con la superposición de Llamada a la acción realmente puede hacer que esos importantes enlaces de navegación destaquen. Además, la naturaleza receptiva del diseño de la cuadrícula de imágenes se verá genial en todos los dispositivos, lo que siempre es una necesidad. Espero que te sirva para tu próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!