Cómo crear pestañas de testimonios personalizadas con Divi (¡Descarga GRATIS!)

Para muchas empresas, los testimonios son uno de los argumentos clave para conseguir nuevos clientes. Eso significa que prestar un poco más de atención a los testimonios en su sitio web nunca se desperdiciará. Dentro de Divi, hay muchas formas diferentes de compartir testimonios, utilizando el Módulo de testimonios de Divi, por ejemplo. Pero si está buscando un enfoque más interactivo, le encantará este tutorial. Le mostraremos cómo crear pestañas de testimonios personalizadas dentro de Divi. Una vez que alguien coloque el módulo Blurb a la izquierda, aparecerá un testimonio correspondiente a la derecha. Los efectos de transición en este diseño también son perfectos, lo que le ayuda a darle esa sensación adicional de personalización a su sitio web. ¡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 GRATIS el diseño de las pestañas de testimonios personalizados

Para poner sus manos en el diseño de pestañas de testimonios personalizados y gratuitos, 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 la página en la que está trabajando. Abra la configuración de la sección y agregue un color de fondo.

• Color de fondo: #ffefdb

Espaciado

Vaya a la pestaña de diseño de la sección y agregue algunos valores de margen y relleno personalizados.

• Margen superior: 5%
• Margen inferior: 5%
• Margen izquierdo: 5%
• Margen derecho: 5%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Frontera

Incluya también algunas esquinas redondeadas.

• Todas las esquinas: 20px

Agregar fila n. ° 1

Estructura de la columna

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

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un margen inferior.

• Margen inferior: 3%

Agregar módulo de texto a la columna

Agregar contenido H2

Es hora de agregar módulos, comenzando con un módulo de texto que contenga algo de contenido H2.

Configuración de texto H2

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

• Fuente del encabezado 2: Montserrat
• Peso de fuente del encabezado 2: Semi negrita
• Tamaño del texto del encabezado 2: 31px
• Espacio entre letras del encabezado 2: -1px

Agregar módulo divisor a la columna

Visibilidad

Justo debajo del módulo de texto, estamos agregando 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 del módulo y cambie el color de la línea a blanco.

• Color de línea: #ffffff

Dimensionamiento

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

• Peso del divisor: 10px
• Ancho: 14%
• Alto: 10px

Frontera

Y complete la configuración del módulo agregando algunas esquinas redondeadas a la configuración del borde.

• Todas las esquinas: 10px

Agregar fila n. ° 2

Estructura de la columna

A la siguiente fila. Utilice la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de filas e iguale las alturas de las columnas en la configuración de tamaño.

• Ecualizar alturas de columna: Sí

Configuración de la columna 2

Color de fondo

Luego, abra la configuración de la columna 2 y aplique un color de fondo.

• Color de fondo: # fffbf9

Espaciado

Vaya a la pestaña de diseño de la columna y aplique un poco de relleno superior e inferior en tamaños de pantalla más pequeños.

• Acolchado superior:
  • Escritorio: Ninguno
  • Tableta y teléfono: 300px
• Acolchado inferior
  • Escritorio: Ninguno
  • Tableta y teléfono: 300px

Frontera

Incluya también algunas esquinas redondeadas.

• Todas las esquinas: 10px

Agregue el módulo Blurb n. ° 1 a la columna 1

Agregar contenido

Es hora de agregar módulos, comenzando con un primer módulo de Blurb en la columna 1. Agregue algún contenido de su elección.

Cargar imagen de proporción 1: 1

Sube una imagen con una proporción de 1: 1 a continuación.

Color de fondo

Luego, aplique el siguiente color de fondo:

• Color de fondo: # d5d6ea

Configuraciones de imagen

También realice cambios en la configuración de la imagen.

• Ubicación de la imagen / icono: Izquierda
• Esquinas redondeadas de la imagen: 100px

Configuración del texto del título

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

• Fuente del título: Montserrat
• Peso de la fuente del título: Semi negrita
• Espaciado de letras de título: -1px

Configuración del texto del cuerpo

También estamos cambiando la configuración del texto del cuerpo.

• Fuente del cuerpo: Lato
• Tamaño del texto del cuerpo: 13px

Espaciado

A continuación, agregaremos algo de espacio alrededor del contenido de nuestro módulo aplicando los siguientes valores de relleno:

• Acolchado superior: 5%
• Acolchado inferior: 5%
• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Frontera

Agrega también algunas esquinas redondeadas.

• Todas las esquinas: 10px

Animación

