Cómo crear columnas superpuestas con Div

En una de las últimas actualizaciones de la Divic, agregamos algunos controles bastante sorprendentes a las columnas en el constructor. Ahora es más fácil para siempre crear columnas se superpone. En este tutorial, le mostraremos cómo crear una sección de testimonios con tres columnas superpuestas utilizando la columna Divic y la configuración de transformación. Para este diseño, usaremos tres colores, un rico naranja # FF8300, un cálido amarillo # FFD400 y un gradiente azul especial # 0C99C1. Puede aplicar este proyecto de columna superpuesto en un proyecto de sitio web en el menor tiempo. Vamos a empezar. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

1. Cree una nueva sección normal + tres columnas. Lo primero que debe hacer es crear una sección normal con tres columnas.


Ajuste el espacio de la sección Aumente el revestimiento superior e inferior de la sección.
Revestimiento superior: 4VW
Revestimiento inferior: 16 VW

Ajuste el tamaño y el espacio de fila Abra la configuración de la fila y cambie la configuración del tamaño en consecuencia:
Use un ancho de canaleta personalizado: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%

Después de eso, cambie la configuración de espaciado:
Finamiento inferior: 0 PX
Junta izquierda: 11VW
Junta derecha: 8VW

Agregar fondo de gradiente Agregar un fondo degradado adicional:
Estilo de fondo: gradiente
Primer color: blanco #ffffff
Segundo color: naranja # FF8300
Tipo de gradiente: lineal
Dirección de gradiente: 180 grados
Posición inicial: 35%
Posición final: 35%

2. Columnas de estilo Antes de agregar módulos a columnas, cambiaremos el estilo, el espacio y la transformación de la configuración de cada columna. Columna 1 Los primeros pasos del estilo de la columna son las esquinas redondeadas y la sombra de la caja: el borde: 20 px en las esquinas redondeadas
Box Shadow: Primera opción Box Sombra
Box Shadow Posición vertical: 0px
Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
Caja de sombra de posición: exterior
* Antes de agregar cualquier configuración de transformación, copiaremos y pegaremos estos estilos de artículos en la columna dos y tres.


Abra la configuración de la columna 1 nuevamente y acceda a la pestaña de diseño. Usaremos la configuración de transformación para que la primera columna se superponga en la segunda. Solo si lo olvidaste, el eje x es horizontal y el eje y es vertical.


Transformar la traducción:
Desktop: eje x = 3VW. eje y = 14.2VW
Tableta y teléfono: eje x = -14vw. eje y = 16VW
Visibilidad: Z ÍNDICE 10
Columna 2 ¡Vamos a la segunda columna! Vaya a la sombra de la caja (que agregó a uno de los pasos anteriores) y aumente la intensidad borrosa de la sombra de la caja.



Poder de poco claro de la sombra de la caja: 50 px
Continúe agregando algunos valores de espaciado personalizados en la columna 2.

Revestimiento superior:
Escritorio = 3VW
Tableta + teléfono = 5VW
Levante inferior:
Escritorio = 5VW
Tableta + teléfono = 7VW
Forro izquierdo:
Escritorio = 2VW
Tableta + teléfono = 4VW
Junta derecha:
Escritorio = 2VW
Tableta + teléfono = 4VW
¡Es hora de girar la segunda columna! La segunda columna permanece en su lugar para el escritorio, pero debemos aplicar algunas configuraciones de transformación personalizadas en pantallas más pequeñas. Continuar y ajustar la pestaña Translación de transformación. Además, aumentaremos el índice Z a 9. Transforme la traducción:


Tableta y teléfono: eje x = 9VW. eje y = 13VW
Visibilidad: Z ÍNDICE 9
Columna 3 en la tercera columna! Aumente la intensidad de desvanecer la sombra de la sombra de la caja ya existente.
Poder de poco claro de la sombra de la caja: 50 px


