Cómo crear un control deslizante compacto de testimonios para un encabezado en Divi

Agregar testimonios a su sitio es una forma efectiva de aumentar la credibilidad de su negocio (o marca) y generar confianza con los visitantes. Un control deslizante de testimonios es una herramienta conveniente para mostrar testimonios en un solo lugar. Con esto en mente, tiene sentido agregar un control deslizante compacto de testimonios a su encabezado para que esos testimonios sean una de las primeras cosas que el usuario ve cuando visita su sitio.

En este tutorial, le mostraremos cómo crear un control deslizante de testimonios compacto para mostrar testimonios breves en el encabezado de su sitio web. Para hacer esto, vamos a modificar el módulo deslizante de Divi de una manera divertida y única.

¡Empecemos!

Vistazo

Aquí está el control deslizante compacto de testimonios que construiremos usando el Módulo deslizante Divi. Esto es mejor que usar un complemento testimonial para un área visible tan pequeña: Divi puede manejarlo fácilmente.

Y aquí está el mismo control deslizante de testimonios agregado a un encabezado global.

Y así es como se ve en el móvil.

Descargue el diseño y la plantilla GRATIS

Para poner sus manos en los diseños de este tutorial, 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!

Importar el diseño a la biblioteca Divi

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora. Será el archivo JSON llamado «divi-short-testimonial-slider-module-layout.json».

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en el Divi Builder .

Importe la plantilla de encabezado al generador de temas Divi

Si desea importar una plantilla de encabezado con el control deslizante compacto de testimonios agregado al encabezado, deberá navegar por Creador de temas»>Divi > Generador de temas .

Luego use el ícono de portabilidad en la parte superior derecha de la página para importar el archivo JSON. Será el archivo llamado «divi-short-testimonial-slider-header-template.json».

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instala y activa el tema Divi .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Cómo crear un control deslizante compacto de testimonios en Divi

Agregar nueva fila y módulo deslizante

Para comenzar, agregue una fila de una columna a la sección.

Luego agregue un módulo deslizante a la fila.

Editar diapositiva

En la configuración del control deslizante, elimine la segunda diapositiva predeterminada en la pestaña de contenido y luego haga clic para editar la configuración de la diapositiva restante.

Contenido de la diapositiva

En la pestaña de contenido de la configuración de la diapositiva, actualice lo siguiente:

  • Título: “Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget”.
  • Texto del botón: Leer todo
  • Cuerpo: — Tatiana Gagelman

Una vez hecho esto, guarde la configuración de la diapositiva.

Actualizar la configuración del control deslizante

Duplicar diapositivas y ocultar controles

Después de actualizar la primera diapositiva con contenido, duplíquela para crear una o más diapositivas adicionales.

Luego, en el grupo de opciones Elementos, oculte los controles deslizantes actualizando lo siguiente:

  • Mostrar controles: NO

Actualizar fondo para todas las diapositivas

A continuación, agregaremos un fondo que se usará para todas las diapositivas. Este fondo incluirá un degradado de fondo y un estilo de imagen de fondo (para cuando/si agrega una imagen de fondo de autor a una diapositiva individual).

Para agregar el fondo, actualice lo siguiente:

  • Degradado de fondo Color izquierdo: #000000
  • Degradado de fondo Color derecho: #000000
  • Tamaño de la imagen de fondo: Ajuste
  • Posición de la imagen de fondo: centro izquierda
  • Mezcla de imagen de fondo: luminosidad

Es importante tener en cuenta que no estamos agregando una imagen de fondo aquí. Solo estamos agregando el tamaño, la posición y el modo de fusión para la imagen que se usará en una diapositiva individual. Es más fácil agregarlo aquí que tener que agregar el mismo estilo a cada diapositiva por separado. Más adelante, le mostraremos cómo agregar imágenes a las diapositivas individuales.

Configuración del diseño del control deslizante

En la pestaña de diseño, actualice lo siguiente:

Cubrir
  • Usar superposición de fondo: SÍ
  • Color de superposición de fondo: rgba (0,0,0,0.7)

Texto del título
  • Título Nivel de encabezado: H4
  • Fuente del título: Josefin Sans
  • Peso de la fuente del título: Medio
  • Alineación del texto del título: Izquierda
  • Tamaño del texto del título: 16 px (computadora de escritorio y tableta), 14 px (teléfono)
  • Altura de la línea de título: 1,5 em

Cuerpo de texto
  • Fuente del cuerpo: Josefin Sans
  • Alineación del texto del cuerpo: Izquierda
  • Color del cuerpo del texto: #aaaaaa
  • Espaciado entre letras del cuerpo: 0,05 em

