Cómo crear un marco de texto simple con Divi
Publicado: 2019-08-24Las marquesinas de texto proporcionan un área de desplazamiento de texto a su sitio web que atrae a los lectores con fragmentos ú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 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 etiqueta html <marquee> es obsoleta, por lo que contamos con CSS y JavaScript para crear marquesinas en estos días. Sin embargo, con Divi, puede crear un marco simple sin tener que preocuparse por el código personalizado.
En este tutorial, le mostraremos lo fácil que es crear un marco de texto simple con Divi. Incluso cubriremos cómo pausar la animación de texto de desplazamiento al pasar el mouse y cómo agregar un marco de texto grande como un elemento de diseño único para sus encabezados.
Empecemos.
Vistazo
Descarga el diseño GRATIS
Para poner sus manos sobre 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 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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 al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará 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á un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Creación de un marco de texto simple en Divi
Para este primer ejemplo, crearemos un marco 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 contiene la línea de texto para que se deslice a lo largo de la fila y aparezca repetidamente como una marquesina.
He aquí 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: 10 píxeles en la parte superior, 10 píxeles en la parte inferior
- Esquinas redondas: 10px
- Box Shadow: 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: "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 la visibilidad de desbordamiento oculta, 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 la animación: 100%
- Curva de velocidad de animación: lineal
- Repetición de animación: bucle
Resultado
Ahora veamos el resultado.
Crear 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:
<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 el espacio suficiente 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.
Pausar 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 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 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 :
animation-play-state: paused;
Resultado final
Ahora mira el resultado final. Observe cómo la animación del texto se detendrá cuando el cursor se sitúe sobre el texto, lo que permitirá al usuario hacer clic en el enlace.
Parte 2: Creación de un marco de texto como elemento de diseño receptivo en Divi
Ahora que entendemos cómo crear un marco de texto simple en Divi, podemos tomar el mismo concepto para crear un elemento de diseño de marco 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.
Agregar el diseño prediseñado
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 de carga 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 se haya 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.
Creación de la animación de marco 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 marquesina de texto receptivo. La clave para 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 del 100%. Entonces podemos usar la unidad de longitud vw para el tamaño del texto. Esto hará que el texto se adapte bien al ancho del navegador. Después de eso, aplicaremos los mismos principios que usamos para hacer nuestro ejemplo de marquesina de texto simple anteriormente.
He aquí cómo hacerlo.
Actualizar la configuración de la fila
Como se mencionó anteriormente, la fila debe ser del 100% para que funcione este diseño de marquesina de texto receptivo. Esto permite que nuestro módulo de texto utilice unidades de longitud de 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 inferior
- Transformar trasladar eje Y: -24vw
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
El margen inferior negativo es para deshacernos 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 marco 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:
- Texto Color del texto: rgba (255,255,255,0.16)
- Tamaño del texto del texto: 36vw
- Margen: -100% a la izquierda, 100% a la derecha
El tamaño del texto está usando una unidad de longitud de 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 mira el diseño final.
Pensamientos finales
Las marquesinas de texto pueden ser una herramienta conveniente en el diseño web. Tampoco se limitan a funcionar estrictamente como tickers de noticias. También pueden agregar un bonito 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 te ayude a crear algunos marcos de texto simples cuando llegue el momento en que lo necesites.
Espero tener noticias tuyas en los comentarios.
¡Salud!