WORDPRESS

marquesina de texto, con y sin plugin, wordpress 202, tutorial español

WP 202 1024px WEBPmarquesina de texto wordpress syspa social

En SYSPA aprenderemos como crear una marquesina de texto en cualquier lugar de nuestra pagina o sitio web wordpress, haciéndolo con y sin plugin.

Las marquesinas de texto son elementos que se desplazan horizontal o verticalmente en una página web y nos  ofrecen algunas ventajas:

  1. Captar la Atención: Las marquesinas atraen la mirada del usuario. Si deseas destacar un mensaje importante o una oferta especial, una marquesina puede lograrlo.

  2. Flexibilidad: Puedes cambiar y adaptar el contenido de la marquesina según tus necesidades. Actualiza mensajes, anuncios o noticias sin modificar la estructura de la página.

  3. Variedad de Formatos: Las marquesinas pueden ser personalizadas en tamaño, velocidad y estilo.

Principales puntos del tutorial wordpress marquesina texto con y sin plugin

  • Iniciamos con el método vía plugin.
  • Configuramos las opciones iniciales de nuestra marquesina.
  • Probamos los resultados.
  • Parametrizamos diferentes tipos de marquesinas.
  • Iniciamos desde cero con la opcion de marquesina sin usar plugin.
  • Creamos todo el contenido.
  • Insertamos el codigo necesarios para generar la marquesina.
  • Probamos todo lo realizado.

Videos relacionados con wordpress marquesina texto con y sin plugin

🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
Agregaremos un chat de whatsapp a tu pagina web wordpress de manera simple y gratis.

WP 048 1024px WEBP elementor paso a paso - wordpress - syspa social

🖐️ Como usar contenedores (flex container) en elementor, wordpress 143, tutorial español.

Aprenderemos todo sobre el uso de los nuevos contenedores (flex container) de elementor para desarrollar tu pagina web wordpress.

1024PX wp 143 elementor contenedores wordpress syspa social V1

🖐️ Pagina Web GRATIS, dominio, hosting, SSL, wordpress 1 tutorial español

En este impresionante tutorial, veremos algo increíble, TODA TU PAGINA WEB TOTALMENTE GRATIS / FREE / $ 0.

DOMINIO, HOSTING, PAGINA WEB y certificado SSL / HTTPS, TODO GRATIS Y DE POR VIDA.

SINCERAMENTE NO VI OTROS TUTORIALES QUE LOGRAN TODO EL CONJUNTO GRATIS Y DE CALIDAD.

WP 001 1024px WEBP pagina web gratis wordpress syspa social v1

🖐️ Mejor hosting wordpress, análisis completo, SLL y DOMINIO GRATIS, WordPress 35, tutorial español.

Analizamos paso a paso, todos los detalles del hostin sered, que nos brindara un 10% de descuento, ssl y dominio gratis.

1024px WP 35 mejor hosting wordpress sered - syspa

Código Utilizado

Marquesina de texto

<style>
body{
--speed: 10s;
}
.sliding-text .elementor-widget-wrap{
display: block !important;
}
.sliding-text .elementor-widget{
overflow: hidden;
width: 100000vw !important;
max-width: 100000vw !important;
}
.sliding-text .sliding .elementor-widget-container{
-webkit-animation: sliding var(--speed) linear infinite;
-moz-animation: sliding var(--speed) linear infinite;
-o-animation: sliding var(--speed) linear infinite;
animation: sliding var(--speed) linear infinite;
}
.sliding-text .elementor-widget-container{
float: left;
}
.sliding-text.reverse{
transform: rotate(180deg);
}
.sliding-text.reverse .sliding .elementor-heading-title{
transform: scale(-1, -1);
}
@keyframe sliding{
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-webkit-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-moz-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-o-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery

$(document).ready(function(){

var h = []

$('.sliding-text').each(function(){
h.push($(this).find('.elementor-widget').clone().html())
})

function init(){
$('.sliding-text').each(function(i){

var $this = $(this)

$this.find('.elementor-widget').removeClass('sliding')

var amount = Math.ceil($(window).width()/$(this).find('.elementor-widget-container').outerWidth(true)) + 1

$this.find('.elementor-widget').empty().addClass('sliding')
$this.find('.elementor-widget').html(h[i].repeat(amount))
}) 
}

init()
$(window).on('load resize', init)
})
</script>
suscribete syspa

Tenemos Cientos de tutoriales Wordrpess

Inicia aquí gratis !

Accede al listado completo de tutoriales wordpress.

Tutoriales WordPress