Cuanto más atractivo visualmente sea el CTA, mayores serán las posibilidades de que la tasa de conversión sea. Hay muchas formas de diseñar sus CTA, pero en este artículo, le mostraremos cómo crear impresionantes plantillas de columnas de 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 utilizar otras imágenes. ¡También podrá descargar el archivo JSON de forma gratuita!

Vamos.

vistas previas

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a cómo se ve en diferentes tamaños de pantalla.

Diseño Blurb divi¡Comencemos a recrear!

Añadir una nueva sección

contexto

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
  • Gradiente de color degradado: gris muy claro #efefef
  • Color de fondo dos: blanco #ffffff
  • Tipo de gradiente: radial
  • Dirección radial: centro
  • Posición inicial: 52%
  • Posición final: 50%

Sección divi de fondo

espaciamiento

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

  • Acolchado superior e inferior
    • Oficina: 0vw
  • Tapicería En Medias
    • Tableta + teléfono: 70vw

Configurar el relleno de la sección diviAñadir una nueva linea

Estructura de la columna

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

Agregar una nueva línea diviapresto

Luego ajuste el ancho y el ancho máximo de la línea.

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

Tallaje de Nexopos

Añadir un módulo de texto.

Agregar H2 y contenido textual

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

Personalización del módulo de texto

textos

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

  • Texto de fuente: Open Sans
  • Alineación del texto: centro.
  • Color del texto: verde #5bba1b
  • Tamaño del texto:
    • Oficina: 1.2vw
    • Tableta: 2.8vw
    • Teléfono: 3.6vw
  • Espaciado de letras de texto: 0.2vw
  • Altura de la línea de texto: 1.8em

Configuración de estilo del módulo de texto de WordpressTítulo 2 Texto

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

  • Sección: H2
  • H2 Peso de fuente: Doppio One
  • Alineación de texto H2: centro
  • Color del texto H2: #3d3d3d
  • H2 Tamaño del texto:
    • Oficina: 4.4vw
    • Tableta: 5.9vw
    • Teléfono: 6.9vw

Personalizar en la cabeza diviespaciamiento

Y agregue un poco de relleno en la parte superior.

  • Relleno superior: 212px

Personalizar el relleno del módulo de texto

Añadir un módulo de división

visibilidad

Debajo del módulo de texto, agregue un módulo de división y establezca la visibilidad en "Sí".

  • Visibilidad: si

Mostrar módulo divisor divi

línea

Cambia el color del separador entonces.

  • Color de línea: gris oscuro #545454

Personaliza el color de la línea divi

apresto

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

  • Peso del separador: 4px
  • Ancho: 9%
  • Alineación del módulo: centro

Personalizar la alineación divi

espaciamiento

También agregue un margen superior negativo.

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

Divisor del módulo de margen negativo divi

Añadir una nueva linea

Estructura de la columna

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

La fila tiene 3 columnas divi

contexto

Antes de agregar módulos, agregue un degradado al fondo de los parámetros de la línea.

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

Configuración de parámetros de línea divi

apresto

Ahora, ajuste el tamaño de la línea.

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

Dimensionamiento de línea Diviespaciamiento

Luego vaya a la configuración de espaciado y agregue valores de relleno personalizados.

  • tapicería superior: 22vw
  • Relleno inferior: 10vw
  • Relleno izquierdo y derecho: 10vw

Configurar el relleno de línea divi

Configuración de columna 1

contexto

Continúe abriendo la columna 1 y agregando un fondo degradado.

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

Configuración del gradiente divi

Frontera

Luego defina las esquinas redondeadas de las columnas en la configuración del borde.

  • Esquinas redondeadas: 2vw en todas las esquinas

Configuración de borde redondeado de columna

Caja de sombra

Agregue una sombra de caja sutil también.

  • Box Shadow: segunda opción
  • Sombra de la caja Posición horizontal: 6px
  • Posición vertical de la sombra de caja: -10px
  • Box Shadow Blur Force: 50px

Configuración de la sombra de la columna 1

desbordamientos

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

  • Desbordamiento horizontal y vertical: visible

Configuración de desbordamiento de columna Divi

Configuración de columna 2

contexto

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

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

Configuración divi de la segunda columna

Frontera

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

  • Esquinas redondeadas: 2vw en las cuatro esquinas

Configuración de columna 2 divi redondeado

Caja de sombra

Con una sutil caja de sombra.

  • Box Shadow: segunda opción
  • Sombra de la caja Posición horizontal: 6px
  • Posición vertical de la sombra de caja: -10px
  • Box Shadow Blur Force: 50px

Configuración de sombra de columna 2 divi

transformador

Esta columna es un poco más alta que las demás. Para crear este efecto, vamos a ajustar la configuración de conversión de transformación para la columna 2.

  • Transformador Traducir:
    • Oficina: -8vw, eje y
    • Tableta + teléfono: 30vw, eje Y

Configuración de posición de columna 2 divi

desbordamientos

También haga visibles los desbordamientos de esta columna.

  • Desbordamientos horizontales y verticales: visibles

Configuración de visibilidad de columna 2 diviConfiguración de columna 3

contexto

¡Pasemos a la última y última columna! Agrega un fondo degradado.

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

Configuración de fondo columna 3 diviFrontera

Cambie a la pestaña Diseño y agregue un radio de borde a cada esquina.

  • Esquinas redondeadas: 2vw en todas las esquinas.

