Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Divi

Barra de desplazamiento de texto tipo banner Publicitario

En este HUB Content te mostraremos cómo podemos crear un desplazamiento de texto tipo banner publicitario en nuestra web.

El objetivo de este mini tutorial es que logres hacer, a través de la inserción de un pequeño HTML un barra de texto que se va desplazando de izquierda a derecha en WordPress de manera sencilla, para presentar cualquier mensaje publicitario que quieras.

¿Quieres saber más? Mira nuestro tutorial:

Pasos para crear la barra de desplazamiento de texto

Para empezar, a nuestra página le agregaremos un módulo de texto

Y luego de haberlo agregado, nos ubicamos en la ficha Texto

Barra de desplazamiento de texto tipo banner Publicitario

Borramos el contenido de acá para pegar nuestro código HTML

Usamos el siguiente Snippet de Código HTML

Copia el código HTML de acá abajo y luego de eso, lo pegamos en nuestro modulo Texto.

<marquee direction="left">texto aqui texto aqui texto aqui texto aqui texto aqui texto aqui texto aqui texto aqui texto aqui texto aqui </marquee>

La etiqueta marquee nos ayudará a dar ese efecto de marquesina al texto que pongamos dentro de esta etiqueta. Además podemos usar la propiedad direction para indicar la dirección que queremos que se desplace. Si ponemos Left, se desplazará a la izquierda y si ponemos Right, se desplazará a la derecha.

Posteriormente, le damos algunos estilos.

Vamos a las configuraciones del módulo texto y en la ficha de diseño, podemos cambiar el Texto Fuente, Color de texto y Tamaño del texto.

Barra de desplazamiento de texto tipo banner Publicitario

Seguidamente le ponemos un fondo a nuestro banner desplazante, vamos a las configuraciones del texto y en la ficha de contenido cambiamos el Fondo

Ahora bien, para que el banner quede en todo el ancho de nuestra página, vamos a las configuraciones de la fila, donde esta el módulo, y nos ubicamos en Diseño y cambiamos Anchura máxima.

Barra de desplazamiento de texto tipo banner Publicitario

Y le damos un relleno al texto. Nos ubicamos en las configuraciones del modulo Texto>Diseño y en Relleno superior y base le damos un poco de relleno.

¡Y listo! Así hemos podido crear un desplazamiento de texto tipo banner publicitario en nuestra web.

¿Te ha gustado este tutorial?

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Nos vemos en el próximo Divi Snippet en uxdivi.

Contenido Relacionado

1 Comentario

  1. Vicente Godofredo Torres

    Pues que chulo queda este Banner Jerry. Mola un montón y sin mucha complicación. Está Genial crack!!

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *