Cómo crear pestañas de testimonios personalizados con división (¡descarga gratuita!)

Para muchas empresas, los testimonios son uno de los argumentos clave para obtener nuevos clientes. Esto significa que prestar atención adicional a los testimonios en su sitio web nunca se desperdiciará. Dentro de Div, hay muchas formas diferentes de compartir testimonios, utilizando el módulo de división testimonial, por ejemplo. Pero si está buscando un enfoque más interactivo, le gustará este tutorial. Le mostraremos cómo crear testimonios personalizados dentro del Div. Una vez que alguien mueva el módulo de la propaganda hacia la izquierda, aparecerá un testimonio adecuado a la derecha. Los efectos de transición en este diseño también son perfectos, lo que le ayuda a proporcionar personalización adicional a su sitio web. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto de las pestañas con testimonios personalizados de forma gratuita para poner su mano en la apariencia gratuita de testimonios personalizados, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección de fondo. Comience agregando una nueva sección a la página en la que trabaja. Abra la configuración de la sección y agregue un color de fondo.
Color de fondo: #fffdb
Espacio ir a la pestaña de diseño de la sección y agregue algunos valores de margen personalizado y llenado.

Margen superior: 5%
Margen inferior: 5%
Margen izquierdo: 5%
Marja derecha: 5%
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
El borde incluye algunas esquinas redondeadas.

Todas las esquinas: 20 PX
Agregue la estructura de la columna de la fila # 1 Continuar agregando primero a la sección utilizando la siguiente estructura de columna:

Espacio sin agregar módulos, abra la configuración de la fila y agregue un borde inferior.

Margen inferior: 3%
Agregue un módulo de texto a la columna Agregar el contenido de H2 es el momento de agregar módulos, comenzando con un módulo de texto que contiene un contenido H2.

Configuración de texto H2 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H2 en consecuencia:

2 Sección de fuentes: Montserrat
Título 2 Fuente de peso: semi audac
Rúbrica 2 Dimensión de texto: 31 Pxrubic 2 Spaction of Liters: -1 PX
Agregue el módulo Divisor a la visibilidad de la columna justo debajo del módulo de texto, agregue un módulo divisor. Asegúrese de que la opción “Show Divider” esté activada.
Divisor del espectáculo: si

La línea va a la pestaña Diseño del módulo y cambia el color de la línea en blanco.
Color de línea: #ffffff

Dimensión Modifique la configuración de tamaño.
Peso del divisor: 10 PX

Ancho: 14%
Altura: 10 PX
Borde y complete la configuración del módulo agregando algunas esquinas redondeadas a la configuración del borde.
Todas las esquinas: 10 PX

Agregue la fila # 2 La estructura de la columna pasamos la siguiente fila. Use la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila e iguale las alturas de la columna en la configuración del tamaño.

Igualar las alturas de la columna: sí

Configuración Columna 2 Color de fondo Luego abra la configuración de la columna 2 y aplique un color de fondo.
Color de fondo: # FFFBF9

Espacio ir a la pestaña Diseño de la columna vertebral y aplique algunos rellenos superior e inferior en tamaños de pantalla más pequeños.
Revestimiento superior:


Escritorio: ninguno
Tableta y teléfono: 300 PX
Revestimiento inferior
Escritorio: ninguno
Tableta y teléfono: 300 PX
El borde incluye algunas esquinas redondeadas.
Todas las esquinas: 10 PX

Agregar el módulo de blurb # 1 a la columna 1 Agregar contenido es el momento de agregar módulos, comenzando con el primer desenfoque en la columna 1. Agregue un contenido de su elección.
Sube una imagen 1: 1 Subir una imagen con una relación 1: 1.

Color de fondo y luego aplique el siguiente color de fondo:

Color de fondo: # D5D6EA

Configuración de imagen modificar y configuración de imagen.
Coloque la imagen / icono: esquinas redondeadas de natación izquierda: 100 PX

Configuración de texto de título Entonces, cambie la configuración del texto del título según:
Título de la fuente: Montserrat
Fuente de peso del título: semi audaz

Cartas de título de espacio: -1 PX
Configuración del texto del cuerpo Cambiar y la configuración del texto del cuerpo.
Font Corp: Lato
Tamaño del texto del cuerpo: 13 PX

Espacio, luego agregaremos espacio alrededor de nuestro contenido de módulo, aplicando los siguientes valores de llenado:

Revestimiento superior: 5%
Finamiento inferior: 5%

ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Border agregue algunas esquinas redondeadas.
Todas las esquinas: 10 PX
Animación predeterminada, hay un efecto de animación aplicado a la imagen del módulo de la propaganda. Eliminamos esta animación de la configuración de animación.

Animación de imagen / icono: sin animación
ID CSS Para crear el diseño de las pestañas de testimonio, necesitaremos agregar un código al final de este tutorial. Para prepararnos para esto, agregaremos un CSS ID a la pestaña avanzada del módulo de propaganda.

ID CSS: testimonial-persona-1
Imagen de propaganda y título CSS Usamos dos líneas de código CSS y en la pestaña avanzada. Uno para la imagen de la propaganda y el otro para el título de la propaganda. Ancho: 25%! Importante; margen-top: 25px;

