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


En una de las últimas actualizaciones de Divi, agregamos algunos controles bastante sorprendentes a las columnas en el generador. 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 utilizando la columna de Divi y la configuración de transformación.

Para este diseño, utilizaremos 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 poco tiempo.

Empecemos.

Avance

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

Escritorio

solapamiento de columnas

Móvil

solapamiento de columnas

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.

Agregue una sección regular en el generador de divi

fila de tres columnas

Ajustar espaciado de sección

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

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

agregue el relleno de la sección

Ajustar el tamaño y el espaciado de la fila

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

  • Utilice un ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

establecer el tamaño de la fila

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

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

establecer el relleno de la fila

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 de inicio: 35%
  • Posición final: 35%

agregar el fondo

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 columna son las esquinas redondeadas y la sombra del cuadro:

  • Borde: 20 px en todas las esquinas redondeadas
  • Sombra de caja: primera opción de sombra de caja
  • Posición vertical de la sombra de la caja: 0px
  • Caja Shadow Blur Fuerza: 80px
  • Color de sombra: rgba (0,0,0,0.3)
  • Posición de la sombra de la caja: exterior

agregar un borde redondeado a la columna uno

configuración de sombra de cuadro para la fila uno

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

copiar estilos de elementos de la columna uno

pegar 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. Utilizaremos la configuración de transformación para que la primera columna se superponga con la segunda. Por si lo olvidó, 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

opciones de transformación de la columna uno

opciones de transformación para la columna uno en dispositivos móviles

ajustar el índice z en la columna uno

Columna 2

¡A 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 caja: 50 px

ajustar la intensidad del desenfoque de la sombra del cuadro en la columna dos

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

  • Relleno superior:
    • Escritorio = 3vw
    • Tableta + teléfono = 5vw
  • Acolchado inferior:
    • Escritorio = 5vw
    • Tableta + teléfono = 7vw
  • Acolchado Izquierdo:
    • Escritorio = 2vw
    • Tableta + teléfono = 4vw
  • Relleno derecho:
    • Escritorio = 2vw
    • Tableta + teléfono = 4vw

columna dos relleno para escritorio.

Columna dos acolchado para móvil.

¡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 Transformar traducció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

transformar la columna 2 para dispositivos móviles

visibilidad en el índice z para la columna 2

Columna 3

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

  • Fuerza de desenfoque de sombra de caja: 50 px

ajustar la intensidad del desenfoque de la sombra del cuadro en columnas

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

  • Fondo: gradiente
  • Gradient Color One: # 0c99c1
  • Gradient Color Two: rgba (5,0,78,0.72)
  • Tipo de degradado: lineal
  • Dirección del gradiente: 220 grados
  • Posición de inicio: 0%
  • Posición final: 100%

agregue color de fondo a la columna tres.

Ahora, agreguemos el espacio.

  • Relleno superior:
    • Escritorio = 3vw
    • Tableta + teléfono = 10vw
  • Acolchado inferior:
    • Escritorio = 3vw
    • Tableta + teléfono = 7vw
  • Acolchado Izquierdo:
    • Escritorio = 1.5vw
    • Tableta + teléfono = 10vw
  • Relleno derecho:
    • Escritorio = 1.5vw
    • Tableta + teléfono = 10vw

ajustar el relleno en la columna tres

ajustar el relleno para la columna tres en el móvil

Por último, pero no menos importante, haremos que la tercera columna se superponga con la segunda cambiando la configuración de transformación de 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

ajustar el relleno para la columna tres en el móvil

transformar la columna tres para móviles

transformar columna tres teléfono

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

vista previa de tres columnas sin módulos

3. Agregar módulos a columnas y diseñarlos

¡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

agregar un módulo de imagen a la columna uno

Inserta una foto de tu cliente y dale el siguiente estilo:

  • Alineación: izquierda
  • Forzar ancho completo: sí

alineación de imagen en la columna uno

forzar ancho completo en la columna de imagen

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

agregue un borde inferior amarillo a la imagen en la columna uno

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

agregue un módulo de texto debajo de la imagen en la columna uno.png

Después de agregar el contenido, modificaremos la configuración del texto:

  • Fuente de 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

diseñar el texto para la foto del cliente

dimensionar el texto para escritorio

tamaño de texto para tableta

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

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