Configuración de borde redondeado divi columna 3Caja de sombra

Agregue un cuadro de sombra también.

  • Box Shadow: segunda opción
  • Sombra de la caja Posición horizontal: 6px
  • Posición vertical de la sombra de caja: -10px
  • Box Shadow Blur Force: 50px

Columna 3 de configuración de borde divi

transformador

En tamaños de pantalla más pequeños, necesitaremos reposicionar la columna usando valores de conversión de transformación personalizados.

  • Transformador Traducir:
    • Tableta + teléfono: 60vw

Transformación del módulo Divi

desbordamientos

Finalmente, ajuste la configuración de desbordamiento.

  • Desbordamientos horizontales y verticales: visibles

Configuración de desbordamiento Divi

Agregar módulos de imagen

Importar una imagen recortada semitransparente

Una vez que haya realizado todos los parámetros de la 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 usamos en la carpeta comprimida que pudo descargar al comienzo de este artículo.

Agregar una imagen divi transparente

apresto

Haga el módulo de ancho completo.

  • Cambiar al modo de ancho completo: Sí

Cambiar a moe de ancho completo

espaciamiento

Luego agregue un margen personalizado y valores de relleno.

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

Módulo de imagen de configuración de relleno divi

Convierte la escalera en un vuelo estacionario

Agregamos un efecto de desplazamiento sutil 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.

Convertir en imagen de módulo divi de desplazamiento

Índice Z

Para asegurarse de que la imagen aparezca en la parte superior de la columna, aumente el valor del índice z en la pestaña Avanzado.

  • Índice Z: 1

Módulo de imagen divi de configuración de Zindex

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 modo cableado.

  • Comience duplicando el módulo de imagen dos veces
  • Luego arrastre los nuevos módulos de imagen a las columnas 2 y 3.
  • Descargar diferentes imágenes

Duplicar y mover un módulo de imagen

Agregar módulos de texto

Añadir contenido H3

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

Agregar texto del módulo divi

Título 3 Texto

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

  • Título del texto: H3
  • Fuente H3: Doppio One
  • H3 Peso de fuente: negrita
  • Alineación H3: centro
  • Color de texto H3: blanco #ffffff
  • H3 Tamaño del texto:
    • Oficina: 1.8vw
    • Tableta: 5vw
    • Teléfono: 6vw

Parámetro del módulo de texto Divi

Duplicar y arrastrar módulos de texto

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

  • Comience por duplicar 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

Duplica el módulo de texto divi

Agregar módulos de texto

Agregar contenido

Debajo del módulo de título, agregue un nuevo módulo de texto. Agregue contenido de párrafo en el área de contenido.

Agregar un texto de módulo divi

textos

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

  • Texto de fuente: Open Sans
  • Color del texto: blanco #ffffff
  • Tamaño del texto:
    • Oficina: 0.6vw
    • Tableta: 2vw
    • Teléfono: 2.8vw
  • Altura de la línea de texto: 2.2em

Descripción de la configuración módulo divi

espaciamiento

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

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

Diseño DiviDuplicar y arrastrar módulos de texto

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

  • Comience duplicando los módulos de texto dos veces
  • Luego coloque los duplicados en las columnas 2 y 3
  • Cambiar el contenido de cada duplicado

Duplica el módulo de texto en otra columna diviAgregar módulos de botones

Agregar contenido

¡Vayamos al último módulo! Agregue un módulo de botones a la columna 1 con una copia de su elección.

Agregar un módulo de botón divi

Ajouter un gravamen

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

Configuración del enlace del módulo Divialineación

Ahora alinee el módulo de botones.

  • Alineamiento: centro

Configuración de alineación del módulo del botón Divi

Estilos de botones

Luego, llame al botón de la siguiente manera.

  • Tamaño del texto del botón:
    • Oficina: 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: Double One
  • Peso de fuente: negrita
  • El color de los botones: azul brillante #2a4eed

Configuración del color del botón del módulo Divi

espaciamiento

Dé forma al botón y cree una superposición en la parte inferior agregando valores de margen y relleno personalizados en la configuración de espaciado.

  • Margen inferior:
    • Oficina: -1.7vw
    • Tableta: -4vw
    • Teléfono: -6vw
  • Tapicería superior e inferior:
    • Oficina: 1vw
    • Tableta + teléfono: 3vw
  • Relleno izquierdo y derecho
    • Oficina: 4vw
    • Tableta + teléfono: 10vw

botón de espaciado

Caja de sombra

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

  • Box shadow: primera opción
  • Sombra de la posición horizontal de la caja: 0px
  • Sombra de la posición vertical de la caja: 2px
  • Box Shadow Blur Force: 50px

Configuración divi del módulo de sombra

Duplicar y arrastrar módulos de botones

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

  • Clonar el módulo del botón dos veces
  • Coloque los duplicados en las columnas 2 y 3

Módulo de botón divi duplicadoBotón 2 Texto 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

Módulo de botón Divi

Botón 3 Texto y color del icono

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

  • Color del texto de los botones: Naranja #f0562c
  • Color del icono: # f0562c

Parámetro del botón Divi

Para terminar

En este artículo, te mostramos cómo usar imágenes semitransparentes para crear un impresionante diseño de columna CTA. Usamos configuraciones de desbordamiento de columna Divi para que las imágenes y los botones se superpongan a la perfección. Intenta usar este diseño en tu próximo proyecto Divi ¡y cuéntanos cómo te va en la sección de comentarios!