Las marquesinas de texto brindan un área de desplazamiento de texto a su sitio web que atrae a los lectores con fragmentos útiles de contenido. También se denominan teletipos (o teletipos 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, la <marquee>etiqueta html está obsoleta, por lo que contamos con CSS y JavaScript para crear marquesinas 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 texto desplazable al pasar el mouse por encima y cómo agregar una marquesina de texto grande como un elemento de diseño único para sus encabezados.
Empecemos.
Descarga 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 nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará tener lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Crear una marquesina de texto simple en 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 por la fila repetidamente y aparezca como una marquesina.
Aquí está cómo hacerlo.
Primero, cree una sección regular con una fila de una columna.
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áximo: 200px
- Relleno: 10px arriba, 10px abajo
- Esquinas redondas: 10px
- Sombra de caja: ver captura de pantalla
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar el módulo de texto
Una vez finalizada la fila, agregue un nuevo módulo de texto a la fila.
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: “Esto es una oración”
Diseño de módulos 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 una animación para mostrarlo.
- Estilo de animación: Diapositiva
- Dirección de animación: Derecha
- Duración de la animación: 5000ms
- Intensidad de animación: 100%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: lineal
- Repetición de animación: Bucle
Resultado
Ahora veamos el resultado.
Creación de líneas de texto más largas
En el diseño de marquesina 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:
|
01
|
<p>This is a sentence in a marquee with a <a href="#">link</a></p> |
Agregue más ancho y margen para adaptarse a la línea de texto más larga
Como puede notar, el texto ahora 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 proporcione suficiente espacio para una sola línea de texto. Luego ajuste la intensidad de la animación para que no haya una gran interrupción entre la animación en bucle.
Resultado
Aquí esta el resultado final.
Pausa de la animación de texto de marquesina al pasar el mouse
Dado que esta marquesina incluye un enlace, será difícil para los usuarios hacer clic en el enlace mientras se mueve. 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 CSS personalizado al elemento principal debajo de la pestaña flotante :
|
01
|
animation-play-state: paused; |
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, lo que permitirá al usuario hacer clic en el enlace.
Parte 2: crear una marquesina de texto como elemento de diseño receptivo en 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 receptivo. 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 el diseño prefabricado de la página de inicio de Job Recruiter de Divi .
Agregue 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. En la ventana emergente Cargar desde 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.
Eliminar contenido adicional con el diseño
Una vez que el diseño se haya cargado 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.
Creación de la animación de marquesina de texto
Como puede ver, la palabra «contratado» ya se usa 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 marquesina de texto receptivo. La clave para hacer que la marquesina 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 de 100%. Entonces podemos usar la unidad de longitud vw para el tamaño del texto. Esto hará que el texto se escale bien con los anchos del navegador. Después de eso, aplicaremos los mismos principios que usamos para hacer nuestro ejemplo de marquesina de texto simple anteriormente.
Aquí está cómo hacerlo.
Actualizar la configuración de la fila
Como se mencionó anteriormente, la fila debe estar al 100% para que este diseño de marquesina 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 ancho del 100 %, no tenemos que hacer nada.
Sin embargo, necesitamos ajustar el resto de la configuración de la siguiente manera.
- Margen: -24vw fondo
- Transformar Traducir eje Y: -24vw
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
El margen inferior negativo es para deshacerse del espacio negativo que queda cada vez que movemos la fila hacia arriba usando transform translate. Y necesitamos ocultar el desbordamiento de la fila para nuestro efecto de marquesina de texto.
Actualizar diseño de 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:
- Texto Color del texto: rgba(255,255,255,0.16)
- Texto Tamaño del texto: 36vw
- Margen: -100% a la izquierda, 100% a la derecha
El tamaño del texto usa una unidad de longitud vw, por lo que el texto se escalará bien con el ancho del navegador.
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: 10000ms
- Intensidad de animación: 100%
- Curva de velocidad de animación: lineal
- Repetición de animación: Bucle
Diseño final
Ahora echa un vistazo al diseño final.
Pensamientos finales
Las marquesinas de texto pueden ser una herramienta conveniente para tener en el diseño web. Tampoco se limitan a funcionar estrictamente como teletipos de noticias. También pueden agregar un buen elemento de animación a su diseño web. Y la mejor parte es que Divi hace que sea fácil crearlos y diseñarlos en todo tipo de formas hermosas. Espero que este tutorial lo ayude a crear algunas marquesinas de texto simples cuando llegue el momento en que las necesite.
Espero escuchar de usted en los comentarios.
¡Salud!