Lo único que la visitantes siempre buscando un Sitio web, estos son testimonios. Representan credibilidad e influyen en el proceso de toma de decisiones de los clientes potenciales cuando visitan su Sitio web.
Además de asegurarse de tener testimonios sólidos para compartir, su atractivo visual también juega un papel importante. En este tutorial, le mostraremos 3 formas fantásticas de personalizar el módulo de testimonios de Divi utilizando solo las opciones integradas.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla.
oficina
Móvil
Recrear el ejemplo # 1
Añadir una nueva sección
¡Comencemos con el primer ejemplo! Crea una nueva página y agrega una sección regular.
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columna:
apresto
Sin agregar más módulos, abra los parámetros de línea y realice algunos cambios en los parámetros de tamaño.
- Hacer esta línea de ancho completo: si
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
Agregar un módulo de imagen a la columna 1
Sube una imagen
¡Es hora de comenzar a agregar módulos! El primer módulo que necesitaremos es un módulo de imagen en la columna 1. Continúe y cargue una imagen cuadrada de su elección.
filtros
Luego vaya a la configuración del filtro y juegue con los diferentes efectos.
- Saturación: 40%
- Contraste: 126%
Agregue un módulo de botones a la columna 1
Añadir una copia
El segundo y último módulo que necesitaremos en la columna 1 es un módulo de botones. Agregue una copia de su elección.
Configuraciones de botones
Luego vaya a la configuración del botón y cambie el aspecto de su botón.
- Use estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Color 1: # 5400ff
- Color 2: # 00fff6
- Dirección del gradiente: 100deg
- Ancho del borde del botón: 0px
- Peso de la fuente: Ultra Bold
- Estilo de letra: mayúsculas
espaciamiento
También agregue valores de espaciado personalizados.
- Relleno superior: 10px
- Relleno inferior: 10px
- Relleno izquierdo: 30px
- Derecho de tapicería: 30px
Caja de sombra
Y termine con una sombra de caja sutil.
- Box Shadow Blur Force: 80px
- Color de sombra: rgba (0,0,0,0,3)
Agregue un módulo testimonial a la columna 2
Agregar contenido
En la segunda columna, el único módulo que necesitaremos es un módulo de testimonios. Agrega algunos contenido a los diferentes campos y al área de contenido.
Color de fondo
Luego agregue un color de fondo ligeramente transparente.
- Color de fondo: rgba (255,255,255,0.96)
Configuración del icono de testimonio
También cambie la configuración del icono de testimonio.
- Color del icono de testimonio: # 0c0c0c
- Color de fondo del icono de testimonio: rgba (245,245,245,0)
Configuración del texto del cuerpo
Luego cambie la configuración del texto del cuerpo.
- Fuente Cuerpo: Verdana
- Altura del cuerpo: 1.7em
espaciamiento
Continúe agregando diferentes valores de margen y relleno personalizados en la configuración de espaciado.
- Margen superior: 15vw (escritorio y tableta), 0vw (teléfono)
- Margen inferior: 50px (tableta y teléfono)
- Margen izquierdo: -10vw (escritorio y tableta), 0vw (teléfono)
- Margen derecho: 5vw
- Relleno superior: 70px
- Relleno inferior: 70px
- Relleno izquierdo: 50px
- Derecho de tapicería: 50px
Frontera
Agregue también un borde izquierdo.
- Ancho del borde izquierdo: 7px
- Color borde izquierdo: # 5400ff
Caja de sombra
Finalmente, agregue una sombra de cuadro sutil para dar forma al módulo de testimonio.
- Box Shadow Blur Force: 80px
- Fuerza de propagación de la sombra de la caja: -10px
- Color de sombra: rgba (0,0,0,0,49)
Clone ambos módulos y coloque los duplicados en las columnas 3 y 4
Una vez que haya terminado de editar los módulos en las columnas 1 y 2, puede clonarlos y colocar los duplicados en las dos columnas restantes.
Cambiar imagen
No olvide cambiar la imagen de su segundo testimonio.
Cambiar el fondo degradado
También cambie el fondo degradado del botón.
- Color 1: # ff001d
- Color 2: # 3700ff
- Dirección del gradiente: 100deg
Cambiar el color del borde del testimonio
Y asocie el color del borde con el fondo degradado del nuevo botón.
- Color del borde izquierdo: # ff001d
Recrear el ejemplo # 2
Añadir una nueva sección
¡Pasemos al segundo ejemplo! Agregue una nueva sección regular a su página.
Añadir una nueva linea
Estructura de la columna
Sin realizar ningún cambio en la sección, agregue una nueva fila utilizando la siguiente estructura de columnas:
apresto
Continúe abriendo los parámetros de línea y cambiando los parámetros de tamaño.
- Hacer esta línea de ancho completo: si
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
espaciamiento
Luego agregue valores de relleno personalizados a la fila y las columnas.
- Relleno a la izquierda: 200px (escritorio), 30px (tableta), 25px (teléfono)
- Relleno a la derecha: 200px (escritorio), 30px (tableta), 25px (teléfono)
- Columna 1 Relleno a la izquierda: 5px (escritorio), 0px (tableta y teléfono)
- Columna 1 Relleno a la derecha: 2.5px (escritorio), 0px (tableta y teléfono)
- Columna 2 Relleno a la izquierda: 2.5px (escritorio), 0px (tableta y teléfono)
- Columna 2 Relleno a la derecha: 2.5px (escritorio), 0px (tableta y teléfono)
- Columna 3 Relleno a la izquierda: 2.5px (escritorio), 0px (tableta y teléfono)
- Columna 3 Relleno a la derecha: 5px (escritorio), 0px (tableta y teléfono)
Agregue un módulo de video a la columna 1
Enlace de video
El primer módulo que necesitaremos en la columna 1 es un módulo de video. Vincula este video a tu video testimonial.
Superposición de imágenes
También agregue una superposición de imágenes.
Agregue un módulo testimonial a la columna 1
Agregar contenido
El segundo y último módulo que se necesita en la columna 1 es un módulo de testimonio. Comience agregando los detalles del testimonio.
Desactivar el icono de testimonio
Luego, apague el icono de testimonio en la configuración del elemento.
- Mostrar icono de testimonio: No
Color de fondo
Añadir un fondo blanco entonces.
- Color de fondo: #ffffff
Configuración del texto del cuerpo
También cambie la configuración del texto del cuerpo.
- Texto del color del cuerpo: # 000000
- Espacio entre letras del cuerpo: -0.5px
- Altura del cuerpo: 1.7em
espaciamiento
Y agregue valores de margen y relleno personalizados en la configuración de espaciado.
- Margen inferior: 30px (tableta y teléfono)
- Relleno: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 80px
- Derecho de tapicería: 80px
Frontera
También le damos al módulo esquinas redondeadas en la parte inferior izquierda y derecha '30px'.
Caja de sombra
Finalmente, para dar profundidad, le damos al módulo Testimonial una sombra de cuadro sutil.
- Box Shadow Blur Force: 80px
- Fuerza de propagación de la sombra de la caja: -10px
- Color de sombra: rgba (0,0,0,0,3)
Clone los módulos tres veces y coloque los duplicados en las columnas restantes
Una vez que haya terminado de editar los dos módulos en la columna 1, clónelos dos veces y coloque los duplicados en las dos columnas restantes.
Edite enlaces de video, contenido y superposiciones de imágenes
No olvides cambiar el enlace del vídeo, el contenido y superposiciones de imágenes de sus nuevos testimonios.
Recrear el ejemplo # 3
Añadir una nueva sección
¡Pasemos al tercer ejemplo! Agregue una nueva sección regular a su página.
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columna:
Color de fondo de la columna 1
Luego vaya a la configuración de fondo y agregue un color de fondo a la primera columna.
- Color de fondo de la columna 1: # f9f9f9
Color de fondo de la columna 2
La segunda columna necesitará un fondo blanco.
- Color de fondo de la columna 2: #ffffff
apresto
Luego vaya a los parámetros de dimensionamiento y elimine el ancho de la canaleta.
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
espaciamiento
A continuación, agregue valores de espaciado personalizados.
- Mejor relleno: 0px
- Parte inferior de relleno: 0px
- Relleno izquierdo: 0px
- Derecho de tapicería: 0px
- Columna 1 Relleno superior: 100px
- Columna 1 Relleno inferior: 100px
- Columna 1 Relleno a la izquierda: 50px
- Columna 1 Relleno a la derecha: 50px
- Columna 2 Relleno superior: 100px
- Relleno inferior de la columna 2: 100px
- Columna 2 Relleno a la izquierda: 50px
- Columna 2 Relleno a la derecha: 50px
Frontera
Y asigne a cada uno de los bordes '20px'.
Caja de sombra
Por último, pero no menos importante, dale a tu línea una sombra de cuadro.
- Box Shadow Blur Force: 80px
Agregue un módulo testimonial a la columna 1
Agregar contenido
¡Es hora de comenzar a agregar módulos! El primer módulo que necesitaremos en la columna 1 es un módulo de testimonios. Agregar contenido.
Sube una imagen
Continúe cargando una imagen en la configuración de imagen.
Desactivar el icono de testimonio
Luego, apaga el ícono de testimonios.
- Mostrar icono de testimonio: No
Desactivar color de fondo
También apague el color de fondo.
- Usar color de fondo: No
Configuración del texto del cuerpo
Continúe yendo a la pestaña Diseño y realice algunos cambios en la configuración del texto del cuerpo.
- Cuerpo de Policía: Abril Fatface
- Texto del color del cuerpo: # 000000
- Tamaño del texto del cuerpo: 20px
Agregue un módulo de texto a la columna 1
Agregar contenido
El segundo módulo que necesitaremos en la columna 1 es un módulo de texto. Agregue la copia del testimonio al área de contenido.
espaciamiento
Luego, vaya a la pestaña Diseño y agregue márgenes superior e inferior personalizados.
- Margen superior: 50px
- Margen inferior: 50px
Agregar un módulo de imagen a la columna 1
Descargar el logotipo de la empresa
El tercer y último módulo que necesitaremos en la primera columna es un módulo de imagen. Puede utilizar este módulo para agregar el logotipo de la empresa asociado con el testimonio.
Clone todos los módulos y coloque duplicados en la columna 2
Una vez que haya terminado de editar todos los módulos en la columna 1, puede copiarlos y copiarlos. Una vez hecho esto, coloque los duplicados en la segunda columna.
Cambiar la imagen y copia del testimonio
Asegúrese de cambiar el contenido del testimonio con las imágenes.
Para terminar
Eso es todo por este tutorial, espero que te permita ofrecer varias variaciones
