图片横幅

图片横幅模块用于在网站中添加一个全宽或固定宽度的横幅图片，可用于展示促销、产品或品牌信息。此模块提供了丰富的配置选项，帮助您自定义图片的显示效果和内容样式。

配置选项

1. 启用全宽

   用途：决定横幅图片是否占据页面的全宽。如果未选中，图片将根据其内容宽度进行显示。

2. 图片设置

   • 图片：上传或选择要在横幅中显示的图片。

   • 图片覆盖不透明度：通过调整不透明度，可以为图片添加透明的覆盖层，增强文字可读性。

   • 图片高度：选择横幅图片的高度，可以设置为自适应、小、中或大，确保图片比例与整体设计协调。

   • 适应透明页眉：启用此选项可以为透明页眉添加顶部填充，以防止内容重叠。

3. 内容设置

   • 配色方案：选择横幅内容的配色方案，确保与背景图片和整体页面设计相匹配。

   • 位置：设置内容在横幅中的对齐位置（例如右下角）。

4. 其他设置

   • 显示内容框：勾选此选项以在图片上显示一个内容框，内含文字或其他内容。

   • 内容框不透明度：调整内容框的不透明度，确保文字与背景的对比度合适。

   • 启用模糊效果：为内容框添加模糊背景效果，以突出显示文字内容。

   • 文本对齐：设置内容框中文本的对齐方式（左对齐、居中或右对齐）。

5. 动画设置

   图片行为：选择图片的动画效果，支持的滚动效果有

   • 环境移动

   • 固定背景位置

   • 滚动时放大

   • 视差滚动

6. 移动端设置

   移动端封面图片：上传或选择在移动设备上显示的封面图片，以确保在不同设备上都有最佳显示效果。

7. SEO优化

   作为首屏主要区域：如果设置为首屏的主要区域，将进行优化以提高SEO得分，确保搜索引擎能够更好地识别和抓取页面内容。

可添加的块

图片横幅模块支持添加多种类型的内容 Block，您可以根据需要选择合适的 Block 来丰富横幅的内容展示。以下是支持的 Block 类型：

1. 小标题

   • 用途：添加一个小型标题，用于突出次要信息或作为主要标题的补充。

2. 标题

   • 用途：添加一个主要标题，用于突出展示重要信息。

   • 设置选项：可调整标题的字体大小，并支持全大写格式。

3. 文本

   • 用途：添加文本描述，用于详细说明横幅中的信息或提供额外的内容。

   • 设置选项：支持富文本编辑，可以设置文本的样式、颜色、链接等。

4. 按钮

   • 用途：添加交互式按钮，引导用户执行特定操作（如“了解更多”或“立即购买”）。

   • 设置选项：可自定义按钮的文本、链接、样式（如实心、边框、浮动）。

使用注意事项

• 全宽与非全宽：选择是否启用全宽取决于横幅图片的用途，全宽效果适合需要吸引用户注意的大幅视觉展示。

• 图片覆盖层：通过调整覆盖层的不透明度，可以平衡背景图片与前景文字的可读性，确保信息传达清晰。

• 动画效果：适度使用动画可以增加页面动态感，但需避免过度使用，以防干扰用户体验。

常见问题

• 图片显示不全：检查图片高度设置，确保图片的比例适应横幅的尺寸。

• 文字不清晰：尝试调整内容框不透明度或启用模糊效果，以增强文字与背景的对比度。

• 移动端显示问题：在移动端设置中选择适合的小图片，确保在不同设备上都有最佳的视觉效果。

这样设置后，您的图片横幅将具备出色的视觉效果，并且能够在不同设备上保持一致的用户体验。