El Editor de bloques de Waclis incluye diferentes componentes visuales avanzados que permiten crear experiencias más ricas que una imagen o una Card estática.

Dentro de:

Componentes → Elementos

encontrarás, entre otros:

• Carousel

• Gallery

• Slider

• Flip box

• Counter

• Image Compare

Cada uno resuelve una necesidad diferente.

En este tutorial aprenderás:

• qué diferencia existe entre Carousel, Gallery y Slider;

• cuándo utilizar cada uno;

• cómo trabajar con elementos repetibles;

• cómo agregar o eliminar elementos sin romper la estructura;

• cómo mantener proporciones de imágenes;

• cómo revisar Cover y Contain;

• cómo utilizar Flip box correctamente;

• por qué no conviene ocultar información esencial detrás de Hover;

• cómo utilizar Counter únicamente con cifras reales;

• por qué un Counter no significa automáticamente que el dato sea dinámico;

• cómo utilizar Image Compare para comparaciones reales;

• qué tipo de fotografías funcionan mejor;

• cómo revisar responsive;

• qué precauciones tomar al editar HTML, Classes, IDs o CSS.

¿Qué componente debería utilizar?

Una guía rápida:

No elijas el componente solamente por el efecto

Este es el principio principal del tutorial.

No deberías utilizar:

Carousel

porque:

“se mueve”.

Ni:

Flip box

porque:

“se da vuelta y queda moderno”.

Ni:

Counter

porque:

“los números animados llaman la atención”.

Ni:

Image Compare

si las dos imágenes no representan realmente una comparación.

Primero define qué información necesitas comunicar

Después selecciona el componente.

1. ¿Cómo utilizar Carousel?

El componente Carousel permite recorrer varios elementos dentro de una misma zona.

Conceptualmente:

┌────────────────────────────────┐
│                                │
│           SLIDE A              │
│                                │
│     ←                    →     │
└────────────────────────────────┘

Al avanzar:

┌────────────────────────────────┐
│                                │
│           SLIDE B              │
│                                │
│     ←                    →     │
└────────────────────────────────┘

¿Qué puede contener?

Dependiendo de la composición:

• Images;

• Cards;

• texto;

• Links;

• Buttons;

• combinaciones de contenido.

Carousel no es solamente para fotografías

Puede presentar:

Card 1
Card 2
Card 3

u otros elementos repetibles.

Carousel vs sección Carruseles

Waclis también dispone de una categoría de secciones prediseñadas:

Secciones → Carruseles

La sección prediseñada te ofrece una composición ya armada.

El componente Carousel permite incorporar o trabajar con el elemento dentro de una composición personalizada.

¿Cuándo conviene Carousel?

Puede ser útil cuando tienes:

• varios contenidos equivalentes;

• espacio limitado;

• elementos que pueden recorrerse;

• Cards relacionadas;

• imágenes relacionadas.

Por ejemplo

Testimonio A
Testimonio B
Testimonio C

podrían presentarse dentro de un Carousel según el diseño.

O:

Proyecto A
Proyecto B
Proyecto C

Pero pregunta:

¿Es importante que todos los elementos sean visibles simultáneamente?

Si la respuesta es sí,

puede ser mejor una Grid.

Ejemplo

Tres servicios principales:

[ SERVICIO A ][ SERVICIO B ][ SERVICIO C ]

pueden ser más claros visibles simultáneamente.

Convertirlos en Carousel

[ SERVICIO A ] →

obliga al visitante a recorrerlos.

No ocultes contenido innecesariamente

Carousel vs Gallery

Gallery muestra una colección visual.

Carousel permite recorrer elementos.

Gallery

[ IMG ][ IMG ][ IMG ]

[ IMG ][ IMG ][ IMG ]

Carousel

[ IMG ] ← →

o:

[ CARD A ][ CARD B ] →

según la composición.

Carousel vs Slider

Pueden parecer similares.

La diferencia práctica depende del diseño utilizado.

Como orientación:

Carousel

suele funcionar bien para recorrer varios elementos relacionados.

Slider

suele dar mayor protagonismo a cada vista o Slide.

Ejemplo Carousel

[ CARD A ][ CARD B ][ CARD C ] →

Ejemplo Slider

┌────────────────────────────────┐
│                                │
│       GRAN CONTENIDO A         │
│                                │
└────────────────────────────────┘

después:

┌────────────────────────────────┐
│                                │
│       GRAN CONTENIDO B         │
│                                │
└────────────────────────────────┘

Utiliza Navigator en Carousel

Un Carousel puede tener una estructura interna considerable.

Conceptualmente:

Carousel
├── Track
│   ├── Slide
│   │   └── Content
│   ├── Slide
│   │   └── Content
│   └── Slide
│       └── Content
├── Previous Control
└── Next Control

La estructura exacta dependerá del componente utilizado.

No asumas estos nombres literalmente

Utiliza:

Navigator

para identificar la estructura real.

¿Qué debes clonar?

Si quieres un nuevo elemento:

clona la unidad completa que representa un Slide.

No clones solamente

Image

si esa Image está dentro de:

Slide

Podrías terminar con:

Slide 1
├── Image A
└── Image B

cuando querías:

Slide 1
└── Image A

Slide 2
└── Image B

Esta diferencia es fundamental

Después de clonar un Slide

revisa todo lo que contiene.

Por ejemplo:

• Image;

• Alt;

• Heading;

• Paragraph;

• Link;

• Button;

• IDs.

Error típico

Original:

Proyecto A
→ /proyecto-a

Copia:

Proyecto B
→ /proyecto-a

Actualiza también la URL

Eliminar un Slide

Selecciona el Slide completo.

No elimines solamente su contenido

dejando:

Slide vacío

Un Slide vacío puede generar:

• espacio en blanco;

• transición vacía;

• controles que avanzan hacia nada.

Recuerda

Waclis no solicita confirmación al eliminar.

Si seleccionas el nivel equivocado:

Deshacer

No elimines Track o Carousel completo

si solamente querías retirar un Slide.

Controles anterior/siguiente

Un Carousel puede incluir controles visuales.

Por ejemplo:

←

y:

→

No los reemplaces por Links comunes

sin comprender su función.

Son controles internos del componente.

No cambies:

• Classes;

• atributos;

• estructura;

solamente para cambiar:

• color;

• tamaño;

• apariencia.

Utiliza Estilo o CSS localizado.

Indicadores

Algunos diseños pueden incluir indicadores de posición.

Conceptualmente:

● ○ ○ ○

Si existen

deben mantenerse relacionados con la cantidad de Slides.

No afirmaremos que cualquier Carousel los genera o actualiza automáticamente en todos los diseños.

Si agregas Slides y observas indicadores

comprueba que sigan funcionando correctamente.

Autoplay

Algunos diseños de Carousel o Slider pueden incluir comportamientos automáticos.

No asumiremos que todos los componentes poseen una opción visual específica de Autoplay.

Si el diseño ya avanza automáticamente

revisa la experiencia real.

No hagas que cambie demasiado rápido

si el usuario necesita leer.

Si contiene texto

el tiempo debe permitir comprenderlo.

No es necesario que todo Carousel se reproduzca automáticamente.

Un control manual puede ser suficiente

Hover y Carousel

Las Cards dentro de Carousel pueden tener Hover.

Pero los controles de navegación ya comunican interacción.

Evita sobrecargar:

Slide
+
zoom
+
rotación
+
sombra
+
movimiento

simultáneamente.

Carousel responsive

Desktop:

[ A ][ B ][ C ]

puede mostrar varios elementos.

Mobile:

[ A ]

puede ser más claro.

Pero no debes asumir que el componente modificará automáticamente la cantidad visible exactamente de esa manera.

Comprueba:

• ancho;

• imágenes;

• Cards;

• controles;

• textos.

Si un Card queda demasiado estrecho

no reduzcas Font size inmediatamente.

Revisa la estructura del Carousel.

Controles en mobile

Los controles deben seguir siendo:

• visibles;

• accesibles;

• fáciles de seleccionar.

No los hagas:

10 px

solo para ganar espacio.

2. ¿Cómo utilizar Gallery?

El componente Gallery está pensado para organizar una colección de imágenes.

Conceptualmente:

[ IMG ][ IMG ][ IMG ]

[ IMG ][ IMG ][ IMG ]

Puede utilizarse para

• fotografías;

• proyectos;

• instalaciones;

• eventos;

• productos visuales;

• trabajos realizados;

• colecciones.

Gallery vs sección Galerías de imágenes

Dentro de Waclis también existe:

Secciones → Galerías de imágenes

Esa categoría ofrece composiciones completas ya preparadas.

El componente Gallery permite incorporar o modificar una galería dentro de una estructura personalizada.

Gallery vs varias Images

Puedes agregar:

Image
Image
Image
Image

manualmente.

Pero Gallery puede resultar más apropiada cuando:

esas imágenes forman una colección única.

Ejemplo

NUESTRAS INSTALACIONES

[ IMG ][ IMG ][ IMG ]
[ IMG ][ IMG ][ IMG ]

No utilices Gallery para imágenes sin relación

Por ejemplo:

foto de producto
foto de empleado
mapa
logo
captura de pantalla

solamente para completar seis lugares.

La colección debe tener una lógica.

Gallery vs Portafolio

Gallery se centra en:

imágenes.

Portafolio se centra en:

trabajos, proyectos o casos.

Una Gallery puede mostrar:

fotos del proyecto

mientras Portafolio puede presentar:

Proyecto
Título
Descripción
Resultado
Link

Gallery no necesariamente necesita descripción extensa

Utiliza Navigator

La estructura conceptual puede ser:

Gallery
├── Gallery Item
│   └── Image
├── Gallery Item
│   └── Image
└── Gallery Item
    └── Image

Un Item también puede contener Link según el diseño

Por ejemplo:

Gallery Item
└── Link
    └── Image

No asumas la estructura

Compruébala.

Clonar una imagen dentro de Gallery

Si necesitas un nuevo elemento:

selecciona:

Gallery Item

cuando ese sea el contenedor repetible.

No clones Image únicamente

si la estructura tiene:

• Link;

• wrapper;

• efectos;

• Classes.

Después de clonar

actualiza:

• Set Image;

• Alt;

• Link si existe;

• ID.

Eliminar un elemento

Selecciona Gallery Item completo.

No dejes wrappers vacíos.

Proporciones

Este es uno de los puntos más importantes en una Gallery.

Si utilizas imágenes con proporciones muy diferentes

puedes obtener:

[ horizontal ] [ vertical ]
[ cuadrada    ] [ panorámica ]

con una grilla muy irregular.

Eso puede ser intencional

en una Gallery tipo mosaico,

pero si buscas uniformidad:

mantén una proporción común.

Por ejemplo

1:1

o:

4:3

o:

16:9

según el diseño.

Cover

Puede ser apropiado para una grilla uniforme de fotografías.

Por ejemplo:

.mi-galeria .gallery-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

Pero revisa los recortes

Contain

Puede ser más adecuado si necesitas mostrar:

• producto completo;

• pieza gráfica;

• documento;

• logo.

No existe una única regla.

Alt

Cada imagen relevante debería tener una descripción adecuada.

Ejemplo

Vista exterior del showroom

Evita

foto1

galeria-03

Gallery y Links

Si las imágenes son clicables:

revisa qué ocurre.

Pueden dirigir a:

• imagen ampliada;

• página;

• proyecto;

• otro recurso;

según el diseño.

No asumas una función de ampliación automática

si no la has comprobado.

Si la Image ya está dentro de Link:

no agregues un segundo Link.

Gallery responsive

Desktop:

[ A ][ B ][ C ][ D ]

Tablet:

[ A ][ B ]

[ C ][ D ]

Mobile:

[ A ]

[ B ]

[ C ]

[ D ]

o dos por fila si las imágenes siguen siendo claras.

Comprueba el diseño real.

No mantengas cinco miniaturas diminutas por fila en celular

solo para conservar la misma cantidad que desktop.

Gallery y peso de página

Una Gallery puede contener muchas imágenes.

Por ejemplo:

25 fotografías

Aunque visualmente se organicen bien

pueden aumentar considerablemente el peso de la página.

Selecciona las imágenes realmente necesarias.

No publiques todas las fotografías disponibles solamente porque existe Gallery.

3. ¿Cómo utilizar Slider?

El componente Slider permite presentar diferentes Slides secuenciales con un fuerte protagonismo visual.

Conceptualmente

SLIDE 1

↓

SLIDE 2

↓

SLIDE 3

Puede contener:

• Images;

• Heading;

• Paragraph;

• CTA;

• composiciones visuales.

Slider vs sección Sliders de imágenes

Waclis también dispone de:

Secciones → Sliders de imágenes

La sección prediseñada ofrece una composición completa.

El componente Slider permite incorporar esta lógica dentro de una construcción personalizada.

¿Cuándo utilizar Slider?

Puede ser adecuado cuando cada Slide necesita:

• mucho espacio;

• protagonismo;

• imagen principal;

• mensaje propio.

Ejemplo

SLIDE A

Nueva colección

Texto breve

[ VER PRODUCTOS ]

Después:

SLIDE B

Soluciones para empresas

Texto breve

[ CONOCER MÁS ]

Pero cuidado

Si cada Slide tiene un objetivo totalmente diferente:

el visitante puede no llegar a ver todos.

No coloques información indispensable únicamente en el tercer Slide

El primer contenido debe seguir siendo útil

Slider vs Banner

Banner normalmente presenta un mensaje visual estático.

Slider permite varios mensajes.

Si solo necesitas un mensaje:

utiliza Banner.

No utilices Slider con un único Slide

solo porque la plantilla lo incluye.

Puede agregar complejidad innecesaria.

Slider vs Carousel

Como orientación:

CAROUSEL
→ recorrer elementos relacionados

SLIDER
→ cambiar entre composiciones de mayor protagonismo

La frontera puede variar según el diseño

Por eso analiza el resultado, no solamente el nombre.

Estructura interna

Conceptualmente:

Slider
├── Slide
│   ├── Image
│   ├── Heading
│   ├── Paragraph
│   └── Link
├── Slide
│   └── ...
└── Controls

Utiliza Navigator

Clona Slide completo

Mismo principio que Carousel.

No clones únicamente:

• Image;

• Heading;

si necesitas un nuevo Slide.

Después actualiza

• imagen;

• Alt;

• título;

• descripción;

• CTA;

• URL;

• IDs.

Error típico

Slider original:

SLIDE 1
NUEVA COLECCIÓN
→ /coleccion

Lo clonas:

SLIDE 2
SERVICIOS PARA EMPRESAS
→ /coleccion

El CTA sigue llevando a la colección anterior.

Revisa cada Link

Eliminar Slide

Selecciona Slide completo.

No dejes Slides vacíos.

Tampoco elimines controles internos pensando que pertenecen a un Slide

Navigator es fundamental.

Imágenes en Slider

Slider suele utilizar imágenes grandes.

Por eso necesitas revisar:

• resolución;

• peso;

• recorte;

• Position;

• Cover;

• mobile.

Desktop

Una fotografía panorámica:

1920 × 700

puede funcionar visualmente.

Mobile

el recorte puede convertirse en algo completamente distinto.

Ejemplo

Desktop:

[ persona a la derecha | espacio texto izquierda ]

Mobile con Cover:

[ espacio sin persona ]

si el recorte elimina al sujeto.

Revisa cada Slide individualmente.

No basta con revisar el primero

Texto sobre Slider

Mantén suficiente contraste.

Puede requerir:

• Overlay;

• zona limpia en la imagen;

• fondo del contenido.

