Todos sabemos que los controles deslizantes son maravillosos para maximizar esa 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 central 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!
Hear es un adelanto del diseño y la funcionalidad del control deslizante Divi que construiremos en el tutorial de hoy.
Observe cómo esto cambia solo una palabra en el cuerpo del texto en cada diapositiva.
Observe cómo con este ejemplo, tanto la palabra del texto del cuerpo como los colores de los botones y el período cambian con cada diapositiva.
El concepto básico explicado
De forma predeterminada, el control deslizante Divi animará el texto de la 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, eliminamos el fondo y cambiamos solo uno de los elementos (como la 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 delantera.
Para comenzar, crea una nueva página y dale un título a tu página. Luego haga clic para usar Divi Builder y seleccione la opción «Construir desde cero». Luego haga clic en el botón para «Construir en el front-end».
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. Abre la configuración de la sección y dale un color de fondo negro (#222222).
No podrá ver esto todavía porque el color de fondo del control deslizante predeterminado lo está cubriendo. Regresaremos para terminar el diseño del 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 la diapositiva.
Actualice la configuración de la diapositiva de la siguiente manera:
Título: «Sitios web que le brindan más…»
Texto del botón: «Comenzar»
En Contenido, agregue el siguiente html:
|
01
|
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 que tenga un total de tres diapositivas.
Abra la configuración de la segunda diapositiva. En Contenido, reemplace solo la palabra «Negocio» con «Dinero» manteniendo el resto del html, encabezado y texto del botón igual. Solo queremos cambiar esta palabra en cada diapositiva. Luego guarde la configuración.
Luego abra la configuración de la tercera diapositiva. En Contenido, reemplace la palabra «Negocio» con «Éxito» y guarde la configuración.
¡Todo listo! Eso se encarga de nuestro contenido deslizante.
Optimización de la animación del texto de la descripción
Después de que el contenido de nuestro control deslizante esté en su lugar, debemos desactivar 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:
|
01
|
animation-name: none; |
Para este ejemplo, tiene sentido hacer que nuestra animación del control 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 control deslizante sin la animación hacia arriba.
Diseñando el control deslizante
Con nuestro contenido y funcionalidad en su lugar, podemos comenzar a diseñar nuestro control deslizante con un hermoso diseño elegante.
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: Claro
Tamaño del texto del título: 32 px
Sombra del texto del título: vea la captura de pantalla
Intensidad de 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,6 em
Sombra del texto del cuerpo: vea la captura de pantalla
Intensidad de 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
Espaciado entre letras del botón: 1px
Fuente del botón: Lato
Alineación del botón: derecha
Ancho: 70 % (escritorio), 100 % (tableta), 100 % (teléfono inteligente)
Alineación del módulo: centro
Acolchado personalizado (escritorio): 19vw arriba, 8vw abajo
Acolchado personalizado (tableta): 19vw arriba, 4vw abajo. 0px a la izquierda, 0px a la derecha
Relleno personalizado (smartphone): 30vw arriba, 4vw abajo, 0px a la izquierda, 0px a la derecha
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: -190 px
Posición vertical de sombra de cuadro: 60 px
Color de sombra de cuadro: rgba(0,16,17,0.7)
Y como último paso, deshabilitemos nuestros elementos deslizantes para que no veamos las flechas o los controles deslizantes.
¡Eso se encarga de nuestro diseño deslizante Divi!
Personalización de 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á transiciones leves 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: [insertar imagen alrededor de 1920 px por 800 px]
Color de degradado de fondo izquierdo: rgba (0,16,17,0.45)
Color de degradado de fondo 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, dé 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 su sección una sombra de cuadro para ayudar a equilibrar el marco del diseño.
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: -200px
Posición vertical de sombra de cuadro: -150px
Color de sombra de cuadro: rgba(0,16,17,0.74)
¡Eso es todo!
Diseño final del deslizador 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 móvil
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, podría dar a cada uno de los botones de su 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 deslizante o algún otro elemento de diseño. ¡Hay innumerables posibilidades!
Pensamientos finales
Este diseño y funcionalidad personalizados del control deslizante Divi brindan 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 tu CTA que cambia con cada diapositiva. ¡Parece que esto podría ser algo que podría probar para ver si puede aumentar las conversiones!
Déjame saber lo que piensas en los comentarios a continuación.
¡Salud!