Uso de imágenes transparentes para crear hermosas columnas CTA superpuesta con div Div

Cuanto más visualmente sea un CTA, mayores serán las posibilidades de una mejor tasa de conversión. Hay muchas maneras de diseñar sus CTA, pero en esta publicación le mostraremos cómo crear hermosas columnas CTA con imágenes semitransparentes y superposiciones de columnas. Puede encontrar las imágenes semitransparentes en la carpeta de descarga a continuación, pero no dude en usar otras imágenes. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue la apariencia de la columna CTA gratuita para poner su mano en el aspecto de la columna CTA gratuita, primero la descargará 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! ¡Suscríbase a nuestro canal de YouTube para comenzar la recreación! Agregue una nueva sección de fondo. Comience creando una nueva página o agregando una nueva sección habitual a una página existente. Luego acceda a la configuración de la sección y agregue un fondo de gradiente.
Antecedentes: gradiente
Fondo de gradiente uno: luz muy gris #efeff
El segundo color del gradiente de fondo: blanco #ffffff
Tipo de gradiente: radial
Dirección radial: centro
Posición inicial: 52%
Posición final: 50%
Interruptor de espacio a la pestaña de diseño y ajuste el relleno en la configuración de espaciado.

Revestimiento superior e inferior
Escritorio: 0VW
Revestimiento inferior
Tableta + teléfono: 70VW
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión luego ajuste el ancho y el ancho de la fila máxima.

Ancho: 100%
Máximo 100% de ancho
Agregue un módulo de texto Agregue el contenido H2 y el texto es el momento de agregar módulos. Primero, agregue un módulo de texto e ingrese el contenido H2 y el párrafo de su elección.

Texto Vaya a la pestaña Diseño y estilice el texto de la siguiente manera:

Texto de fuente: Abrir sans
Alineación de texto: Centro
Color de texto: verde # 5bba1b
Tamano del texto:
Escritorio: 1.2VW
Tableta: 2.8VW
Teléfono: 3.6VW
Texto de la carta de espacio: 0.2VW
La altura de la línea de texto: 1.8em
Título 2 Texto Después de estilizar el texto del párrafo, estilice el texto H2.

Sección: H2
Peso de fuente H2: Doppio One
Alineación del texto H2: Centro
H2 Color de texto: Muy oscuro gris # 3D3D3D
Tamaño de texto H2: Escritorio: 4.4VW
Tableta: 5.9VW
Teléfono: 6.9VW
Espacio y agregue algunos rellenos superiores.
Revestimiento superior: 212 PX

Agregue un módulo de divisor de visibilidad en el módulo de texto, agregue un módulo divisor y establezca la visibilidad en “sí”.
Visibilidad: si

La línea luego cambia el color del separador.
Color de línea: gris oscuro # 545454

Dimensión ahora, ajuste el tamaño del divisor para que se vea más pequeño.
Peso del divisor: 4 PX

Ancho: 9%
Alineación del módulo: centro
Espacio Agregar un margen superior negativo.
Margen superior:

Desktop: -40px
Tableta + teléfono: -15 PX
Agregue una nueva estructura de fila de la columna Continuar agregando una nueva fila con tres columnas de igual tamaño. Esta será la base del diseño de la columna CTA.
Papel tapiz antes de agregar cualquier módulo, agregue un gradiente al fondo a la configuración promedio.

Antecedentes: gradiente

Gradiente de color de fondo Uno: blanco #ffffff
El gradiente de color de los dos fondo: transparente
Tipo de gradiente: radial
Centro de dirección radial
Posición inicial: 42%
Posición final: 50%
Dimensión ahora, ajuste el tamaño de la fila.
Ancho: 100%

Ancho máximo: 100%
El espacio ir a la siguiente configuración de espaciado y agregue algunos valores de llenado personalizados.
Revestimiento superior: 22VW

Revestimiento inferior: 10 VW
Junta izquierda y derecha: 10 VW
Configuración Columna 1 Fondo Continuar abriendo la configuración de la columna 1 y agregue un fondo de gradiente.
Antecedentes: gradiente