No dependas de que todas las fotografías tengan el mismo nivel de luminosidad.

CTA

Si cada Slide tiene CTA:

prueba todos.

No utilices textos genéricos:

Ver más

si puedes escribir:

Ver colección

Conocer servicio

Slider y autoplay

Si existe:

revisa velocidad y legibilidad.

Un usuario no debería estar leyendo:

Soluciones para empresas...

y que el Slide desaparezca a mitad de lectura.

Slider y controles

Mantén visibles:

• anterior;

• siguiente;

cuando el diseño los utiliza.

No confíes exclusivamente en un cambio automático.

Slider y celular

Un Slider alto puede ocupar casi toda la pantalla.

Revisa:

• Height;

• Typography;

• CTA;

• imagen;

• controles.

No mantengas una altura desktop fija en celular

si genera una composición incómoda.

4. ¿Cómo utilizar Flip box?

Flip box es un componente que presenta una cara inicial y otra cara o contenido alternativo mediante una interacción visual.

Conceptualmente:

CARA FRONTAL

[ ICONO ]

SERVICIO

al interactuar:

CARA POSTERIOR

Descripción breve

[ CONOCER MÁS ]

¿Para qué puede utilizarse?

Puede ser útil para:

• Cards breves;

• características;

• servicios;

• información complementaria;

• presentaciones visuales.

Pero debe utilizarse con moderación

La principal precaución

No ocultes información esencial únicamente detrás de Hover.

¿Por qué?

En computadora puede existir:

Hover

al pasar el mouse.

En un dispositivo táctil

la interacción no es necesariamente igual.

Por eso la cara frontal debería comunicar suficiente información.

Ejemplo adecuado

Frente:

[ ICONO ]

SEGURIDAD

Reverso:

Conoce las principales medidas y características de seguridad.

Ver detalles

El visitante ya sabe qué tema está explorando.

Ejemplo problemático

Frente:

?

Reverso:

Toda la información esencial del servicio

El visitante depende completamente de la interacción para entenderlo.

Flip box no debería reemplazar una Card habitual cuando no aporta

Pregunta

¿La segunda cara realmente añade una capa útil de información?

Si la respuesta es no:

utiliza Card.

Estructura conceptual

Flip Box
├── Front
│   ├── Icon / Image
│   └── Heading
└── Back
    ├── Paragraph
    └── Link

La estructura exacta puede variar.

Utiliza Navigator

Antes de editar identifica:

• Front;

• Back;

• contenedor completo.

No clones solamente Front

si quieres otro Flip box.

Clona la unidad completa.

Después actualiza ambas caras.

Error típico

Frente:

CONSULTORÍA

Reverso:

Texto del servicio anterior

Esto ocurre al clonar y editar solo la cara visible.

Revisa siempre:

FRONT
+
BACK

Links

Si Back contiene CTA:

revisa URL.

No dejes el destino de la Card original.

IDs

Mismo principio:

• IDs únicos;

• Classes compartidas cuando corresponda.

No modifiques Classes internas

si controlan la transición o la estructura.

Flip box y Hover

No personalices el estado Hover indiscriminadamente si ya es parte de la propia interacción del componente.

Puedes terminar interfiriendo con:

• Transform;

• transición;

• visibilidad de caras.

Antes de aplicar CSS:

identifica cómo funciona el componente.

Por ejemplo evita globalmente:

.flip-box:hover {
    transform: scale(1.2);
}

si el componente interno ya utiliza transform para dar vuelta las caras.

Una segunda transformación puede interferir.

Utiliza un wrapper externo si necesitas un efecto adicional,

o evita combinar efectos.

No agregues animaciones de entrada a las dos caras individualmente

sin probar.

Flip box responsive

Prueba especialmente:

• celular;

• tablet;

• interacción táctil.

Comprueba que el contenido posterior pueda accederse correctamente.

No confíes solamente en la vista desktop.

Texto posterior

Debe ser breve.

Un reverso con:

300 palabras

no suele funcionar bien.

Flip box es mejor para información concisa.

Si necesitas mucha explicación:

utiliza:

• Card;

• Accordeon;

• página de detalle.

Altura

Las dos caras deben caber correctamente dentro del componente.

Evita Height demasiado baja

que corte:

• Paragraph;

• Button.

Tampoco fijes una Height enorme

si el contenido es breve.

Diseña con contenido real.

5. ¿Cómo utilizar Counter?

El componente Counter permite destacar cifras.

Conceptualmente:

+500
CLIENTES

Otro ejemplo

15
AÑOS DE EXPERIENCIA

Otro

25
PAÍSES

Siempre que esos datos sean correctos.

Counter no es una decoración numérica

Este punto es fundamental.

No utilices:

98 %
SATISFACCIÓN

si no existe información que respalde ese porcentaje.

Tampoco:

10.000
CLIENTES

si es una aproximación inventada para que la página se vea más impresionante.

Un Counter hace que una cifra tenga mucho protagonismo

Por eso la cifra debe ser especialmente confiable.

¿Cuándo utilizar Counter?

Para datos como:

• años de trayectoria;

• proyectos completados;

• sucursales;

• países;

• productos;

• clientes;

cuando el dato sea:

• real;

• relevante;

• verificable.

Ejemplo

18
AÑOS DE TRAYECTORIA

si la empresa efectivamente tiene 18 años.

Cuidado con datos que cambian

Por ejemplo:

18
AÑOS DE TRAYECTORIA

en 2026

puede necesitar convertirse en:

19

en 2027.

Un Counter manual no necesariamente se actualiza solo

Esta es una aclaración importante

Aunque visualmente el número pueda tener una animación:

eso no significa que la cifra esté conectada a una base de datos o se actualice automáticamente.

Animación del número vs dato dinámico

Son cosas diferentes.

Puedes tener:

0
1
2
...
500

como efecto visual

y aun así:

500

ser un valor escrito manualmente.

No confundas animación con sincronización.

Counter vs Progress Bar

Counter muestra una cifra.

Progress Bar representa una magnitud visual proporcional.

Por ejemplo:

500 clientes

→ Counter.

Mientras:

80 % completado

→ Progress Bar, si el dato es real.

Counter vs Badge

Badge:

NUEVO

Counter:

120
PROYECTOS

No cumplen la misma función.

Estructura conceptual

Counter
├── Value
└── Label

Puede incluir otros elementos según el diseño.

Utiliza Navigator

Editar Counter

Reemplaza:

• valor;

• etiqueta.

Mantén coherencia

1
SUCURSAL

no debería decir:

SUCURSALES

si quieres un texto perfectamente consistente.

Puedes reformular:

1
SEDE OPERATIVA

Unidades

Puede incluir:

25
AÑOS

o:

+500
PROYECTOS

si el símbolo tiene significado real.

Cuidado con +

+500

significa:

más de 500.

No lo utilices si el dato exacto es:

487

También evita:

+10.000

si no puedes sostener esa cifra.

Porcentajes

95 %

debería representar una métrica real.

No inventes métricas de:

• satisfacción;

• éxito;

• efectividad.

Fechas

Counter no es necesariamente la mejor forma de mostrar:

2026

si simplemente es un año.

Puede ser mejor texto o Timeline.

Varios Counters

Ejemplo:

15
AÑOS

500
PROYECTOS

30
ESPECIALISTAS

Todos deberían usar:

• una lógica común;

• mismo formato;

• datos comparables en nivel de importancia.

Evita mezclar:

15 años
500 proyectos
100 % calidad

si “100 % calidad” no es una medida real.

Counter responsive

Desktop:

[ 15 ][ 500 ][ 30 ][ 8 ]

Mobile:

[ 15 ][ 500 ]

[ 30 ][ 8 ]

o:

15

500

30

8

según el diseño.

Utiliza Grid cuando corresponda.

No reduzcas los números hasta perder protagonismo.

Tampoco los hagas tan grandes que ocupen varias pantallas.

