文章图像元素

关于文章图片元素

此 文章图像元素 主要用于 文章列表元素 展示文章缩略图或特色图片。 

此元素有助于创建具有视觉吸引力的文章列表，从而提升整体用户体验。它也可以添加到单个文章页面，尽管在这种情况下不太常用。

文章图片元素仅可放置在文章列表元素内使用。

如何向页面添加文章图片元素？

第三步： 访问 GemPages 仪表板  > 前往，然后点击目标页面来找到编辑器。

第三步： 在左侧边栏中搜索 文章图像元素 并将其拖放到页面上的首选位置。

第三步： 单击该元素以打开其设置以进行进一步自定义。

配置文章图像元素设置选项卡

此 文章图像元素 包括多个定制选项以满足您的设计和功能需求：

文章来源

点击框来配置文章列表元素中的文章来源。

图片

选择文章特色图片在页面上的显示方式：

• 填充图像： 图像将被调整大小或裁剪以适应框架的尺寸。

如果图像的纵横比与框架不同，则可能会切断部分图像。

• 适合图像： 图像将缩小或放大以完全适合框架，同时保留其原始纵横比。 

这可确保整个图像可见，但如果纵横比与框架不匹配，则可能会在边缘周围留下空间（填充）。

尺寸

比例：选择图像的裁剪或显示方式：

• 广场：宽度和高度相等。
• 垂直：高度大于宽度。
• 横：宽度大于高度。
• 原版：保持图像的原始纵横比。
• 定制化：手动调整宽度和高度。

宽度和高度：以像素为单位设置图像的精确尺寸。

形状

• 边境：您可以更改此元素的边框颜色、粗细和描边。
• 角落：截面角可以是方形、圆形或药丸形。您可以根据需要调整角半径。
• 阴影：您可以添加文章列表部分的阴影并调整阴影显示（大小、颜色、模糊度和距离）

链接

默认情况下，在 链接 部分中，点击后操作设置为“去文章”。您可以将其更改为“滚动到”并根据需要插入目标部分。 

SEO

• 替换文本：提供图片描述，以方便访问和 SEO。如果图片加载失败，则会显示此文本，帮助搜索引擎了解内容。
• 图片标题：添加当用户将鼠标悬停在图像上时出现的工具提示，提供额外的上下文或信息。
  

优化 LCP

此设置有助于改善您页面的 最大含量的涂料（LCP） 分数，这是性能和 SEO 的关键核心网络生命力指标。

质量： 选择正确的图像压缩级别来平衡清晰度和加载速度。

• 最好的： 质量最高，文件较大。
• 高（默认）： 均衡的质量和性能。
• 适用介质： 加载速度更快，但图像较多的页面的质量略有下降。
• 自定义： 定义您自己的压缩设置以实现高级控制。

预载： 如果图像出现在折叠上方并且是页面上的主要视觉元素之一，请启用此选项。

对齐

调整标题的对齐方式以提高可读性。您可以选择左对齐、居中对齐或右对齐。

配置高级选项卡

如需更多高级自定义，请导航至“高级”选项卡并按照 本文.