configuración del texto del encabezado debajo de la foto

texto de la columna uno para escritorio

dimensione el texto en la columna uno para tableta

dimensionar el texto en la columna uno para teléfonos

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

espaciado de texto en el escritorio de la columna uno

configuración de texto para columna en tableta

estilo de texto para la columna uno, teléfono

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

columna uno terminada

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. Utilizaremos las opciones de transformación para lograr este efecto.

1. Añadir módulo de texto.

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

agregar un módulo de texto a la columna 2

Agregue un fondo amarillo al módulo.

  • Color de fondo: amarillo # ffd400

fondo amarillo en el módulo de texto en la columna 2

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

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

diseñar la fuente en la columna dos del módulo de texto

relleno y margen en el texto para la columna 2

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

transformar texto testimonial

transformar la configuración del texto en la columna dos

opciones de transformación para texto en la columna tres

ajustar transformar rotar a texto

2. Agregue el módulo Blurb.

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

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

inserte el módulo de publicidad en la columna dos

Luego, inserte el contenido, seleccione un icono y déle estilo de la siguiente manera:

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

inserte un icono en la propaganda

peinar el ícono en la propaganda

Continúe con el estilo del 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

diseñar el texto en la columna dos de publicidad

  • 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

altura de línea y tamaño de texto para publicidad

altura de línea tamaño de texto

tamaño de texto y altura de línea para teléfonos

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

tamaño del texto del cuerpo en la propaganda

Blur de altura de línea y tamaño de texto

altura del texto del cuerpo

texto del cuerpo publicitario para teléfono

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

Primero, ajustaremos el ancho de la propaganda:

  • Ancho del contenido: 100%
  • Anchura:
    • Escritorio = 58.4%
    • Tableta + teléfono = 90%

ancho de la propaganda

ancho de propaganda para móviles

Y luego, la configuración de espaciado:

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

espaciado difuso para la columna dos

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
  • Divisor de peso: 1px

agregar un divisor debajo de la propaganda

establecer divisor para mostrar

color divisor negro

divisor de peso 1px

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

terminó la columna dos

Columna 3

¡A la tercera y última columna! Estamos usando esta columna para mostrar un llamado 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. Añadir módulo de texto

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

inserte un módulo de texto en la columna tres

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

Continúa y dale estilo a la configuración de texto en consecuencia:

  • Fuente de texto: Nunito Sans
  • Peso de fuente de texto: Regular
  • Color de fuente de texto: blanco #ffffff
  • Tamaño de fuente del 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

diseñar el contenido en el cuadro de texto columna tres

tamaño de texto columna de escritorio tres

texto de estilo para tableta

texto de estilo para teléfono

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

  • Encabezado de texto: H3
  • Título 3 Fuente: Poppins
  • Título 3 Peso de la 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
  • Título 3 Altura de línea:
    • Escritorio = 1.5vw
    • Tableta = 3vw
    • Teléfono = 4.5vw

estilo de encabezado para la columna tres

tamaño del encabezado para la columna tres

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 divisorios del que puede encontrar en la columna 2.

divisor de módulo de copia

pegar módulo

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

cambiar el color del divisor de negro a blanco

agregar espacio al divisor

3. Agregar módulo de botón

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

agregar un botón

Pase a la pestaña de diseño y aplique estilo al botón de la siguiente manera:

  • Usar estilo personalizado para 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

peinar el botón en la columna tres

diseñar el botón para tabletas

texto de botón de estilo para móvil

  • Color de fondo del botón: degradado
  • Gradient Color One: Amarillo # ffd400
  • Gradient Color Two: Naranja # ff8300
  • Tipo de degradado: lineal
  • Dirección de degradado: 202 grados.

agrega un fondo amarillo al botón

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

diseñar la fuente del botón en la columna tres

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

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

ajustar el espacio del botón para escritorio

Tableta

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

espaciado para tableta - botón

Teléfono

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

espacio para la columna tres del botón del teléfono

Avance

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

Escritorio

solapamiento de columnas

Móvil

solapamiento de columnas

Terminando

Esta construcción superpuesta de tres columnas se ve muy bien como un testimonio, pero estamos seguros de que puede implementarla para otras cosas increíbles. Esperamos que esto lo inspire a utilizar la transformación de columnas 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.