De forma predeterminada, hay un efecto de animación aplicado a la imagen del módulo Blurb. Eliminaremos esta animación en la configuración de la animación.

• Animación de imagen / icono: sin animación

ID de CSS

Para crear el diseño de la pestaña de testimonios, necesitaremos agregar un código al final de este tutorial. Para prepararnos para eso, agregaremos una ID de CSS a la pestaña avanzada del Módulo Blurb.

• ID de CSS: testimonio-persona-1

Imagen y título de Blurb CSS

También estamos usando dos líneas de código CSS en la pestaña avanzada. Uno para la imagen de la propaganda y el otro para el título de la propaganda.

width: 25% !important;

margin-top: 25px;

Clonar el módulo Blurb tres veces

Una vez que haya completado el primer módulo Blurb, puede clonarlo tres veces.

Cambiar contenido e imágenes

Asegúrese de cambiar el contenido y las imágenes de cada módulo Blurb duplicado.

Cambiar colores de fondo

Junto con los colores de fondo.

• Duplicado 1: # fffed6
• Duplicado 2: # d7ecd9
• Duplicado 3: # f5d5cb

Cambiar las ID de CSS

Y, por supuesto, los ID de CSS. Utilice numeración consecutiva.

• Duplicado 1: testimonio-persona-2
• Duplicado 2: testimonio-persona-3
• Duplicado 3: testimonio-persona-4

Agregar módulo de texto de cotización a la columna 2

Agregar cotización al cuadro de contenido

Pasemos a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de texto con un carácter de cita.

Configuración de texto

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

• Fuente de texto: Playfair Display
• Color del texto: #ffefdb
• Tamaño del texto: 200px
• Altura de la línea de texto: 1em

Posición

Vuelva a colocar el módulo también.

• Posición: Absoluto
• Ubicación: arriba a la izquierda
• Desplazamiento horizontal: 5%

Agregar módulo de texto de testimonio a la columna 2

Agregar contenido testimonial

Pasemos al siguiente módulo de texto. Este estará dedicado a nuestro primer testimonio. El testimonio que coloque en el cuadro de contenido debe coincidir con el primer módulo de Blurb en la columna 1.

Configuración de texto

Cambie la configuración de texto del módulo en consecuencia:

• Fuente de texto: Lato
• Color del texto: # 000000
• Tamaño del texto: 20px
• Altura de la línea de texto: 2.1em
• Alineación de texto: centro

Dimensionamiento

Asegúrese de que el ancho también esté establecido en "100%".

• Ancho: 100%

Espaciado

Luego, agregue algunos valores personalizados de margen y relleno a la configuración de espaciado.

• Margen superior: 30%
• Acolchado izquierdo: 10%
• Acolchado derecho: 10%

ID de CSS

Y agregue una ID de CSS a la pestaña avanzada. El número al final de esta ID de CSS debe coincidir con el número al final de la ID de CSS del módulo de Blurb correspondiente.

• ID de CSS: testimonio-copia-1

Clonar el módulo de texto tres veces

Una vez que haya completado el primer módulo de texto testimonial, puede clonarlo tres veces.

Cambiar el contenido del testimonio

Asegúrese de cambiar el contenido del testimonio en los módulos duplicados.

Cambiar las ID de CSS

Junto con los ID de CSS. Asegúrate de seguir un orden consecutivo.

• Duplicado 1: testimonio-copia-2
• Duplicado 2: testimonio-copia-3
• Duplicado 3: testimonio-copia-4

Agregue la clase CSS al primer módulo de texto de testimonio

Y necesitaremos agregar una clase CSS al testimonio que queremos habilitar al principio. En este caso, ese es el primero.

• Clase CSS: show-testimonial

Agregar módulo de código debajo del módulo divisor (fila n. ° 1)

Ahora que tenemos todos los elementos en su lugar, es hora de hacer que suceda la magia. Agregue un nuevo módulo de código justo debajo del módulo divisor en la primera fila de la sección.

Agregar código CSS

Inserte las siguientes líneas de código CSS entre las etiquetas de estilo, como puede ver en la pantalla de impresión a continuación.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

Agregar código JQuery

A continuación, coloque las siguientes líneas de código JQuery entre las etiquetas de script, como puede ver en la pantalla de impresión a continuación, ¡y listo!

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

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 diseño de testimonio interactivo para cualquier tipo de sitio web que cree. Más específicamente, le mostramos cómo crear pestañas de testimonios personalizadas que se activan una vez que alguien coloca uno de los módulos de Blurb a la izquierda. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, 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.