Cómo crear una marquesina de texto simple con Divi


Las carpas de texto proporcionan un área de texto desplazable a su sitio web que atrae a los lectores con fragmentos útiles de contenido. También se llaman tickers (o tickers de noticias) y a menudo se usan para mostrar un flujo constante de actualizaciones de noticias en la parte superior o inferior de una página . Por lo general, 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 html la etiqueta está obsoleta, por lo que contamos con CSS y JavaScript para crear carpas en estos días. Sin embargo, con Divi, puede crear una marquesina simple sin tener que preocuparse por el código personalizado.

En este tutorial, lo guiaremos a través de lo fácil que es crear una marquesina de texto simple con Divi. Incluso cubriremos cómo pausar la animación de desplazamiento del texto al pasar el mouse y cómo agregar una marquesina de texto grande como un elemento de diseño único para sus encabezados.

Empecemos.

Vistazo

carpa de texto divi

carpa de texto divi

carpa de texto divi

Descargar el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=8aPloAg0efU (/ incrustar)

Suscríbase a nuestro canal de Youtube

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, necesitará tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)

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

Parte 1: Crear un recuadro de texto simple en Divi

carpa de texto divi

Para este primer ejemplo, vamos a crear una marquesina de texto simple para una línea de texto. Para hacer esto, le daremos a una fila un ancho máximo con el desbordamiento oculto. Luego, agregaremos una animación de diapositivas en bucle a un módulo de texto que contenga la línea de texto para que se deslice a través de la fila y se vea repetidamente como un recuadro.

Aquí te explicamos cómo hacerlo.

Primero, cree una sección regular con una fila de una columna.

carpa de texto divi

Luego, antes de agregar un módulo, actualice la fila con un ancho fijo, una sombra de cuadro y un radio de borde de la siguiente manera:

  • Ancho Máx .: 200px
  • Acolchado: 10px arriba, 10px abajo
  • Esquinas redondas: 10px
  • Box Shadow: ver captura de pantalla
  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

carpa de texto divi

Agregar el módulo de texto

Una vez que la fila haya terminado, agregue un nuevo módulo de texto a la fila.

carpa de texto divi

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 de módulo de texto

Actualice la configuración 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 fila. Debido a que la fila tiene oculta la visibilidad de desbordamiento, el módulo estará oculto hasta que agreguemos animación para mostrarlo.

carpa de texto divi

  • Estilo de animación: diapositiva
  • Dirección de animación: derecha
  • Duración de la animación: 5000 ms
  • Intensidad de animación: 100%
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: lineal
  • Repetición de animación: bucle

carpa de texto divi

Resultado

Ahora veamos el resultado.

carpa de texto divi

Crear líneas de texto más largas

En el diseño de recuadro de texto simple anterior, hemos limitado el ancho de la línea de texto al mismo ancho de la fila. Sin embargo, si queremos crear una línea de texto más larga con el mismo ancho de fila, necesitaremos modificar un poco la configuración.

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

This is a sentence in a marquee with a link

carpa de texto divi

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

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

carpa de texto divi

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

  • Ancho: 207%
  • Margen: -207% restante, 207% derecho
  • Intensidad de animación: 75%

El truco aquí es aumentar el ancho y actualizar los valores de margen para proporcionar suficiente espacio para la línea de texto. Luego, ajuste la intensidad de la animación para que no haya una gran pausa entre la animación en bucle.

Resultado

Aquí esta el resultado final.

carpa de texto divi

Pausar la animación de texto de marquesina al pasar el mouse por encima

Dado que esta marquesina incluye un enlace, será difícil para los usuarios hacer clic en el enlace mientras se está moviendo. 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 de CSS, abra la configuración del módulo de texto y agregue el siguiente CSS personalizado al elemento principal debajo de la pestaña de desplazamiento:

animation-play-state: paused;

carpa de texto divi

Resultado final

Ahora mira el resultado final. Observe cómo la animación de texto se detendrá cuando el cursor se desplace sobre el texto, permitiendo al usuario hacer clic en el enlace.

carpa de texto divi

Parte 2: crear una marquesina de texto como elemento de diseño receptivo en Divi

carpa de texto divi

Ahora que entendemos cómo crear una marquesina de texto simple en Divi, podemos tomar el mismo concepto para crear un elemento de diseño de marquesina de texto sensible. Esto funcionaría bien para crear diseños de animación únicos para encabezados o encabezados de sección.

Para hacer esto vamos a utilizar Divi’s Página de inicio de Job Recruiter diseño prefabricado.

Agregar el diseño prefabricado

Para agregar el diseño a su página, abra el menú de configuración en la parte inferior del generador Divi y haga clic en el símbolo más. Desde la carga desde la ventana emergente de la biblioteca, seleccione el paquete de diseño del reclutador de trabajos. Luego haga clic para usar el diseño de la página de inicio.

carpa de texto divi

Eliminar contenido adicional con el diseño

Una vez que se ha cargado el diseño en la página, implemente el modo de vista de estructura alámbrica y elimine todo el contenido del diseño, excepto el encabezado de ancho completo y la sección directamente debajo de él.

carpa de texto divi

Crear la animación de marquesina de texto

Como puede ver, la palabra "contratado" ya se utiliza como un elemento de diseño de texto grande en un módulo de texto en la segunda sección. Vamos a convertir ese módulo de texto en un elemento de diseño de recuadro de texto receptivo. La clave para que el recuadro de texto responda es asegurarse de que la fila y el módulo de texto abarquen todo el ancho de la ventana del navegador. Podemos hacer esto usando un ancho del 100%. Entonces podemos usar la unidad de longitud vw para el tamaño del texto. Esto hará que el texto escale bien con los anchos del navegador. Después de eso, aplicaremos los mismos principios que usamos para hacer nuestro ejemplo simple de recuadro de texto anteriormente.

Aquí te explicamos cómo hacerlo.

Actualizar la configuración de la fila

Como se mencionó anteriormente, la fila debe ser del 100% para que este diseño de recuadro de texto receptivo funcione. Esto permite que nuestro módulo de texto use unidades de longitud vw que son relativas al ancho del navegador. Dado que nuestro diseño prefabricado ya tiene una fila con un 100% de ancho, no tenemos que hacer nada.

carpa de texto divi

Sin embargo, necesitamos ajustar el resto de la configuración de la siguiente manera.

  • Margen: -24vw inferior
  • Transformar Traducir eje Y: -24vw
  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

carpa de texto divi

El margen inferior negativo es deshacerse del espacio negativo sobrante cada vez que movemos la fila hacia arriba usando la transformación de traducción. Y debemos ocultar el desbordamiento de la fila para nuestro efecto de recuadro de texto.

Actualizar el diseño del texto del módulo de texto

Ahora todo lo que necesita hacer es actualizar el módulo de texto para convertirlo en un elemento de diseño de marquesina de texto grande.

Abra el módulo de texto y actualice lo siguiente:

  • Color del texto: rgba (255,255,255,0.16)
  • Tamaño del texto: 36vw
  • Margen: -100% a la izquierda, 100% a la derecha

El tamaño del texto está utilizando una unidad de longitud vw, por lo que el texto se escalará bien con el ancho del navegador.

carpa de texto divi

Agregar animación al módulo de texto

  • Estilo de animación: diapositiva
  • Dirección de animación: izquierda
  • Duración de la animación: 10000 ms
  • Intensidad de animación: 100%
  • Curva de velocidad de animación: lineal
  • Repetición de animación: bucle

carpa de texto divi

Diseño final

Ahora mira el diseño final.

carpa de texto divi

Pensamientos finales

Las carpas de texto pueden ser una herramienta conveniente para tener en el diseño web. Tampoco están limitados a funcionar estrictamente como tickers de noticias. También pueden agregar un buen elemento de animación a su diseño web. Y la mejor parte es que Divi facilita la creación y el diseño de todo tipo de formas hermosas. Espero que este tutorial lo ayude a crear algunas carpas de texto simples cuando sea necesario.

Espero tener noticias suyas en los comentarios.

¡Salud!