Cómo crear superposiciones únicas con flotación para testimonios con división

Los testimonios son un gran negocio para muchos sitios web. Presentan experiencia, y los visitantes generalmente los buscan si quieren descubrir cuán creíble es una empresa o persona. Por lo tanto, es importante pensar en cómo presenta visualmente los testimonios en su sitio web. Con Div, puede mostrar sus testimonios exactamente como desee. Para inspirarlo, le mostraremos cómo crear una forma sorprendente y única de mostrar testimonios con superposiciones de mouse. ¡Vamos a eso! Vista previa antes de tirar la cabeza en el tutorial, para echar un vistazo al resultado final.

¡Agregue una nueva sección para comenzar! Agregue una nueva página o abra una existente y agregue una nueva sección normal.

Agregue la nueva estructura de columna de la nueva fila 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y modifique la configuración de tamaño.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Sparto agregue algunos valores de espaciado personalizados.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Columna 2 Lineo izquierdo: 2VW (escritorio), 3VW (tableta y teléfono)
Columna 2 Reinicio derecho: 11VW (escritorio), 3VW (tableta y teléfono)

¡Agregue el módulo de imagen a la columna 1 Cargue la imagen es hora de comenzar a agregar diferentes módulos! Comience con un módulo de imagen en la primera columna. Sube una imagen de retrato de tu elección.

Alineación de la imagen Abra la configuración de la imagen y cambie la alineación de la imagen.
Alineación de imágenes: izquierda

La dimensión cambia la configuración de dimensionamiento adicional.
Ancho: 78% (escritorio), 70% (tableta y teléfono) Módulo: izquierda
Agregue el módulo de texto de superposición de Hover en la columna 1 Agregar contenido justo debajo del módulo de imagen, agregue un módulo de texto. Coloque los detalles de la persona en el cuadro de contenido.

Fondo predeterminado Continuar agregando un color de fondo.

Color de fondo: RGBA (255,255,255.0)
Coloque el cursor en el fondo Agregue otro color de fondo al cursor.

Color de fondo: # 0f1bff
Configuración de texto predeterminada y luego cambie la configuración de texto.

Color de texto: #ffffff
Tamaño del texto: 0 PX
Altura de la línea de texto: 0 PX
Coloque el cursor en la configuración del texto Haga algunos ajustes para la configuración de texto en el cursor.

Tamaño del texto: 19 PX
Altura de la línea de texto: 2em
La configuración predeterminada para la configuración del texto del encabezado para el texto del encabezado también debe modificarse.

Título 3 Peso de fuente: Ultra Bold
Título 3 Estilo de fuente: mayúscula
Frup 3 color de texto: #ffffff
Rúbrica 3 Dimensión de texto: 0 PX
Rúbrica 3 altura de línea: 0em
Coloque el cursor en la configuración del texto del encabezado Agregue diferentes valores al cursor.

Rúbrica 3 Dimensión de texto: 35 PX
Rúbrica 3 altura de línea: 1.1em
Extienda luego, acceda a la configuración de espaciado y agregue algunos valores.

Margen superior: -100px
Margen izquierdo: 50 PX
Margen derecho: 50 PX
Revestimiento superior: 40 px
Revestimiento inferior: 60 px
Cambie la orientación de la retorno de texto a la configuración del texto y cambie la orientación del texto.

Orientación de texto: centro
Sombra de cuadro predeterminada y luego, agregue una sombra de cuadro predeterminado al módulo de texto. Este tono de caja será parte del diseño general.

Posición horizontal de la sombra de la caja: 1000 PX
Box Shadow Posición vertical: -400px
Poder de la falta de claro de la sombra de la caja: 0 pxpute de la distribución de la cuttia: 250 px
Color de la sombra: RGBA (175.175.175.0.13)
Hover Box Shadow Para crear el efecto especial de superponerse al flotante, agregue una sombra de la caja del flotador.
Posición horizontal de la sombra de la caja: -73px

Box Shadow Posición vertical: -49px
Poder de poco claro de la sombra de la caja: 0 px
Poder de extender la sombra de la caja: 10 px
Color de la sombra: RGBA (255,182,12,0,53)
Transiciones Para crear una transición suave, cambie la duración de la transición en la pestaña avanzada.
Duración de la transición: 1000 ms

Agregue un módulo de texto para testimonios en la columna 2 agrega contenido a la segunda columna, lo primero que necesitamos es un modo de texto. Continuar y agregar un resumen del testimonio.
Configuración Cabeza de texto Luego, cambie la configuración del texto del encabezado.

3 Fuentes de fuentes: Goudy Folletter 1911