Counter y mantenimiento

Crea una rutina de revisión.

Datos especialmente sensibles al tiempo:

• años;

• cantidad de clientes;

• proyectos;

• sucursales;

• miembros del equipo.

No mantengas:

10 años

durante cinco años.

Alternativa más estable

En algunos casos puede utilizarse:

DESDE 2010

como texto,

si prefieres evitar una cifra que necesita actualización anual.

Evalúa qué formato es más mantenible.

Counter y fuentes

Si la cifra es importante:

mantén internamente una fuente o criterio que permita verificarla.

Por ejemplo:

500 proyectos

¿qué cuenta como proyecto?

No necesitas explicar toda la metodología en la página,

pero el dato no debería ser arbitrario.

6. ¿Cómo utilizar Image Compare?

Image Compare permite comparar visualmente dos imágenes.

Es especialmente útil para mostrar:

• antes / después;

• original / resultado;

• versión A / versión B;

• estado inicial / estado final.

Conceptualmente

ANTES      |      DESPUÉS

con un control que permite revelar una imagen sobre la otra.

Este componente tiene una condición esencial

las dos imágenes deben ser realmente comparables.

Ejemplo adecuado

Antes:

fotografía del ambiente antes de la remodelación

Después:

fotografía del mismo ambiente después de la remodelación

Otro ejemplo

Antes:

diseño original

Después:

diseño rediseñado

Otro

imagen sin tratamiento

vs:

imagen con tratamiento

si la comparación es real y apropiada.

Ejemplo problemático

Antes:

foto frontal

Después:

foto tomada desde otro ángulo

Puede resultar difícil interpretar qué cambió realmente.

La comparación ideal

Mantiene lo más posible:

• encuadre;

• posición;

• escala;

• perspectiva;

• proporción.

Mientras más similares sean las fotografías de base

más clara será la comparación.

Image Compare vs dos Images

También podrías presentar:

ANTES          DESPUÉS

[ IMG ]        [ IMG ]

mediante Grid.

¿Cuándo elegir Image Compare?

Cuando:

superponer ambas imágenes ayuda a percibir las diferencias.

¿Cuándo elegir dos Images?

Cuando:

• la comparación simultánea es suficiente;

• las imágenes tienen diferente encuadre;

• el componente interactivo no aporta.

No utilices Image Compare solo porque se ve llamativo.

Estructura conceptual

Image Compare
├── Image A
├── Image B
└── Compare Control

La estructura exacta puede variar.

Utiliza Navigator.

Cambiar imágenes

Asegúrate de reemplazar ambas.

Error frecuente

Se cambia:

ANTES

pero se deja:

DESPUÉS

de la plantilla.

Revisa siempre el par completo.

Proporción

Ambas imágenes deberían utilizar la misma proporción.

Ejemplo correcto

1200 × 800
+
1200 × 800

O al menos la misma relación:

3:2
+
3:2

Si una es:

16:9

y otra:

1:1

el componente puede:

• recortar;

• deformar;

• mostrar áreas diferentes.

Prepara las imágenes antes

cuando sea posible.

Mismo encuadre

Es especialmente importante.

Ejemplo

Antes:

habitación fotografiada desde la puerta

Después:

misma habitación desde la puerta

Esto permite comparar:

• paredes;

• muebles;

• iluminación.

Si el punto de vista cambia completamente:

el efecto pierde precisión.

Antes y después reales

No presentes una imagen generada, ilustrada o recreada como “antes” o “después” real si no corresponde.

Mantén claridad sobre el origen de las imágenes.

No alteres una imagen para exagerar artificialmente la diferencia.

Ejemplo problemático

Antes:

más oscuro artificialmente

Después:

más luminoso artificialmente

solo para hacer parecer mayor el cambio.

La comparación debería ser fiel.

Image Compare en proyectos

Puede ser especialmente útil en:

• construcción;

• arquitectura;

• decoración;

• restauración;

• diseño;

• edición visual;

• mantenimiento.

Si el cambio no es visual

no necesitas Image Compare.

Por ejemplo

antes del servicio
→ tiempo de respuesta 5 días

después
→ 2 días

es información cuantitativa,

no una comparación de imágenes.

Utiliza texto, Counter o Table según corresponda.

Etiquetas Antes / Después

Si el diseño las incluye o puedes incorporarlas claramente:

pueden ayudar a interpretar.

No dependas de que el visitante adivine cuál lado representa cada estado.

Puedes utilizar:

ANTES

DESPUÉS

O:

ORIGINAL

RESULTADO

según el contexto.

Mantén etiquetas honestas y específicas.

Alt

Ambas imágenes pueden necesitar Alt cuando aportan información.

Ejemplo:

Oficina antes de la remodelación

Oficina después de la remodelación

No utilices exactamente el mismo Alt para ambas

si representan estados diferentes.

Control de comparación

No elimines el control interno solamente porque quieres cambiar su apariencia.

Puede ser el elemento que permite la interacción.

Personaliza con CSS localizado cuando corresponda.

No reemplaces por un elemento decorativo que no se pueda utilizar.

Image Compare responsive

Prueba especialmente en celular.

El control debe:

• seguir visible;

• poder utilizarse;

• tener área suficiente.

Las imágenes deben seguir siendo reconocibles.

Si la comparación se vuelve demasiado pequeña:

puede ser mejor ocupar todo el ancho del Container.

No mantengas:

Image Compare

dentro de:

Column 3

si deja de ser útil.

Utiliza suficiente ancho.

Touch

En celular la interacción puede realizarse mediante toque o arrastre según el componente.

Pruébalo en el frontend.

No te limites a la vista previa visual.

Componentes visuales avanzados y Navigator

Repasemos por qué Navigator es tan importante.

Carousel

Carousel
└── Slide
    └── Content

Gallery

Gallery
└── Gallery Item
    └── Image

Slider

Slider
└── Slide
    └── Content

Flip box

Flip Box
├── Front
└── Back

Counter

Counter
├── Value
└── Label

Image Compare

Image Compare
├── Image A
├── Image B
└── Control

Estos diagramas son conceptuales

La estructura exacta depende del componente insertado.

Utiliza Navigator para descubrir la real.

Seleccionar padre

Puede ayudarte a pasar de:

Paragraph

a:

Slide

O de:

Image

a:

Gallery Item

Pero observa el nivel seleccionado

antes de:

• clonar;

• eliminar.

Componentes interactivos y eliminación

Recuerda:

Waclis no solicita confirmación.

Si quieres retirar una imagen de Gallery

y seleccionas:

Gallery

en lugar de:

Gallery Item

puedes eliminar toda la colección.

Utiliza Deshacer inmediatamente.

Clonación y contenido antiguo

Todos estos componentes tienen el mismo riesgo:

duplicar una estructura y olvidar actualizar elementos secundarios.

Carousel / Slider

Revisa:

• Image;

• Alt;

• Heading;

• Paragraph;

• Link;

• ID.

Gallery

Revisa:

• Image;

• Alt;

• Link;

• ID.

Flip box

Revisa:

• Front;

• Back;

• Link;

• ID.

Counter

Revisa:

• Value;

• Label;

• ID.

Image Compare

Revisa:

• Image A;

• Image B;

• Alt A;

• Alt B;

• etiquetas;

• ID.

IDs

Mantén:

ID
→ único

Classes

Pueden compartirse.

Por ejemplo

Todos los Slides pueden usar:

custom-slide

para mantener estilo.

No agregues un ID diferente a cada elemento

si solamente necesitas diseño compartido.

Linked styles

Puede aparecer en:

• Images;

• Cards;

• Slides;

• Counters;

• textos.

Esto puede ser deseable.

Por ejemplo

todos los Counter Values:

counter-value

pueden compartir:

• Font size;

• Font weight.

Si cambias uno y cambian todos:

puede ser correcto.

Pero el número debe seguir siendo individual.

No escribas el valor mediante un estilo compartido

si cada Counter tiene un dato diferente.

Responsive general

Para estos componentes revisa:

• desktop;

• tablet;

• celular.

No basta con el icono de teléfono

Recuerda:

los controles superiores sirven para:

previsualizar.

Después utiliza:

Ver página

para comprobar la interacción real.

Especialmente en:

• Carousel;

• Slider;

• Flip box;

• Image Compare.

Interacción y mobile

Un componente puede:

verse correctamente

pero:

no ser cómodo de utilizar

Por ejemplo

Carousel:

• flechas pequeñas.

Flip box:

• interacción poco clara.

Image Compare:

• controlador difícil de arrastrar.

Por eso prueba funcionalmente.

Imágenes

En Carousel, Gallery, Slider e Image Compare:

aplican las mismas buenas prácticas del componente Image.

Revisa

• resolución;

• peso;

• proporción;

• Alt;

• derechos de uso;

• Cover;

• Contain.

No cargues imágenes enormes sin necesidad.

Una página puede tener:

Slider con 5 imágenes grandes
+
Gallery con 20 fotografías
+
Carousel con 10 Cards

Eso puede generar una página visualmente compleja y pesada.

No utilices todos los componentes avanzados en la misma página solamente porque están disponibles.

Menos puede funcionar mejor

Componentes avanzados y rendimiento

Cada componente adicional puede aumentar:

• contenido;

• imágenes;

• estructura;

• comportamiento.

Pregunta siempre:

¿Este componente aporta suficiente valor para justificar su complejidad?

Ejemplo

Tres imágenes:

[ A ][ B ][ C ]

pueden necesitar solamente Grid.

No necesariamente Carousel.

Dos imágenes antes/después

pueden necesitar Image Compare.

Pero si no tienen mismo encuadre:

Grid puede ser mejor.

Cinco servicios

pueden necesitar Cards.

No necesariamente Flip box.

El componente correcto simplifica.

Accesibilidad en Carousel y Slider

El contenido principal no debería depender de un Slide que el usuario nunca llegue a ver.

Mantén:

• controles reconocibles;

• texto legible;

• suficiente contraste.

No hagas que el Slide cambie tan rápido que sea imposible leer.

Accesibilidad en Gallery

Alt cuando corresponda.

No utilices solamente imágenes para comunicar información que necesita texto.

Accesibilidad en Flip box

La información esencial debería poder comprenderse sin depender únicamente de Hover.

Esto es especialmente importante para:

• touch;

• teclado;

• diferentes formas de interacción.

Accesibilidad en Counter

La cifra necesita su contexto.

Esto:

500

sin:

PROYECTOS

puede no significar nada.

Mantén Value + Label.

Accesibilidad en Image Compare

La comparación debe poder comprenderse.

Etiquetas:

Antes
Después

pueden aportar contexto.

No dependas únicamente de:

• izquierda;

• derecha;

• color.

Animaciones

Estos componentes ya pueden incluir movimiento propio.

Por eso utiliza con especial moderación:

Avanzado → Animate on scroll

Ejemplo excesivo

Slider cambia
+
Section entra con zoom
+
Heading rebota
+
Button gira

Puede distraer.

El movimiento principal del componente suele ser suficiente.

Counter animado

Si el Counter ya anima la cifra:

no agregues otras animaciones innecesarias al número.

Image Compare

No necesita además un Hover que escale ambas imágenes.

Flip box

Ya posee una transformación visual.

No agregues otra transformación sobre el mismo elemento sin probar.

CSS personalizado: principio general

Agrega una Class al contenedor raíz.

Por ejemplo:

home-carousel-custom

Después limita:

.home-carousel-custom .elemento {
}

Gallery

portfolio-gallery-custom

Slider

hero-slider-custom

Flip box

services-flip-custom

Counter

stats-counter-custom

Image Compare

project-compare-custom

Estos nombres son ejemplos

No representan Classes obligatorias.

No sobrescribas globalmente Classes estructurales

CSS global peligroso: Carousel

Evita modificar globalmente:

.carousel {
}

si no conoces todas las instancias.

También controles genéricos.

CSS global peligroso: Gallery

Evita:

.gallery img {
}

si .gallery aparece en otras partes que no quieres modificar.

CSS global peligroso: Slider

Evita reglas generales sobre:

slide
slider

sin scope.

CSS global peligroso: Flip box

Evita sobrescribir globalmente:

transform

o:

backface-visibility

en elementos que ya utilizan la interacción.

Puedes romper el efecto.

CSS global peligroso: Counter

Evita:

.counter {
    font-size: 80px;
}

globalmente.

CSS global peligroso: Image Compare

Evita reglas globales sobre:

• images;

• handles;

• wrappers;

que puedan afectar otra instancia.

No utilices !important como primera solución

Si un componente deja de funcionar después de CSS

busca especialmente:

• display;

• position;

• transform;

• overflow;

• visibility;

• z-index;

• width;

• height.

Estos estilos pueden afectar interacciones.

Overflow

Carousel, Slider, Flip box e Image Compare pueden utilizar:

overflow

como parte de su diseño.

No cambies:

overflow: visible;

o:

overflow: hidden;

sin comprender qué parte controla.

Por ejemplo

Flip box puede necesitar recortar determinadas caras.

Slider puede necesitar ocultar Slides fuera del área visible.

Modificar Overflow puede mostrar contenidos que deberían permanecer fuera de vista.

Position

Mismo principio.

No elimines:

position

de wrappers internos sin comprender la estructura.

Transform

Especialmente delicado en:

• Slider;

• Carousel;

• Flip box;

• Image Compare.

Una interacción puede depender de transform.

No agregues:

transform: scale(...)

sobre el mismo elemento sin revisar.

Puede sobrescribir la transformación existente.

Si quieres un efecto adicional

puede ser mejor aplicarlo a un wrapper externo.

HTML del elemento

En componentes avanzados:

Editar código HTML <>

puede ser útil para comprender la estructura.

Especialmente antes de:

• clonar manualmente;

• modificar Classes;

• corregir IDs.

Estrategia segura

1. Seleccionar componente
2. Abrir HTML
3. Identificar estructura
4. No modificar todavía
5. Cerrar
6. Planificar
7. Cambiar solamente lo necesario

No reemplaces el componente completo con un ejemplo encontrado en Internet

Puede utilizar:

• otra versión de Bootstrap;

• otra biblioteca;

• otra estructura.

Waclis utiliza Bootstrap 4

Si solicitas ayuda a ChatGPT, Claude o Gemini:

indica expresamente:

Waclis utiliza Bootstrap 4.

No pidas actualizar estos componentes a Bootstrap 5

si la Página web utiliza Bootstrap 4.

Mantén las dependencias existentes.

JavaScript

Varios de estos componentes son interactivos.

Si ya funcionan:

no agregues un segundo script para recrear la misma interacción.

Por ejemplo

Carousel ya funciona.

No agregues otro plugin de Carousel solamente para cambiar:

• tamaño;

• color;

• Border radius.

Eso puede generar:

• controles duplicados;

• conflictos;

• carga adicional.

Lo mismo con:

• Slider;

• Flip box;

• Image Compare.

Utiliza CSS y las opciones del componente cuando el cambio sea visual.

Si la interacción se rompe

antes de agregar JavaScript revisa:

• estructura;

• IDs;

• Classes;

• elementos eliminados;

• CSS.

Ejemplo práctico 1: Carousel de Cards

Queremos:

[ SERVICIO A ][ SERVICIO B ][ SERVICIO C ] →

Paso 1

Agrega Carousel.

Paso 2

Abre Navigator.

Paso 3

Identifica el Slide o Item repetible.

Paso 4

Dentro de cada Slide utiliza la Card correspondiente.

Paso 5

Reemplaza contenido.

Paso 6

Si necesitas otro:

clona Slide completo.

Paso 7

Actualiza:

• Heading;

• Paragraph;

• Link;

• IDs.

Paso 8

Revisa los controles.

Paso 9

Revisa mobile.

Paso 10

Guardar Cambios.

Paso 11

Ver página.

Paso 12

Recorre todos los elementos.

Ejemplo práctico 2: Gallery de instalaciones

NUESTRAS INSTALACIONES

[ IMG ][ IMG ][ IMG ]

[ IMG ][ IMG ][ IMG ]

Utiliza fotografías relacionadas.

Mantén una proporción coherente si buscas una grilla uniforme.

Revisa cada Alt.

Elimina fotografías innecesarias.

Ejemplo práctico 3: Slider principal

SLIDE 1

Soluciones para empresas

[ CONOCER MÁS ]

Slide 2:

Nueva línea de productos

[ VER PRODUCTOS ]

Revisa especialmente:

• ambas URLs;

• mobile;

• contraste;

• recorte.

Ejemplo práctico 4: Flip box de servicios

Frente:

[ ICONO ]

CONSULTORÍA

Reverso:

Conoce nuestro servicio de consultoría...

[ VER SERVICIO ]

Si clonas para:

IMPLEMENTACIÓN

revisa también:

• reverso;

• CTA;

• URL.

Ejemplo práctico 5: Counter

15
AÑOS DE TRAYECTORIA

Antes de publicar confirma:

• año de inicio;

• cálculo actual.

Si el dato cambia todos los años:

inclúyelo en tu rutina de mantenimiento.

Ejemplo práctico 6: varios Counters

15
AÑOS

500+
PROYECTOS

8
PAÍSES

Todos los datos deben ser reales.

No agregues:

100 %
CALIDAD

como cuarta cifra únicamente para completar la grilla.

Tres Counters son suficientes si son los datos reales disponibles.

Ejemplo práctico 7: Image Compare

Antes:

oficina antes de la remodelación

Después:

misma oficina después de la remodelación

Paso 1

Prepara ambas imágenes con proporciones equivalentes.

Paso 2

Agrega Image Compare.

Paso 3

Utiliza Navigator.

Paso 4

Reemplaza ambas imágenes.

Paso 5

Completa Alt.

Paso 6

Agrega etiquetas Antes/Después si corresponde.

Paso 7

Revisa desktop.

Paso 8

Revisa celular.

Paso 9

Guardar Cambios.

Paso 10

Ver página.

Paso 11

Utiliza realmente el control de comparación.

¿Qué hacer si Carousel no avanza?

Revisa:

1. si funcionaba antes;

2. estructura;

3. controles;

4. Slides;

5. Classes;

6. IDs;

7. CSS personalizado.

No agregues otro plugin inmediatamente.

¿Qué hacer si aparecen dos Slides simultáneamente cuando no deberían?

Revisa:

• estructura;

• Width;

• CSS;

• elementos clonados.

No ocultes uno mediante:

display:none

sin identificar la causa.

¿Qué hacer si aparece un Slide vacío?

Probablemente:

• existe un Item sin contenido;

• eliminaste solamente componentes internos.

Utiliza Navigator y elimina el Slide vacío.

¿Qué hacer si el Carousel tiene contenido duplicado?

Revisa los Slides clonados.

Puede que hayas cambiado solo Image o Heading.

¿Qué hacer si controles no responden?

Revisa si eliminaste:

• Classes;

• estructura;

• atributos internos.

¿Qué hacer si los controles quedan detrás de Images?

Puede existir:

• Position;

• z-index;

• Overflow.

No agregues:

z-index: 999999;

sin comprender el contexto.

Diagnostica qué elemento debería estar delante.

¿Qué hacer si Gallery queda irregular?

Decide primero:

¿quiero un mosaico irregular o una grilla uniforme?

Si quieres uniformidad:

revisa proporción + Cover.

Si quieres mostrar imágenes completas:

Contain puede ser más apropiado.

¿Qué hacer si una foto importante queda cortada?

Ajusta:

• encuadre;

• proporción;

• object-fit.

No mantengas Cover solo por uniformidad si destruye el contenido.

¿Qué hacer si Gallery se vuelve demasiado larga?

Reduce la selección de imágenes.

No ocultes todas dentro de un Slider automáticamente.

Pregunta cuáles son realmente necesarias.

¿Qué hacer si Slider cambia demasiado rápido?

Si existe una configuración del diseño para controlar el comportamiento, ajústala según corresponda.

Si no existe una opción visible:

no inventes una.

Investiga la estructura del componente antes de modificar código.

¿Qué hacer si el texto del Slider no se puede leer?

Revisa:

• contraste;

• Overlay;

• Position;

• Background.

No agregues sombra extrema al texto como primera solución.

Puede ser mejor cambiar la imagen o usar Overlay.

¿Qué hacer si el CTA del Slider abre la página anterior?

Actualiza el Link del Slide clonado.

¿Qué hacer si Flip box no gira?

Revisa:

• estructura;

• Classes;

• Transform;

• CSS añadido.

¿Qué hacer si ambas caras aparecen juntas?

Puede existir un problema con:

• Position;

• backface;

• transform;

• display.

No fuerces una cara a display:none sin comprender el mecanismo.

¿Qué hacer si Flip box funciona con mouse pero no es claro en celular?

Evalúa si el contenido esencial debería mostrarse directamente.

Puede ser mejor reemplazar Flip box por Card.

No mantengas el efecto únicamente porque se ve bien en desktop.

¿Qué hacer si Counter muestra un dato desactualizado?

Actualízalo.

No necesitas modificar el componente completo.

¿Qué hacer si Counter anima desde cero?

Eso puede ser solamente un efecto visual.

No significa que el valor se esté obteniendo en tiempo real.

¿Qué hacer si necesito un Counter dinámico?

Eso requiere una fuente de datos y una funcionalidad específica.

No asumas que el componente está conectado automáticamente.

¿Qué hacer si no puedo verificar la cifra?

No la publiques como un dato exacto.

Considera una afirmación cualitativa verificable.

¿Qué hacer si Image Compare no coincide bien?

Comprueba:

• proporción;

• perspectiva;

• escala;

• encuadre.

Puede que las imágenes no sean adecuadas para comparación superpuesta.

En ese caso:

utiliza dos Images lado a lado.

¿Qué hacer si el control de Image Compare queda pequeño en mobile?

Revisa el ancho del componente y su estructura responsive.

No lo mantengas dentro de una columna demasiado estrecha.

¿Qué hacer si una imagen de Image Compare se deforma?

Revisa:

• Width;

• Height;

• object-fit;

• proporción.

Ambas imágenes deberían mantener una relación coherente.

¿Qué hacer si quiero comparar tres estados?

Image Compare está orientado conceptualmente a dos imágenes.

Para:

ANTES
DURANTE
DESPUÉS

puede ser mejor:

• Gallery;

• tres Cards;

• Slider;

según el objetivo.

No fuerces tres estados dentro de una comparación pensada para dos.

¿Qué hacer si quiero mostrar un proceso de transformación?

Puedes combinar:

Timeline
+
Image Compare final

Timeline explica etapas.

Image Compare muestra resultado visual.

Cada componente cumple su función.

¿Qué hacer si tengo muchas comparaciones?

Por ejemplo:

Proyecto A
Antes / Después

Proyecto B
Antes / Después

Proyecto C
Antes / Después

Puedes crear varias unidades,

pero revisa:

• peso;

• longitud;

• mobile.

Quizá sea más claro crear una página específica de proyectos.

¿Qué hacer si una sección utiliza demasiadas interacciones?

Por ejemplo:

Slider
dentro de
Flip box
dentro de
Carousel

Simplifica.

Las interacciones anidadas pueden:

• confundir;

• dificultar touch;

• complicar mantenimiento.

Una sola interacción principal por unidad suele ser suficiente.

IA para decidir entre Carousel, Gallery y Slider

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Tengo estos contenidos:

[describir]

Necesito elegir entre:
- Carousel;
- Gallery;
- Slider;
- Grid estática.

Analiza:
- cantidad de elementos;
- importancia de verlos simultáneamente;
- cantidad de texto;
- experiencia en celular.

No inventes contenido.

IA para revisar si realmente necesito Carousel

Quiero mostrar estos 4 contenidos:

[lista]

Analiza si un Carousel aporta una ventaja real o si una Grid sería más clara.

Considera que el visitante podría no recorrer todos los Slides.

No modifiques el contenido.

IA para Gallery

Tengo estas imágenes:

[descripción de cada una]

Quiero crear una Gallery.

Indica:
- cuáles pertenecen realmente a la misma colección;
- cuáles parecen fuera de contexto;
- qué proporción común podría funcionar.

No inventes imágenes.

IA para revisar Cover

Estas fotografías se utilizarán en una Gallery con aspect ratio 4:3 y object-fit cover.

Analiza cada imagen y señala qué elementos importantes podrían quedar recortados.

No modifiques las imágenes.

IA para Slider

Tengo estos tres mensajes para un Slider:

[pegar]

Revisa:
- si cada Slide puede entenderse por separado;
- si algún mensaje es demasiado importante para quedar oculto en un Slide secundario;
- si los CTA son claros.

No inventes nuevas campañas.

IA para Flip box

Quiero utilizar Flip box para estas Cards:

[contenidos]

Clasifica qué información debería permanecer en la cara frontal y cuál podría pasar a la cara posterior.

Reglas:
- la información esencial debe comprenderse sin Hover;
- el reverso debe ser breve;
- no inventes contenido.

IA para decidir si Flip box es adecuado

Este contenido se mostrará en una Página web:

[pegar]

Analiza si Flip box mejora realmente la experiencia o si una Card estática sería más accesible y clara.

Considera especialmente celular y dispositivos táctiles.

IA para revisar Counters

Quiero publicar estos Counters:

[lista de cifra + etiqueta]

No modifiques las cifras.

Para cada una indica:
- qué fuente o criterio debería verificar;
- si el dato cambia con el tiempo;
- con qué frecuencia debería revisarlo.

No inventes estadísticas.

IA para detectar métricas poco justificadas

Tengo estas estadísticas para una sección de Counter:

[lista]

Identifica cuáles son:
- cifras objetivas;
- porcentajes que necesitan metodología;
- afirmaciones demasiado ambiguas.

No corrijas los datos.
No inventes valores.

IA para Image Compare

Tengo dos imágenes para un componente Image Compare.

Imagen A:
[descripción]

Imagen B:
[descripción]

Analiza si son adecuadas para una comparación visual directa considerando:
- encuadre;
- perspectiva;
- proporción;
- escala;
- iluminación.

Si no son comparables, recomiéndame mostrarlas lado a lado.

No alteres las imágenes.

IA para CSS de Carousel

Tengo un Carousel en Waclis.

Raíz:
.custom-carousel-section

Necesito:
- imágenes con Border radius;
- controles visibles;
- no cambiar la lógica de desplazamiento;
- no modificar transformaciones internas;
- responsive;
- no afectar otros Carousel.

Waclis utiliza Bootstrap 4.

No cambies HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .custom-carousel-section.

IA para CSS de Gallery

Tengo una Gallery en:

.project-gallery-section

Las imágenes utilizan:
.project-gallery-image

Necesito:
- aspect-ratio 4/3;
- object-fit cover;
- Border radius de 12 px;
- no afectar otras imágenes.

Waclis utiliza Bootstrap 4.

No cambies HTML.
Devuélveme solamente CSS localizado.

IA para Flip box

Tengo un Flip box de Waclis que ya funciona.

HTML:
[pegar únicamente el Flip box]

Necesito identificar:
- cara frontal;
- cara posterior;
- elemento que controla transform;
- Classes estructurales.

No modifiques el HTML.
No agregues JavaScript.

IA para diagnosticar Flip box

Este Flip box dejó de funcionar después de agregar este CSS:

[CSS]

Busca reglas sobre:
- transform;
- transition;
- position;
- backface-visibility;
- overflow;
- z-index.

No cambies el código todavía.
Indica qué reglas pueden interferir con la interacción.

IA para Counter

Tengo una sección de Counters en Waclis.

Raíz:
.stats-section

Los valores:
.counter-value

Las etiquetas:
.counter-label

Necesito:
- números grandes pero responsive;
- etiquetas legibles;
- 4 elementos desktop;
- 2 tablet;
- 1 o 2 mobile según espacio;
- no alterar otros Counters.

No cambies las cifras.
No agregues JavaScript.

IA para Image Compare

Tengo este HTML de un Image Compare de Waclis:

[pegar]

Identifica:
- imagen A;
- imagen B;
- wrapper;
- control de comparación;
- Classes estructurales.

No reescribas el componente.
No agregues una nueva biblioteca.

IA para detectar CSS peligroso

Revisa este CSS:

[pegar]

Busca reglas que puedan romper componentes visuales interactivos, especialmente:
- transform;
- overflow;
- position;
- display;
- visibility;
- z-index;
- width;
- height.

Indica qué reglas tienen alcance global o pueden afectar:
- Carousel;
- Slider;
- Flip box;
- Image Compare.

No modifiques el CSS.

Buenas prácticas para Carousel

Recomendamos:

• utilizarlo cuando recorrer contenido aporte valor;

• no ocultar contenido que debería verse simultáneamente;

• utilizar Navigator;

• clonar Slides completos;

• revisar Links;

• eliminar Slides completos;

• comprobar controles;

• revisar mobile;

• no agregar otra librería si ya funciona.

Buenas prácticas para Gallery

Recomendamos:

• utilizar imágenes relacionadas;

• mantener proporciones coherentes cuando corresponda;

• revisar Cover y Contain;

• completar Alt;

• seleccionar Gallery Item completo;

• limitar cantidad de imágenes;

• optimizar peso;

• revisar responsive.

Buenas prácticas para Slider

Recomendamos:

• mantener pocos Slides relevantes;

• no ocultar información imprescindible en Slides secundarios;

• utilizar imágenes adecuadas para recorte;

• probar CTA;

• revisar cada Slide en celular;

• mantener controles utilizables;

• comprobar velocidad si existe avance automático.

Buenas prácticas para Flip box

Recomendamos:

• mantener la información esencial en la cara frontal;

• utilizar reversos breves;

• no depender exclusivamente de Hover;

• probar en touch;

• clonar Front + Back juntos;

• revisar Links;

• no interferir con Transform interno.

Buenas prácticas para Counter

Recomendamos:

• utilizar únicamente cifras reales;

• incluir contexto mediante Label;

• verificar porcentajes;

• mantener datos actualizados;

• no confundir animación con dato dinámico;

• evitar estadísticas comerciales inventadas;

• revisar cifras temporales periódicamente.

Buenas prácticas para Image Compare

Recomendamos:

• utilizar dos imágenes realmente comparables;

• mantener mismo encuadre cuando sea posible;

• utilizar proporciones equivalentes;

• identificar Antes/Después;

• completar Alt;

• probar el control en mobile;

• no exagerar diferencias artificialmente;

• utilizar dos Images si la comparación superpuesta no aporta.

Errores frecuentes

Utilizar Carousel solo porque se mueve

Evalúa si Grid es más clara.

Ocultar contenidos principales dentro de Carousel

El visitante puede no recorrer todos los Slides.

Clonar Image en lugar de Slide

Selecciona la unidad completa.

Dejar Slides vacíos

Elimínalos correctamente.

Clonar Slide y dejar el Link anterior

Actualiza URL.

Eliminar controles del Carousel pensando que son decorativos

Pueden ser funcionales.

Utilizar Gallery con imágenes sin relación

Mantén una colección coherente.

Utilizar proporciones aleatorias cuando buscas uniformidad

