¿Desea crear un diseño de cuadrícula de imagen sensible con DIVI ?
El constructor Divi tiene fantásticos módulos incorporados que usan vistas de cuadrícula,
Pero a veces es posible que desees crear tu propio diseño de cuadrícula de imágenes personalizado con enlaces de CTA. Esto le da más control sobre el diseño y contenido que desea mostrar 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 imágenes responsivo con enlaces de CTA utilizando las opciones de diseño integradas de Divi.
Vamos a empezar!
vista
Aquí hay una breve descripción del resultado que obtendremos al final de este tutorial.
Crear una página con Divi Theme Builder
Desde el panel de WordPress, cree una nueva página web yendo a Páginas >> Agregar
Ver también: ¿Cómo crear un menú deslizante y push en DIVI?
Luego, asigne un título a su página y luego haga clic en " Utilice Divi Builder ".
Luego haga clic en " empezar a construir«
Crear el diseño de la sección especial
Agregar una nueva sección "Especialidad". disposición de la barra lateral izquierda un tercio dos tercios.
Elija el diseño de las columnas como se muestra en la siguiente captura de pantalla:
Elimine la sección predeterminada para que solo quede la nueva sección especializada.
Abra la configuración de la sección y cambie el color de fondo de la siguiente manera:
- Fondo: #84dbda
En la pestaña Estilo, actualice las siguientes opciones:
- Igualar alturas de columna: SÍ
- Usar ancho de canalón personalizado: SÍ
- Ancho de canalón: 1
- Ancho interior: 100%
Lea también: ¿Cómo hago flotar publicaciones de blog en DIVI?
- Ancho interior máximo: 1 px (escritorio), 080 px (tableta y teléfono)
- Margen Interno (Superior e Inferior): 12vh
- Relleno de la columna 1 (superior e inferior): 0px
Con los estilos de sección en su lugar, agregue una fila de una columna a la sección.
Configuraciones de línea
Actualice los parámetros de línea de la siguiente manera:
- Usar ancho de canalón personalizado: SÍ
- Espacio entre columnas: 1
- Armonizar alturas de columnas: SI
- Margen interno (superior e inferior): 0px
Crea una segunda línea duplicando la primera.
Luego cambie la fila duplicada a un diseño de dos columnas.
Adición de 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 garantizar que las imágenes respondan en el diseño de la cuadrícula, agregaremos cada una de nuestras imágenes como imágenes de fondo en cada una de las cuatro columnas de la sección.
Dado que cada imagen de fondo tendrá un tamaño de fondo de " cubrir ", la imagen siempre ocupará 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 la columna de la fila superior.
Luego agregue una imagen de fondo a la columna.
Imágenes de fondo de la columna de la fila inferior
A continuación, abra la configuración de la columna 1 en la segunda fila (inferior) y también agregue una imagen de fondo a esta columna.
A continuación, agregue una imagen de fondo a la columna 2 de la misma fila.
Imagen de fondo de la columna 1 de la sección
Y finalmente, abre la sección de configuración. "especialidad" y agregue una imagen de fondo a la columna 1.
Adición del módulo "Call to Action" superpuesto a las imágenes de cada columna
Ahora que hemos agregado nuestras imágenes de fondo a cada columna del diseño de cuadrícula, agregaremos un módulo de "Llamada a la acción" a cada columna.
El uso de una superposición de módulo de "Llamada a la acción" en la imagen de fondo de la columna le permitirá agregar fácilmente estilos de superposición de fondo personalizados y efectos de desplazamiento a la imagen de fondo de la columna.
Para este ejemplo, solo usaremos el elemento de botón del módulo Llamada a la acción, pero puedes agregarlo fácilmente al contenido del título o cuerpo encima del botón.
Agregaremos el primer módulo de "Llamado a la acción" en la columna de la fila superior.
Contenido
Actualice la configuración del módulo "Llamado 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: #
OBSERVACION: Agregar un "#" para la URL del enlace del botón es solo un relleno por ahora para que se muestre el botón. Agregar el color de fondo semitransparente al pasar el mouse le dará un bonito color de superposición personalizado cuando pase el mouse sobre el módulo (y la imagen detrás de él).
- Color de fondo: transparente (escritorio), rgba (255,235,77,0.5) (hover)
Estilos de botones
Ir a la pestaña Estilo y modifique la configuración de los botones del módulo "Call to action" 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
- Botón de fondo: #000000 (escritorio), #ec5f00 (desplazar)
Ver también: Cómo crear un menú deslizante y push en DIVI
- Ancho del borde del botón: 0 píxeles
- Radio del borde del botón: 100 px
- Fuente del botón: Arena movediza
- Botón de luz tenue: Semi negrita
- Botón de relleno: 0,5 em arriba, 0,5 em abajo, 2 em izquierda, 2 em derecha
Tamaño, acolchado y ribete
A continuación, debemos asegurarnos de que nuestro módulo tenga una cierta altura para exponer la imagen de fondo de la columna detrás de él.
Para ello, añadiremos márgenes internos (Superior e Inferior) al 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.
Aplicar la siguiente configuración:
- Ancho: 100%
- Margen Interno (Superior e Inferior): 15vh
- Ancho del borde inferior: 5px
- Ancho del borde izquierdo: 5px
- Color del borde: rgba (255,255,255,0.5)
OBSERVACION: 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 gráfica del navegador. Por lo tanto, los elementos de la cuadrícula de su imagen crecerán y se reducirán en altura en proporción a la ventana del navegador.
Centrado vertical del contenido del módulo "Call to action"
Para asegurar que el contenido del módulo "Action Call" permanece 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;
Se agregó una superposición de llamada a la acción a otras columnas
Ahora que el primer módulo "Llamado a la acción" está personalizado, copie y pegue el módulo en las otras 3 columnas del diseño, incluidas las 2 columnas en la fila inferior y la columna 1 en la sección.
Para asegurarse de que el módulo "Llamado a la acción" cubra toda la altura de la columna 1 en la sección especializada, establezca la altura mínima en 100%.
- Altura mínima: 100%
Se acabó ! Veamos el resultado final.
Resultado final
Aquí está el resultado final del diseño de cuadrícula de imagen receptiva en una página web con los efectos de desplazamiento.
Y así es como reacciona la cuadrícula al ajustar el tamaño del navegador.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Los diseños de cuadrícula de imágenes receptivas continúan siendo un aspecto popular de muchos sitios web. El atractivo visual proporcionado por la imagen de fondo combinada con la superposición de llamada a la acción realmente puede resaltar esos importantes enlaces de navegación.
Además, la naturaleza receptiva del diseño de la cuadrícula de imágenes se verá genial en todos los dispositivos, lo cual siempre es una necesidad.
Esperamos que esta guía te sea de utilidad en tus futuros proyectos de creación Sitio web. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos si necesita más elementos para completar sus proyectos de creación de sitios web.
También puede seguir nuestra guía en Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
