Cómo crear columnas superpuestas con las opciones de transformación y columna de Divi

En una de las últimas actualizaciones de Divi, agregamos algunos controles bastante sorprendentes a las columnas en el constructor. Ahora es más fácil que nunca crear superposiciones de columnas. En este tutorial, le mostraremos cómo crear una sección de testimonios con tres columnas superpuestas usando la columna de Divi y la configuración de transformación.

Para este diseño, usaremos tres colores, un naranja intenso # ff8300, un amarillo cálido # ffd400 y un degradado azul destacado # 0c99c1. Puede aplicar este diseño de columna superpuesta a un proyecto de sitio web en muy poco tiempo.

Empecemos.

Avance

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

Escritorio

Móvil

1. Crear nueva sección regular + fila de tres columnas

Lo primero que debe hacer es crear una sección regular con una fila de tres columnas.

Ajustar el espaciado de la sección

Aumente el acolchado superior e inferior de la sección.

• Acolchado superior: 4vw
• Acolchado inferior: 16vw

Ajustar el tamaño y el espaciado de la fila

Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

• Utilice un ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

Después de eso, modifique la configuración de espaciado:

• Acolchado inferior: 0px
• Acolchado izquierdo: 11vw
• Acolchado derecho: 8vw

Agregar fondo degradado

Agregue un fondo degradado a continuación:

• Estilo de fondo: degradado
• Primer color: blanco #ffffff
• Segundo color: naranja # ff8300
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 35%
• Posición final: 35%

2. Estilo de columnas

Antes de agregar módulos a las columnas, cambiaremos la configuración de estilo, espaciado y transformación de cada columna individualmente.

Columna 1

Los primeros pasos del estilo de la columna son las esquinas redondeadas y la sombra del cuadro:

• Borde: 20px en todas las esquinas redondeadas
• Sombra de cuadro: opción de sombra de primer cuadro
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.3)
• Posición de la sombra de la caja: exterior

* Antes de agregar cualquier configuración de transformación, copiaremos y pegaremos estos estilos de elementos en las columnas dos y tres.

Abra la configuración de la columna 1 nuevamente y vaya a la pestaña de diseño. Usaremos la configuración de transformación para hacer que la primera columna se superponga a la segunda. En caso de que lo hayas olvidado, el eje x es horizontal y el eje y es vertical.

• Transformar Traducir:
  • Escritorio: eje x = 3vw. eje y = 14,2 vw
  • Tableta y teléfono: eje x = -14vw. eje y = 16vw
• Visibilidad: índice Z 10

Columna 2

¡A la segunda columna! Vaya a la sombra del cuadro (que ha agregado en uno de los pasos anteriores) y aumente la fuerza del desenfoque de la sombra del cuadro.

• Fuerza de desenfoque de sombra de caja: 50px

Continúe agregando algunos valores de espaciado personalizados a la columna 2.

• Acolchado superior:
  • Escritorio = 3vw
  • Tableta + Teléfono = 5vw
• Acolchado inferior:
  • Escritorio = 5vw
  • Tableta + Teléfono = 7vw
• Acolchado izquierdo:
  • Escritorio = 2vw
  • Tableta + Teléfono = 4vw
• Acolchado derecho:
  • Escritorio = 2vw
  • Tableta + Teléfono = 4vw

¡Es hora de transformar la segunda columna! La segunda columna permanece en su lugar para el escritorio, pero tenemos que aplicar algunas configuraciones de transformación personalizadas en pantallas más pequeñas. Continúe y ajuste la pestaña de traducción de transformación. Además, aumentaremos el índice Z a 9.

• Transformar Traducir:
  • Tableta y teléfono: eje x = 9vw. eje y = 13vw
• Visibilidad: índice Z 9

Columna 3

¡A la tercera columna! Aumente la intensidad del desenfoque de la sombra del cuadro de la sombra del cuadro ya existente.

• Fuerza de desenfoque de sombra de caja: 50px

Abra la configuración de fondo a continuación y agregue un fondo degradado azul.

• Fondo: degradado
• Gradiente de color uno: # 0c99c1
• Gradiente de color dos: rgba (5,0,78,0.72)
• Tipo de degradado: lineal
• Dirección del gradiente: 220 grados
• Posición inicial: 0%
• Posición final: 100%

Ahora, agreguemos el espaciado.

• Acolchado superior:
  • Escritorio = 3vw
  • Tableta + Teléfono = 10vw
• Acolchado inferior:
  • Escritorio = 3vw
  • Tableta + Teléfono = 7vw
• Acolchado izquierdo:
  • Escritorio = 1.5vw
  • Tableta + Teléfono = 10vw
• Acolchado derecho:
  • Escritorio = 1.5vw
  • Tableta + Teléfono = 10vw

