Paso 1: Abre un documento de Google Docs.
Paso 2: En HighLevel, ve a la Biblioteca de Medios, haz clic en los ‘3 puntos’ de la primera imagen que quieras agregar a tu presentación de diapositivas y haz clic en ‘Obtener enlace’.
Ahora ve a tu documento de Google y pega el enlace. Haz esto con todas las imágenes que quieras agregar a tu presentación de diapositivas.
Paso 3: En el creador de sitios web, haz clic en la ventana ‘Custom CSS’ y pega uno de los fragmentos de código a continuación (dependiendo de cuántas imágenes quieras en tu presentación). Haz clic en guardar.
El efecto aún no funcionará. Necesitamos agregar las imágenes y aplicar el ‘CSS Selector’ en los pasos 4 y 5.
:root {
--image-1: url('PLACEHOLDER_IMAGE_URL_1'); /* Replace with your image #1 URL */
--image-2: url('PLACEHOLDER_IMAGE_URL_2'); /* Replace with your image #2 URL */
--image-3: url('PLACEHOLDER_IMAGE_URL_3'); /* Replace with your image #3 URL */
}
/* Background image animation */
@keyframes changeBackground {
0%, 20% {
background-image: var(--image-1);
}
30%, 50% {
background-image: var(--image-2);
}
60%, 80% {
background-image: var(--image-3);
}
90%, 100% {
background-image: var(--image-1); /* Loop back to the first image */
}
}
/* Apply animation to section */
#your-section {
animation: changeBackground 10s infinite; /* Adjust time as needed for faster or slower transitions */
background-size: cover;
background-position: center;
transition: background-image 0.3s ease-in-out;
}
Paso 4: Abre la ventana ‘Custom CSS’. Copia los enlaces de las imágenes desde tu documento de Google y pégalos en el código dentro de :root (reemplazando el marcador de posición). Haz clic en Guardar.
Paso 5: Haz clic en la sección a la que deseas agregar el efecto, ve a la pestaña avanzada y copia el ‘CSS Selector’. Abre la ventana ‘Custom CSS’ y reemplaza ‘your-section’ con el selector que copiaste.