Descargue un diseño de presentación / clic de escaparate de cliente GRATIS y avanzado para Divi


Las personas se relacionan con otras personas. Por eso, en casi cualquier sitio web que visite, verá aparecer caras. De clientes anteriores a miembros del equipo y más; cuanto antes muestre a los clientes y a las personas detrás de su empresa, mayores serán sus posibilidades de convencerlos de que su empresa, marca o producto es el adecuado. En esta publicación, nos centraremos en mostrar a sus clientes de una manera hermosa y avanzada. ¡También podrás descargar el archivo JSON gratis!

¡Hagámoslo!

Avance

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

Escritorio

escaparate del cliente

Móvil

escaparate del cliente

Descargar The Client Showcase Hover / Click Design GRATIS

Para poner sus manos en el diseño gratuito de mostrar / hacer clic en el escaparate del cliente, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

Agregar nueva sección

Lo primero que deberá hacer es agregar una nueva sección regular a la página en la que está trabajando.

escaparate del cliente

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

escaparate del cliente

Dimensionamiento

Antes de agregar cualquier módulo, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 100%
  • Ancho Máx .: 100%

escaparate del cliente

Espaciado

Elimine el relleno superior e inferior predeterminado de la fila siguiente.

  • Relleno superior: 0px
  • Relleno inferior: 0px

escaparate del cliente

Configuración de columna 2

Continúa abriendo la configuración de la segunda columna.

escaparate del cliente

Espaciado

Agregue algunos valores de relleno personalizados a la columna.

  • Relleno superior: 9vw
  • Acolchado inferior: 9vw
  • Relleno izquierdo: 8vw
  • Relleno derecho: 8vw

escaparate del cliente

Agregar módulo de texto a la columna 1

Agregar H3 y contenido de párrafo

Una vez que haya completado la configuración de fila y columna, continúe agregando un Módulo de texto a la columna 1. Agregue la información del cliente al cuadro de contenido.

escaparate del cliente

Fondo degradado

Vaya a la configuración de fondo a continuación y aplique el siguiente fondo degradado:

  • Color 1: rgba (43,135,218,0)
  • Color 2: rgba (0,0,0,0.55)
  • Coloque el gradiente sobre la imagen de fondo: Sí

escaparate del cliente

Imagen de fondo

Sube una imagen de fondo también.

escaparate del cliente

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Lato
  • Color del texto: #dbdbdb
  • Tamaño del texto: 1vw (escritorio), 1.8vw (tableta), 2.3vw (teléfono)
  • Altura de la línea de texto: 1.5vw (escritorio), 2vw (tableta), 2.5vw (teléfono)

escaparate del cliente

Encabezado 3 Configuración de texto

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

  • Título 3 Fuente: Playfair Display
  • Título 3 Peso de la fuente: negrita
  • Título 3 Color del texto: #ffffff
  • Encabezado 3 Tamaño del texto: 3vw (escritorio), 4vw (tableta), 5vw (teléfono)
  • Encabezado 3 Altura de línea: 1.6em

escaparate del cliente

Espaciado

Continúe yendo a la configuración de espacio y diseñando la forma y posición del módulo en consecuencia:

  • Margen superior: 9vw
  • Margen inferior: 9vw
  • Margen izquierdo: 7vw (escritorio), 16vw (tableta), 17vw (teléfono)
  • Margen derecho: 7vw (escritorio), 16vw (tableta), 17vw (teléfono)
  • Relleno superior: 32vw (escritorio), 55vw (tableta), 49vw (teléfono)
  • Acolchado inferior: 3vw (escritorio), 6vw (tableta y teléfono)
  • Acolchado izquierdo: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
  • Relleno derecho: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

escaparate del cliente

Sombra de la caja

También estamos agregando una sombra de caja colorida.

  • Posición horizontal de la sombra de la caja: 0px
  • Posición vertical de la sombra de la caja: 0px
  • Fuerza de propagación de la sombra de la caja: 7vw
  • Color de sombra: # ffcf0f

escaparate del cliente

ID de CSS

Complete la configuración del módulo agregando una ID de CSS.

  • ID de CSS: photo-display-1

escaparate del cliente

Clonar el módulo de texto cinco veces

Una vez que haya completado el primer Módulo de texto, continúe y clónelo 5 veces.

escaparate del cliente

Cambiar contenido e imagen de fondo de cada duplicado

Cambie el contenido y la imagen de fondo en cada duplicado.

escaparate del cliente

Cambiar el color de la sombra de la caja de cada duplicado

Junto con la caja de sombra.

  • Color de sombra: # 9f89ed

escaparate del cliente

Cambiar la ID de CSS de cada clase duplicada y agregar CSS

Cada módulo de texto en la columna 1 necesita una ID de CSS única. El primer módulo de texto en la columna contiene la ID de CSS "photo-display-1", el segundo necesita la "photo-display-2", la tercera "photo-display-3", y así sucesivamente. Agregue también una clase CSS a cada módulo de texto duplicado (asegúrese de no agregar uno al módulo de texto original).

  • ID de CSS: photo-display-2 (de 2 a 6)
  • Clase CSS: photo-hide-first (todos los módulos de texto en la columna 1 excepto el primero)

