Aplicar código a un widget específico

Cada widget que incluyas en tu proyecto lleva un ID único. Puedes utilizar este valor para cambiar sus propiedades al aplicar el código personalizado.

Por ejemplo, si quieres aplicar una animación personalizada a un widget de texto, sigue estos pasos:

1. Haz clic derecho en el widget para que aparezca el menú contextual y selecciona ‘Inspect’. Esto abrirá el panel de Elementos de Herramientas para desarrolladores.
2. Localiza el elemento con el atributo data-id del widget que quieres modificar, y luego copia el valor de la secuencia del atributo data-id. Este es el valor que usarás para hacer referencia a este widget específico en tu código personalizado.
3. Vuelve a tu proyecto Readymag y pega tu código dentro del Editor de Código.
   
   

Hemos preparado un ejemplo de código personalizado que convierte un cuadro de texto en un bloque animado al estilo de una máquina de escribir.

Para probarlo, copia el código que aparece a continuación y pégalo en la pestaña СSS del widget Código:

[data-id="PASTE WIDGET ID HERE"] > div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid; /* Cursor style */
animation: typing 4s steps(15, end), blink-caret 0.5s 8 forwards; /* 15 steps per 4s (15 characters in the line)*/
}
/* Input animation */ @keyframes typing { from { width: 0 } to { width: 100% }
}
/* Cursor animation */
@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black } /* black — cursor color */
}