(Buena Practica: Deja una sección del mismo porte que el header statico para que no se traslape con la proxima sección.)

1. Carrusel:

1.1) Agregar la clase "ctgt_carrusel" a una sección hace que todas las imagenes de esa seccion se transformen en slides. El codigo usa la url "original" de cada imagen, así que no importa el tamañano del elemento en la sección. (util para dejar muy chiquitito en una esquina por si llegan a aparecer mientras esta cargando)

1.2) Agregar la clase "boxed" a una sección que ya tiene "ctgt_carrusel", hace que el carrusel sea del ancho del contenedor, en vez de toda la pantalla

1.3) En los elementos de una seccion con carrusel, agregar las clases "anterior" o "siguiente" hace que se pueda navegar entre las imagenes.

1.4) Si a una imagen le agregan la clase "no_carrusel" entonces queda como parte del contenido de la seccion, y no se usa para crear un slide.

1.5) Agregar la clase "navegacion" a una sección que ya tiene "ctgt_carrusel", hace que aparezcan las pelotitas de navegacion

1.6) Agregar la clase "duracion_1" hasta "duracion_10" cambia cuantos segundos se demora en cambiar de slide.

1.7) Agregar la clase "duracion_0" hace que no se cambie automatico. (Bueno para combinar con botones de navegacion)

1.8) Para que una foto chica sea clickeable y se amplíe a una galería, simplemente ir a las opciones de la imagen -> Click Action -> Image Gallery.

2. Acordeón:

2.1) Agregar la clase "ctgt_acordeon" a una sección hace que se oculte y se transforme en acordeon.

2.2) Para activar un acordeon, se puede hacer un link tipo "ir a sección" que vaya a la sección transformada. O programaticamente con CTGT.acordeon($selector)

2.3) Es buena practica ponerle nombre a la sección, para identificarla al asocial con los clicks

Link a acordeón en texto

3. Lightbox:

3.1) Agregar la clase "ctgt_lightbox" a una sección hace que se oculte y se transforme en un lightbox (modal).

3.2) El lightbox se centra en la mitad de la seccion y con un ancho de 764px (es decir, se pierden 98px de cada costado de la sección) y usar "fondo imagen ancho completo" no funciona muy bien. (En movil es 280px, se pierden 20px por lado)

3.3) Para activar un lightbox, se puede hacer un link tipo "ir a sección" que vaya a la sección transformada. O programaticamente con CTGT.lightbox($selector)

3.4) Es buena practica ponerle nombre a la sección, para identificarla al asocial con los clicks

3.5) Agregar la clase "ctgt_lightbox_iframe" a cualquier elemento con link externo, hace que se abra en un lightbox dentro dentro de un iframe.

4. Formulario:

4.1) Agregar la clase "ctgt_form" a una sección hace que el formulario tenga altura dinamica. importante: Sólo puede estar el formulario en esa sección.

4.2) Junto a "ctgt_form" en la sección, agregar la clase "col2", "col3", "col4" para cambiar el numero de columnas.

4.3) Se puede agregar la clase "boton_abajo" para obligar a que el boton final este en una fila nueva

Titulo del formulario

Ver bases

5. Animaciones Lottie:

5.1) Agregar un elemento HTML personalizado con <div class="ctgt_lottie" data-lottie="url-a-la-animacion-lottie.json"></div> y se cargará automaticamente del porte maximo dentro del elemento.

5.2) Hay varias páginas donde encontrar animaciones lottie como https://lottiefiles.com/free-animations/free-download

https://lottie.host/2c7e7dfd-96ce-4c50-9241-a8619ed804b6/68rIaqpgLn.json

6. Animaciones de entrada:

6.1) Agregar la clase "ctgt_entrada" a cualquier seccion o elemento que se quiera animar. Las animaciones estan en https://animate.style/ y la por defecto es "animate__fadeInUp" (pueden poner cualquiera pero hay que cambiar "animate__" por "ctgt__")

6.2) Si se agrega la clase "siempre" a un elemento "ctgt_entrada", se animará cada vez que entre a la pantalla. Si no, es sólo la primera vez.

Se animan Siempre

Se animan una vez

6.3) Tambien puedes usar animaciones para llamar la atencion agregando las clases "animate__animated animate__infinite" a un elemento + la clase de la animacion "animate__###" (aquí si es animate__ y no ctgt__)

clase: espaciado-letra-1em

clase: espaciado-letra-2em

clase: espaciado-letra-4em

¡FIN!

(por ahora)