escaparate del cliente

Agregue el módulo de texto n. ° 1 a la columna 2

Añadir contenido H2

Una vez que haya completado los 6 módulos en la columna 1, puede pasar a la segunda columna. Allí, el primer módulo que necesitaremos es un Módulo de texto con algún contenido H2.

escaparate del cliente

Configuraciones de texto H2

Vaya a la pestaña de diseño y modifique la configuración del texto H2 en consecuencia:

  • Título 2 Fuente: Playfair Display
  • Título 2 Color del texto: # 636363
  • Encabezado 2 Tamaño del texto: 3vw (escritorio), 6vw (tableta y teléfono)
  • Encabezado 2 letras espaciadas: 0.1vw
  • Encabezado 2 Altura de línea: 1.2em

escaparate del cliente

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido

Agregue otro módulo de texto a la columna 2 con algún contenido de párrafo de su elección.

escaparate del cliente

Configuraciones de texto

Pase a la pestaña de diseño y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Lato
  • Alineación de texto: justificar
  • Tamaño del texto: 0.9vw (escritorio), 2vw (tableta), 2.7vw (teléfono)
  • Altura de la línea de texto: 2.1em

escaparate del cliente

Espaciado

Modifique los valores de margen en la configuración de espaciado también.

  • Margen superior: 2vw
  • Margen inferior: 2vw
  • Margen derecho: 7vw

escaparate del cliente

Agregar módulo divisor a la columna 2

Visibilidad

En el siguiente módulo, que es un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: sí

escaparate del cliente

Línea

Pase a la pestaña de diseño y cambie el color de la línea.

  • Color de línea: # 636363

escaparate del cliente

Espaciado

A continuación, modifique los valores de margen en diferentes tamaños de pantalla.

  • Margen inferior: 7vw
  • Margen izquierdo: 14vw (escritorio), 39vw (tableta), 38vw (teléfono)
  • Margen derecho: 14vw (escritorio), 39vw (tableta), 38vw (teléfono)

escaparate del cliente

Transformar Rotar

Gire el módulo divisor.

  • Izquierda: 90 grados

escaparate del cliente

Transformar Traducir

Y vuelva a colocarlo utilizando algunos valores de traducción de transformación personalizados en diferentes tamaños de pantalla.

  • Derecha: 2vw (escritorio), 3vw (tableta y teléfono)
  • Abajo: -17.3vw (escritorio), -43vw (tableta y teléfono)

escaparate del cliente

Agregue el módulo de texto n. ° 3 a la columna 2

Agregar contenido

El siguiente módulo que necesitamos es otro Módulo de texto. Asegúrese de agregar el nombre del cliente correspondiente al cuadro de contenido (coincídalo con el primer módulo de texto en la columna 1).

escaparate del cliente

Configuraciones de texto

Pase a la pestaña de diseño y modifique la configuración de texto en consecuencia:

  • Fuente de texto: Lato
  • Estilo de fuente de texto: mayúscula
  • Tamaño del texto: 1.3vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
  • Espacio entre letras de texto: 1 px
  • Altura de la línea de texto: 1.2em

escaparate del cliente

Espaciado

Agregue un poco de margen superior e inferior personalizados a continuación.

  • Margen superior: 1em
  • Margen inferior: 1em

escaparate del cliente

ID de CSS

Pase a la pestaña de diseño y agregue una ID de CSS. Asegúrese de que el número sea el mismo que el módulo de texto correspondiente en la columna 1.

  • ID de CSS: photo-click-1

escaparate del cliente

Clone Text Module # 3 Five Times

Una vez que haya completado el primer módulo de texto del cliente, clónelo 5 veces.

escaparate del cliente

Cambiar el contenido de cada duplicado (coincidir con módulos de texto en la columna 1)

Cambie el nombre del cliente en cada módulo de texto duplicado.

escaparate del cliente

Cambiar la ID de CSS de cada duplicado

Y haga coincidir la ID de CSS de cada duplicado con el Módulo de texto en la columna 1.

  • ID de CSS: photo-click-2 (de 2 a 6)

escaparate del cliente

Agregue el módulo de código n. ° 1 a la columna 2

Insertar código CSS

La última parte de este tutorial se centra en hacer que funcione la funcionalidad de desplazamiento. Agregue un primer módulo de código a la columna 2 e inserte las siguientes líneas de código CSS:

escaparate del cliente

Agregue el Módulo de Código # 2 a la Columna 2

Insertar código JQuery

Agregue otro módulo de código justo debajo del anterior e inserte el siguiente código jQuery para que la función de desplazamiento funcione:


escaparate del cliente

Avance

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

Escritorio

escaparate del cliente

Móvil

escaparate del cliente

Pensamientos finales

En esta publicación, le mostramos cómo crear un hermoso escaparate de clientes que puede usar en cualquier sitio web que cree. Hemos combinado las opciones integradas de Divi con algún código jQuery para que el enfoque funcione. ¡También pudiste descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, asegúrese de 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.