Normaliza el diseño.

Usar Cover y cortar el contenido principal

Revisa cada imagen.

Cargar demasiadas imágenes

Puede perjudicar rendimiento.

Utilizar Slider con un solo mensaje

Banner puede ser más sencillo.

Colocar información imprescindible solamente en el último Slide

No dependas de que todos lo vean.

Clonar Slider y no actualizar CTA

Prueba cada destino.

Mantener altura desktop en celular

Adapta.

Utilizar Flip box solo por efecto

Card puede ser más clara.

Ocultar todo el significado detrás de Hover

No es recomendable.

Escribir demasiado contenido en la cara posterior

Resume.

Clonar solamente Front

Actualiza Front + Back.

Aplicar otro Transform sin revisar el componente

Puede romper Flip box.

Utilizar Counter con cifras inventadas

No publiques métricas decorativas.

Utilizar 100 % calidad

No es una métrica objetiva por defecto.

Utilizar +500 cuando no superas 500

El símbolo tiene significado.

Creer que Counter se actualiza automáticamente

Puede ser contenido manual.

Olvidar actualizar años de experiencia

Revísalos periódicamente.

Utilizar Image Compare con fotografías desde ángulos completamente diferentes

Puede ser mejor mostrarlas lado a lado.

Utilizar imágenes de diferente proporción sin revisar

Puede generar recortes.

Exagerar artificialmente el “antes”

Mantén una comparación fiel.

Dejar una imagen de ejemplo en Image Compare

Reemplaza ambas.

No probar interacción en celular

Es obligatorio en componentes interactivos.

Aplicar CSS global sobre Transform

Puede romper múltiples componentes.

Cambiar Overflow indiscriminadamente

Puede revelar o cortar contenido.

Cambiar Position interno sin comprenderlo

Puede desalinear la interacción.

Agregar JavaScript adicional a componentes que ya funcionan

Puede generar conflictos.

Copiar un componente de Bootstrap 5

Waclis utiliza Bootstrap 4.

No utilizar Navigator

Aumenta el riesgo de editar el nivel equivocado.

Flujo recomendado

1. DEFINIR EL OBJETIVO VISUAL
↓
2. ELEGIR EL COMPONENTE CORRECTO
↓
3. AGREGARLO AL DISEÑO
↓
4. ABRIR NAVIGATOR
↓
5. IDENTIFICAR SU ESTRUCTURA
↓
6. REEMPLAZAR TODO EL CONTENIDO DE EJEMPLO
↓
7. CLONAR UNIDADES COMPLETAS
↓
8. REVISAR IMÁGENES / TEXTOS / LINKS
↓
9. REVISAR IDS Y CLASSES
↓
10. PERSONALIZAR ESTILO SIN ROMPER LA INTERACCIÓN
↓
11. REVISAR LINKED STYLES
↓
12. REVISAR DESKTOP
↓
13. REVISAR TABLET
↓
14. REVISAR CELULAR
↓
15. GUARDAR CAMBIOS
↓
16. VER PÁGINA
↓
17. UTILIZAR REALMENTE LA INTERACCIÓN

Checklist general antes de finalizar

• Elegí el componente por su función y no solo por el efecto.

• Revisé si una estructura más simple podría ser mejor.

• Utilicé Navigator.

• Comprendo cuál es la unidad repetible.

• Al clonar seleccioné el elemento completo.

• No quedan contenidos de ejemplo.

• Los Links clonados fueron actualizados.

• Los IDs personalizados son únicos.

• Las Classes estructurales se conservaron.

• Linked styles tiene el alcance esperado.

• No agregué CSS global peligroso.

• No modifiqué Transform indiscriminadamente.

• No modifiqué Overflow sin comprenderlo.

• No alteré Position interno sin necesidad.

• No agregué JavaScript duplicado.

• Desktop funciona correctamente.

• Tablet funciona correctamente.

• Celular funciona correctamente.

• Probé la interacción mediante Ver página.

Checklist de Carousel

• Carousel aporta una ventaja frente a Grid.

• Todos los Slides tienen contenido.

• No existe ningún Slide vacío.

• Los Slides clonados fueron actualizados.

• Los Links son correctos.

• Los controles funcionan.

• Los contenidos son legibles.

• Mobile funciona correctamente.

Checklist de Gallery

• Las imágenes pertenecen a la misma colección.

• La cantidad de imágenes es razonable.

• Las imágenes están optimizadas.

• Las proporciones son coherentes cuando corresponde.

• Cover no corta contenido importante.

• Alt está correctamente configurado.

• Los Links funcionan si existen.

• La grilla se adapta a celular.

Checklist de Slider

• Cada Slide tiene un mensaje claro.

• El primer Slide contiene información útil.

• Ningún dato imprescindible depende únicamente de un Slide secundario.

• Las imágenes tienen calidad suficiente.

• Los recortes mobile fueron revisados.

• Los CTA son correctos.

• Los controles se pueden utilizar.

• El contenido puede leerse antes de cambiar de Slide si existe avance automático.

Checklist de Flip box

• El efecto aporta valor.

• La cara frontal comunica el tema.

• La información esencial no depende únicamente de Hover.

• La cara posterior es breve.

• Front y Back corresponden entre sí.

• Los CTA llevan al destino correcto.

• El efecto funciona en dispositivos táctiles.

• No agregué Transform que interfiera con el componente.

Checklist de Counter

• Todas las cifras son reales.

• Sé qué representa cada cifra.

• Los porcentajes tienen una metodología o fuente.

• No utilicé números decorativos.

• Las etiquetas explican el valor.

• Los datos sensibles al tiempo están actualizados.

• No confundí animación con actualización automática.

• Los Counters se adaptan a celular.

Checklist de Image Compare

• Las dos imágenes son realmente comparables.

• Representan estados diferentes del mismo contenido.

• Mantienen una proporción coherente.

• El encuadre es suficientemente similar.

• No exageré artificialmente la diferencia.

• Alt A y Alt B son correctos.

• Se entiende cuál es Antes y cuál Después.

• El control funciona correctamente.

• El componente tiene suficiente ancho en celular.

• Probé la interacción real.

En resumen

Los componentes visuales avanzados cumplen funciones diferentes:

CAROUSEL
→ recorrer varios elementos

GALLERY
→ mostrar una colección visual

SLIDER
→ presentar Slides de gran protagonismo

FLIP BOX
→ mostrar una segunda cara de información

COUNTER
→ destacar una cifra real

IMAGE COMPARE
→ comparar dos imágenes

La regla más importante es:

utiliza el componente solamente cuando su comportamiento ayuda a comprender mejor el contenido.

Si puedes presentar tres Cards claramente mediante:

[ A ][ B ][ C ]

no necesitas obligatoriamente convertirlas en Carousel.

Si puedes mostrar dos imágenes:

[ ANTES ][ DESPUÉS ]

y son más claras así,

no necesitas Image Compare.

Si una Card ya comunica toda la información:

no necesitas Flip box.

Si no existe una cifra real:

no necesitas Counter.

Y cuando utilices componentes interactivos:

Navigator deja de ser opcional.

Necesitas identificar correctamente:

• Slide;

• Gallery Item;

• Front;

• Back;

• Value;

• Images;

• Controls;

antes de clonar, eliminar o modificar.

También recuerda que movimiento visual y datos dinámicos son conceptos distintos.

Un Counter puede animarse:

0 → 500

pero seguir representando:

un valor manual

Y un Slider puede moverse automáticamente,

pero sus imágenes y Links siguen necesitando mantenimiento manual.

Finalmente:

Elegir componente → revisar Navigator → reemplazar contenido → probar responsive → Guardar Cambios → Ver página → utilizar realmente la interacción.

En estos componentes, comprobar que “se ven bien” no es suficiente.

Debes comprobar también que:

se puedan utilizar correctamente, comuniquen información real y continúen funcionando después de cualquier modificación.