¿Le gustaría insertar un control deslizante de testimonios compacto para un encabezado Divi?
Agregar testimonios a su sitio es una forma efectiva de generar credibilidad para su negocio (o marca) y generar confianza entre visitantes.
Un control deslizante de testimonios es una herramienta útil para mostrar testimonios en un solo lugar. Con eso en mente, tiene sentido agregar un control deslizante compacto de testimonios a su encabezado para que estos testimonios sean una de las primeras cosas que el usuario ve cuando visita su sitio web.
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 Divi Slider de una manera divertida y única.
¡Empecemos!
Pero antes puedes descubrir nuestra guía sobre Divi, el mejor tema de WordPress del mundo y el más fácil de usar
vista
Aquí está el control deslizante compacto de testimonios que construiremos usando el módulo Slider de 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.
Crear una nueva página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (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 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 Slider a la línea.
Editar diapositiva
En la configuración del control deslizante, elimine la segunda diapositiva predeterminada debajo de la pestaña Contenido, luego haga clic para cambiar la configuración de la diapositiva restante.
Contenido de la diapositiva
Debajo de la pestaña Contenido desde la configuración de la diapositiva, actualice lo siguiente:
- Título: “Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Botón: Leer todo
- Cuerpo: — Tatiana Gagelman
Una vez hecho esto, guarde la configuración de la diapositiva.
Lea también: Divi: cómo usar la configuración de máscara de fondo y las opciones de transformación de patrón
Actualizar la configuración del control deslizante
Duplicar deslizar y ocultar controles
Después de actualizar la primera diapositiva con contenido, duplique esta diapositiva para crear una o más diapositivas adicionales.
Luego, en el grupo de opciones Elements, oculte los controles deslizantes actualizando lo siguiente:
- Mostrar Control: NO
Actualizar el fondo de todas las diapositivas
A continuación, agregaremos un fondo que se usará para todas las diapositivas.
Para agregar el fondo, actualice lo siguiente:
- Gradiente de fondo:
- Paradas de gradiente 0%: #000000
- Paradas de gradiente 100%: #000000
- Imagen de fondo :
- Tamaño: Ajuste
- Posición: centro izquierda
- Mezcla: Luminosidad
Configuración del control deslizante
En la pestaña Diseño, actualice lo siguiente:
cubierta
- 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 título: H4
- Fuente: Josefin Sans
- Peso de fuente: Medio
- Alineación de texto: izquierda
- Tamaño del texto: 16 px (escritorio y tableta), 14 px (teléfono)
- Altura de la línea: 1,5 em
El cuerpo del texto
- Cuerpo :
- Fuente: Josefin Sans
- Alineación de texto: izquierda
- Color del texto: #aaaaaa
- Espaciado entre letras: 0,05 em
Bouton
- Usar tamaño personalizado para el botón: SÍ
- Botón:
- Tamaño del texto: 1em
- Color del texto: Predeterminado (Escritorio), #000 (Hover)
- Color de fondo (Escritorio): rgba(255,255,255,0.19)
- Color de fondo (pasar el cursor): #ffffff
- Ancho del borde: 0 píxeles
- Espaciado entre letras: 0,05 em
- Fuente: Josefin Sans
- Margen: 0px (superior e inferior)
- Relleno: 0px (superior e inferior), 0,6 em (izquierda y derecha)
Relleno automático y animación
A continuación, actualice el espaciado del control deslizante para que sea compacto y establezca la velocidad de animación automática deseada.
- Margen: 0px (superior e inferior)
- Relleno: 1em (superior e inferior), 5% (izquierda y derecha)
- Animación automática: ON
- Velocidad de animación automática: 3500
CSS personalizado
En la pestaña Avanzado, 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
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 muy por debajo del título y a la derecha de la diapositiva, lo que hace que el control deslizante sea aún más compacto.
Arrastrar flechas
font-size: 30px;
margin-top: -15px;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 obtener transiciones de diapositivas más suaves
Para hacer esto, abra la configuración de la columna principal del control deslizante y agregue el siguiente color de fondo:
- 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 haya agregado 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 la diapositiva).
Resultado
Mira el resultado final.
Agregar el control deslizante compacto de testimonios a una plantilla de encabezado
Guarde el módulo en la biblioteca Divi
Antes de que podamos agregar el control deslizante compacto de testimonios a un encabezado global, primero debemos registrar el módulo en la biblioteca Divi.
Puede hacerlo pasando el cursor sobre el módulo Control deslizante y haciendo clic en " Agregar a la biblioteca“. Luego asigne un nombre al diseño y haga clic en " Guardar en biblioteca".
Se agregó un diseño de módulo de testimonios compacto a una plantilla de encabezado
Editar 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.
Acceso a Divi > Creador de temas, luego haga clic en el icono que le permite modificar " Personalizar encabezado".
Inserte el módulo deslizante de testimonio guardado 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 aparezca.
en el modo “Insertar Módulo”, seleccione la pestaña “Agregar desde la biblioteca”. Busque el control deslizante compacto de testimonios que guardó anteriormente en la biblioteca y selecciónelo.
Una vez cargado, guarde los cambios.
Ver también: Divi: cómo mostrar el módulo de encabezado de ancho completo en pantalla completa
Resultado final
A continuación se muestra el control deslizante de testimonios agregado a un encabezado global.
Aquí tenemos el control deslizante de testimonios sin las imágenes de fondo del autor.
Y así es como se ve en el móvil.
Descarga DIVI ahora!!!
Conclusión
El control deslizante de testimonios compacto puede ser una nueva adición al encabezado de cualquier cosa Sitio web buscando impulsar la credibilidad de sus servicios en el lugar más visible de su sitio web.
También puedes usarlo para redirigir visitantes a una página de testimonios o página de ventas para aumentar las conversiones. Esperamos que esto te sea útil en tus próximos proyectos Divi.
Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
