Las mayúsculas de texto proporcionan un cuadro de texto desplazable a su Sitio web que atrae a los lectores con extractos útiles de contenido. También se denominan tickers (o tickers de noticias) y, a menudo, se utilizan para mostrar un flujo constante de actualizaciones de noticias en la parte superior o inferior de la página. . Normalmente, la animación de desplazamiento se realiza con una sola línea de contenido en un bucle para que la información se muestre repetidamente. Desafortunadamente, el <marquee>Dado que la etiqueta html está obsoleta, confiamos en CSS y JavaScript para crear marquesinas en estos días. Sin embargo, con Divi, puede crear un rectángulo de selección simple sin preocuparse por el código personalizado.

En este tutorial, explicaremos lo fácil que es crear un texto de selección simple con Divi. Incluso veremos cómo pausar la animación de texto en desplazamiento al pasar el mouse y cómo agregar texto de desplazamiento grande como un elemento de diseño único para sus encabezados.

Vamos a empezar.

vista

Lo que necesitas para empezar

Para comenzar, necesita lo siguiente:

1. Le Tema divi instalado y activo
2. Una nueva página creada para construir desde cero en el front-end (constructor visual)

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Comienzo de la Concepción

Para este primer ejemplo, crearemos un rectángulo de texto simple para una línea de texto. Para ello, vamos a darle a una fila un ancho máximo con el desbordamiento oculto. A continuación, vamos a agregar una animación de diapositivas en bucle a un módulo de texto que contiene la línea de texto para que se deslice repetidamente en la línea, como un rectángulo.

Aquí está cómo hacerlo.

Comience creando una sección regular con una fila de una columna.

Luego, antes de agregar un módulo, actualice la fila con un ancho fijo, un cuadro de sombra y un radio, así:

• Ancho máximo: 200px
• Tapicería: 10px en la parte superior, 10px en la parte inferior
• Esquinas redondeadas: 10px
• Box Shadow: ver captura de pantalla
• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Añadir el módulo de texto.

Cuando la línea esté completa, agregue un nuevo módulo de texto a la línea.

Luego actualice el contenido del cuerpo con una sola línea de texto. Por ahora, asegúrese de que la línea de texto no se divida en otra línea.

• Cuerpo: "Esta es una oración"

Diseño del módulo de texto

Actualice los parámetros de diseño del módulo de texto de la siguiente manera:

• Margen: -100% a la izquierda, 100% a la derecha

Esto coloca el módulo de texto fuera de la izquierda de la línea. Dado que la visibilidad oculta de la línea está oculta, el módulo estará oculto hasta que agreguemos animación para hacerlo visible.

• Estilo de animación: diapositiva
• Dirección de la animación: Derecha
• Duración de la animación: 5000 ms
• Intensidad de animación: 100%
• Animación Opacidad inicial: 100%
• Animación de la curva de velocidad: lineal.
• Repetir animación: bucle

Resultado

Veamos el resultado ahora.

Crear líneas de texto más largas

En el diseño de texto de selección simple anterior, limitamos el ancho de la línea de texto al mismo ancho que la línea. Sin embargo, si queremos hacer una línea de texto más larga con el mismo ancho, necesitaremos modificar un poco la configuración.

Primero, en el módulo de texto y reemplace el cuerpo del texto con lo siguiente:

Esta es una fase con un enlace

Agregue más ancho y margen para adaptarse a la línea de texto más larga

Como puede notar, el texto se divide en tres líneas en lugar de una.

Por lo tanto, necesitamos ajustar el margen y la intensidad de la animación.

• Ancho: 207%
• Margen: -207% a la izquierda, 207% a la derecha
• Intensidad de animación: 75%

El truco aquí es aumentar el ancho y actualizar los valores de los márgenes para que solo quede suficiente espacio para una sola línea de texto. Luego, ajuste la intensidad de la animación para que no haya grandes interrupciones entre la animación en bucle.

Resultado

Aquí está el resultado final.

Pausar la animación del texto de selección al pasar el mouse

Dado que este rectángulo de selección incluye un enlace, será difícil para los usuarios hacer clic en el enlace mientras se mueven. Sin embargo, podemos agregar un pequeño fragmento de CSS al módulo de texto que pausará la animación al pasar el mouse.

Agregue un fragmento de CSS para pausar la animación al pasar el mouse

Para agregar el fragmento css, abra la configuración del módulo de texto y agregue el siguiente código CSS personalizado al elemento principal debajo de la pestaña flotante :

estado-reproducción-animación: en pausa;

Resultado final

Ahora mira el resultado final. Tenga en cuenta que la animación del texto se detiene cuando el cursor se desplaza sobre el texto, lo que permite al usuario hacer clic en el enlace.

Eso es todo por este tutorial, espero que te haya enseñado cómo agregar un texto de desplazamiento en Divi.