Título 3 Alineación del texto: Izquierda
Título 3 Dimensión de texto: 3.5VW (escritorio), 40px (tableta), 30px (teléfono)
Rúbrica 3 altura de línea: 1.1em
El espacio continúa agregando algunos valores de espaciado personalizados.
Margen superior: 7VW (escritorio), 100 px (tableta), 50 px (teléfono)

Agregue el módulo de descripción de texto a la columna 2 Agregar contenido Agregue otro módulo de texto con todo el testimonio justo debajo del modo de texto del título.
Configuración de texto Después de agregar el testimonio, continuar y modificar la configuración del texto.


La altura de la línea de texto: 2.2em

Orientación de texto: izquierda
Espacio Agregar un margen personalizado.
Margen superior: 4VW (escritorio), 50 px (tableta y teléfono)

Agregue una nueva línea a la estructura de la columna ahora que hemos terminado primero, para agregar la segunda usando la siguiente estructura de columnas:
Dimensión Abra la configuración de la fila y cambie la configuración de tamaño. Haga esta fila de ancho completo: Sí

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
El espacio agregue algunos valores de espaciado personalizados.
Margen superior: 100 PX
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Columna 1 ENLIZACIÓN IZQUIERDA: 11VW (escritorio), 3VW (tableta y teléfono)
Columna 1 Reinicio derecho: 2VW (escritorio), 3VW (tableta y teléfono)
Clone Los módulos de texto de la fila y ubicación anteriores en la columna 1 Devuelva la fila anterior y clon ambos módulos en la columna 2. Una vez que lo haya hecho, coloque los duplicados en la primera columna de la nueva fila.
Cambie la orientación del texto Cambie la orientación del texto de ambos módulos.
Orientación del texto: correcto

Agregue el módulo de imagen a la columna 2 Cargue la imagen y luego, agregue un módulo de imagen a la segunda columna y cargue una nueva imagen de retrato.

Alineación de imágenes Cambiar la alineación de imágenes del módulo.
Alineación de imágenes: correcto

La dimensión continúa cambiando la configuración de tamaño.

Ancho: 78% (escritorio), 70% (tableta y teléfono)
Alineación del módulo: correcto

Sparto agregue algunos valores de espaciado personalizados.
Margen superior: 50 PX (tableta y teléfono)
Agregue el módulo de texto de superposición de Hover en la columna 2 Agregar contenido El último módulo que necesitamos para completar este diseño es un módulo de texto en el módulo de imagen. Agregue los detalles de la persona al cuadro de contenido.

Fondo predeterminado y luego agregue una imagen de fondo al modo.
Color de fondo: RGBA (255,255,255.0)

Coloque el cursor en el fondo Cambie el color de fondo al cursor.

Color de fondo: # 690cff
Configuración de texto predeterminada y luego cambiar la configuración del texto. Color de texto: #FFFFFF

Tamaño del texto: 0 PX
Altura de la línea de texto: 0 PX

Orientación de texto: centro
Coloque el cursor en la configuración del texto Haga algunos ajustes del cursor.
Tamaño del texto: 19 PX
Altura de la línea de texto: 2em
Configuración predeterminada para el cabezal del cambio de encabezado y la configuración del texto del encabezado.

Título 3 Peso de fuente: Ultra Bold
Frup 3 color de texto: #ffffff
Rúbrica 3 Dimensión de texto: 0 PX

Rúbrica 3 altura de línea: 0em
Coloque el cursor en la configuración del texto del encabezado con algunos pequeños cambios en el plan.
Rúbrica 3 Dimensión de texto: 35 PX
Rúbrica 3 altura de línea: 1.1em
El espacio continúa accediendo a la configuración de espaciado y agregue algunos valores personalizados.

Margen superior: -80 PX
Margen izquierdo: 50 PX
Margen derecho: 50 PX

Revestimiento superior: 40 px
Revestimiento inferior: 60 px
Box Sombra predeterminada Agregue una sombra del cuadro predeterminado al módulo de texto.
Posición horizontal de la sombra de la caja: -1000px
Box Shadow Posición vertical: -420px
Poder de poco claro de la sombra de la caja: 0 px

Poder de extender la sombra de la caja: 250 px
Color de la sombra: RGBA (175.175.175.0.13)
Hover Box Shadow y cambia la sombra de la caja en el flotador.
Posición horizontal de la sombra de la caja: -73px
Box Shadow Posición vertical: -49px
Poder de poco claro de la sombra de la caja: 0 px

Poder de extender la sombra de la caja: 10 px
Color de la sombra: RGBA (12,255.238.0.53)
Las transiciones por último, pero no menos importante, crean una transición suave cambiando la duración de la transición.
Duración de la transición: 1000 ms
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado final.