Texto en movimiento en Elementor Pro
¿Quieres añadir un efecto llamativo a tu sitio web y captar la atención del usuario con un texto que se desliza continuamente? En este tutorial te enseñamos cómo crear texto en movimiento en Elementor (también conocido como efecto marquee o texto deslizante) usando únicamente Elementor Pro, sin necesidad de instalar plugins adicionales.
Índice
Texto deslizante en acción:
¡QUIERO ELEMENTOR PRO!
¿Qué necesitas para aplicar el efecto texto en movimiento?
Para lograr este efecto deslizante necesitas:
Tener instalado Elementor Pro en tu sitio WordPress.
Una sección o widget donde quieras insertar el texto en movimiento.
Acceso al panel de estilo personalizado (CSS) de Elementor.
✏️ Paso a paso: Cómo hacer un texto en movimiento en Elementor
1. Abre la página en Elementor donde quieres mostrar el texto:
Ve a tu página desde el panel de WordPress y haz clic en Editar con Elementor.
2. Añade un widget de encabezado o texto:
Arrastra el widget Encabezado o Texto hacia la zona donde quieras mostrar el texto animado.
3. Escribe el texto que se moverá:
Ejemplo (ponemos « » para que se hagan 4 espacios entre el texto):
¡QUIERO ELEMENTOR PRO!
4. Añade una clase personalizada al widget
Haz clic en el widget > pestaña Avanzado > campo Clases CSS > Escribe: marquee
5. Añade este CSS para el efecto deslizante (en nuestro caso ponemos h3, pero si habéis usado otro título o párrafo, debéis adaptar el CSS:
.marquee {
overflow: hidden;
display: flex;
}
.marquee h3{
white-space: nowrap;
}
6. Añade un widget de tipo HTML, y pega este código:
<script>
function Marquee(selector, speed) {
const parent = document.querySelector(selector);
const clone = parent.innerHTML;
let i = 0;
parent.innerHTML += clone;
setInterval(() => {
i += speed;
if (i >= parent.children[0].clientWidth) i = 0;
parent.children[0].style.marginLeft = `-${i}px`;
}, 0);
}
window.addEventListener('load', () => Marquee('.marquee', .5));
</script>
🚀 ¿Por qué usar Elementor Pro para este tipo de efectos?
Muchos usuarios buscan el mejor plugin para texto en movimiento en WordPress, pero con Elementor Pro puedes crear este y muchos otros efectos sin depender de plugins externos.
Con Elementor Pro obtienes:
- CSS personalizado directamente desde el panel.
- Motion Effects y widgets avanzados.
- Integración fluida con temas y plantillas modernas.
- Gran soporte y actualizaciones frecuentes.
Conclusión
El efecto texto en movimiento en Elementor Pro (también llamado texto deslizante o marquesina) es muy fácil de implementar y le da un toque profesional y dinámico a tu sitio. Es ideal para destacar mensajes importantes y captar la atención de los visitantes desde el primer segundo.
Ahora que ya sabes cómo hacerlo, ¡pruébalo en tu sitio y cuéntanos en los comentarios cómo te ha ido!
En Dimoteca te explicamos qué es Elementor y cómo puede ayudarte a crear un sitio web atractivo y personalizado de manera sencilla.
¿Quieres saber qué podemos ofrecerte?
