Los testimonios son una parte importante de la construcción de un negocio. El módulo de testimonios de Divi facilita mostrar lo que sus clientes dicen sobre usted y su trabajo, pero también tiene la limitación de que los testimonios se encuentran dentro de sus módulos específicos. Esto dificulta modificar el diseño de los módulos porque hay que personalizar cada uno individualmente. Además, muestra solo un testimonio.
Un complemento de terceros llamado Testimonial Slider agrega tres nuevos módulos a Divi Builder para mostrar testimonios de una biblioteca con categorías. Con los nuevos módulos, puede mostrar los testimonios dentro de una cuadrícula o uno a la vez dentro de un control deslizante, y personalizar el módulo una vez que todos los testimonios coincidan.
En este artículo vamos a echar un vistazo más de cerca a Testimonial Slider. En estos ejemplos, estoy usando imágenes y diseños de varios paquetes de diseño que incluyen:
- Paquete de diseño de Photo Marketplace
- Paquete de diseño de agencia web
- Paquete de diseño de diseño de interiores
Estoy usando Testimonial Slider versión 1.2. y Divi 3.0.98.
Se agrega un nuevo elemento de menú al menú del tablero llamado Testimonios . Aquí encontrará Todos los testimonios (que se ven en la imagen de arriba), Agregar nuevo y Categoría de testimonios . Todos los testimonios enumera todos los testimonios que ha agregado y le permite editar, editar rápidamente, eliminar, ver, ver por categoría, ordenar por fecha y buscar. También puede agregar un nuevo testimonio desde aquí.
Add New proporciona un editor de WordPress TinyMCE donde puede crear el testimonio. Aquí puede crear categorías, agregar la imagen y proporcionar información de testimonio (nombre, nombre de la empresa y URL) que se mostrará como información para el testimonio.
Testimonial Category es un editor de categorías para Testimonial Slider. Funciona exactamente igual que el editor de categorías estándar de WordPress.
Configuración de la página de archivo del control deslizante de testimonios
En el menú del tablero, ve a Divi > Configuración de testimonios . Aquí puede configurar el slug de la página de archivo, ajustar la configuración de la página de archivo, elegir mostrar en una cuadrícula o lista, la cantidad de testimonios por página, mostrar el filtro, la paginación y el enlace de la página de detalles. También tiene una pestaña CSS personalizada para que puedas apuntar a esta página específica.
Módulos deslizantes de testimonios
Se agregan tres nuevos módulos a Divi Builder:
- Testimonios filtrables
- Control deslizante de cuadrícula de testimonios
- Control deslizante de testimonios
Testimonios filtrables
La configuración de contenido para el módulo Filtrable incluye el diseño (elegir entre cuadrícula o lista), la cantidad de testimonios para mostrar, ordenar por, igual altura, mostrar el ícono de cotización, mostrar la imagen, mostrar el filtro de categoría, qué categoría mostrar y el color de fondo.
La configuración de la pestaña Diseño incluye el texto del cuerpo, el texto del nombre del cliente, el texto del nombre de la empresa, el borde, la sombra del cuadro y la animación.
La pestaña Avanzado le brinda acceso a CSS a todos los elementos básicos más el cuadro de testimonios, el filtro de categoría, el filtro de categoría activo, la imagen de testimonio, el ícono, el texto, el nombre, el nombre de la empresa, la paginación, la paginación al pasar el mouse y la paginación actual.
Aquí hay un vistazo a su configuración predeterminada.
Control deslizante de cuadrícula de testimonios
La configuración del contenido del control deslizante de cuadrícula incluye diseño (de 1 a 4 columnas), velocidad, habilitar o deshabilitar cada uno de los elementos y opciones de color para cada uno de los elementos, incluido el punto de navegación. Las pestañas Diseño y Avanzado son las mismas que el módulo Filtrable, excepto que la pestaña Avanzado agrega CSS para la navegación de puntos.
Aquí hay un vistazo a su configuración predeterminada. La navegación de puntos se agrega en la parte inferior.
Control deslizante de testimonios
La pestaña Contenido del control deslizante de Testimonios agrega flechas, imágenes cuadradas o redondas con ajustes de tamaño, una superposición de texto, deslizamiento automático al pasar el mouse y muestra una imagen en un tamaño específico. También agrega ajustes de fondo usando imágenes y fondos sólidos. No incluye degradados ni video. La pestaña Diseño agrega radio de borde de superposición de texto y color de flecha. La pestaña Avanzado agrega CSS personalizado para la flecha.
Aquí está el testimonio con la configuración predeterminada. La imagen del testimonio activo se eleva y muestra la imagen sin una superposición. La imagen inactiva tiene una superposición (en este caso, está oscurecida). Muestra la imagen sin la superposición a medida que pasa el cursor sobre ella.
Testimonios Ejemplos filtrables
Estoy usando la sección de testimonios del paquete de diseño de Photo Marketplace. La imagen de arriba es esa sección tal como se ve cuando la subes. Este diseño usa tres módulos de testimonios, sin embargo, con Testimonial Slider solo necesitaremos usar un módulo porque trae los testimonios de la lista prefabricada y los muestra en el diseño de cuadrícula que elijamos.
El módulo Testimonial Filterable que muestra un diseño de cuadrícula. He hecho el texto blanco o gris claro. Los testimonios muestran automáticamente el fondo azul.
Agregué un color de fondo a los testimonios y los puse a la misma altura. Este módulo no tiene un ajuste de color para el icono de cotización y no puede establecer la imagen en un cuadrado.
Este usa el diseño de lista. He filtrado por categoría, por lo que la lista mostrará 3 testimonios. No muestran la categoría dentro de los propios testimonios. Las imágenes se muestran automáticamente como cuadrados. No hay una opción para cambiarlo.
Además, no pude agregar relleno (sin usar CSS) al lado izquierdo de las imágenes para alejarlo del borde. Me gustaría ver algunas funciones de la imagen para poder mover la imagen a diferentes ubicaciones, cambiar tamaños, etc. También me gustaría una función para ajustar el texto del filtro.
Aquí hay un ejemplo usando el paquete de diseño de diseño web.
Testimonios Grid Slider Ejemplos
El control deslizante de cuadrícula de testimonios muestra una cuadrícula que desliza una tarjeta a la vez. El único cambio que hice en este ejemplo fue hacer que el texto fuera blanco.
Aquí personalicé los colores para el cuerpo del texto, el nombre, el nombre de la empresa, el fondo, el ícono de cotización y los puntos de navegación. Este utiliza una cuadrícula de 2 columnas.
Aquí una grilla de 4 columnas. También estoy igualando las alturas.
Aquí hay un diseño de 1 columna. Aumenté los tamaños de fuente, cambié los colores, agregué una sombra de cuadro y redondeé las esquinas.
Aquí hay una cuadrícula de 2 columnas con sombra de cuadro. Reduje los píxeles de las esquinas y ajusté los colores nuevamente.
Aquí está el Control deslizante de cuadrícula de testimonios colocado dentro del paquete de diseño de diseño web usando texto y colores para que coincida con el diseño.
Ejemplos de controles deslizantes de testimonios
Este es el diseño predeterminado del módulo Control deslizante de testimonios. Podemos hacer que encaje dentro del diseño fácilmente.
Aquí he cambiado el color de todo el texto y el icono de la cita a blanco y he hecho que el fondo sea azul para que coincida con la sección.
En este ejemplo, he cambiado el fondo a un crema más claro y he vuelto a cambiar los colores del texto y los iconos. Esta vez cada elemento tiene su propio color. He configurado la imagen para que se muestre como cuadrada. Si elige cuadrado, se le dan un par de campos donde puede establecer el tamaño de las imágenes en píxeles. Lo he dejado en el valor predeterminado de 80 px. Cada imagen cambia de tamaño y se alinea perfectamente aunque elegí imágenes en varios tamaños.
Este muestra una imagen de fondo con superposición de texto, que coloca la superposición solo detrás del texto del cuerpo. Puede hacer que el texto se superponga en cualquier color que desee. Cambié los colores y tamaños de la fuente, la flecha y el ícono de cotización, e hice las imágenes cuadradas con 120 píxeles de ancho y 60 píxeles de alto para crear una forma rectangular.
Aquí está el Control deslizante de testimonios colocado dentro del paquete de diseño de diseño de interiores. Reemplacé el módulo de testimonios original con el Control deslizante de testimonios usando los mismos colores y fuentes. El original tenía una imagen circular, pero hice las imágenes cuadradas para que coincidieran con el diseño. El módulo encaja muy bien con el diseño de este diseño.
Este es un ejemplo del uso del Control deslizante de testimonios como un control deslizante de logotipo. Desactivé el texto del nombre del cliente, el texto del nombre de la empresa, la imagen del cliente y el ícono de cotización. Coloqué los logotipos en el editor visual y elegí una sola categoría.
Uso del control deslizante de testimonios con extra
Testimonial Slider funciona igual de bien con Extra . He aquí un vistazo a la parte de testimonios del diseño de diseño de interiores utilizando el módulo Control deslizante de testimonios.
Licencia deslizante testimonial
Incluye soporte de 6 meses (ampliable a 12 meses) y actualizaciones de por vida. Hay dos licencias para elegir:
- Regular (para uso en un sitio web) – 25,00 €
- Extendido (para uso en sitios web ilimitados) – 85,00 €
Puede comprar Testimonial Slider desde el sitio web del desarrollador .
pensamientos finales
Encontré Testimonial Slider fácil de usar. Pude crear prácticamente cualquier tipo de diseño de control deslizante que quisiera. Hay algunas características que me gustaría ver añadidas. Por ejemplo, puede controlar el tamaño y la forma de las imágenes cuadradas pero no las redondas. Por supuesto, puede hacer muchos ajustes adicionales con CSS, por lo que esto ayuda con las funciones que no están disponibles en la configuración si se siente cómodo con CSS.
Existen algunas limitaciones entre los módulos, pero con los tres módulos y el hecho de que tienen diferentes opciones, Testimonial Slider ofrece muchas funciones. Una de mis características favoritas fue la capacidad de seleccionar categorías para mostrar. Puede elegir tantas categorías como desee, creando un control deslizante de testimonios específico para una página o servicio específico. Si está interesado en un control deslizante de testimonios, vale la pena echarle un vistazo.
Queremos escuchar de ti. ¿Has probado el Testimonial Slider? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de Blablo101 / shutterstock.com