Gradiente de color de fondo Uno: azul # 2a4eed
Color de gradiente Dos: azul claro # 91F5F7
Tipo de gradiente: lineal
Dirección de gradiente: 38 grados
Posición inicial: 23%
Border Dé las esquinas de columna redondeadas en la siguiente configuración del borde. Redondeado: 2 VW en todas las esquinas
Box Shadow también agregue una sombra de caja sutil.

Box Shadow: segunda opción
Posición horizontal de la sombra de la caja: 6 px

Box Shadow Posición vertical: -10px
Poder de poco claro de la sombra de la caja: 50 px
Outs Asegúrese de que la columna sea visible.
Superación horizontal y vertical: Visible
Configuración Columna 2 Pase de fondo a la segunda columna y agregue el siguiente fondo de gradiente:

Antecedentes: gradiente
El color del jardín del fondo uno: # 1BA038

El segundo color del gradiente de fondo: # C6F727
Tipo de gradiente: lineal
Dirección de gradiente: 38 grados
Posición inicial: 23%
El borde agrega un rayo de borde a la columna.
Esquinas redondeadas: 2VW las cuatro esquinas
Sombra de caja con un tono de caja sutil.

Box Shadow: segunda opción
Posición horizontal de la sombra de la caja: 6 px

Box Shadow Posición vertical: -10px
Poder de poco claro de la sombra de la caja: 50 px
Girar esta columna es un poco más alta que las otras. Para crear este efecto, ajustaremos la configuración de transformación para la columna 2.
Transformar la traducción:
Desktop: -8VW, eje Y


Tableta + teléfono: 30VW, eje y
Las operaciones hacen visibles y desbordando esta columna.
Desbordamientos horizontales y verticales: visible
Configuración de la columna 3 ¡Soporte de la columna, pasamos a la siguiente y última columna! Agregue un fondo de gradiente.

Antecedentes: gradiente
El color del jardín del fondo uno: # f0562c

El segundo color del gradiente de fondo: # F1A526
Tipo de gradiente: lineal
Dirección de gradiente: 38 grados
Posición inicial: 23%
El borde vaya a la pestaña de diseño y agregue un rayo de borde a cada esquina. Redondeado: 2 VW en todas las esquinas.
Box Shadow también agregue un tono de caja.
Box Shadow: segunda opción

Posición horizontal de la sombra de la caja: 6 px
Box Shadow Posición vertical: -10px

Poder de poco claro de la sombra de la caja: 50 px
Transformar en dimensiones de pantalla más pequeñas, tendremos que reposicionar la columna utilizando valores de traducción personalizados.
Transformar la traducción:
Tableta + teléfono: 60VW
Finalmente derramado, ajuste la configuración del derrame.

Desbordamientos horizontales y verticales: visible
Agregue los módulos de imagen cargue una imagen de corte y semirrecomparente después de haber completado todas las configuraciones de columna, es hora de agregar módulos. Agregue un módulo de imagen a la columna 1 y cargue una imagen semitransparente de su elección. Puede encontrar las imágenes que utilicé en el archivo zip que podría descargar al comienzo de esta publicación.
Dimensión Haga su módulo de ancho.

Fuerza el ancho completo: si
Espaciado Agregue un margen marginal y valores de llenado.

Margen superior:

Escritorio: -11VW
Tableta + teléfono: -24VW

Forro izquierdo y derecho:
Escritorio: 5VW
Tableta + teléfono: 20VW
Transforme la escalera en el flotador Agregue un efecto flotante sutil a la imagen utilizando la opción de transformar la escala a partir de la configuración de transformación.
Escala de transformación en el flujo: 120% en ambos ejes.
Index Z Para garantizar que la imagen aparezca en la parte superior de la columna, aumentaremos el valor del índice z en la pestaña avanzada.
Índice Z: 1

Duplicar y extraer los módulos de imagen ahora, clonar el módulo de imagen dos veces y colocar los duplicados en las dos columnas restantes. Este proceso es más fácil en la vista de estructura de alambre. Primero, copie el módulo de imagen dos veces
Luego dibuja los nuevos módulos de imagen en las columnas 2 y 3

Sube diferentes fotos
Agregue los módulos de texto Agregar contenido H3 en la imagen de la columna 1, agregue un módulo de texto e ingrese un contenido H3.

Título 3 Texto Vaya a la pestaña Diseño y estilice la configuración de texto H3.
Texto del encabezado: H3
Fuente H3: Doppio One
H3 Fuente de peso: en negrita

Alineación H3: centro

El color del texto H3: blanco #ffffff
Tamaño de texto H3:
Escritorio: 1.8VW
Tableta: 5VW
Teléfono: 6VW
Duplicar y dibujar módulos de texto clonan el texto dos veces y coloque los duplicados en las dos columnas restantes.
Primero, copie los módulos de texto dos veces
Luego deslícelos debajo de los módulos de imagen en las columnas 2 y 3
Cambiar el contenido de cada nuevo módulo de texto
Agregue módulos de texto Agregar contenido en el módulo de título, agregue un nuevo módulo de texto. Agregue contenido de párrafo al cuadro de contenido.

Texto ahora, estilice el texto de la siguiente manera.
Texto de fuente: Abrir sans
Color de texto: blanco #ffffff
Tamano del texto:

Escritorio: 0.6 VW

Tableta: 2VW
Teléfono: 2.8VW
La altura de la línea de texto: 2.2em
Espacio para centrar el texto, ajuste el espacio del módulo de la siguiente manera.
Margen inferior:
Escritorio: 5VW
Tableta + teléfono: 10 VW
Forro izquierdo y derecho

Escritorio: 5VW
Tableta + teléfono: 14VW
Duplicar y dibujar módulos de texto clonan el texto dos veces y dibuje duplicados en las dos columnas restantes.
Primero, copie los módulos de texto dos veces
Luego coloque los duplicados en las columnas 2 y 3
Cambiar el contenido de cada duplicado
¡Agregue módulos de tope, agregue contenido al último módulo! Agregue un módulo de botón a la columna 1 con una copia de su elección.

Agregue un enlace Ingrese un enlace en las opciones de enlace del módulo.
Alineación ahora, alinee el módulo de botón.
Alineación: centro
Butry Styles luego estilice el botón de la siguiente manera.

Botón Tamaño de texto:

Escritorio: 1VW

Tableta: 2VW
Teléfono: 3VW

El color del texto del botón: azul brillante # 2a4eed
El color del fondo del botón: blanco #ffffff
Butter Rasse: 50VW
Botón de fuente: doppio uno
Botón de peso de fuente de fuente: en negrita
Botón de icono de color: azul brillante # 2a4eed
Espacio forme el botón y cree una superposición más baja agregando valores de margen personalizado y llenado en la configuración de espaciado.
Margen inferior:
Escritorio: -1,5VW
Tableta: -4VW
Teléfono: -6VW


Revestimiento superior e inferior:
Escritorio: 1VW
Tableta + teléfono: 3VW
Forro izquierdo y derecho
Escritorio: 4VW
Tableta + teléfono: 10 VW
Box Shadow por último, pero no menos importante, agregue una sombra del botón sutil al botón.
La sombra de la caja: la primera opción
Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: 2 PX
Poder de poco claro de la sombra de la caja: 50 px

Duplicar y extraer los módulos del botón de la misma manera que los módulos anteriores, clonar el botón dos veces y colocar los duplicados en las dos columnas restantes.
Clon el módulo de botón dos veces
Coloque los duplicados en las columnas 2 y 3
El botón de 2 color e icono de texto cambia el color del botón y el icono del módulo del botón en la columna 2.
El color del texto del botón: verde # 1BA038

Icono de color: # 1BA038
Botón 3 Color e icono de texto Haga lo mismo con el botón en la última columna y listo! El color del texto del botón: Orange # F0562C
Icono de color: # f0562c

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Móvil
Es una lámina en esta publicación, le mostré cómo usar imágenes semitransparentes para crear un hermoso diseño de la columna CTA.Utilicé la configuración de superación de la columna de la división para hacer que las imágenes y los botones se superpongan perfectamente.¡Trate de usar este diseño en su próximo proyecto Div y díganos cómo va en la sección de comentarios!