Cómo personalizar su control deslizante Divi para cambiar elementos específicos con cada diapositiva

Todos sabemos que los controles deslizantes son maravillosos para maximizar la sección superior de su sitio web. ¡Son geniales! Los usuarios son bienvenidos con múltiples CTA y características importantes que se deslizan a la vista sin tener que desplazarse hacia abajo en la página. Pero, a veces, demasiados cambios en el diseño y el contenido de una diapositiva a otra pueden distraer o abrumar a los visitantes. Es por eso que en este tutorial, le mostraré cómo personalizar su control deslizante Divi para cambiar solo elementos específicos con cada transición de diapositiva. Esto le permite mantener el contenido principal y los componentes de diseño de su control deslizante consistentes mientras cambia solo un elemento específico (como una sola palabra o botón) con cada diapositiva. Los visitantes podrán procesar fácilmente el cambio y comprender claramente su llamado a la acción.

¡Vamos a sumergirnos!

Divi Slider adelanto

Hear es un adelanto del diseño y la funcionalidad del control deslizante Divi que crearemos en el tutorial de hoy.

Observe cómo esto cambia solo una palabra en el cuerpo del texto de cada diapositiva.

Observe cómo en este ejemplo, tanto la palabra del texto del cuerpo como los colores de los botones y el período cambian con cada diapositiva.

Explicación del concepto básico

De forma predeterminada, el control deslizante Divi animará el texto de descripción con cada transición a una nueva diapositiva que se desvanece y mueve ligeramente el contenido hacia arriba en su lugar.

Pero, con una simple línea de CSS personalizado, podemos desactivar esa animación ascendente del texto. Y, si duplicamos la diapositiva, nos deshacemos del fondo y cambiamos solo uno de los elementos (como la única palabra en el cuerpo del texto), verá que solo cambia una palabra con cada diapositiva.

Puede usar este concepto para cambiar solo texto, botones o colores específicos mientras mantiene el resto de los elementos de diseño en juego con cada diapositiva.

Empezando

Suscríbete a nuestro canal de Youtube

Para este tutorial, todo lo que necesitará es el tema Divi instalado y activo. Construiremos nuestro control deslizante Divi desde cero utilizando el constructor Divi en la parte frontal.

Para comenzar, cree una nueva página y asigne un título a su página. Luego haga clic para usar Divi Builder y seleccione la opción "Construir desde cero". Luego haga clic en el botón "Construir en la interfaz".

Ahora está listo para comenzar con el diseño.

Configuración del contenido del control deslizante Divi

Para este ejemplo, voy a usar un módulo deslizante de ancho completo, pero este tutorial también se aplica a los módulos deslizantes normales. Comencemos agregando una sección de ancho completo con un módulo deslizante de ancho completo a su página.

Para que podamos ver los cambios de contenido en nuestro control deslizante, primero agreguemos temporalmente un color de fondo oscuro a la sección de ancho completo. Abra la configuración de la sección y dele un color de fondo negro (# 222222).

No podrá ver esto todavía porque el color de fondo del control deslizante predeterminado lo está cubriendo. Daremos un círculo hacia atrás para terminar el diseño de fondo de la sección más adelante en el tutorial.

Ahora saltemos a la configuración del control deslizante de ancho completo y eliminemos una de las diapositivas predeterminadas, dejando solo una. Luego abra la configuración de diapositivas.

Actualice la configuración de diapositivas de la siguiente manera:

Título: "Sitios web que le brindan más ..."
Texto del botón: "Comenzar"

En Contenido, agregue el siguiente html:

Business<span style="color: #EE164D;">.</span>

(Esto agrega un color personalizado al punto (o punto) después de la palabra).

Color de fondo: rgba (255,255,255,0)

Guardar ajustes.

Ahora duplique la diapositiva dos veces para tener un total de tres diapositivas.

Abra la configuración de la segunda diapositiva. En Contenido, reemplace solo la palabra "Negocios" por "Dinero", manteniendo el resto del html, el encabezado y el texto del botón igual. Solo queremos cambiar esta palabra en cada diapositiva. Luego guarda la configuración.

Luego abra la configuración de la tercera diapositiva. En Contenido, reemplace la palabra "Negocio" por "Éxito" y guarde la configuración.

¡Todo listo! Eso se encarga de nuestro contenido deslizante.

Optimización de la animación del texto descriptivo

Una vez que el contenido de nuestro control deslizante está en su lugar, debemos deshabilitar nuestra animación para que nuestro texto no salte con cada diapositiva. Para hacer esto, vaya a la configuración del control deslizante de ancho completo y agregue el siguiente CSS personalizado en Descripción de la diapositiva:

animation-name: none;

Para este ejemplo, tiene sentido hacer que nuestra animación deslizante sea automática y aumentar la velocidad de la animación para que los usuarios puedan ver el cambio de palabra en cada diapositiva más rápido. Para hacer esto, vaya a la pestaña de diseño y actualice lo siguiente:

Animación automática: ON
Velocidad de animación automática (en ms): 3000

Ahora mira el resultado hasta ahora. Debería ver solo una palabra en el contenido de cada cambio de control deslizante sin la animación hacia arriba.

Diseñar el control deslizante

Con nuestro contenido y funcionalidad en su lugar, podemos comenzar a diseñar nuestro control deslizante con un hermoso y elegante diseño.

Abra la configuración del control deslizante de ancho completo y actualice lo siguiente:

Orientación del texto: izquierda
Fuente del título: Lato
Peso de la fuente del título: Ligero
Tamaño del texto del título: 32px
Sombra del texto del título: ver captura de pantalla
Intensidad del desenfoque de la sombra del texto del título: 0em (esto básicamente elimina la sombra del texto predeterminada)

Fuente del cuerpo: Lato
Tamaño del texto del cuerpo: 5vw (escritorio), 50px (tableta), 40px (teléfono inteligente)
Altura de la línea del cuerpo: 1.6em
Sombra de texto corporal: ver captura de pantalla
Fuerza del desenfoque de la sombra del texto del cuerpo: 0em (esto básicamente elimina la sombra del texto predeterminada)

Tamaño del texto del botón: 16px
Color de fondo del botón: # ee164d
Ancho del borde del botón: 8px
Color del borde del botón: # ee164d
Radio del borde del botón: 0px
Espacio entre letras del botón: 1px
Fuente del botón: Lato
Alineación de botones: derecha

Ancho: 70% (escritorio), 100% (tableta), 100% (teléfono inteligente)
Alineación del módulo: centro

Relleno personalizado (escritorio): 19vw superior, 8vw inferior
Acolchado personalizado (tableta): 19vw superior, 4vw inferior. 0px a la izquierda, 0px a la derecha
Relleno personalizado (teléfono inteligente): 30vw en la parte superior, 4vw en la parte inferior, 0px a la izquierda, 0px a la derecha

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -190px
Posición vertical de la sombra del cuadro: 60px
Color de sombra de caja: rgba (0,16,17,0.7)

Y para un último paso, deshabilitemos los elementos del control deslizante para que no veamos las flechas o los controles del control deslizante.

¡Eso se encarga de nuestro diseño deslizante Divi!

Personalizar los estilos de sección

El resto del diseño se agregará a nuestra sección, incluida nuestra imagen de fondo que servirá como fondo estático para todas nuestras diapositivas. Agregar una imagen de fondo a la sección es mejor para este uso porque no verá ligeras transiciones de una imagen a otra como lo haría si agregara la imagen de fondo a su módulo deslizante.

Abra la configuración de la sección y actualice lo siguiente:

Imagen de fondo: [inserte la imagen alrededor de 1920 px por 800 px]
Color de degradado de fondo a la izquierda: rgba (0,16,17,0.45)
Gradiente de fondo color derecho: rgba (0,16,17,0.92)
Posición inicial: 34%
Posición final: 0%
Colocar degradado sobre la imagen de fondo: SÍ

A continuación, asigne a su sección un borde derecho de la siguiente manera:

Ancho del borde derecho: 5vw
Color del borde derecho: # 001011

Y, por último, déle a la sección una sombra de cuadro para ayudar a equilibrar el marco del diseño.

Box Shadow: ver captura de pantalla
Posición horizontal de la sombra del cuadro: -200px
Posición vertical de la sombra del cuadro: -150px
Color de sombra de caja: rgba (0,16,17,0.74)

¡Eso es todo!

Diseño final del control deslizante Divi

Aquí está el diseño final del control deslizante Divi personalizado.

Y aquí está la funcionalidad de las diapositivas. Observe cómo solo cambia una palabra con cada diapositiva.

Diseño final en dispositivos móviles

Tableta

Teléfono inteligente

Experimente cambiando otros elementos

Puede experimentar cambiando otros elementos con cada diapositiva para obtener diseños y funciones más creativos. Por ejemplo, puede dar a cada uno de los botones de diapositiva un color diferente con cada diapositiva, así como hacer coincidir el color del período con el nuevo color del botón en cada diapositiva.

Así es como se vería.

Incluso podría explorar cambiar el color de la sombra del cuadro de diapositivas o algún otro elemento de diseño. ¡Hay innumerables posibilidades!

Pensamientos finales

Este diseño y funcionalidad de control deslizante Divi personalizado proporciona una buena alternativa a los controles deslizantes tradicionales que existen. El núcleo del diseño no cambia, lo que resalta aún más el aspecto importante de su CTA que cambia con cada diapositiva. ¡Parece que esto podría ser algo que podría probar para ver si puede impulsar las conversiones!

Déjame saber lo que piensas en los comentarios a continuación.

¡Salud!