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


Cuanto más atractivo visualmente sea un CTA, mayores serán las posibilidades de una mejor tasa de conversión. Hay muchas formas de diseñar sus CTA, pero en esta publicación, le mostraremos cómo crear hermosos diseños 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 usar otras imágenes. ¡También podrás descargar el archivo JSON gratis!

Hagámoslo.

Vistas previas

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

Escritorio

transp-preview-desktop

Móvil

móvil transparente

Descargar The CTA Column Layout GRATIS

Para poner sus manos en el diseño de la columna CTA gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=07jJ93lw6iQ (/ incrustar)

Suscríbase a nuestro canal de Youtube

¡Comencemos a recrearnos!

Agregar nueva sección

Antecedentes

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

Fondo de configuración de sección

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

ajustes de la sección de relleno

Agregar nueva fila

Estructura de columna

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

agregue una fila de una columna primero

Dimensionamiento

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

  • Ancho: 100%
  • Ancho Máx. 100%

tamaño de fila 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 un poco de contenido H2 y de párrafo de su elección.

agregar granja de módulos de texto por un día

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
  • Espacio entre letras de texto: 0.2vw
  • Altura de la línea de texto: 1.8em

ajuste de texto visite nuestra granja

Encabezado 2 Texto

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

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

cultivar por un día rumbo 2 ajustes tex

Espaciado

Y agregue un poco de relleno superior.

  • Acolchado superior: 212 px

relleno superior para el módulo de texto

Agregar módulo divisor

Visibilidad

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

  • Visibilidad: si

agregue un divisor debajo del texto

Línea

Cambie el color del divisor a continuación.

  • Color de línea: gris oscuro # 545454

colorear el divisor

Dimensionamiento

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

  • Divisor de peso: 4px
  • Ancho: 9%
  • Alineación del módulo: centro

acortar el divisor

Espaciado

Agregue también un margen superior negativo.

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

ajustar el margen del divisor

Agregar nueva fila

Estructura de columna

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

Fila de 3 columnas

Antecedentes

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

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

agregar fondo a la fila

Dimensionamiento

Ahora, ajuste el tamaño de la fila.

  • Ancho: 100%
  • Ancho Máx .: 100%

ajustar el tamaño de la fila

Espaciado

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

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

Configuración de columna 1

Antecedentes

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

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

columna 1 fondo

Frontera

Dé a la columna esquinas redondeadas en la configuración del borde siguiente.

  • Esquinas redondeadas: 2vw en todas las esquinas

configuración de borde de columna

Sombra de la caja

Agregue una sombra de cuadro sutil también.

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

sombra de cuadro de columna

Desbordamientos

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

  • Desbordamiento horizontal y vertical: visible

ajustar los desbordamientos de columna

Configuración de columna 2

Antecedentes

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

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

fondo de la columna verde

Frontera

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

  • Esquinas redondeadas: 2vw las cuatro esquinas

redondeando las esquinas

Sombra de la caja

Junto con una sutil caja de sombra.

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

cuadro sombra columna 2

Transformar

Esta columna se encuentra un poco más alta que las otras. 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

transforma transforma la columna 2

Desbordamientos

Haga que los desbordamientos de esta columna también sean visibles.

  • Desbordamientos horizontales y verticales: visible

visibilidad para la columna 2

Configuración de columna 3

Antecedentes

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

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

columna de fondo naranja 3

Frontera

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

  • Esquinas redondeadas: 2vw en todas las esquinas.

esquinas redondeadas

Sombra de la caja

Agregue una caja de sombra también.

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

caja sombra columna 3

Transformar

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

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

Margen 60vw

Desbordamientos

Finalmente, ajuste la configuración de desbordamiento.

  • Desbordamientos horizontales y verticales: visible

desbordamientos visibles

Agregar módulos de imagen

Cargue una imagen recortada, semitransparente

Una vez que haya 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 hemos usado en la carpeta comprimida que pudo descargar al principio de esta publicación.

agregar una imagen

Dimensionamiento

Haga el módulo de ancho completo.

  • Forzar ancho completo: sí

hacer imagen de ancho completo1

Espaciado

Agregue algunos valores personalizados de margen y relleno a continuación.

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

margen y relleno en la imagen

Transformar escala al pasar el ratón

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

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

transformarse al pasar el ratón

Í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

visibilidad "ancho =" 880 "altura =" 402 "srcset =" https://www.elegantthemes.com/blog/wp-content/uploads/2019/08/visibility.png 880w, https: //www.elegantthemes. com / blog / wp-content / uploads / 2019/08 / visibilidad-300x137.png 300w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/08/visibility-768x351.png 768w, https://www.elegantthemes.com/blog/wp-content/uploads/2019/08/visibility-610x279.png 610w "tamaños =" (ancho máximo: 880px) 100vw, 880px "></p>
<h4>Duplicar y arrastrar módulos de imagen</h4>
<p>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.</p>
<ul>
<li>Primero, duplica el módulo de imagen dos veces</li>
<li>Luego, arrastre los nuevos módulos de imagen a las columnas 2 y 3</li>
<li>Sube diferentes imágenes</li>
</ul>
<p><img class=

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 algún contenido H3 de su elección.

Título H3

Encabezado 3 Texto

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

  • Encabezado de texto: H3
  • Fuente H3: Doppio One
  • Peso de la 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

Estilos H3

Duplicar y arrastrar módulos de texto

Clone el módulo de texto dos veces y coloque 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

dup y arrastrar texto

Agregar módulos de texto

Agregar contenido

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

segundo módulo de texto

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 la línea de texto: 2.2em

párrafo de estilos de texto

Espaciado

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

  • Margen inferior:
    • Escritorio: 5vw
    • Tableta + Teléfono: 10vw
  • Acolchado Izquierdo y Derecho
    • Escritorio: 5vw
    • Tableta + Teléfono: 14vw

espaciado de texto

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

dup y arrastrar

Agregar módulos de botones

Agregar contenido

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

agrega el botón

Añadir enlace

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

enlace en el botón

Alineación

Ahora, alinee el módulo de botones.

  • Alineamiento: centro

centrar el botón

Estilos de botones

Luego, peina 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 fuente del botón: negrita
  • Color del icono del botón: azul brillante # 2a4eed

estilos de botones 1

estilos de botones 2

Espaciado

Dale forma al botón y crea una superposición inferior agregando algunos valores personalizados de margen y 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
  • Acolchado Izquierdo y Derecho
    • Escritorio: 4vw
    • Tableta + Teléfono: 10vw

botón de espaciado

Sombra de la caja

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

  • Sombra de caja: primera opción
  • Posición horizontal de la sombra de la caja: 0px
  • Posición vertical de la sombra de la caja: 2px
  • Caja Shadow Blur Fuerza: 50px

botón de cuadro de sombra

Duplicar y arrastrar módulos de botón

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 del botón dos veces
  • Coloque los duplicados en las columnas 2 y 3.

Dup y botón de arrastre

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 de color verde

color del icono del botón

Botón 3 Texto y color del icono

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

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

texto del botón naranja

color de botón naranja

Avance

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

Escritorio

transp-preview-desktop

Móvil

móvil transparente

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 va eso en la sección de comentarios!