Elemento Imagen

Acerca del Elemento Imagen

La función Imagen en GemPages le permite mostrar imágenes individuales en su página, lo cual es ideal para exhibir productos, banners, visuales de marca, promociones o insignias de confianza.

Ya sea que desee enfatizar un destacado de producto, ilustrar la estética de su marca o crear separación visual entre secciones, el elemento Imagen le brinda control completo sobre cómo aparecen las imágenes en todos los dispositivos.

Puede cargar fácilmente nuevas imágenes, reutilizar las existentes de sus archivos de Shopify y personalizar tamaño, posición, bordes y animaciones sin codificación.

¿Cómo Agregar un Elemento Imagen a su Página?

Paso 1: Inicie sesión en su Administración de Shopify > Panel de Control de GemPages > Páginas.

Paso 2: Puede ver todas sus páginas construidas con GemPages aquí. Haga clic en la página objetivo para abrir el Editor. 

Si prefiere construir una nueva página, presione Crear nueva página para comenzar a construir su página desde cero, o seleccione de plantillas prediseñadas.

Paso 3: Desde la barra lateral izquierda, ingrese Imagen en la barra de búsqueda, luego arrastre y suelte el elemento de imagen a la posición que prefiera.

Configurar la Pestaña de Configuración

El Elemento Imagen ofrece configuraciones de imagen flexibles para que pueda controlar tamaño, forma y capacidad de respuesta con facilidad.

DE ESTILO RESORT

Elija cómo se estiliza visualmente su imagen:

• Rectángulo: Forma rectangular predeterminada
• Círculo: Recorta automáticamente la imagen en un círculo perfecto

Fuente

Suba o seleccione el archivo de imagen, puede:

• Haga clic en Subir Imagen, pegar la URL de la imagen o presionar Explorar galería para elegir de sus medios.
• Una vez cargada, la URL de la imagen aparecerá debajo para referencia o edición

Tamaño

Controle cómo se muestra la imagen en términos de diseño y capacidad de respuesta:

Marco: Elija una relación de aspecto predefinida o use una personalizada:

• Cuadrado
• Vertical
• Horizontal
• Original (mantiene las dimensiones nativas de la imagen)
• Personalizado (establece manualmente ancho y alto)

Ancho / Alto:

• Establezca en píxeles (px) o porcentaje (%)
• Alternar el icono de candado para mantener o romper la relación de aspecto

Forma

Estilice el contenedor de imagen con mejoras visuales para que coincida mejor con su diseño:

BordeAgregue un borde alrededor de la imagen. Personalice:

• ColorElija cualquier color HEX
• GrosorEstablezca valor en píxeles
• Estilo de trazo: Sólido, discontinuo o punteado

Esquina: Redondee las esquinas de la imagen ajustando el radio del borde. Puede:

• Aplicar el mismo radio a todas las esquinas
• Desbloquear los valores para estilizar cada esquina individualmente

Sombra: Agregue un efecto de sombra para dar profundidad o separación del fondo. Configure:

• TipoExterior, interior o centrado
• Dirección: Controle el ángulo de la sombra
• Color
• Distancia, Desenfoque y Tamaño

Enlace

Haga que la imagen sea clicable conmutando el interruptor a ACTIVADO, luego seleccione la acción que desea agregar después de hacer clic en la imagen, incluyendo:

SEO

Mejore la accesibilidad de la imagen y el rendimiento en motores de búsqueda:

• texto alternativo: Describe la imagen (usado por lectores de pantalla y motores de búsqueda)
• título de imagen: Título opcional que puede mostrarse como texto de información sobre herramientas

Optimizar LCP

Ayuda a optimizar la carga para obtener mejores puntuaciones de rendimiento:

Calidad: Elija nivel de compresión:

• Máxima (de máxima calidad)
• Alto (predeterminada, equilibrada)
• Media (para páginas de rendimiento intensivo)
• Personalizado (configuraciones de compresión avanzadas)

PrecargaHabilite si la imagen está por encima del pliegue y contribuye al LCP.

Alineación

Alinee la imagen dentro de su contenedor: Izquierda, Centro o Derecha.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la Avanzado y siga las instrucciones de este artículo.

Solución de problemas: La Imagen no se Muestra en la Página

Si su imagen cargada no aparece en el Editor o en la página en vivo, pruebe las verificaciones a continuación:

