Componentes | Antes/Después

"Antes/Después" es un componente que tiene dos imágenes. El alumno puede desplazar una barra central que permitirá mostrar una u otra imagen. Este comportamiento permite mostrar una imagen en un estado determinado y, al desplazar la barra, mostrar algún cambio en ella.

Encontraremos este componente en el grupo de componentes "Imagen"

Por defecto, se añade dentro de las secciones (Ver aquí) y los popups (Ver aquí), aunque también se podrá añadir en el interior de otros componentes (por ejemplo, dentro de un destacado, un acordeón, una fila, etc.)

Este es un componente complejo que consta de dos imágenes en su interior. El componente "Antes/Después" y sus imágenes tienen propiedades específicas. Para configurarlo correctamente, debemos seleccionar cada elemento. Podremos hacerlo desde el camino de migas o desde la pestaña "Estructura".

Camino de migas Pestaña "Estructura"

Proceso de configuración

1. Configura las "Propiedades" generales del componente (Ver cuáles son al final de esta página).

2. Selecciona la imagen de la izquierda. Entra en sus propiedades y en la propiedad "Recurso" pulsa "Examinar" para localizar y asociar una imagen de la carpeta de Recursos de la unidad (ver aquí). Opcionalmente, podremos configurar dos propiedades adicionales en esta imagen:

"Texto alternativo": texto que se visualizará al situar el ratón sobre la imagen o que se mostrará si la imagen no se puede cargar).
"Créditos": pulsando sobre la zona superior izquierda de la imagen se puede añadir un texto que muestre los créditos de autoría de la imagen. Esta propiedad permite gestionar el contraste del texto con respecto al fondo, pudiendo poner el texto en negro (opción "Positivo") o el texto en blanco (opción "Negativo").

3. Selecciona la imagen de la derecha y repite el proceso del paso 2.

4. Adicionalmente, selecciona el componente "Antes/Despues"y entra en la pestaña "Añadir". En su interior podremos añadir un "Pie de foto".

Propiedades

PROPIEDAD DESCRIPCIÓN Estilo

Permite definir la posición del componente con respecto a la columna central de contenidos:

Centrada al contenido.
Desborda a la derecha
Desborda a la izquierda
Ancho contenido
Desborda ambos laterales.

Ancho

Permite modificar el espacio que ocupa el componente dentro de la columna central de contenidos. Por defecto, ocupa el 100% del espacio disponible, pero puede reducirse utilizando otros porcentajes predefinidos o puede disponerse a "full-size". En algunos estilos de las citas, el tamaño "Full" hace que ésta sobrepase al ancho de la columna central.

Alinear Permite situar el componente alineado a la derecha, a la izquierda o al centro de la columna central de contenidos. Solo tiene efecto cuando aplicamos un "Ancho" menor al 100%. Flotar

Permite que el componente quede "enmarcado" en torno a un texto.

Primero, en la propiedad "Ancho", marcamos un tamaño menor al 100% (por ejemplo, el 25%).
En la propiedad "Flotar" decidimos en qué posición queremos que quede flotado el componente (a la izquierda o la derecha del texto).
Movemos el componente con sus flechas para colocarlo sobre el texto.