¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo cambiar elementos o texto con el desplazamiento vertical en Divi

Oct 16, 2020 | Tutoriales para Divi

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 la consistencia del contenido principal y los componentes de diseño de su control deslizante 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.

deslizador divi

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.

deslizador divi

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.

deslizador divi

Pero, con una simple línea de CSS personalizado, podemos deshabilitar 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.

deslizador divi

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

Para este tutorial, todo lo que necesitará es el tema Divi instalado y activo. Construiremos nuestro control deslizante Divi desde cero usando 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.

deslizador divi

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).

deslizador divi

No podrá ver esto todavía porque el color de fondo del control deslizante predeterminado lo está cubriendo. Circularemos 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.

deslizador divi

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:

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)

deslizador divi

Guardar ajustes.

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

deslizador divi

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.

deslizador divi

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

deslizador divi

¡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:

01
animation-name: none;

deslizador divi

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

deslizador divi

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.

deslizador divi

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: Luz
Tamaño del texto del título: 32px
Sombra del texto del título: ver captura de pantalla
Texto del título Sombra Fuerza de desenfoque: 0em (esto básicamente elimina la sombra del texto predeterminada)

deslizador divi

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 del texto del cuerpo: vea la captura de pantalla
Sombra del texto del cuerpo Fuerza de desenfoque: 0em (esto básicamente elimina la sombra de texto predeterminada )

deslizador divi

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 superior, 8vw inferior Acolchado
personalizado (tableta): 19vw superior, 4vw inferior. 0px izquierda, 0px derecha Relleno
personalizado (smartphone): 30vw arriba, 4vw abajo, 0px izquierda, 0px derecha

deslizador divi

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

deslizador divi

Y para un último paso, deshabilitemos nuestros elementos deslizantes para que no veamos las flechas o controles deslizantes.

deslizador divi

¡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: [insertar imagen alrededor de 1920 px por 800 px]
Gradiente de fondo Color a la izquierda: rgba (0,16,17,0.45)
Gradiente de fondo color a la derecha: rgba (0,16,17,0.92)
Posición inicial: 34%
Posición final: 0 %
Colocar degradado sobre la imagen de fondo: SÍ

deslizador divi

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

deslizador divi

Y, por último, déle a la 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!

Diseño final del control deslizante Divi

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

deslizador divi

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

deslizador divi

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.

deslizador divi

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

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This