El bloque «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 el estado anterior y posterior, creando una experiencia visual atractiva de comparación.
Las comparaciones «antes y después» son perfectas para mostrar transformaciones, mejoras en productos, cambios en el diseño, resultados de pérdida de peso, renovaciones en el hogar, efectos de edición de fotos o cualquier situación en la que desee demostrar visualmente el impacto del cambio. El control deslizante interactivo facilita a los visitantes explorar las diferencias a su propio ritmo.
Añadir el bloque «Antes y después» a tus páginas
Sigue estos pasos para añadir un bloque «Antes y después» a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Alternar antes/después en la sección deseada de tu página.
El bloque «Antes y después» se encuentra en Diseño > Avanzado y se puede arrastrar a cualquier sección de la página.
Paso 2: Configurar los ajustes de contenido
Una vez añadido, haz clic en el bloque «Before After Toggle» para abrir su configuración. En la pestaña «Content», puedes subir tus imágenes comparativas y configurar el comportamiento del control deslizante.
Imagen:
- Imagen anterior: Haga clic en «Elegir nueva imagen» para cargar o seleccionar la imagen «anterior» que aparece en el lado izquierdo (o superior) de la comparación.
- Utiliza tu propia imagen o una imagen de archivo: elige si deseas cargar tu propia imagen desde tu ordenador o seleccionar una de las bibliotecas de imágenes de archivo.
- Fuente de la imagen: muestra la URL de origen de la imagen anterior seleccionada.
- Etiqueta «Antes»: Introduzca el texto personalizado que aparecerá sobre la imagen «antes» (por ejemplo, «Antes», «Original», «2023»). Esto ayuda a los visitantes a comprender lo que están viendo.
- Imagen posterior: Haga clic en «Elegir nueva imagen» para cargar o seleccionar la imagen «posterior» que aparece en la parte derecha (o inferior) de la comparación.
- Utiliza tu propia imagen o utiliza una imagen de archivo: elige si deseas cargar tu propia imagen o seleccionar una de las bibliotecas de archivo para la imagen posterior.
- Fuente de la imagen: muestra la URL de origen de la imagen seleccionada después.
- Etiqueta «Después»: Introduzca el texto personalizado que aparecerá sobre la imagen «Después» (por ejemplo, «Después», «Mejorado», «2024»).
Orientación:
- Orientación del control deslizante: Elija 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). La orientación horizontal es la más habitual para comparaciones en paralelo.
- Alinear: Establece la alineación de todo el bloque de comparación dentro de su contenedor.
- Movimiento al pasar el cursor: Active esta opción para habilitar el movimiento automático del control deslizante cuando los visitantes pasen el cursor por encima de la comparación. Cuando está habilitada, el control deslizante sigue al cursor sin necesidad de hacer clic ni arrastrar.
- Color de superposición: añade una capa de color semitransparente a tus imágenes para conseguir un efecto visual único o para que las etiquetas destaquen más.
Sube tus imágenes del antes y el después, añade etiquetas y configura la orientación y el comportamiento del control deslizante.
Comparador:
- 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 centro, 25 muestra más de la imagen anterior).
- Color del control: Elige el color del control deslizante y la línea divisoria entre imágenes.
- Grosor del borde: 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 mango. Los valores más altos crean un mango más circular.
- Tamaño del triángulo: Establece el tamaño de las flechas direccionales que aparecen en el controlador, indicando en qué dirección arrastrar.
Personaliza la apariencia del controlador de comparación, incluyendo su color, tamaño y posición inicial.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque Before After Toggle:
Estilos de etiqueta antes/después:
- Tipografía de etiquetas: controle las propiedades de fuente para las etiquetas anteriores y posteriores, incluyendo la familia de fuentes, el tamaño, el grosor y el estilo.
- Color de la etiqueta: establece el color del texto de las etiquetas «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 diferentes niveles de brillo.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque Antes/Después (arriba, derecha, abajo, izquierda). Esto determina cuánto espacio aparece entre la comparación y los elementos circundantes.
- Relleno: Ajusta el espacio interior dentro del bloque Antes/Después (Arriba, Derecha, Abajo, Izquierda). Esto crea un espacio entre las imágenes y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para tu bloque Before After Toggle. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade 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 utilizando el formato: nombre-del-atributo|valor (por ejemplo, comparación-de-datos|antes-después).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque «Antes/Después» en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque «Antes y después» en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque «Antes y después» en dispositivos móviles.
Efectos de animación:
- Animación de entrada: elija entre varios efectos de animación que se reproducen cuando el bloque de comparación aparece en pantalla. Las opciones incluyen Rebotar, Fundido de entrada, Acercar, Girar y muchas más. Esto llama la atención sobre su comparación interactiva.
La pestaña Avanzado ofrece opciones para diseñar etiquetas, ajustar el espaciado y configurar la visibilidad y las animaciones del dispositivo.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Before After Toggle y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque «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 controladores, orientaciones de controles deslizantes y efectos al pasar el cursor para crear una experiencia de comparación que cautive a tu público y demuestre de manera eficaz las transformaciones o mejoras.