Causas comunes y soluciones

Mejores Prácticas para Elemento Imagen

Coloque texto sobre una imagen

Si está interesado en crear un banner con superposición de texto sobre una imagen, tenemos un video tutorial solo para usted. Resulte el video a continuación para obtener una guía paso a paso.

Haga que su imagen sea clicable

Hacer que las imágenes sean clicables o interactivas mejora la experiencia y el compromiso del usuario.

Aprenda más: Hacer que un texto o una imagen sean clicables

Preguntas frecuentes sobre el Elemento Imagen

1. ¿Cómo puedo evitar que mi imagen se escale automáticamente?

Si no desea que una imagen se escale, vaya a la sección Tamaño en la configuración de Imagen. Establezca el ancho y alto en píxeles (px) en lugar de porcentajes (%). Esto bloquea la imagen a un tamaño fijo en todos los dispositivos.

2. ¿Dónde encuentro la configuración de imagen en GemPages?

Simplemente haga clic en la imagen dentro del editor, y la pestaña de Configuración aparecerá en la barra lateral izquierda. Desde allí, puede ajustar todas las configuraciones de imagen, incluyendo tamaño, marco, borde, sombra y opciones de enlace.

3. ¿Puedo hacer que una imagen sea clicable?

Sí. En la pestaña Configuración, desplácese hacia abajo a la sección Enlace . Puede vincular la imagen a una página, URL externa, ancla de sección, ventana emergente, correo electrónico o incluso un número de teléfono.

4. ¿Cómo agrego texto alternativo a una imagen para SEO?

En la pantalla SEO de la configuración de imagen, ingrese texto alternativo descriptivo. Esto mejora la accesibilidad para lectores de pantalla y ayuda a los motores de búsqueda a entender su imagen.

5. ¿Por qué mi imagen se ve borrosa después de cargarla?

Si su imagen se ve borrosa, verifique la configuración de Calidad en Optimizar LCP. Cambiar a calidad Máxima generalmente soluciona el problema, pero asegúrese de que el archivo fuente que cargó sea de alta resolución.

6. ¿Puedo superponer texto sobre una imagen directamente?

El elemento de Imagen en sí no admite superposición de texto directa. Para esto, use el elemento Banner Principal, que le permite colocar texto, botones u otros elementos sobre una imagen.

7. ¿Cómo agrega imágenes a su página en GemPages?

Para agregar imágenes a una plantilla, arrastre y suelte el elemento Imagen en el diseño de su página dentro del Editor. Puede cargar un nuevo archivo, elegir uno de su biblioteca multimedia de Shopify o pegar una URL de imagen. Esto le permite personalizar visualmente cualquier plantilla de producto, colección o página de destino.

8. ¿Cómo actualizo imágenes después de publicar mi página?

Simplemente haga clic en la imagen dentro del editor. En la sección Fuente , puede cargar una nueva imagen, reemplazarla con una de su biblioteca multimedia o ajustar su configuración. Una vez actualizada, haga clic en Guardar y Publicar para aplicar los cambios en vivo en su tienda.

9. ¿Qué significa “Seguir enlace” cuando configuro la acción Después del clic en Abrir página?

La configuración “Seguir enlace: Sí/No” controla si los motores de búsqueda pueden seguir el hipervínculo adjunto a su imagen.

• Sí: los motores de búsqueda (como Google) pueden seguir este enlace a la página de destino. Utilice esta opción si el enlace lleva a una página importante que desea indexar (por ejemplo, una página de productos o colecciones).
• No: añada una etiqueta rel="nofollow" al enlace. Esto indica a los motores de búsqueda que No el enlace ni transmitan la autoridad del enlace.

10. ¿Cómo puedo vincular WhatsApp usando el elemento de imagen?

Puedes convertir cualquier imagen (como el icono de WhatsApp) en un botón de chat. Solo tienes que añadir un elemento de imagen, subir tu logotipo de WhatsApp y activar la opción. Enlace .

Utiliza este formato para tu enlace de WhatsApp: https://wa.me/<your-number>. Por ejemplo: https://wa.me/15551234567.

Cuando los clientes hagan clic en la imagen, se abrirá un chat de WhatsApp con tu número.

11. ¿Por qué falla la carga de mi imagen en GemPages?