Cómo crear un aspecto del grado de imagen que responde con CTA y superposiciones de desplazamiento en Div

Los aspectos de la cuadrícula receptiva son perfectos para presentar una colección de imágenes con enlaces (o CTA), porque se ven bien en cada dispositivo. El generador de la división tiene algunos módulos fantásticos construidos que usan pantalla de cuadrícula, incluida la cuadrícula de cartera, el blog de la cuadrícula y el GID de la galería. Pero a veces es posible que desee crear su propio aspecto de la cuadrícula de imágenes personalizadas CTA. Esto le brinda más control sobre el diseño y el contenido que desea que se muestre para cada elemento de cuadrícula, sin tener que recurrir a un complemento. Hoy, le mostraremos cómo crear un aspecto de la cuadrícula de imágenes receptivas con CTA utilizando las opciones de diseño incorporadas. Para hacer esto, seremos creativos con la forma en que organizamos la cuadrícula usando una sección especializada y agregaremos superposiciones a cada imagen utilizando un impulso.
¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Creando un aspecto de la cuadrícula de imágenes receptivas con CTA y superposiciones de desplazamiento en Divi 1: Creación de la apariencia de sección especial, agregue una nueva sección especializada con una barra lateral izquierda de un tercio.
Elimine la sección predeterminada habitual para que solo quede la nueva sección especializada. 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 Diseño, actualice las opciones de tamaño, ancho y revestimiento de la siguiente manera:
Igualar las alturas de la columna: sí

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho interno: 100%
Ancho interno máximo: 1080px (escritorio), 500px (tableta y teléfono)
Junta: 12VH arriba, 12 VH abajo
Columna 1 revestimiento: 0 px desde arriba, 0 px a continuación
Después de que los estilos de la sección estén en su lugar, agregue una fila con una columna a la sección.
Configuración de fila Actualizar la configuración de la fila de la siguiente manera:

El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Forro: 0 px arriba, 0 px abajo
Para crear una segunda fila, copie la primera fila.
Luego actualice la fila duplicada con un aspecto de dos columnas.

Parte 2: Agregar imágenes como imágenes de fondo en la columna Ahora que todas las filas y columnas están en su lugar, estamos listos para agregar nuestras imágenes a la apariencia de la cuadrícula. Para garantizar que las imágenes sean receptivas en la apariencia de la cuadrícula, agregaremos cada una de nuestras imágenes como imágenes de fondo a cada una de las cuatro columnas en la sección. Debido a que cada imagen de fondo tendrá un fondo de “cubierta”, la imagen siempre llenará toda la columna al ajustar el tamaño del navegador.

La imagen de fondo de la columna en la fila superior para iniciar, abra la configuración de la columna para la fila superior. Luego agregue una imagen de fondo a la columna.

Imágenes de fondo de las columnas de la fila inferior luego abra la configuración para la columna 1 en la segunda (abajo) y agregue una imagen de fondo a la columna respectiva. Luego agregue una imagen de fondo en la columna 2 de la misma fila.

Sección especial Columna 1 Imagen de fondo y, finalmente, abra la configuración de la sección especializada y agregue una imagen de fondo en la columna 1.

Parte 3: Agregar la llamada a la acción que superpone la imagen en cada columna Ahora que nuestras imágenes de fondo se han agregado a cada columna de la aparición de la cuadrícula, agregaremos un módulo de acción a cada columna con la que servirá como una Se superpone con la imagen con un botón CTA. El uso de un módulo de acción para la acción como superposición sobre la imagen de fondo de la columna le permitirá agregar estilos de superposición de fondo personalizados y pasar fácilmente con el mouse a la imagen. Además, le brinda 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 acción, pero puede agregar fácilmente el título o el contenido del cuerpo por encima del botón, utilizando las opciones de contenido.

Creando el módulo de exhortación para agregar la primera llamada a la superposición de la imagen, agregue un módulo para la acción en la columna en la fila superior.

Contenido actualiza el contenido para el impulso de la siguiente manera:

Eliminar el texto del título
Eliminar el texto del cuerpo

URL del botón: #
Color de fondo: transparente (escritorio), RGBA (255,235,77,0.5) (coloque el cursor)
Nota: Agregar un “#” para la URL del enlace del botón es solo un complemento por el momento, de modo que aparece el botón. Agregar color de fondo semi -transparente en Hover le dará un color personalizado superior cuando coloque el cursor sobre el modo (y la imagen detrás). Buttton Stels continúa actualizando la configuración de diseño para el botón de la siguiente manera:
Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 22 PX
El color del texto del botón: # FFEB4D

El color del fondo de fondo: # 000 (escritorio), # EC5F00 (cursor)
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: arena actual
Peso de fuente de fuente: semi audac.
Junta del botón: 0.5em arriba, 0.5em hacia abajo, 2em a la izquierda, 2em a la derecha
Dimensión, forro y borde, debemos asegurarnos de que nuestro módulo tenga una cierta altura para exponer la imagen de fondo detrás de ella. Para hacer esto, agregaremos algunos rellenos a la parte superior e inferior del módulo. También agregaremos un borde sutil al módulo, de modo que ofrecemos una pequeña separación de otras imágenes de la aparición de la cuadrícula.
Actualizar lo siguiente:
Ancho: 100%
Junta: 15 VH arriba, 15 VH abajo

Ancho de borde inferior: 5 PX
Ancho del borde izquierdo: 5 PX
Color del borde: RGBA (255,255,255,0,5)
Nota: El uso de la unidad de longitud VH para el llenado hará el valor de llenado en relación con la altura de la ventana de vista del navegador. Por lo tanto, los elementos en la cuadrícula de la imagen crecerán y disminuirán en altura a medida que la ventana del navegador crezca y disminuya en altura.
El centrado vertical del contenido de CTA para garantizar que el contenido del módulo de acción permanezca enfocado verticalmente, podemos agregar un pequeño fragmento CSS personalizado utilizando la propiedad Flex.
Dirección flexible: columna;
Justify-Concursing: Centro;
Agregando la llamada superpuesta a la acción a las otras columnas ahora que se estiliza el primer módulo para la acción, copie y pegue el módulo en las otras 3 columnas a lo largo de la apariencia, incluidas las 2 columnas en la fila inferior y la columna 1 en la sección especializada.

Para garantizar que el módulo de acción para la acción se extienda en toda la altura de la columna 1 en la sección especializada, actualice la altura mínima al 100%.
Altura mínima: 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 infantil flexible, de modo que el valor de altura mínima funcionará.
Eso es todo. Verifiquemos el resultado final. El resultado final aquí es el resultado final de la aparición de la cuadrícula de imagen receptiva en una página en vivo.