Cómo crear una diapositiva de testimonio compacta para un encabezado en Div

Agregar testimonios a su sitio es una forma efectiva de aumentar la credibilidad de su negocio (o marca) y generar confianza con los visitantes. Una diapositiva para testimonios es una herramienta conveniente para presentar testimonios en un solo lugar. Dado esto, es lógico agregar un testimonio compacto a su encabezado, para que estos testimonios sean una de las primeras cosas que el usuario ve al visitar su sitio. En este tutorial, le mostraremos cómo crear una diapositiva testimónica compacta para presentar testimonios cortos en el encabezado de su sitio web. Para hacer esto, cambiaremos el módulo Slider Divi de una manera divertida y única.
¡Vamos a empezar! Él saca el ojo del testimonio compacto que construiremos usando el módulo deslizante div. Y aquí está la misma diapositiva de testimonio agregada a un encabezado global. Así es como se ve en los dispositivos móviles. Descargue el aspecto y la plantilla de forma gratuita para poner su mano en los dibujos en este tutorial, 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!
Importar la aparición en la Biblioteca de la Divic para importar la apariencia de la sección en la Biblioteca de la Divic, navegando en la Biblioteca Divic.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Este será el archivo JSON llamado “Divic-Testimonial-Slider-Module-Layout.json”. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Importe la plantilla de encabezado en el generador de temas de la Divica Si desea importar el encabezado con el testimonio compacto agregado al encabezado, deberá navegar en Div> Temo Builder. Luego use el icono de portabilidad en la parte superior derecha de la página para importar el archivo JSON. Este será el archivo llamado “Divic-Testimonial-Slider-Header-Template.json”.

Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder). Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Cómo crear una diapositiva de testimonio compacta en la división Agregue una nueva fila y deslice para comenzar, agregue una fila con una columna a la sección.
Luego agregue un módulo deslizante en una fila.
Edite la diapositiva debajo de la configuración del control deslizante, borre la segunda diapositiva predeterminada de la pestaña de contenido y luego haga clic para editar la configuración de deslizamiento restante.

Deslice el contenido en la pestaña Contenido de la configuración de diapositivas, actualice lo siguiente:

Título: “Donec Sollicitudin Molestie Malesuada. Vivamus sospechoso Toror Eget. ”

Botón de texto: Leer todo
Cuerpo: – Tatiana Gagelman
Después de haber terminado, guarde la configuración de diapositivas. Actualice la configuración de la diapositiva duplicar las diapositivas y ocultar los controles Después de actualizar la primera diapositiva de contenido, copie la diapositiva para crear una o más diapositivas adicionales. Luego, debajo del grupo de opciones de elementos, oculte los comandos deslizantes que actualizan lo siguiente:
PRECIONES DE MOSTRADA: NO

Actualice el fondo para todas las diapositivas, entonces agregaremos un fondo que se utilizará para todas las diapositivas. Este fondo incluirá un gradiente de fondo y un estilo de fondo (para cuándo / si agrega un fondo de autor a una diapositiva individual). Para agregar el fondo, actualice lo siguiente:
Color izquierdo del gradiente de fondo: # 000000

Color correcto del gradiente de fondo: # 000000
Tamaño de la imagen de fondo: adecuado
Posición de la imagen de fondo: centro izquierdo
Mezcle de imagen de fondo: el brillo es importante para tener en cuenta que no agregamos una imagen de fondo aquí. Agregamos solo el tamaño, la posición y el modo de mezcla para la imagen que será utilizada por una diapositiva individual. Es más fácil agregarlo aquí en lugar de agregar el mismo estilo a cada diapositiva separada. Más tarde, le mostraremos cómo agregar imágenes a diapositivas individuales.
Configuración de diseño del cursor En la pestaña de diseño, actualice lo siguiente: Cubierta
Use superposición en segundo plano: sí


Color de superposición de fondo: RGBA (0.0,0,0,7)
El texto del título
Nivel de encabezado del título: H4
Título de la fuente: Josefin Sans

