Seguro que has visto algún efecto en alguna web que te gustaría replicar en tu página, la configuración que vamos a ver trata sobre cómo cambiar texto en bucle con la ayuda de la inteligencia artificial y sin saber nada de programación. Tan solo necesitas trabajar con WordPress, saber cómo se configura tu tema instalado y darte de alta en una IA que te permita consultas como las que verás aquí. En esta ocasión utilizaré el tema Divi y ChatGPT como inteligencia artificial.
Generar código con CahtGTP para cambiar texto en bucle
El efecto a reproducir es muy sencillo, por eso, antes de indicar dónde y cómo colocar el código vamos a generarlo con la aplicación gratuita ChatGPT.
ChatGPT tiene una versión de pago con información más actualizada, pero para nuestro propósito basta con registrarnos de forma gratuita con la cuenta de Gmail, Microsoft, Apple o creando una cuenta personalizada.
Una vez que hemos accedido empezaremos a comunicar a la inteligencia artificial todos los pasos que debe seguir para poder configurar el código correcto. Cada una de estas informaciones que escribimos esperando una respuesta de la IA se conocen con el nombre de "prompt".
Los prompt deben ser muy claros, concretos y detallados para que la respuesta que obtengamos sea lo más precisa posible a lo que necesitamos.
Estos son los prompt que he utilizado para conseguir el código para poder cambiar texto en bucle:
- ¿Puedes contestarme en español?
- Quiero que me muestres un código para mi página web para crear un efecto especial que te contaré ahora.
- ¿Puedes crearme el código necesario para poder mostrar una palabra o frase que cambie cada 1 segundo y que esté adaptado al tema Divi?
Código javascript
De los códigos anteriores solo nos vale el código JavaScript para implementarlo en el tema Divi, y dentro de ese código hay que tener en cuenta varios factores que podemos cambiar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> document.addEventListener('DOMContentLoaded', function() { var textElement = document.getElementById('cambio-de-texto'); var palabras = ['Palabra1', 'Palabra2']; // Reemplaza con tus propias palabras o frases var indice = 0; function cambiarTexto() { textElement.textContent = palabras[indice]; indice = (indice + 1) % palabras.length; } setInterval(cambiarTexto, 1000); // Cambia cada 1 segundo (1000 milisegundos) }); </script> |
- Identificador: En la línea 3 aparece el nombre del identificador CSS (cambio-de-texto) que necesitamos para aplicar el efecto al texto que elijamos. Se puede cambiar por uno de nuestra preferencia o dejar el que está ya configurado.
- Palabras o frases en bucle: En la línea 4 hay que cambiar las palabras preconfiguradas por el texto que se intercambiará.
- Tiempo: la tercera línea, empezando desde abajo, marca el tiempo en milisegundos entre la aparición de cada texto.
Configuración de texto en bucle en Divi
Para aplicar el efecto es necesario utilizar un bloque de texto para configurar la palabra o frase que queremos modificar y un bloque de código donde colocaremos el script anterior.
1.- Módulo de texto
En el módulo de texto colocamos el texto inicial que aparecerá al cargar la página y lo configuramos con los estilos que se adapten a nuestra web.
Para asignar el efecto del script, editamos el texto del módulo como código HTML ( pestaña "Texto") y añadimos el nombre del identificador, en la etiqueta principal si queremos que cambie la frase completa, o en una nueva etiqueta "spam" si queremos cambiar texto en bucle a una sola palabra.
En el ejemplo anterior sólo quiero cambiar una palabra y por eso la encierro entre dos etiquetas spam y le asigno el identificador del script de la siguiente forma:
<h1>El Poder y la Sostenibilidad del <spam id="cambio-de-texto">Futuro</spam></h1>
2.- Módulo de código
Añadimos un módulo de código en cualquier parte del diseño, en la misma página donde se encuentra el módulo de texto modificado.
Yo suelo colocarlo inmediatamente después del módulo de texto para tenerlo controlado y mantener un poco de orden dentro del sitio web, pero esto es a gusto de cada uno.
Copiamos el script que nos arrojó la consulta de ChatGPT y la pegamos dentro de este módulo, respetando las etiquetas de apertura y cierre del código JavaScript.
Tenemos que confirmar que el identificador es exactamente igual que el que colocamos en el módulo de texto y cambiamos las palabras o la frase que va a cambiar en bucle.
En el código he colocado la primera por la que se sustituirá la primera vez, y la segunda palabra por la original que tenemos puesta en el módulo de texto.
Esto hay que hacerlo así porque el efecto, una vez que arranque a funcionar, solo mostrará las palabras que tengamos en el script. El texto original que hace referencia al identificador que hemos puesto, desaparecerá para ser sustituido por este proceso en bucle.
Por tanto, para cambiar la palabra "Futuro" del texto origen, y que se repita en bucle, hay que colocarla la última en el script del módulo de código de Divi.
var palabras = ['Presente', 'Futuro']; // Reemplaza con tus propias palabras o frasesDe esta forma, una vez que guardemos los cambios y cargue el efecto para cambiar texto en bucle, tendremos el siguiente resultado que se muestra en la siguiente imagen:
¿Qué te ha parecido? Déjame tus comentarios y si os gusta este tipo de artículos, puedes sugerir que replique algún efecto más que te haya gustado y quieras tener en tu web.
0 comentarios