Descargue un diseño de exhibición de cliente GRATUITO y avanzado al pasar el mouse o hacer clic para Divi

Las personas se relacionan con otras personas. Es por eso que en casi cualquier sitio web que visite, verá aparecer caras. Desde clientes anteriores hasta miembros del equipo y más; cuanto antes muestre a los clientes y 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á descargar el archivo JSON 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 Hover/Click de The Client Showcase GRATIS

Para poner sus manos en el diseño de pasar el mouse/hacer clic en la exhibición del cliente gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

¡Empecemos a Recrear!

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.

Agregar nueva fila

Estructura de la columna

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

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ón personalizado: Sí
  • Ancho del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

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

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

Configuración de la columna 2

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

Espaciado

Agregue algunos valores de relleno personalizados a la columna.

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

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 filas y columnas, continúe agregando un módulo de texto a la columna 1. Agregue la información del cliente al cuadro de contenido.

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 degradado sobre la imagen de fondo: Sí

Imagen de fondo

Sube una imagen de fondo también.

Configuración de texto

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

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

Encabezado 3 Ajustes de texto

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

  • Título 3 Fuente: Playfair Display
  • Encabezado 3 Peso de fuente: Negrita
  • Título 3 Color del texto: #ffffff
  • Título 3 Tamaño del texto: 3vw (Escritorio), 4vw (Tableta), 5vw (Teléfono)
  • Encabezado 3 Altura de línea: 1,6 em

Espaciado

Continúe yendo a la configuración de espaciado 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)
  • Acolchado superior: 32vw (escritorio), 55vw (tableta), 49vw (teléfono)
  • Acolchado inferior: 3vw (escritorio), 6vw (tableta y teléfono)
  • Relleno izquierdo: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)
  • Relleno derecho: 2vw (escritorio), 4vw (tableta), 5vw (teléfono)

Sombra de la caja

También estamos agregando una sombra de caja colorida.

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

ID de CSS

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

  • ID de CSS: foto-display-1

Clonar módulo de texto cinco veces

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

Cambiar el contenido y la imagen de fondo de cada duplicado

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

Cambiar el color de la sombra del cuadro de cada duplicado

Junto con la sombra de la caja.

  • Color de sombra: #9f89ed

Cambiar ID de CSS de cada duplicado y agregar clase de CSS

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

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

Agregue el Módulo de Texto #1 a la Columna 2

Agregar 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 algo de contenido H2.

Configuración de texto H2

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

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

Agregue el Módulo de Texto #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.

Configuración de texto

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

  • Fuente del texto: Lato
  • Alineación de texto: Justificar
  • Tamaño del texto: 0.9vw (Escritorio), 2vw (Tableta), 2.7vw (Teléfono)
  • Altura de línea de texto: 2,1 em

Espaciado

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

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

Agregue el módulo divisor a la columna 2

Visibilidad

Pasamos al siguiente módulo, que es un módulo divisor. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

  • Mostrar divisor: Sí

Línea

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

  • Color de línea: #636363

Espaciado

Modifique los valores de margen en diferentes tamaños de pantalla a continuación.

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

Transformar Rotar

Gire el módulo divisor.

  • Izquierda: 90 grados

Transformar Traducir

Y vuelva a colocarlo usando 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)

Agregue el Módulo de Texto #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 de cliente correspondiente al cuadro de contenido (compárelo con el primer módulo de texto en la columna 1).

Configuración de texto

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

  • Fuente del texto: Lato
  • Estilo de fuente de texto: Mayúsculas
  • Tamaño del texto: 1.3vw (escritorio), 2.5vw (tableta), 3vw (teléfono)
  • Espaciado entre letras de texto: 1px
  • Altura de línea de texto: 1,2 em

Espaciado

Agregue un margen superior e inferior personalizado a continuación.

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

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: foto-clic-1

Clonar el Módulo de Texto #3 Cinco Veces

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

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

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

Cambiar 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.

  • CSS ID: photo-click-2 (del 2 al 6)

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

Insertar código CSS

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

01
02
03
04
05
<style>
.photo-hide-first {
display: none;
}
</style>

Agregue el módulo de código n.º 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 funcione la función de desplazamiento:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
<script>
jQuery(function($){
 
$('#photo-click-1').css({'color': '#ffcf0f', 'font-weight': 'bold', 'padding-left': '0.5em'});
 
$('[id*="photo-click"]').hover(function() {
 
var selector1 = $(this).attr('id').replace('click', 'display');
var $photo = $('#' + selector1);
var $photoColor = $photo.css('box-shadow').replace(/^.*(rgba?([^)]+)).*$/,'$1')
 
$photo.siblings().hide();
$photo.show();
 
$('[id*="photo-click"]').css({'color': '', 'font-weight': '', 'padding-left': ''});
$(this).css({'color': $photoColor, 'font-weight': 'bold', 'padding-left': '0.5em'});
 
});
});
</script>

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 crear un hermoso escaparate para el cliente que puede usar en cualquier sitio web que cree. Hemos combinado las opciones integradas de Divi con código jQuery para que el enfoque funcione. ¡También pudo descargar el archivo JSON de forma gratuita! 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 de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.