Elemento de imagen del artículo

Acerca del elemento de imagen del artículo

La Elemento de imagen del artículo Se utiliza principalmente dentro de Elemento de lista de artículos para mostrar miniaturas de artículos o imágenes destacadas. 

Este elemento ayuda a crear listas de artículos visualmente atractivas, lo que mejora la experiencia general del usuario. También se puede agregar a páginas de artículos individuales, aunque su uso es menos frecuente en ese contexto.

El elemento de imagen del artículo solo se puede utilizar cuando se coloca dentro del elemento de lista de artículos.

¿Cómo agregar un elemento de imagen de artículo a su página?

Paso 1: Acceda al Panel de Control de GemPages  > Páginas, luego haga clic en la página de destino para localizar el editor.

Paso 2: Desde la barra lateral izquierda, busque el Elemento de imagen del artículo y arrástrelo y suéltelo en la posición preferida en su página.

Paso 3: Haga clic en el elemento para abrir su configuración para una mayor personalización.

Configurar la pestaña Configuración del elemento de imagen del artículo

La Elemento de imagen del artículo Incluye varias opciones de personalización para adaptarse a sus necesidades de diseño y funcionalidad:

Artículo Fuente

Haga clic en el cuadro para configurar las fuentes del artículo en el elemento Lista de artículos.

Imagen

Seleccione cómo se mostrará la imagen destacada de su artículo en la página:

• Rellenar imagen: La imagen se redimensionará o recortará para llenar las dimensiones del marco.

Esto puede cortar partes de la imagen si su relación de aspecto es diferente a la del marco.

• Ajustar imagen: La imagen se reducirá o aumentará para ajustarse completamente dentro del marco conservando su relación de aspecto original. 

Esto garantiza que toda la imagen sea visible, pero puede dejar espacio (relleno) alrededor de los bordes si la relación de aspecto no coincide con el marco.

Tamaño

Proportion:Elige cómo se recorta o se muestra la imagen:

• Cuadrado:Igual ancho y alto.
• Vertical:Más alto que ancho.
• Horizontal:Más ancho que alto.
• Original:Mantiene la relación de aspecto original de la imagen.
• Personalizado:Ajuste manualmente el ancho y la altura.

Anchura y altura:Establezca dimensiones precisas para la imagen en píxeles.

Forma

• Borde:Puede cambiar el color, el grosor y el trazo del borde de este elemento.
• Esquina: La esquina de la sección puede ser cuadrada, redonda o con forma de píldora. Puede ajustar el radio de la esquina como prefiera.
• Sombra: :Puede agregar una sombra a la sección Lista de artículos y ajustar la visualización de la sombra (tamaño, color, desenfoque y distancia)

Enlace

De forma predeterminada, en el Enlace En la sección, la acción posterior al clic se establece en “Ir al articulo" Puedes cambiarlo a "Desplazarse a" e inserte la sección de destino según su preferencia. 

SEO

• Alt Text : Proporcione una descripción de la imagen para fines de accesibilidad y SEO. Este texto se muestra si la imagen no se carga y ayuda a los motores de búsqueda a comprender el contenido.
• Image Title:Agregue una información sobre herramientas que aparezca cuando un usuario pase el cursor sobre la imagen, brindando contexto o información adicional.
  

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.

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: Define tu propia configuración de compresión para un control avanzado.

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.

Alineación

Ajuste la alineación del encabezado para una mejor legibilidad. Usted puede elegir entre alineado a la izquierda, alineado al centro o alineado a la derecha.

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.