Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear impresionantes testimonios de galería utilizando el paquete de diseño del planificador de bodas de Divi . Este tutorial lo ayudará a vincular testimonios a su cartera en el mismo lugar. Esto le permite estar un paso más cerca de convencer a los visitantes de sus habilidades y convertirlos en clientes potenciales. Este es un reemplazo sólido para necesitar un complemento testimonial . También aplicaremos un efecto sutil al pasar el mouse sobre las imágenes que muestres.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado final en diferentes tamaños de pantalla.
En vuelo estacionario
Abra la página de destino del paquete de diseño del planificador de bodas
Comience abriendo la página de destino que ha creado con el impresionante paquete de diseño del planificador de bodas de Divi .
Modificar la sección de testimonios
Eliminar segunda fila
Este diseño ya incluye una sección de testimonios. En lugar de crear una nueva sección, vamos a modificar esta sección para crear la galería de testimonios. Desplácese hacia abajo hasta que encuentre la sección y elimine la segunda fila.
Eliminar módulo de imagen en la columna 1
Ahora queda una fila en esa sección. Continúe eliminando el Módulo de imagen que puede encontrar en la primera columna de esa fila.
Cambiar la configuración de la fila n.º 1
Estructura de la columna
Tendremos que hacer algunas modificaciones en la configuración de esta fila para que se vea como queremos. Comience por cambiar la estructura de la columna en una columna en lugar de dos.
Color de fondo
A continuación, agregue un color de fondo blanco a su fila.
Imagen de fondo
Reutilizaremos un patrón de fondo que puede encontrar en su biblioteca de medios llamado ‘divider.png’. Después de haber seleccionado este patrón como su imagen de fondo, aplique la siguiente configuración:
- Tamaño de la imagen de fondo: Tamaño real
- Imagen de fondo Repetir: Repetir
Alineación de filas
Crearemos estos testimonios de galería en el lado izquierdo y derecho de su página. Comenzaremos con el lado izquierdo y para eso, necesitaremos aplicar una Alineación de fila izquierda a nuestra fila.
Espaciado
Abra la configuración de Espaciado a continuación y agregue un margen personalizado y relleno a su fila:
- Margen superior: 50px
- Relleno superior e inferior: 0px
Sombra de la caja
Por último, también vamos a jugar con la sombra del cuadro de esta fila para crear un bonito efecto:
- Posición horizontal de la sombra del cuadro: 60px
- Posición vertical de la sombra del cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: 37px
- Color de sombra: #ded5d8
- Posición de la sombra del cuadro: Sombra exterior
Cambiar la configuración del módulo de texto
Eliminar color de fondo
El módulo de texto que puede encontrar en esta fila ya tiene un montón de configuraciones que queremos conservar. Sin embargo, también tendremos que hacer algunas modificaciones para que coincida con nuestro resultado final. Lo primero que deberá hacer una vez que abra la configuración del Módulo de texto es eliminar el color de fondo que se le ha aplicado.
Espaciado
Este módulo de texto también tiene un margen personalizado aplicado. Continúe y elimine todo el margen personalizado ya que no lo necesitaremos.
Clonar módulo de texto y colocar debajo del módulo de texto anterior
Ubique el módulo de texto en la página
El siguiente elemento que necesitaremos en nuestra fila es el Módulo de texto que contiene los nombres de los testificadores. Vamos a ahorrarnos algo de tiempo y reutilizar uno de los Módulos de texto que ya puedes encontrar en la página. Continúe y localice el siguiente módulo de texto y clónelo:
Colocar en Fila
Coloque el módulo de texto clonado justo debajo del módulo de texto anterior en su fila de testimonios.
Cambiar contenido
Cambie el contenido a los nombres que desea que aparezcan en su testimonio.
Cambiar la configuración de texto
Luego, abra la configuración de texto y realice los siguientes cambios:
- Encabezado 6 Alineación de texto: Derecha
- Título 6 Tamaño del texto: 77px
Cambiar espaciado
Vamos a hacer que este módulo de texto superponga la sombra del cuadro de la fila y el fondo de la sección aplicando la siguiente configuración de espaciado:
- Margen superior: -50px
- Margen derecho: -150px
- Relleno inferior: 20px
Cambiar Opacidad
También vamos a aumentar la opacidad de nuestro módulo de texto a ’17 %’ para que sea un poco más llamativo.
Añadir Fila #2
Estructura de la columna
Hemos terminado la fila de testimonios. El siguiente paso es agregar la galería adjunta. Para esto, vamos a usar una nueva fila con la siguiente estructura de columnas:
Alineación de filas
También queremos empujar esta galería al lado izquierdo de la página usando la alineación de fila izquierda.
Dimensionamiento
Para crear la galería simplemente vamos a utilizar un Módulo de Imagen para cada una de las columnas. Para borrar el espacio entre columnas y crear un resultado coherente, aplique la siguiente configuración al Tamaño de su fila:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Abra la configuración de Espaciado a continuación y aplique el siguiente margen personalizado y relleno a su fila:
- Margen inferior: 80px
- Margen izquierdo: 50px
- Relleno superior e inferior: 0px
Agregar módulo de imagen a la columna 1
Cargar imagen
Aunque necesitaremos cuatro módulos de imagen en total, vamos a comenzar creando uno y luego clonándolo en las otras columnas para ahorrarnos tiempo y esfuerzo. Agregue un módulo de imagen a la primera columna de su fila y cargue una imagen de su elección.
Abrir en Lightbox
Brinde a los usuarios la posibilidad de ver la imagen en un formato más grande al habilitar la opción ‘Abrir en Lightbox’ en la configuración de enlaces de su Módulo de imagen.
Filtrar
También vamos a disminuir el brillo de nuestro módulo de imagen a ‘47%’ en la configuración de filtros. La aplicación de esta configuración es parte del sutil efecto de desplazamiento que agregaremos a las imágenes de nuestra galería.
ID de CSS
Vamos a usar una ID de CSS para eliminar el filtro al pasar el mouse más adelante en esta publicación, así que continúe y agregue ‘image-hover’ a la ID de CSS de su módulo de imagen.
Clonar módulo de imagen 3 veces y cambiar imágenes
Ahora puede clonar el módulo de imagen tres veces y colocarlo en las columnas restantes. Cambia la imagen de cada una de las columnas según tus necesidades.
Crear testimonio en el lado opuesto
Clonar ambas filas existentes
Para crear exactamente el mismo testimonio de la galería en el lado opuesto, necesitaremos hacer algunos cambios. Comience clonando ambas filas.
Cambiar la alineación de filas de ambas filas
Luego, cambie la alineación de fila de ambas filas a la derecha. Notarás que la segunda fila aún no sigue. Eso es porque necesitaremos modificar la configuración de espaciado en uno de los siguientes pasos.
Cambiar la sombra del cuadro de la fila #1
En lugar de usar ’60px’ para la repetición horizontal de su primera fila, use ‘-60px’ en su lugar.
Cambiar el espaciado de la fila n.º 2
Elimine el margen izquierdo de su segunda fila y agregue ’50px’ a la derecha en su lugar. Una vez que lo haga, notará que su fila también ha sido empujada hacia el lado derecho.
Cambiar la orientación y el espaciado del texto del segundo módulo de texto
El módulo de texto que contiene los nombres de las personas que testifican también debe empujarse hacia la izquierda. Para hacer eso, comience usando la Alineación de texto a la izquierda en la configuración de texto del Título 6.
Elimine también el margen derecho y agregue ‘-150px’ al margen izquierdo.
Agregar efecto de desplazamiento
Configuración de la página abierta
Lo último que queda por hacer para este tutorial es agregar las líneas de código CSS que habilitarán el efecto de desplazamiento. Para ello, abra la configuración de su página haciendo clic en el siguiente icono en la parte inferior de su página:
Eliminar filtro al pasar el mouse con código CSS
Lo único que vamos a hacer es eliminar el filtro que hemos aplicado a nuestro módulo de imagen al pasar el mouse usando las siguientes líneas de código CSS y listo:
|
01
02
03
|
#image-hover:hover {filter: none;} |
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado final en diferentes tamaños de pantalla.
En vuelo estacionario
Pensamientos finales
En esta publicación de blog de casos de uso, le mostramos cómo crear impresionantes testimonios de galería utilizando el paquete de diseño del planificador de bodas de Divi . Estos testimonios de la galería lo ayudan a vincular testimonios a su cartera y acercarse un paso más a la conversión de visitantes en clientes potenciales y, finalmente, en clientes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!