Por último, pero no menos importante, haremos que la tercera columna se superponga a la segunda cambiando la configuración de traducción de transformación.

• Transformar Traducir:
  • Escritorio: eje x = -10vw. eje y = 14,2 vw
  • Tableta: eje x = -14vw. eje y = 9vw
  • Teléfono: eje x = -14vw. eje y = 11vw
• Visibilidad: índice Z 9

Aquí hay una vista previa de nuestras columnas antes de agregar los módulos.

3. Agregar módulos a las columnas y aplicarles estilo

¡Ahora, agreguemos los módulos a cada columna!

Columna 1

En la columna uno, insertaremos un módulo de imagen y un módulo de texto. Primero agregue el módulo de imagen.

1. Agregue el módulo de imagen

Inserte una foto de su cliente y ajústela de la siguiente manera:

• Alineación: Izquierda
• Forzar ancho completo: Sí

Agrega un borde inferior a la imagen también.

• Color del borde inferior: amarillo # ffd400
• Ancho del borde inferior: 9px
• Estilo de borde: sólido

2. Agregue el módulo de texto

Agregue un nuevo módulo de texto justo debajo del módulo de imagen e inserte el nombre y la posición del cliente.

• Nombre: Título 4
• Posición: Párrafo

Después de agregar el contenido, aplicaremos estilo a la configuración del texto:

• Fuente de texto: Nunito Sans
• Peso de la fuente del texto: Regular
• Alineación de texto: centro
• Color del texto: Negro # 000000
• Tamano del texto:
  • Escritorio = 0.8vw
  • Tableta = 1.8vw
  • Teléfono = 2.8vw

Vaya a la configuración del texto del encabezado y aplique los siguientes cambios:

• Texto de encabezado: H4
• Fuente del título 4: Poppins
• Peso de fuente del encabezado 4: Negrita
• Título 4 Color del texto: Negro # 000000
• Tamaño del texto del encabezado 4:
  • Escritorio = 1vw
  • Tableta = 3vw
  • Teléfono = 4vw

También cambiaremos la configuración de espaciado:

• Margen superior:
  • Escritorio = 1.5vw
  • Tableta = 3vw
  • Teléfono = 7vw
• Margen inferior:
  • Escritorio = 1.5vw
  • Tableta = 3vw
  • Teléfono = 7vw

Su columna debería verse así una vez que haya completado ambos módulos:

Columna 2

En la columna 2, necesitamos un texto, una propaganda y un módulo divisor. El primer módulo de texto es el que parece un banner en ángulo en la esquina superior derecha de la columna. Usaremos las opciones de transformación para lograr este efecto.

1. Agregar módulo de texto.

Agregue un nuevo módulo de texto y agregue la palabra 'Testimonio' ​​al cuadro de contenido.

Agregue un fondo amarillo al módulo.

• Color de fondo: amarillo # ffd400

Vaya a la pestaña de diseño y cambie la configuración de texto y espaciado en consecuencia:

• Fuente de texto: Poppins
• Peso de la fuente del texto: negrita
• Alineación de texto: centro
• Color del texto: blanco #ffffff
• Tamaño del texto: 23px
• Margen derecho: -50px
• Margen izquierdo: -50px
• Acolchado superior: 15px
• Acolchado inferior: 15px

Por último, pero no menos importante, ajustaremos la configuración de transformación de la siguiente manera:

• Transformar Traducir:
  • Escritorio = 17vw en el eje x
  • Tableta = 24vw en el eje x, 1vw en el eje y
  • Teléfono = 20vw en el eje x, 1vw en el eje y
• Transformar Girar: 32 grados en el primer eje

2. Agregue el módulo Blurb.

Una vez que haya completado el primer módulo, es hora de agregar un módulo de propaganda.

El módulo de propaganda es donde se muestra el testimonio del cliente. Primero, haga clic en el icono + para agregar un módulo y seleccione propaganda.

Luego, inserte el contenido, seleccione un ícono y estilice el ícono de la siguiente manera:

• Usar icono: Sí, una estrella
• Color del icono: amarillo # ffd400
• Colocación del icono: izquierda
• Usar tamaño de fuente de icono: Sí, 48px

Continúe aplicando estilo al texto del título en un nivel H4

• Texto del título: H4
• Fuente del título: Poppins
• Peso de la fuente del título: negrita
• Color de fuente del título: negro #ffffff

• Tamaño del texto del título:
  • Escritorio = 1.2vw
  • Tableta = 2.3vw
  • Teléfono = 3.3vw
• Altura de la línea de título:
  • Escritorio = 2vw
  • Tableta = 3.4vw
  • Teléfono = 4.6vw

Diseñe la configuración del texto del cuerpo en consecuencia:

• Fuente del texto del cuerpo: Nunito Sans
• Peso del texto del cuerpo: Semi negrita
• Color del texto del cuerpo: Negro # 000000
• Tamaño del texto del cuerpo:
  • Escritorio = 0.7vw
  • Tableta = 1.6vw
  • Teléfono = 2.4vw
• Altura de la línea del cuerpo:
  • Escritorio = 1.6vw
  • Tableta = 4vw
  • Teléfono = 5vw

Queremos que la propaganda sea menos ancha que su columna, para lograrlo, ajustaremos el ancho, los márgenes y los valores de relleno.

Primero, ajustaremos el ancho de la propaganda:

• Ancho del contenido: 100%
• Ancho:
  • Escritorio = 58,4%
  • Tableta + Teléfono = 90%

Y luego, la configuración de espaciado:

• Margen superior: 3vw
• Margen inferior: 3vw
• Margen derecho: -24vw
• Relleno izquierdo: 0px
• Relleno derecho: 4px

3. Agregar divisor

El último módulo que necesitamos en esta columna es un módulo divisor. Aplicar los siguientes cambios al divisor:

• Ver divisor: Sí
• Color del divisor: negro #oooooo
• Peso del divisor: 1 px

¡Casi estámos allí! Así es como se ve nuestro resultado hasta ahora:

Columna 3

¡A la tercera y última columna! Estamos usando esta columna para mostrar una llamada a la acción. Estamos usando tres módulos; un módulo de texto, un módulo divisor y un módulo de botones.

1. Agregar módulo de texto

Lo primero que agregaremos a esta columna es el módulo de texto.

Agregaremos un título en H3 y un poco de texto de párrafo al cuadro de contenido.

Continúe y aplique el estilo de la configuración del texto en consecuencia:

• Fuente de texto: Nunito Sans
• Peso de la fuente del texto: Regular
• Color de fuente del texto: blanco #ffffff
• Tamaño de fuente de texto:
  • Escritorio = 0.8vw
  • Tableta = - 2vw
  • Teléfono = 2.6vw
• Altura de la línea de texto:
  • Escritorio = 1.5vw
  • Tableta = 4vw
  • Teléfono = 5vw

Complete el módulo de texto aplicando estilo a la configuración del texto del encabezado.

• Texto de encabezado: H3
• Fuente del título 3: Poppins
• Peso de fuente del encabezado 3: Negrita
• Título 3 Color del texto: Blanco #ffffff
• Tamaño del texto del encabezado 3:
  • Escritorio = 1.1vw
  • Tableta = 3vw
  • Teléfono = 4vw
• Altura de la línea del título 3:
  • Escritorio = 1.5vw
  • Tableta = 3vw
  • Teléfono = 4.5vw

2. Agregar módulo divisor

Continúe agregando un módulo divisor a la columna 3. Para diseñar el divisor, copiaremos y pegaremos los estilos del divisor del que puede encontrar en la columna 2.

Abra la configuración del divisor y cambie el color de negro a blanco. Agregue un poco de relleno superior e inferior también.

• Color del divisor: blanco #ffffff
• Acolchado superior: 40px
• Acolchado inferior: 20px

3. Agregar módulo de botones

En el último módulo, que es un módulo de botones. Agregue una copia de su elección.

Vaya a la pestaña de diseño y aplique el estilo del botón de la siguiente manera:

• Usar estilo personalizado para el botón: Sí
• Tamaño del texto del botón:
  • Escritorio = 0.8vw
  • Tableta = 2.4vw
  • Teléfono = 3vw
• Color del texto del botón: blanco #ffffff

• Color de fondo del botón: degradado
• Gradiente de color uno: amarillo # ffd400
• Gradiente de color dos: naranja # ff8300
• Tipo de degradado: lineal
• Dirección del gradiente: 202 grados.

• Ancho del borde del botón: 0px
• Espacio entre letras del botón: 1px
• Fuente del botón: Nunito Sans
• Peso de la fuente del botón: Pesado
• Estilo de fuente del botón: TT

Para que el botón se vea bien en todos los tamaños de pantalla, ajustaremos el relleno del botón de la siguiente manera:

Escritorio

• Acolchado superior: 1vw
• Acolchado inferior: 1vw
• Acolchado derecho: 3vw
• Acolchado izquierdo: 3vw

Tableta

• Acolchado superior: 2vw
• Acolchado inferior: 2vw
• Acolchado derecho: 6vw
• Acolchado izquierdo: 6vw

Teléfono

• Acolchado superior: 3vw
• Acolchado inferior: 3vw
• Acolchado derecho: 8vw
• Acolchado izquierdo: 8vw

Avance

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

Escritorio

Móvil

Terminando

Esta compilación de tres columnas superpuestas se ve muy bien como testimonio, pero estamos seguros de que puede implementarla para otras cosas increíbles. Esperamos que esto lo inspire a usar la transformación de columna y las opciones superpuestas para proyectos futuros. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!