En este tutorial aprenderemos a estructurar un efecto visual de alta gama y gran impacto pedagógico. Al pasar el cursor (mouse) sobre la imagen de un cliente, esta se atenuará con una transición limpia para revelar el texto del testimonio que se encuentra oculto en su base.
Este método demuestra la versatilidad de trabajar con estructuras puras y cómo un solo elemento puede cumplir una doble función estética y funcional.
Fase 1: Estructura del Contenedor y Columnas
- Crear la Sección: Carga una sección limpia en tu lienzo de trabajo.
- Definir la Fila: Dentro de la sección, inserta una fila configurada estrictamente a cuatro columnas (ideal para mostrar una serie de testimonios alineados).
✍️ Fase 2: Configuración del Contenido (El Esqueleto)
Trabajaremos en la primera columna para crear el modelo matriz:
- Insertar el Módulo: Coloca un módulo de Llamada a la Acción (CTA) dentro de la columna.
- Redactar la Jerarquía:
- Título: Escribe el nombre de la persona que ofrece el testimonio.
- Área de Texto: Pega el cuerpo del testimonio (puedes utilizar las narrativas extensas que desarrollamos previamente).
- Estilo y Tipografía: Ve a la pestaña de Diseño del módulo para personalizar las fuentes, el grosor (peso visual) y los colores, asegurando un contraste impecable sobre fondos oscuros o claros.
Fase 3: Integración de la Imagen de Fondo
Para lograr el efecto de "capas", la imagen no debe ir en el módulo, sino en la estructura que lo sostiene:
- Abre los ajustes de la Columna (no del CTA).
- Dirígete a Contenido > Fondo.
- Carga la fotografía de alta calidad correspondiente al cliente que da el testimonio.
Fase 4: Programación del Efecto Hover (Transparencia Dinámica)
Ahora configuraremos el comportamiento visual del módulo para que oculte y revele el texto de forma fluida:
- Regresa a los ajustes del módulo de Llamada a la Acción (CTA).
- Ve a Diseño > Filtros.
- Estado por Defecto (Escritorio): Busca el regulador de Opacidad y llévalo por completo a 0%. El texto desaparecerá visualmente, dejando expuesta únicamente la imagen de fondo de la columna.
- Activar el Estado Hover: Pasa el cursor sobre la opción de Opacidad y haz clic en el icono de puntero/monitor para activar las opciones de estado dinámico. Selecciona la pestaña de Encima / Hover.
- Estado Activo (Hover): En la pestaña de Hover, regresa el regulador de Opacidad al 100%.
Resultado Final
Regresa a la vista de escritorio del constructor y guarda los cambios. Al probar la página en vivo, notarás cómo el cursor actúa como un interruptor de luminancia: al posarse sobre la imagen, esta revela con total elegancia y suavidad el texto técnico o residencial que se encuentra resguardado en la estructura inferior.
Una vez perfeccionado este primer contenedor, puedes duplicarlo en las tres columnas restantes para completar tu galería de muestras profesionales.
