Cómo crear un control deslizante de testimonio compacto para un encabezado en Divi
Publicado: 2021-07-16Agregar 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 de testimonios compacto 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 cortos en el encabezado de su sitio web. Para ello, vamos a modificar el Slider Module de Divi de una forma divertida y única.
¡Empecemos!
Vistazo
Aquí está el control deslizante de testimonios compacto que crearemos usando el Módulo deslizante Divi.
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 sobre 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 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.
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.
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!
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 Divi Builder.
Importar la plantilla de encabezado a Divi Theme Builder
Si desea importar la plantilla de encabezado con el control deslizante de testimonios compacto agregado al encabezado, deberá navegar por Divi> Creador 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:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Cómo crear un control deslizante de testimonios compacto en Divi
Agregar nuevo módulo de fila y control 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 debajo de 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 diapositivas, 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 diapositivas.
Actualizar la configuración del control deslizante
Controles duplicados de diapositivas y ocultas
Después de actualizar la primera diapositiva con contenido, duplique esa diapositiva 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 el fondo de todas las diapositivas
A continuación, agregaremos un fondo que se utilizará 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:
- Color de degradado de fondo a la izquierda: # 000000
- Gradiente de fondo Color derecho: # 000000
- Tamaño de la imagen de fondo: Ajustar
- 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 de la imagen que utilizará 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 de 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
- Nivel de encabezado del título: 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 (escritorio y tableta), 14 px (teléfono)
- Altura de la línea de título: 1.5em
Cuerpo de texto
- Fuente del cuerpo: Josefin Sans
- Alineación del texto del cuerpo: izquierda
- Color del texto del cuerpo: #aaaaaa
- Espaciado de letras corporales: 0.05em
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 de letras de botones: 0.05em
- Fuente del botón: Josefin Sans
- Margen del botón: 0px arriba, 0px abajo
- Relleno de botones: 0px arriba, 0px abajo, 0.6em a la izquierda, 0.6em a la derecha
Relleno y animación automática
Luego actualice el espaciado del control deslizante para que sea compacto y establezca la velocidad de animación automática que desee para el control deslizante.
- Margen: 0px arriba, 0px abajo
- Acolchado: 1em arriba, 1em abajo, 5% a la izquierda, 5% a la 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 diapositiva
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
position:absolute; bottom: 1em; right: 6%;
Esto le da al botón una posición absoluta para que quede bien debajo del Título y a la derecha de la diapositiva, lo que hace que el control deslizante sea aún más compacto.
Deslizar flechas
font-size: 30px; margin-top: -15px;
Esto simplemente hace que las flechas de navegación del control deslizante sean más pequeñas para ajustarse al tamaño del control deslizante compacto.
Consejo: agregue el mismo color de fondo a la columna para obtener transiciones de diapositivas más suaves
Actualmente, la animación de cada diapositiva tendrá animado el color de fondo 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 de 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 se encuentran en la configuración del control deslizante (no de la diapositiva).
Resultado
Mira el resultado final.
Agregar el 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 de testimonios compacto a un encabezado global, primero debemos guardar el módulo en la Biblioteca Divi. Puede hacer esto colocando 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 de testimonios compacto a una plantilla de encabezado
Editar el encabezado personalizado
Una vez que el nuevo módulo de control deslizante de testimonios se haya guardado en la biblioteca, estamos listos para agregarlo a un encabezado personalizado.
Navegue a Divi> Theme Builder, luego haga clic para editar el encabezado personalizado para 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 de testimonios compacto 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ó anteriormente en la biblioteca y selecciónelo.
Una vez que esté cargado, guarde 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 de testimonios compacto 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 una página de ventas para aumentar las conversiones. Con suerte, le será útil.
Espero tener noticias tuyas en los comentarios.
¡Salud!