¿Busca una manera 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ás descargar el archivo JSON del diseño de forma gratuita!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

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

Escritorio

logotipos del cliente

Móvil

logotipos del cliente

¡Comencemos 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

logotipos del cliente

Espaciado

Agregue también algunos rellenos superiores e inferiores personalizados.

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

logotipos del cliente

Frontera

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

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

logotipos del cliente

Agregar fila # 1

Estructura de columna

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

logotipos del cliente

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áx .: 1500px

logotipos del cliente

Agregar módulo de texto a la columna

Agregar contenido H2 receptivo

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

  • Escritorio: Pase el cursor sobre los logotipos del cliente para ver lo que tienen que decir.
  • Tableta y teléfono: ¡Haga clic en los logotipos de los clientes para ver lo que tienen que decir!

logotipos del cliente

Configuraciones de texto H2

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

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

logotipos del cliente

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í

logotipos del cliente

Línea

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

  • Color de línea: #ffffff

logotipos del cliente

Dimensionamiento

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

  • Divisor de peso: 4px
  • Ancho: 10%
  • Alineación del módulo: centro

logotipos del cliente

Espaciado

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

  • Margen superior: 100 px

logotipos del cliente

Agregar fila # 2

Estructura de columna

Agregue otra fila justo debajo de la anterior y use la siguiente estructura de columna para ello:

logotipos del cliente

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.

  • Igualar alturas de columna: sí
  • Ancho: 100% (escritorio), 80% (tableta y teléfono)
  • Ancho Máx .: 1500px
  • Altura mínima: 500 px (escritorio), automático (tableta y teléfono)

logotipos del cliente

Elemento principal

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

01
align-items: center;

logotipos del cliente

Agregar módulo de difusión a la columna

Deje el contenido predeterminado vacío

Ahora, para reemplazar los logotipos de los clientes al pasar el mouse, usaremos 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 en blanco, pero continúe habilitando la opción de desplazamiento en ambos.

logotipos del cliente

Agregar contenido al pasar el mouse

Inserte contenido escrito de su elección en ambos campos de desplazamiento.

logotipos del cliente

Imagen por defecto

Continúe cargando el logotipo de la empresa que elija en la configuración de imagen e ícono.

logotipos del cliente

Eliminar imagen al pasar el mouse

Reemplazaremos los logotipos de los clientes al desplazarlos eliminándolos por completo en su estado de desplazamiento.

logotipos del cliente

Pase el color de fondo

Como puede observar 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

logotipos del cliente

Configuración de imagen / icono

Pase 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

logotipos del cliente

Configuraciones 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 general de texto.

  • Color del texto: claro

logotipos del cliente

Configuración del texto del título

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

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

logotipos del cliente

Configuración de 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

logotipos del cliente

Espaciado predeterminado

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

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

logotipos del cliente

Espaciado de desplazamiento

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

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

logotipos del cliente

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 sobre el logotipo.

  • Duración de transición: 0 ms

logotipos del cliente

Clone Blurb Module dos veces y coloque 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.

logotipos del cliente

Clonar toda la fila

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

logotipos del cliente

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

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

logotipos del cliente

Cambiar el logotipo de cada módulo de publicidad duplicado

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

logotipos del cliente

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!