Hace unas semanas, un cliente me solicitó crear un carrusel de texto para su sitio web. La opción más sencilla habría sido instalar un plugin de WordPress especializado para esta tarea (los hay muchos).
Sin embargo, mi enfoque personal siempre es intentar resolver las necesidades sin recurrir a la instalación de plugins adicionales.
Prefiero explorar opciones que puedan ser implementadas directamente mediante código o utilizando recursos disponibles en la plataforma que estoy utilizando.
Dado que suelo trabajar mayormente con ELEMENTOR, una herramienta que ofrece un amplio conjunto de funciones para el diseño web, decidí investigar si era posible crear el carrusel de texto deseado utilizando esta plataforma.
Para ilustrar mejor el propósito de este artículo, aquí está una representación visual de lo que se busca lograr:
En este artículo aprenderemos
carrusel de texto como este.
cómo realizar un
Creación de un Carrusel de Texto con ELEMENTOR
Para el propósito del ejemplo que vamos a presentar, asumo que ya estás utilizando ELEMENTOR y estás familiarizado con cada uno de sus componentes.
Vamos a seguir un proceso paso a paso para crear un carrusel de texto. Utilizaremos el siguiente poema como ejemplo.
Amapolita morada
del valle donde nací:
si no estas enamorada,
enamórate de mi!
Comenzaremos con un carrusel simple de dos líneas del poema y luego iremos agregando hasta utilizar las cuatro líneas completas.
Si deseas extender el carrusel más allá de las cuatro líneas, será necesario realizar ajustes en el código. Sin embargo, no te preocupes, una vez que hayas leído detenidamente cada paso, no será una tarea complicada.
Creación del contenedor base
Crearemos un contenedor base al que aplicaremos un color de fondo, asegurándonos de elegir uno que tenga un buen contraste con el color que usaremos para las palabras.
En nuestro ejemplo, utilizaremos un color morado para el fondo y blanco para el texto.
Nuestra estructura contenedora queda asi:
En esta estructura, añadimos un elemento “encabezado” al que alinearemos al centro e introduciremos la primera línea del poema.
Seleccionamos el elemento “encabezado” y nos dirigimos a la pestaña “Avanzado”.
Luego, ingresamos un nombre en el campo de Clases CSS; en este ejemplo, lo he nombrado “carrusel”.
Hasta este punto, hemos establecido nuestra base inicial sobre la cual construiremos nuestro carrusel de texto, incorporando las líneas que necesitemos.
Carrusel de Texto de dos lineas
Ahora, procedemos a duplicar el elemento “encabezado” de nuestra base.
Después de hacerlo, necesitamos cambiar el nombre de la clase CSS, colocando, como en nuestro ejemplo, “carrusel2”.
El siguiente paso consiste en cambiar la posición del elemento que hemos denominado “carrusel2”. Optamos por colocarlo en “Absoluto”.
Una vez realizado este ajuste, notaremos que se alineará casi al mismo nivel que el elemento llamado “carrusel”.
Para alinear el elemento “carrusel2”, especificamos un valor en la casilla “Compensación” en la orientación vertical.
Aumentamos gradualmente este valor hasta que los dos elementos creados se alineen, dando la apariencia de ser uno solo.
Actualizamos el contenido de “carrusel2” ingresando la segunda línea del poema.
Luego, insertamos un elemento “Código HTML“, asegurándonos de colocarlo en la parte inferior de los elementos creados hasta el momento.
Dentro de la sección “Código HTML”, incorporamos el siguiente código.
Asegúrate de modificar los nombres de clase en el código si has utilizado otros distintos a los del ejemplo.
<style>
/* Carrusel de Texto Para 2 lineas */
.carrusel,
.carrusel2 {
pointer-events: none;
opacity: 0;
}
.carrusel {
opacity: 0;
animation: tcarousel 10s ease infinite;
}
.carrusel2 {
opacity: 0;
animation: tcarousel 10s ease -5s infinite;
}
@keyframes tcarousel {
0% {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
8% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
46% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
56% {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
100% {
opacity: 0;
pointer-events: none;
}
}
</style>
Si has seguido todos los pasos tal como se indican, el resultado que verás al hacer una vista preliminar será el siguiente:
Carrusel de Texto de tres lineas
Para crear un carrusel de texto de tres líneas en este punto, creamos un tercer elemento (se recomienda iniciar duplicando el último elemento creado) al que denominaremos “carrusel3”, y le asignaremos el contenido correspondiente como la tercera línea del poema.
Después, procederemos a modificar (o crear si es necesario) la sección “Código HTML“, indicando el siguiente valor:
<style>
/*carrusel Para 3 lineas */
.carrusel,
.carrusel2,.carrusel3 {
pointer-events: none;
opacity: 0;
}
.carrusel {
opacity: 0;
animation: tcarousel 15s ease infinite;
}
.carrusel2 {
opacity: 0;
animation: tcarousel 15s ease 5s infinite;
}
.carrusel3 {
opacity: 0;
animation: tcarousel 15s ease 5s infinite;
}
@keyframes tcarousel {
0% {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
6% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
30% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
46% {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
100% {
opacity: 0;
pointer-events: none;
}
}
</style>
Si has seguido todos los pasos tal como se indican, el resultado que verás al hacer una vista preliminar será el siguiente:
Si lo prefieres, puedes ajustar los valores de intervalo e intensidad en el código HTML según tus preferencias.
Carrusel de Texto de cuatro lineas lineas
Para configurar un carrusel de texto con 4 líneas (nuestro objetivo final), añadimos el último elemento que llamaremos “carrusel4”, asegurándonos de crearlo duplicando el elemento anterior.
Después de asignarle el contenido correspondiente, pasamos a ajustar (o crear) el código HTML según se muestra a continuación.
<Style>
/*carrusel de 4 lineas */
.carrusel,
.carrusel2,
.carrusel3,
.carrusel4 {
pointer-events: none;
opacity: 0;
}
.carrusel {
animation: tcarousel 20s ease infinite;
}
.carrusel2 {
animation: tcarousel 20s ease -5s infinite;
}
.carrusel3 {
animation: tcarousel 20s ease 10s infinite;
}
.carrusel4 {
animation: tcarousel 20s ease 10s infinite;
}
@keyframes tcarousel {
0% {
opacity: 0;
transform: translateX(30px);
pointer-events: none;
}
6% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
24% {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
30% {
opacity: 0;
transform: translateX(-30px);
pointer-events: none;
}
100% {
opacity: 0;
pointer-events: none;
}
}
</Style>
Si has seguido todos los pasos tal como se indican, el resultado que verás al hacer una vista preliminar será el siguiente:
Conclusión
En resumen, hemos detallado de manera clara y precisa el proceso para crear un carrusel de texto utilizando Elementor, brindando una guía completa y fácil de seguir.
Si tienes alguna pregunta o comentario sobre este tutorial, ¡no dudes en compartirlo!
Tu opinión es importante y ayuda a mejorar continuamente los contenidos.
¡Esperamos tus comentarios!
