Uso de imágenes transparentes para crear hermosas superposiciones de columnas CTA con Divi

Vistas previas

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga el diseño de la columna CTA GRATIS

Para poner sus manos en el diseño de columna CTA gratuito, 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.

Suscríbete a nuestro canal de Youtube

¡Empecemos a Recrear!

Agregar nueva sección

Fondo

Comience creando una nueva página o agregando una nueva sección regular a una página existente. Luego, vaya a la configuración de la sección y agregue un fondo degradado.

• Fondo: Gradiente
• Color degradado de fondo uno: gris muy claro #efefef
• Color de degradado de fondo dos: blanco #ffffff
• Tipo de gradiente: Radial
• Dirección radial: Centro
• Posición inicial: 52%
• Posición final: 50%

Espaciado

Pase a la pestaña de diseño y ajuste el relleno en la configuración de espaciado.

• Acolchado superior e inferior
  
  • Escritorio: 0vw
• Acolchado inferior
  
  • Tableta + Teléfono: 70vw

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Luego, ajuste el ancho y el ancho máximo de la fila.

• Ancho: 100%
• Ancho máximo 100%

Agregar módulo de texto

Agregar H2 y contenido de texto

¡Es hora de agregar módulos! Primero, agregue un módulo de texto e inserte algo de H2 y contenido de párrafo de su elección.

Texto

Pase a la pestaña de diseño y aplique estilo al texto de la siguiente manera:

• Fuente de texto: Open Sans
• Alineación de texto: Centro
• Color del texto: Verde #5bba1b
• Tamano del texto:
  
  • Escritorio: 1.2vw
  • Tableta: 2.8vw
  • Teléfono: 3.6vw
• Espaciado entre letras de texto: 0.2vw
• Altura de la línea de texto: 1,8 em

Encabezado 2 Texto

Después de diseñar el texto del párrafo, diseñe también el texto H2.

• Rumbo: H2
• Peso de fuente H2: Doppio One
• Alineación de texto H2: Centro
• Color de texto H2: Gris muy oscuro #3d3d3d
• Tamaño de texto H2:
  
  • Escritorio: 4.4vw
  • Tableta: 5.9vw
  • Teléfono: 6.9vw

Espaciado

Y agregue un poco de relleno superior.

• Relleno superior: 212px

Agregar módulo divisor

Visibilidad

Debajo del módulo de texto, agregue un módulo divisor y establezca la visibilidad en ‘Sí’.

• Visibilidad: Sí

Línea

Cambia el color del divisor a continuación.

• Color de línea: Gris oscuro #545454

Dimensionamiento

Ahora, ajusta el tamaño del divisor para que se vea más pequeño.

• Peso del divisor: 4px
• Ancho: 9%
• Alineación del módulo: Centro

Espaciado

Agregue un margen superior negativo también.

• Margen superior:
  
  • Escritorio: -40px
  • Tableta + Teléfono: -15px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila con tres columnas del mismo tamaño. Esta será la base del diseño de la columna CTA.

Fondo

Antes de agregar cualquier módulo, agregue un degradado al fondo de la configuración de la fila.

• Fondo: Gradiente
• Degradado de color de fondo uno: Blanco #ffffff
• Gradiente de color de fondo dos: transparente
• Tipo de gradiente: Radial
• Centro de dirección radial
• Posición inicial: 42%
• Posición final: 50%

Dimensionamiento

Ahora, ajuste el tamaño de la fila.

• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Vaya a la configuración de espaciado a continuación y agregue algunos valores de relleno personalizados.

• Acolchado superior: 22vw
• Acolchado inferior: 10vw
• Acolchado izquierdo y derecho: 10vw

Configuración de la columna 1

Fondo

Continúe abriendo la configuración de la columna 1 y agregue un fondo degradado.

• Fondo: Gradiente
• Color degradado de fondo uno: Azul #2a4eed
• Color degradado de fondo dos: azul claro#91f5f7
• Tipo de gradiente: lineal
• Dirección del gradiente: 38 grados
• Posición inicial: 23%

Borde

Proporcione a la columna esquinas redondeadas en la configuración de borde a continuación.

• Esquinas redondeadas: 2vw en todas las esquinas

Sombra de la caja

Agregue una sombra de caja sutil también.

