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

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 relleno 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:

• Use un ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%

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

• Relleno 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 gradiente: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 35%
• Posición final: 35%

2. Columnas de estilo

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 caja: primera opción de sombra de caja
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de cuadro: 80px
• Color de sombra: rgba(0,0,0,0.3)
• Posición de la sombra del cuadro: 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.2vw
  • Tableta y teléfono: eje x = -14vw. eje y = 16vw
• Visibilidad: Índice Z 10

columna 2

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

• Fuerza de desenfoque de sombra de cuadro: 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
• Relleno izquierdo:
  
  • Escritorio = 2vw
  • Tableta + Teléfono = 4vw
• Relleno 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 por la tercera columna! Aumente la fuerza de desenfoque de la sombra del cuadro de la sombra del cuadro ya existente.

• Fuerza de desenfoque de sombra de cuadro: 50px

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

• Fondo: Gradiente
• Color degradado uno: #0c99c1
• Color degradado dos: rgba(5,0,78,0.72)
• Tipo de gradiente: lineal
• Dirección del gradiente: 220 grados
• Posición de inicio: 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
• Relleno izquierdo:
  
  • Escritorio = 1.5vw
  • Tableta + Teléfono = 10vw
• Relleno 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 transformación y traducción.

• Transformar Traducir:
  
  • Escritorio: eje x = -10vw. eje y = 14.2vw
  • 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. Agrega módulos a las columnas y dales 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. Agregue el módulo de imagen primero.

1. Agregue el módulo de imagen

Inserta una foto de tu cliente y dale estilo de la siguiente manera:

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

Agregue 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, diseñaremos la configuración del texto:

• Fuente del texto: Nunito Sans
• Peso de fuente de 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

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

• Texto de encabezado: H4
• Título 4 Fuente: Poppins
• Encabezado 4 Peso de fuente: Negrita
• Título 4 Color del texto: Negro #000000
• Título 4 Tamaño del texto:
  
  • 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 publicidad 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

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

• Fuente del texto: Poppins
• Peso de fuente de texto: Negrita
• Alineación de texto: Centro
• Color del texto: Blanco #ffffff
• Tamaño del texto: 23px
• Margen derecho: -50px
• Margen izquierdo: -50px
• Relleno superior: 15px
• Relleno 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 Rotar: 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 publicidad.

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

Luego, inserte el contenido, seleccione un ícono y diseñe el ícono de la siguiente manera:

• Icono de uso: Sí, una estrella
• Color del icono: amarillo #ffd400
• Ubicación del icono: Izquierda
• Usar tamaño de fuente del icono: Sí, 48 px

Continúe diseñando el 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 del 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 cuerpo del texto: Negro #000000
• Tamaño del cuerpo del texto:
  
  • 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 publicidad sea menos ancha que su columna, para lograr eso, ajustaremos el ancho, los márgenes y los valores de relleno.

Primero, ajustaremos el ancho de la publicidad:

• Ancho de 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. Aplique los siguientes cambios al divisor:

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

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

columna 3

¡Vamos 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 diseñe la configuración de texto en consecuencia:

• Fuente del texto: Nunito Sans
• Peso de fuente de 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 diseñando la configuración del texto del título.

• Texto de encabezado: H3
• Título 3 Fuente: Poppins
• Encabezado 3 Peso de fuente: Negrita
• Título 3 Color del texto: Blanco #ffffff
• Título 3 Tamaño del texto:
  
  • Escritorio = 1.1vw
  • tableta = 3vw
  • Teléfono = 4vw
• Encabezado 3 Altura de línea:
  
  • 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 divisores 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
• Relleno superior: 40px
• Relleno inferior: 20px

3. Agregar módulo de botones

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

Pase a la pestaña de diseño y diseñe el 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
• Color degradado uno: amarillo #ffd400
• Color degradado dos: naranja #ff8300
• Tipo de gradiente: lineal
• Dirección del gradiente: 202 grados.

• Ancho del borde del botón: 0px
• Espaciado entre letras de botones: 1 px
• 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 las opciones de transformación y superposición de columnas para proyectos futuros. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!