Cómo reemplazar logotipos de clientes con testimonios al pasar el mouse / hacer clic con Divi

¿Busca una forma de agregar interacción a los logotipos de los clientes y testimonios coincidentes? Con la función de contenido receptivo de Divi, ahora es más fácil que nunca mostrar contenido diferente en el estado predeterminado de un módulo y al pasar el mouse. En el tutorial de Divi de hoy, lo demostraremos mostrándole cómo reemplazar los logotipos de los clientes con testimonios al pasar el mouse (escritorio) y hacer clic (tableta y teléfono). ¡Usaremos el módulo Blurb para ayudarnos a llegar allí! ¡También podrá descargar el archivo JSON del diseño de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargue el diseño de los logotipos del cliente GRATIS

Para poner sus manos en el diseño de logotipos de cliente gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Agregar nueva sección

Color de fondo

Comience agregando una nueva sección a una página nueva o existente. Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # 000000

Espaciado

Agregue un poco de acolchado superior e inferior personalizado también.

• Relleno superior: 200 px
• Acolchado inferior: 200px

Frontera

Complete la configuración de la sección agregando un borde blanco.

• Ancho del borde: 1vw
• Color del borde: #ffffff

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y aumente el ancho máximo de la fila.

• Ancho máximo: 1500px

Agregar módulo de texto a la columna

Agregar contenido receptivo H2

El primer módulo que necesitamos en esta fila es un módulo de texto con contenido H2 receptivo.

• Escritorio: coloque el cursor sobre los logotipos del cliente para ver lo que tienen que decir.
• Tableta y teléfono: haga clic en los logotipos del cliente para ver lo que tienen que decir.

Configuración de texto H2

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto H2 de la siguiente manera:

• Fuente del título 2: Work Sans
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: #ffffff
• Tamaño del texto del encabezado 2: 40 px (escritorio), 30 px (tableta), 25 px (teléfono)

Agregar módulo divisor a la columna

Visibilidad

El siguiente y último módulo que necesitamos en esta fila es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Línea

Luego, cambie el color de la línea del módulo.

• Color de línea: #ffffff

Dimensionamiento

Modifique también la configuración de tamaño del módulo.

• Peso del divisor: 4px
• Ancho: 10%
• Alineación del módulo: centro

Espaciado

Complete la configuración del módulo agregando un margen superior.

• Margen superior: 100 px

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila justo debajo de la anterior y use la siguiente estructura de columnas para ella:

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño en diferentes tamaños de pantalla. Asegúrese de igualar también las alturas de las columnas, esto ayudará con el siguiente paso; centrando el contenido de la columna.

• Ecualizar alturas de columna: Sí
• Ancho: 100% (escritorio), 80% (tableta y teléfono)
• Ancho máximo: 1500px
• Altura mínima: 500px (escritorio), automático (tableta y teléfono)

Elemento principal

Para centrar el contenido de la columna de su fila, deberá 1) habilitar la opción 'Equalize Column Heights' (paso anterior) y 2) agregar la siguiente línea de código CSS al elemento principal de su fila:

align-items: center;

Agregar módulo Blurb a la columna

Dejar vacío el contenido predeterminado

Ahora, para reemplazar los logotipos de los clientes al pasar el mouse, usaremos los módulos de Blurb. Comience con el primero en la columna 1. Asegúrese de dejar el título predeterminado y el contenido del cuerpo vacíos, pero continúe habilitando la opción de desplazamiento en ambos.

Agregar contenido al pasar el mouse

Inserte algún contenido escrito de su elección en ambos campos flotantes.

Imagen por defecto

Continúe cargando el logotipo de una empresa de su elección en la configuración de imagen e ícono.

Eliminar imagen al pasar el mouse

Reemplazaremos los logotipos del cliente al pasar el mouse eliminándolos por completo en su estado de desplazamiento.

Colocar el cursor sobre el color de fondo

Como puede notar en la vista previa de esta publicación, también estamos cambiando el color de fondo del módulo al pasar el mouse. No use un color de fondo predeterminado y agregue el siguiente código de color al pasar el mouse:

• Color de fondo: # 191919

Configuración de imagen / icono

Vaya a la pestaña de diseño del módulo y asegúrese de que se aplique la siguiente alineación de imagen / icono:

• Alineación de imagen / icono: centro

Configuración de texto

Como estamos usando un color de fondo de sección negro, cambiaremos el color del texto del módulo en la configuración de texto general.

• Color del texto: claro

Configuración del texto del título

A continuación, modifique la configuración del texto del título en consecuencia:

• Nivel de encabezado del título: H3
• Fuente del título: Work Sans
• Tamaño del texto del título: 24px
• Altura de la línea de título: 1.4em

Configuración del texto del cuerpo

Realice también algunos cambios en la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Color del texto del cuerpo: # 8c8c8c
• Altura de la línea del cuerpo: 2.5em

Espaciado predeterminado

Luego, vaya a la configuración de espaciado y asegúrese de que no haya un relleno personalizado en el estado predeterminado del módulo.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno izquierdo: 0px
• Relleno derecho: 0px

Espaciado de desplazamiento

Sin embargo, al pasar el mouse, estamos creando un espacio en blanco para nuestro testimonio utilizando los siguientes valores:

• Acolchado superior: 20px
• Acolchado inferior: 50px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Transición

Complete la configuración del módulo eliminando la duración de transición predeterminada. Esto permitirá que el testimonio aparezca de inmediato al pasar el mouse / hacer clic en el logotipo.

• Duración de la transición: 0 ms

Clone el módulo de Blurb dos veces y coloque los duplicados en las columnas restantes

Una vez que haya completado el primer módulo Blurb en la columna 1, puede clonar el módulo dos veces y colocar los duplicados en las columnas restantes de la fila.

Clonar toda la fila

Ahora puede clonar esta fila tantas veces como desee, dependiendo de cuántos logotipos de clientes desee mostrar.

Cambiar el contenido de desplazamiento de cada módulo de Blurb duplicado

Asegúrese de cambiar el logotipo del cliente en cada módulo Blurb duplicado.

Cambiar el logotipo de cada módulo de Blurb duplicado

¡Cambie también el contenido flotante de cada módulo duplicado y listo!

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo usar la función de opciones de respuesta de Divi para reemplazar los logotipos de los clientes con testimonios al pasar el mouse / hacer clic. Esta es una excelente manera de ahorrar espacio en sus páginas y crear un diseño interactivo en diferentes tamaños de pantalla. Además de mostrar el tutorial, también hemos compartido el archivo JSON de forma gratuita al principio de esta publicación. Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.