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.
¡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%
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
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columna:
apresto
Luego ajuste el ancho y el ancho máximo de la línea.
- Ancho: 100%
- Ancho máximo 100%
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.
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
Tí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
espaciamiento
Y agregue un poco de relleno en la parte superior.
- Relleno superior: 212px
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
línea
Cambia el color del separador entonces.
- Color de línea: gris oscuro #545454
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
espaciamiento
También agregue un margen superior negativo.
- Margen superior:
- Oficina: -40px
- Tableta + Teléfono: -15px
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.
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%
apresto
Ahora, ajuste el tamaño de la línea.
- Ancho: 100%
- Ancho máximo: 100%
espaciamiento
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
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%
Frontera
Luego defina las esquinas redondeadas de las columnas en la configuración del borde.
- Esquinas redondeadas: 2vw en todas las esquinas
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
desbordamientos
Asegúrese de que los desbordamientos de la columna también sean visibles.
- Desbordamiento horizontal y vertical: visible
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%
Frontera
Agregue también un radio de borde a la columna.
- Esquinas redondeadas: 2vw en las cuatro esquinas
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
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
desbordamientos
También haga visibles los desbordamientos de esta columna.
- Desbordamientos horizontales y verticales: visibles
Configuració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%
Frontera
Cambie a la pestaña Diseño y agregue un radio de borde a cada esquina.
- Esquinas redondeadas: 2vw en todas las esquinas.
Caja 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
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
desbordamientos
Finalmente, ajuste la configuración de desbordamiento.
- Desbordamientos horizontales y verticales: visibles
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.
apresto
Haga el módulo de ancho completo.
- Cambiar al modo de ancho completo: Sí
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
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.
Í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
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
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.
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
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
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.
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
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
Duplicar 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
Agregar 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.
Ajouter un gravamen
Inserte un enlace en las opciones de enlace del módulo.
alineación
Ahora alinee el módulo de botones.
- Alineamiento: centro
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
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
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
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
Botó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
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
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!