Elemento Imagen de Comparación

Acerca del elemento Imagen de Comparación

El Comparación de imágenes le permite destacar las ventajas de su producto o servicio al comparar imágenes de antes y después dentro de un solo marco. Este elemento funciona de manera similar al elemento Imagen de Antes y Después que se encuentra en versiones anteriores.

Ejemplos de casos de uso:

Use la Imagen de Comparación para destacar el impacto de sus productos y generar confianza con los clientes:

• Demostraciones de productos: Muestre mejoras de antes/después (por ejemplo, cuidado de la piel, efectos de limpieza).
• Visuales de estilo de vida: Compare el uso en la vida real vs. sin uso.
• Exhibiciones de diseño: Muestre rediseños, mejoras o transformaciones.

¿Cómo agregar un elemento Imagen de Comparación a su página? 

La Imagen de Comparación es un elemento flexible y se puede usar en cualquier lugar de su página siguiendo los pasos a continuación:

Paso 1: Acceda al Panel de Control de GemPages  > Páginas, luego haga clic en su página objetivo para entrar al editor.

Paso 2: Desde la barra lateral izquierda, busque "comparison" (comparación), luego arrástrelo y suéltelo en la sección deseada.

Paso 3: Haga clic en el elemento para abrir su panel de Configuración y comenzar a personalizarlo.

Configurar la Pestaña de Configuración

En la sección pestaña de Configuración, puede ajustar las siguientes opciones:

Diseño

Elija cómo se mostrarán las dos imágenes en el marco de comparación:

• Horizontal: Las imágenes se comparan de izquierda a derecha.

• Vertical: Las imágenes se comparan de arriba hacia abajo.

Imagen

Cargue y ajuste las imágenes que desea comparar.

Imagen primera: Cargue o seleccione la primera imagen.

Imagen segunda: Luego, elija la imagen segunda para la comparación.

Escala:

• Rellenar imagen: Estira la imagen para ajustarla al contenedor. La relación de aspecto puede distorsionarse.
• Ajustar imagen: Ajusta la imagen para que quepa dentro del contenedor manteniendo su relación de aspecto.
  

Control deslizante

Decida cómo interactuarán sus visitantes con el control deslizante de comparación.

Comportamiento:

• Arrastrar para mover: Los visitantes arrastran el control deslizante manualmente.

• Pase el cursor para mover: El control deslizante se mueve automáticamente al pasar el cursor.

Proporción predeterminada: Establezca la proporción de división inicial (en %).

Insignia

Active la característica de Insignia para ayudar a los visitantes a identificar claramente las dos imágenes comparadas.

Luego, puede personalizar la insignia de texto a su manera, incluyendo:

Textos primero y segundo: Agregue una etiqueta para las imágenes primeras y segundas. Por ejemplo, "Antiguo" vs. "Nuevo" o "Antes" vs. "Después".

Estilo de texto: Ajuste la tipografía para que coincida con el diseño de su tienda. Puede:

• Elegir entre los estilos de texto disponibles (Encabezado, Párrafo, etc.).
• Seleccionar una familia de fuentes.
• Cambiar el tamaño de la fuente.
• Aplicar negrita, cursiva y subrayado.
• Elegir un color de fuente.
• Controlar la altura de línea y el espaciado entre letras.
• Aplicar transformación de texto (mayúsculas, minúsculas, mayúsculas iniciales).

Relleno: Defina el espaciado dentro de la insignia para controlar cuánto espacio tiene el texto alrededor.

Fondo: Establezca el color de fondo de la insignia para la visibilidad (por ejemplo, un fondo de color oscuro para el texto blanco).

Borde: Personalice el grosor, el estilo y el color del borde.

Esquina: Decida si las esquinas de la insignia son afiladas, redondeadas o en forma de píldora. Ingrese un radio para un control completo.

Sombra: Agregue profundidad con efectos de sombra. Ajuste el tamaño de la sombra, el desenfoque, el color y la distancia.

Posición: Elija dónde debe aparecer la insignia (por ejemplo, superior izquierda, superior derecha, inferior izquierda, inferior derecha).

Tamaño

Ajuste el marco y el ancho de su elemento.

Marco: Seleccione la relación de aspecto para el marco del menú desplegable (por ejemplo, 16:9, 4:3).

Ancho: De forma predeterminada, el ancho está configurado al 100% (Completo). Si lo prefiere, cambie el ancho ingresando un número específico en el cuadro.

Forma

Personalice la apariencia general del marco de comparación.

• Borde: Puede cambiar el color del borde, grosor y trazo.
• Esquina: La esquina de la sección puede ser cuadrada, redonda o en forma de píldora. Además, puede ingresar un radio exacto para personalizar la esquina del elemento a su manera.
• Sombra: Puede añadir una sombra y ajustar su visualización (tamaño, color, desenfoque y distancia).

Optimizar LCP

Esta configuración ayuda a mejorar la puntuación de Pintura de Mayor Contenido (Largest Contentful Paint o LCP) de su página, que es una métrica clave de Core Web Vitals para el rendimiento y SEO.

Precarga: Active esta opción si la imagen aparece en la parte superior de la página y es uno de los elementos visuales principales de la página.

• Si precarga = Sí: La imagen se precarga para mejorar la velocidad.
• Si precarga = No: La imagen se carga normalmente.

Calidad: Elija el nivel de compresión de imagen adecuado para equilibrar la claridad y la velocidad de carga:

• De mayor calidad: Máxima calidad, tamaño de archivo más grande.
• Alta (predeterminada): Calidad y rendimiento equilibrados.
• Media: Carga más rápida, calidad ligeramente reducida para páginas con muchas imágenes.
• Personalizada: Defina sus ajustes de compresión para un control avanzado.

SEO

Ayude a que su página obtenga una mejor clasificación proporcionando información de la imagen. Agregue texto alternativo y título de imagen para cada imagen.

Alineación

Ajuste la alineación de su elemento dentro del contenedor: alineado a la izquierda, alineado al centro o alineado a la derecha.

Nota: La alineación no es compatible si el ancho está configurado al 100% o más.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.

Preguntas Frecuentes

1. ¿Puedo agregar más de dos imágenes en el elemento de Comparación de imágenes?

No. El elemento Imagen de Comparación está diseñado para comparar solo dos imágenes a la vez (antes vs. después). Si desea mostrar más comparaciones, puede duplicar el elemento en su página.

2. ¿El elemento Imagen de Comparación funciona en dispositivos móviles?

Sí. El control deslizante es totalmente adaptable y funciona tanto en escritorio como en dispositivos móviles. Los visitantes pueden arrastrar el controlador con el dedo en dispositivos móviles.

3. ¿Puedo ajustar el estilo del control deslizante?

Sí. Puede personalizar el color, la forma y la sombra del controlador en la sección Control deslizante .

4. ¿Cómo me aseguro de que las imágenes no se vean estiradas?

Utilice el Ajustar imagen en SCALE para preservar la relación de aspecto original de sus imágenes.

5. ¿Puedo agregar etiquetas de texto como "Antes" y "Después"?

Sí. Active la opción Insignia para agregar etiquetas personalizables a cada imagen.