Modo de propaganda de clona tres veces después de haber completado el primer módulo de blurbs, puede clonar tres veces.
Cambie el contenido y las imágenes Asegúrese de cambiar el contenido y las imágenes para cada propaganda duplicada.

Cambie los colores de fondo con los colores de fondo.

Duplicado 1: # fffed6

Duplicado 2: # d7ecd9

Duplicado 3: # F5D5CB
Cambie los ID de CSS y, por supuesto, los códigos CSS. Use numeración consecutiva.
Duplicado 1: testimonial-persona-2
Duplicado 2: testimonial-persona-3

Duplicado 3: testimonial-persona-4 adad Un módulo de cita de texto en la columna 2 Agregue una oferta al cuadro de contenido 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 Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: PlayFair Display
Color de texto: #ffefdb

Tamaño del texto: 200 PX

La altura de la línea de texto: 1em
Repose de posición y módulo.
Posición: Absoluto
Ubicación: superior izquierda
Brecha horizontal: 5%

Agregue un módulo de texto para testimonios en la columna 2 Agregue el interruptor de contenido de testimonio al siguiente módulo de texto. Se dedicará a nuestro primer testimonio. El testimonio que realiza 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:
Texto de fuente: Lato
Color de texto: # 000000

Tamaño de texto: 20 PX

La altura de la línea de texto: 2.1em
Alineación de texto: Centro
Dimensión Asegúrese de que el ancho esté establecido en “100%”.
Ancho: 100%
Espacio y luego, agregue algunos valores de margen marginal y llenado a la configuración de espaciado.
Margen superior: 30%

ENLIZACIÓN IZQUIERDA: 10%
Revelaje derecho: 10%

ID 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 del ID CSS del módulo de propaganda apropiado.
ID CSS: Testimonial-Child-1
Clone El módulo de texto tres veces Una vez que haya completado el primer módulo de texto testimonial, puede clonar tres veces.
Cambie el contenido del testimonio Asegúrese de cambiar el contenido del testimonio de los módulos duplicados.

Cambiar IDS CSS con IDS CSS. Asegúrese de seguir un comando consecutivo. Tupport 1: Testimonial-Copy-2
Duplicado 2: testimonial-copy-3

Duplicado 3: Testimonial-Copy-4

Agregue la clase CSS al primer testimonio del módulo de texto y tendremos que agregar una clase CSS al testimonio que queremos activar al principio. En este caso, este es el primero.

Clase CSS: Show-Strurdy
Agregue un módulo de código bajo el módulo divisor (fila 1) ahora, que tenemos todos los elementos en su lugar, es hora de hacer que la magia suceda. Agregue un nuevo módulo de código justo debajo del módulo divisor desde la primera fila de la sección.
Agregue el código CSS Ingrese 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 {
Visibilidad: ¡Visible! Importante;

Opacidad: 1! IMPORTANTE;
Arriba: 0! IMPORTANTE;

}

.Testimonial-activo {
Transform: traduceX (-10%);
}
[id*= “testimonial-persona”] {
-WebKit-Transition: todos los 0.5s facilitados;
-Moz-Transition: todos los 0.5s facilidad;
-O-transición: todos los 0.5s facilidad;
-Ms-Transition: todos los 0.5s facilidad;
Transición: todos los 0.5s facilidad;
Cursor: context-mane;
}
[Id*= “testimonial-child”] {
-WebKit-Transition: todos los 0.3s facilitados;
-Moz-Transition: todos los 0.3s facilitados;
-O-transición: todos los 0.3s facilitados;
-Ms-Transition: todos los 0.3s facilitados;
Transición: todos los 0.3 facilitados;
Posición: ¡Absoluto! Importante;
Arriba: -100px;
Abajo: auto;
Izquierda: 0;
Derecha: Auto;
Visibilidad: oculto;
Opacidad: 0;
}
Agregue el código jquey y luego coloque las siguientes líneas de código jQuery entre las etiquetas de los script como puede ver en la pantalla de impresión a continuación y ¡termine! JQuery (function ($) {
$ (documento) .Ready (function () {
$ (‘#testimonial-persona-1’). addClass (‘testimonial-active’);
$ (‘[id*= “testimonial-persona”]’). Hover (function () {var $ selector = $ (this) .attr (‘id’). reemplazar (‘persona’, ‘copiar’);
var $ testimonial = $ (‘#’ + $ selector);

$ (‘[id*= “testimonial-child”]’). removeClass (‘show-testimonial’);
$ testimonial.addclass (‘show-testimonial’);
$ (‘[id*= “testimonial-persona”]’). removeClass (‘testimonial-active’);
$ (this) .AddClass (‘testimonial-activo’);
});
});
});
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo crear un diseño de testimonio interactivo para cualquier tipo de sitio web que cree. Específicamente, le mostré cómo crear pestañas de testimonio personalizadas que se activen una vez que alguien pasa a uno de los módulos de propaganda izquierda. ¡Lograste descargar el archivo JSON gratis! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.