Descargue un diseño GRATUITO y avanzado de escaparate de clientes / haga clic en el diseño 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 les muestre a los clientes y a las personas que están 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 enfocaremos 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

Descargar The Client Showcase Hover / Click Design GRATIS

Para poner sus manos en el diseño de clic / desplazamiento del escaparate del 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

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 módulos, 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 de la canaleta: 1
• Ecualizar 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
• Acolchado 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 contenido de párrafo y H3

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

Imagen de fondo

Sube también una imagen de fondo.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del 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)

Configuración de texto del encabezado 3

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

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

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)
• Acolchado 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: photo-display-1

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.

Cambiar el contenido y la imagen de fondo de cada duplicado

Cambie 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 el ID de CSS de cada duplicado y agregar una clase de CSS

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

• CSS ID: 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)

Agregue el módulo de texto n. ° 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 del texto H2 en consecuencia:

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

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.

Configuración de texto

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

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

Espaciado

Modifique también los valores de los márgenes en la configuración de espaciado.

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

Agregar módulo divisor a la columna 2

Visibilidad

Pasemos 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

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

• Color de línea: # 636363

Espaciado

A continuación, modifique los valores de los márgenes 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)

Transformar Girar

Gire el módulo divisor.

• Izquierda: 90 grados

Transformar Traducir

Y reposicionarlo usando algunos valores de conversió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 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 (combínelo con el primer módulo de texto en la columna 1).

Configuración de texto

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

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

Espaciado

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

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

ID de CSS

Vaya 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 del módulo de texto correspondiente en la columna 1.

• ID de CSS: foto-clic-1

Clonar el módulo de texto n. ° 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 (coincidir con los módulos de texto en la columna 1)

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

Cambiar el ID de CSS de cada duplicado

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

• ID CSS: foto-clic-2 (de 2 a 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 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:

<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:

<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 de clientes que puede usar en cualquier sitio web que cree. Hemos combinado las opciones integradas de Divi con algo de código jQuery para que el enfoque funcione. ¡También pudo 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 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.