Fuente de peso del título: Medio
Alineación del texto del título: Izquierda
Título Tamaño de texto: 16 PX (escritorio y tableta), 14 PX (teléfono)
Altura de la línea de título: 1.5em
El cuerpo del texto
Font Corp: Josefin Sans
Alineación del texto del cuerpo: izquierda

El color del texto del cuerpo: #AAAAAA
Espacio de letras del cuerpo: 0.05em
Botón
Use estilos personalizados para el botón: Sí
Botón de texto de tamaño: 1em

El color del texto del botón: predeterminado (escritorio), # 000 (pasaje)
Botón de color de fondo (escritorio): RGBA (255.255.255.0.19)
El color del fondo del botón (flotante): #fffff
El ancho del nudo del botón: 0 PX
Distancia entre letras y botones: 0.05em
Botón de fuente: Josefin Sans
Margen del botón: 0 PX hacia arriba, 0 px abajo
Botón de llenado: 0 px arriba, 0 px abajo, 0.6 izquierda EM, 0.6 EM Right
El revestimiento automático y la animación luego actualicen el espacio del control deslizante para que sea compacto y establezca la velocidad de animación automática que desee para la diapositiva.
Marja: 0 px desde arriba, 0 px a continuación
Revestimiento: 1em arriba, 1em abajo, 5% izquierda, 5% derecho

Animación automática: en
Velocidad de animación automática: 3500CSS personalizado en la pestaña Avanzada, agregue los siguientes CSS personalizados para actualizar el estilo de cada elemento deslizante (título, botón y flechas) Slide de espacio blanco: Nowrap;
Desbordamiento: oculto;
Texto-Overflow: Ellipsis;
Esto asegurará que el título de diapositiva no cree una interrupción de línea en pantallas más pequeñas.

Botón de posición de deslizamiento: Absoluto;
Abajo: 1em;
Derecho: 6%;
Esto le da al botón una posición absoluta, de modo que es hermoso debajo del título y a la derecha de la diapositiva, haciendo que la diapositiva sea aún más compacta. Flechas de tamaño de fuente de diapositivas: 30px;
margen -top: -15px;
Esto simplifica las flechas de navegación de glister para que coincidan con el tamaño del control deslizante compacto.
Consejo: Agregue el mismo color de fondo a la columna para diapositivas más finas ahora, la animación de cada diapositiva animará el color de fondo junto con el contenido de diapositivas, para evitar el fondo de esta animación, podemos dar el mismo color de fondo, por lo que la transición Sea más suave.
Para esto, abra la configuración para la columna principal de la diapositiva y agregue el siguiente color de fondo:
Color de fondo: # 000000
Agregando las imágenes de fondo del autor a una diapositiva si desea incluir un fondo de autor para una diapositiva, puede hacerlo agregando una imagen de fondo a cada diapositiva. Después de agregar la imagen de fondo a la diapositiva, la imagen de fondo heredará los estilos que ya existen debajo de la configuración de deslizamiento (no por la diapositiva).

Resultado Verifique el resultado final. Agregar la diapositiva de testimonio compacto en una plantilla de encabezado Guardar el módulo en la biblioteca de la Divica Antes de que podamos agregar la diapositiva de testimonio compacto en un encabezado global, primero debemos guardar el módulo en la biblioteca de la Divica. Puede hacer esto pasando con el mouse sobre el módulo GLISOR y haciendo clic en el icono “Guardar en la biblioteca”. Luego dale un nombre a la apariencia y haga clic en el botón “Guardar la biblioteca”. Patrule el aspecto compacto de testimonio a una plantilla de encabezado Editar el encabezado personalizado Una vez que se haya guardado el nuevo módulo deslizante en la biblioteca, estamos listos para agregarlo a un encabezado personalizado. Navegue a Divin> Temor Builder, luego haga clic para editar el encabezado personalizado para la plantilla.
Inserte el aspecto del módulo de testimonio guardado desde la biblioteca al editor de apariencia del encabezado, haga clic para agregar el módulo de testimonio compacto donde desea que se muestre. En el modo del módulo Insertar, seleccione la pestaña Agregar en la biblioteca. Encuentre la diapositiva de testimonio compacta que ha guardado previamente en la biblioteca y seleccione.