El bloque de alternancia Antes y Después te permite crear comparaciones interactivas de imágenes en tus páginas de SeedProd. Este bloque muestra dos imágenes una al lado de la otra con un control deslizante personalizable que los visitantes pueden arrastrar para revelar los estados antes y después, creando una experiencia de comparación visual atractiva.
Las comparaciones de Antes y Después son perfectas para mostrar transformaciones, mejoras de productos, cambios de diseño, resultados de pérdida de peso, renovaciones del hogar, efectos de edición de fotos o cualquier escenario en el que desees demostrar visualmente el impacto del cambio. El control deslizante interactivo facilita a los visitantes la exploración de las diferencias a su propio ritmo.
Añadir el bloque de alternancia Antes y Después a tus páginas
Sigue estos pasos para añadir un bloque de alternancia Antes y Después a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Alternancia Antes y Después en la sección deseada de tu página.
El bloque de alternancia Antes y Después se encuentra en Diseño > Avanzado y se puede arrastrar a cualquier sección de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de alternancia Antes y Después para abrir su configuración. En la pestaña Contenido, puedes subir tus imágenes de comparación y configurar el comportamiento del control deslizante.
Imagen:
- Imagen Anterior: Haz clic en Elegir nueva imagen para subir o seleccionar la imagen "anterior" que aparece en el lado izquierdo (o superior) de la comparación
- Usar tu propia imagen o usar una imagen de stock: Elige si quieres subir tu propia imagen desde tu ordenador o seleccionarla de las bibliotecas de imágenes de stock
- URL de la imagen: Muestra la URL de origen de tu imagen anterior seleccionada
- Etiqueta Anterior: Introduce texto personalizado que aparezca sobre la imagen anterior (por ejemplo, "Antes", "Original", "2023"). Esto ayuda a los visitantes a entender lo que están viendo
- Imagen Posterior: Haz clic en Elegir nueva imagen para subir o seleccionar la imagen "posterior" que aparece en el lado derecho (o inferior) de la comparación
- Usar tu propia imagen o usar una imagen de stock: Elige si quieres subir tu propia imagen o seleccionar de las bibliotecas de stock para la imagen posterior
- URL de la imagen: Muestra la URL de origen de tu imagen posterior seleccionada
- Etiqueta Posterior: Introduce texto personalizado que aparezca sobre la imagen posterior (por ejemplo, "Después", "Mejorado", "2024")
Orientación:
- Orientación del control deslizante: Elige entre Vertical (el control deslizante se mueve hacia arriba y hacia abajo) u Horizontal (el control deslizante se mueve hacia la izquierda y hacia la derecha). Horizontal es lo más común para comparaciones lado a lado
- Alinear: Establece la alineación de todo el bloque de comparación dentro de su contenedor
- Mover al pasar el ratón: Activa para permitir el movimiento automático del control deslizante cuando los visitantes pasen el ratón sobre la comparación. Cuando está activado, el control deslizante sigue al cursor sin necesidad de hacer clic o arrastrar
- Color de superposición: Añade un color semitransparente a tus imágenes para un efecto visual único o para ayudar a que las etiquetas destaquen
Sube tus imágenes del antes y el después, añade etiquetas y configura la orientación y el comportamiento del control deslizante.
Control de comparación:
- Desplazamiento inicial del control: Establece dónde comienza el control deslizante cuando se carga la página, como un porcentaje (por ejemplo, 50 comienza en el medio, 25 muestra más de la imagen anterior)
- Color del control: Elige el color para el control deslizante y la línea divisoria entre las imágenes
- Grosor del control: Ajusta el ancho de la línea divisoria que separa las dos imágenes
- Ancho del círculo: Controla el tamaño del control circular que los visitantes arrastran para mover el control deslizante
- Radio del círculo: Ajusta la redondez del círculo del control. Valores más altos crean un control más circular
- Tamaño del triángulo: Establece el tamaño de las flechas direccionales que aparecen en el control, indicando hacia dónde arrastrar
Personaliza la apariencia del control de comparación, incluido su color, tamaño y posición inicial.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de alternancia Antes y Después:
Estilos de etiquetas Antes / Después:
- Tipografía de etiquetas: Controla las propiedades de la fuente para las etiquetas de antes y después, incluyendo familia de fuentes, tamaño, grosor y estilo
- Color de etiquetas: Establece el color del texto para las etiquetas de antes y después para asegurarte de que sean visibles sobre tus imágenes
- Color de fondo: Añade un color de fondo detrás de las etiquetas para mejorar la legibilidad, especialmente si tus imágenes tienen un brillo variable
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de alternancia Antes y Después (arriba, derecha, abajo, izquierda). Esto determina cuánto espacio aparece entre la comparación y los elementos circundantes
- Relleno: Ajusta el espaciado interior dentro de tu bloque de alternancia Antes y Después (arriba, derecha, abajo, izquierda). Esto crea espacio entre las imágenes y los bordes del bloque
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para tu bloque de alternancia Antes y Después. Esta ID es creada automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-comparison|before-after)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de alternancia Antes y Después en pantallas de escritorio
- Ocultar en tableta: Oculta el bloque de alternancia Antes y Después en dispositivos tableta
- Ocultar en móvil: Oculta el bloque de alternancia Antes y Después en dispositivos móviles
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de comparación entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más. Esto atrae la atención a tu comparación interactiva
La pestaña Avanzado proporciona opciones para estilizar etiquetas, ajustar espaciados y configurar la visibilidad del dispositivo y las animaciones.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de alternancia antes y después y de personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has agregado con éxito un bloque de alternancia antes y después a tu página! Este bloque interactivo crea comparaciones visuales atractivas que permiten a los visitantes explorar las diferencias entre dos imágenes a su propio ritmo. Experimenta con diferentes colores de control, orientaciones de control deslizante y efectos al pasar el cursor para crear una experiencia de comparación que cautive a tu audiencia y demuestre de manera efectiva transformaciones o mejoras.