Luego abra la configuración de fondo y agregue un fondo de gradiente azul.
Antecedentes: gradiente

Color de gradiente One: # 0C99C1
Color Dos Gradiente: RGBA (5,0,78,0.72)
Tipo de gradiente: lineal
Dirección de gradiente: 220 grados
Posición inicial: 0%
Posición final: 100%
Ahora agregemos el espacio.
Revestimiento superior:

Escritorio = 3VW
Tableta + teléfono = 10VW
Levante inferior:
Escritorio = 3VW
Tableta + teléfono = 7VW
Forro izquierdo:
Escritorio = 1.5VW
Tableta + teléfono = 10VW
Junta derecha:
Escritorio = 1.5VW
Tableta + teléfono = 10VW
Por último, pero no menos importante, haremos que la tercera columna se superponga con la segunda, modificando la configuración de traducción.
Transformar la traducción:


Desktop: eje x = -10vw. eje y = 14.2VW
Tableta: eje x = -14vw. eje y = 9VW
Teléfono: eje x = -14vw. eje y = 11VW
Visibilidad: Z ÍNDICE 9
Aquí hay una vista previa de nuestras columnas antes de agregar los módulos.
3. Agregue módulos a columnas y estilo ahora, agregue 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



Ingrese una foto de su cliente y la estilice de la siguiente manera: Alineación: Izquierda

Fuerza el ancho completo: si

Agregue un borde inferior a la imagen.
Color del borde inferior: amarillo # ffd400
Ancho de borde inferior: 9 PX


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 ingrese el nombre y la posición del cliente.
Nombre: Título 4
Posición: párrafo

Después de agregar contenido, estilizaremos la configuración de texto:
Texto de fuente: Nunito Sans
El peso de la fuente de texto: regular

Alineación de texto: Centro
Color de texto: Negro # 000000
Tamano del texto:
Escritorio = 0.8VW
Tableta = 1.8VW
Teléfono = 2.8VW
Cambie a la configuración del texto del encabezado y aplique los siguientes cambios:
Texto del encabezado: H4
La sección de 4 fuentes: Poppins



Título 4 Fuente de peso: Bold
Título 4 Color de texto: Negro # 000000
Título 4 Dimensión de 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í después de haber completado ambos módulos:
Columna 2 En la columna 2, necesitamos un texto, un texto y un módulo divisor. El primer módulo de texto es el que parece un banner angular en la esquina superior derecha de la columna. Usaremos las opciones de transformación para obtener este efecto.
1. Agregue un 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 modo.

Color de fondo: Amarillo # FFD400
Cambie a la pestaña de diseño y cambie la configuración de texto y espacio en consecuencia:


Texto de fuente: Poppinsginity of Text Font: Bold
Alineación de texto: Centro

Color de texto: blanco #ffffff
Tamaño del texto: 23 PX
Margen derecho: -50px
Margen izquierdo: -50px
Revestimiento superior: 15 px
Revestimiento inferior: 15 PX
Por último, pero no menos importante, ajustaremos la configuración de transformación de la siguiente manera:
Transformar la traducción:
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
Transformación de rotación: 32 grados en el primer eje
2. Agregue el módulo de propaganda. Una vez que haya completado el primer módulo, es hora de agregar un módulo de propaganda. El módulo de la propaganda es el lugar donde se muestra el testimonio del cliente. Primero, haga clic en el icono + para agregar un módulo y seleccione una propaganda.
Luego ingrese el contenido, seleccione un icono y estilice el icono de la siguiente manera:
Usa el icono: Sí, una estrella
Icono de color: amarillo # ffd400




Colocación de íconos: izquierda

Use el tamaño de fuente de icono: Sí, 48 PX
Continúe estilizando el texto del título a un nivel H4
Texto del título: H4
Título de la fuente: Poppins
Título Fuente de peso: Bold