Botón
  • Usar estilos personalizados para el botón: SÍ
  • Tamaño del texto del botón: 1em
  • Color del texto del botón: predeterminado (escritorio), #000 (desplazamiento)
  • Color de fondo del botón (escritorio): rgba(255,255,255,0.19)
  • Color de fondo del botón (desplazamiento): #ffffff
  • Ancho del borde del botón: 0px
  • Espaciado entre letras de botones: 0,05 em
  • Fuente del botón: Josefin Sans
  • Margen del botón: 0px arriba, 0px abajo
  • Relleno de botones: 0px arriba, 0px abajo, 0.6em izquierda, 0.6em derecha

Relleno y Animación Automática

Luego actualice el espaciado del control deslizante para que sea compacto y configure la velocidad de animación automática que desea para el control deslizante.

  • Margen: 0px arriba, 0px abajo
  • Relleno: 1em arriba, 1em abajo, 5% izquierda, 5% derecha
  • Animación automática: ON
  • Velocidad de animación automática: 3500

CSS personalizado

En la pestaña avanzada, agregue el siguiente CSS personalizado para actualizar el estilo de cada elemento del control deslizante (Título, Botón y Flechas)

Título de la diapositiva

01
02
03
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Esto asegurará que el título de la diapositiva no cree un salto de línea en pantallas más pequeñas.

Botón deslizante

01
02
03
position:absolute;
bottom: 1em;
right: 6%;

Esto le da al botón una posición absoluta para que quede bien debajo del Título ya la derecha de la diapositiva, lo que hace que el control deslizante sea aún más compacto.

Deslizar flechas

01
02
font-size: 30px;
margin-top: -15px;

Esto simplemente hace que las flechas de navegación del control deslizante sean más pequeñas para adaptarse al tamaño compacto del control deslizante.

Sugerencia: agregue el mismo color de fondo a la columna para transiciones de diapositivas más suaves

Actualmente, la animación de cada diapositiva tendrá el color de fondo animado junto con el contenido de la diapositiva, para evitar que el fondo muestre esta animación, podemos darle el mismo color de fondo a la columna para que la transición sea más suave.

Para hacer esto, abra la configuración de la columna principal del control deslizante y agregue el siguiente color de fondo:

  • Color de fondo: #000000

Agregar imágenes de fondo del autor a una diapositiva

Si desea incluir una imagen de fondo de autor para una diapositiva, puede hacerlo agregando una imagen de fondo a cada diapositiva.

Una vez que agregue la imagen de fondo a la diapositiva, la imagen de fondo heredará los estilos que ya están en la configuración del control deslizante (no de la diapositiva).

Resultado

Mira el resultado final.

Adición del control deslizante compacto de testimonios a una plantilla de encabezado

Guardar el módulo en la biblioteca Divi

Antes de que podamos agregar el control deslizante compacto de testimonios a un encabezado global, primero debemos guardar el módulo en la Biblioteca Divi. Puede hacerlo pasando el cursor sobre el módulo deslizante y haciendo clic en el icono «Guardar en la biblioteca». Luego asigne un nombre al diseño y haga clic en el botón «Guardar en la biblioteca».

Agregar el diseño del módulo compacto de testimonios a una plantilla de encabezado

Editar el encabezado personalizado

Una vez que el nuevo módulo deslizante de testimonios se haya guardado en la biblioteca, estamos listos para agregarlo a un encabezado personalizado.

Vaya a Divi > Theme Builder, luego haga clic para editar el encabezado personalizado de la plantilla.

Insertar el diseño del módulo deslizante de testimonios guardados de la biblioteca

En el editor de diseño de encabezado, haga clic para agregar el módulo deslizante compacto de testimonios donde desea que se muestre.

En el modal Insertar módulo, seleccione la pestaña Agregar desde biblioteca. Busque el control deslizante compacto de testimonios que guardó previamente en la biblioteca y selecciónelo.

Una vez cargado, guarda los cambios.

Resultado final

Y aquí está el mismo control deslizante de testimonios agregado a un encabezado global.

Y aquí está el mismo control deslizante de testimonios sin las imágenes de fondo del autor.

Y así es como se ve en el móvil.

Pensamientos finales

El control deslizante compacto de testimonios puede ser una nueva adición al encabezado de cualquier sitio web que busque aumentar la credibilidad de sus servicios en el lugar más visible de su sitio web. También puede usarlo para redirigir a los visitantes a una página de testimonios o a una página de ventas para aumentar las conversiones. Con suerte, será útil para usted.

Espero escuchar de usted en los comentarios.

¡Salud!