• Sombra de cuadro: segunda opción
• Posición horizontal de la sombra del cuadro: 6px
• Posición vertical de la sombra del cuadro: -10px
• Fuerza de desenfoque de sombra de cuadro: 50px

desbordamientos

Asegúrese de que los desbordamientos de la columna también estén visibles.

• Desbordamiento horizontal y vertical: visible

Configuración de la columna 2

Fondo

Pase a la segunda columna y agregue el siguiente fondo degradado:

• Fondo: Gradiente
• Color degradado de fondo uno: #1ba038
• Color degradado de fondo dos: #c6f727
• Tipo de gradiente: lineal
• Dirección del gradiente: 38 grados
• Posición inicial: 23%

Borde

Agregue un poco de radio de borde a la columna también.

• Esquinas redondeadas: 2vw las cuatro esquinas

Sombra de la caja

Junto con una sombra de caja sutil.

• Sombra de cuadro: segunda opción
• Posición horizontal de la sombra del cuadro: 6px
• Posición vertical de la sombra del cuadro: -10px
• Fuerza de desenfoque de sombra de cuadro: 50px

Transformar

Esta columna se encuentra un poco más alta que las demás. Para crear este efecto, ajustaremos la configuración de traducción de transformación para la columna 2.

• Transformar Traducir:
  
  • Escritorio: -8vw, eje y
  • Tableta + Teléfono: 30vw, eje y

desbordamientos

Haz visibles también los desbordamientos de esta columna.

• Desbordamientos horizontales y verticales: visibles

Configuración de la columna 3

Fondo

¡A la siguiente y última columna! Agrega un fondo degradado.

• Fondo: Gradiente
• Color degradado de fondo uno: #f0562c
• Color degradado de fondo dos: #f1a526
• Tipo de gradiente: lineal
• Dirección del gradiente: 38 grados
• Posición inicial: 23%

Borde

Pase a la pestaña de diseño y agregue un radio de borde a cada esquina.

• Esquinas redondeadas: 2vw en todas las esquinas.

Sombra de la caja

Agregue una sombra de cuadro también.

• Sombra de cuadro: segunda opción
• Posición horizontal de la sombra del cuadro: 6px
• Posición vertical de la sombra del cuadro: -10px
• Fuerza de desenfoque de sombra de cuadro: 50px

Transformar

En tamaños de pantalla más pequeños, necesitaremos cambiar la posición de la columna utilizando valores de traducción de transformación personalizados.

• Transformar Traducir:
  
  • Tableta + Teléfono: 60vw

desbordamientos

Finalmente, ajuste la configuración de desbordamiento.

• Desbordamientos horizontales y verticales: visibles

Agregar módulos de imagen

Cargue una imagen semitransparente recortada

Una vez que haya completado la configuración de todas las columnas, 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 hemos usado en la carpeta comprimida que pudo descargar al comienzo de esta publicación.

Dimensionamiento

Haga que el módulo sea de ancho completo.

• Forzar ancho completo: Sí

Espaciado

Agregue algunos márgenes personalizados y valores de relleno a continuación.

• Margen superior:
  
  • Escritorio: -11vw
  • Tableta + Teléfono: -24vw
• Relleno izquierdo y derecho:
  
  • Escritorio: 5vw
  • Tableta + Teléfono: 20vw

Transformar escala al pasar el mouse

Estamos agregando un sutil efecto de desplazamiento a la imagen usando la opción de escala de transformación en la configuración de transformación.

• Escala de transformación al pasar el mouse: 120 % en ambos ejes.

Índice Z

Para asegurarnos de 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 arrastrar módulos de imagen

Ahora, clone el módulo de imagen dos veces y coloque los duplicados en las dos columnas restantes. Este proceso es más fácil en la vista de estructura alámbrica.

• Primero, duplique el módulo de imagen dos veces
• Luego, arrastre los nuevos módulos de imagen a las columnas 2 y 3
• Sube diferentes imágenes

Agregar módulos de texto

Agregar contenido H3

Debajo de la imagen en la columna 1, agregue un módulo de texto e inserte algún contenido H3 de su elección.

Título 3 Texto

Pase a la pestaña de diseño y aplique estilo a la configuración de texto H3.

• Texto de encabezado: H3
• Fuente H3: Doppio One
• Peso de fuente H3: Negrita
• Alineación H3: Centro
• Color del texto H3: Blanco #ffffff
• Tamaño de texto H3:
  
  • Escritorio: 1.8vw
  • Tableta: 5vw
  • Teléfono: 6vw

Duplicar y arrastrar módulos de texto

Clona el módulo de texto dos veces y coloca los duplicados en las dos columnas restantes.

• Primero, duplica los módulos de texto dos veces.
• Luego, arrástrelos debajo de los módulos de imagen en las columnas 2 y 3
• Cambiar el contenido en cada nuevo módulo de texto

Agregar módulos de texto

Agregar contenido

Debajo del módulo de título, agregue un nuevo módulo de texto. Agregue algo de contenido de párrafo al cuadro de contenido.

Texto

Ahora, diseñe el texto de la siguiente manera.

• Fuente de texto: Open Sans
• Color del texto: Blanco #ffffff
• Tamano del texto:
  
  • Escritorio: 0.6vw
  • Tableta: 2vw
  • Teléfono: 2.8vw
• Altura de línea de texto: 2,2 em

Espaciado

Para centrar el texto, ajuste el espaciado del módulo de la siguiente manera.

• Margen inferior:
  
  • Escritorio: 5vw
  • Tableta + Teléfono: 10vw
• Relleno izquierdo y derecho
  
  • Escritorio: 5vw
  • Tableta + Teléfono: 14vw

Duplicar y arrastrar módulos de texto

Clone el módulo de texto dos veces y arrastre los duplicados a las dos columnas restantes.

• Primero, duplica los módulos de texto dos veces.
• Luego, coloque los duplicados en las columnas 2 y 3
• Cambiar el contenido en cada duplicado

Añadir módulos de botones

Agregar contenido

¡Hasta el último módulo! Agregue un módulo de botón a la columna 1 con alguna copia de su elección.

Añadir enlace

Inserte un enlace en las opciones de enlace del módulo.

Alineación

Ahora, alinee el módulo de botones.

• Alineación: Centro

Estilos de botones

Luego, diseñe el botón de la siguiente manera.

• Tamaño del texto del botón:
  
  • Escritorio: 1vw
  • Tableta: 2vw
  • Teléfono: 3vw
• Color del texto del botón: azul brillante #2a4eed
• Color de fondo del botón: Blanco #ffffff
• Radio del borde del botón: 50vw
• Fuente del botón: Doppio One
• Peso de la fuente del botón: Negrita
• Color del icono del botón: azul brillante #2a4eed

Espaciado

Dale forma al botón y crea una superposición inferior agregando algunos márgenes personalizados y valores de relleno en la configuración de espaciado.

• Margen inferior:
  
  • Escritorio: -1.5vw
  • Tableta: -4vw
  • Teléfono: -6vw
• Acolchado superior e inferior:
  
  • Escritorio: 1vw
  • Tableta + Teléfono: 3vw
• Relleno izquierdo y derecho
  
  • Escritorio: 4vw
  • Tableta + Teléfono: 10vw

Sombra de la caja

Por último, pero no menos importante, agregue una sutil sombra de cuadro al botón.

• Sombra de cuadro: Primera opción
• Posición horizontal de la sombra del cuadro: 0px
• Posición vertical de la sombra del cuadro: 2px
• Fuerza de desenfoque de sombra de cuadro: 50px

Duplicar y arrastrar módulos de botones

Al igual que los módulos anteriores, clone el botón dos veces y coloque los duplicados en las dos columnas restantes de la fila.

• Clonar el módulo de botones dos veces
• Coloque los duplicados en las columnas 2 y 3

Texto del botón 2 y color del icono

Cambie el botón y el color del icono del módulo de botones en la columna 2.

• Color del texto del botón: Verde #1ba038
• Color del icono: #1ba038

Botón 3 Color de texto e icono

Haz lo mismo con el botón de la última columna y ¡listo!

• Color del texto del botón: Naranja #f0562c
• Color del icono: #f0562c

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Es una envoltura

En esta publicación, le mostramos cómo usar imágenes semitransparentes para crear un hermoso diseño de columna CTA. Utilizamos la configuración de desbordamiento de la columna Divi para que las imágenes y los botones se superpongan sin problemas. ¡Intenta usar este diseño en tu próximo proyecto Divi y cuéntanos cómo te va en la sección de comentarios!