Color de la fuente del título: negro #ffffff
Título del texto Tamaño:
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
Estilizar la configuración de texto del cuerpo en consecuencia:
Texto de texto de fuente: Nunito Sans
El peso del texto del cuerpo: semi atrevido
Color of Body Text: Negro # 000000



El tamaño del texto del cuerpo:
Escritorio = 0.7VW
Tableta = 1.6VW
Teléfono = 2.4VW
La 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 lograr esto, ajustaremos el ancho, los bordes y los valores de llenado. Primero, ajustaremos el ancho de la propaganda: 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
Junta izquierda: 0 PX


Junta derecha: 4 PX
3. Agregue el divisor El último módulo que necesitamos en esta columna es un módulo divisor. Aplique los siguientes cambios al divisor:
Ver divisor: si
Color divisor: negro #oooooo
Peso del divisor: 1 PX
¡Estamos casi alli! Así es como se ve nuestro resultado hasta ahora:

Columna 3 ¡A la tercera y última columna! Usamos esta columna para mostrar un impulso. Usamos tres módulos; Un módulo de texto, un módulo divisor y un módulo de botón. 1. Agregue un módulo de texto. Lo primero que agregaremos a esta columna es el módulo de texto.
Agregaremos un título a H3 y un poco de texto de párrafo en el cuadro de contenido. Continúe y estilice la configuración de texto en consecuencia:
Texto de fuente: Nunito Sans
El peso de la fuente de texto: regular




Color de fuente de texto: blanco #ffffff

Tamaño de fuente de texto:

Escritorio = 0.8VW
Tableta = – 2VW
Teléfono = 2.6VW
La altura de la línea de texto:
Escritorio = 1.5VW
Tableta = 4VW
Teléfono = 5VW
Complete el módulo de texto que estiliza la configuración del texto del encabezado.
Texto del encabezado: H3
3 Fuentes: Poppins
Título 3 Fuente de peso: Bold
Rúbrica 3 color de texto: blanco #ffffff




Rúbrica 3 Dimensión de texto:
Escritorio = 1.1VW
Tableta = 3VW
Teléfono = 4VW
Altura de línea 3:
Escritorio = 1.5VW
Tableta = 3VW
Teléfono = 4.5VW
2. Agregue un módulo divisor Continúe agregando un módulo divisor a la columna 3. Para estilizar el divisor, copie y pegue los estilos del divisor del que puede encontrar en la columna 2. Abrir la configuración del divisor y cambiar el color de negro a blanco. Agregue un poco de relleno superior e inferior.
Color divisor: blanco #ffffff
Revestimiento superior: 40 px
Finamiento inferior: 20 PX
3. Agregue el módulo de botón al último módulo, que es un módulo de botón. Agregue una copia de su elección.




Cambie a la pestaña de diseño y estilice el botón de la siguiente manera:


Use el estilo personalizado para el botón: Sí
Botón Tamaño de texto:
Escritorio = 0.8VW
Tableta = 2.4VW


Teléfono = 3VW

El color del texto del botón: blanco #ffffff
El color del fondo de fondo: gradiente
Color de gradiente One: Yellow # FFD400
Color Two Gradiente: Orange # FF8300
Tipo de gradiente: lineal
Dirección de gradiente: 202 grados.
El ancho del nudo del botón: 0 PX



Distancia entre letras y botones: 1 PX
Botón de fuente: Nunito Sans
Peso de fuente de fuente: duro
Botón de estilo de fuente: TT
Para que el botón se vea bien en todos los tamaños de pantalla, ajustaremos el botón a la siguiente manera: Desktop

Revestimiento superior: 1VW
Revestimiento inferior: 1 VW
Junta derecha: 3VW
Junta izquierda: 3VW
Tableta

Revestimiento superior: 2VW
Revestimiento inferior: 2VW
Junta derecha: 6VW
Junta izquierda: 6VW
Teléfono

Revestimiento superior: 3VW
Revestimiento inferior: 3VW
Junta derecha: 8VW
Junta izquierda: 8VW
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil