使用轮播字段
我们将涵盖的内容
- 轮播生成器
- 图像失真
- 查找维度
- 图像尺寸
- 常问问题
轮播是一组旋转横幅或幻灯片,显示在您商店的主页上。它允许您显示最多五张由图像和文本组成的幻灯片,这些幻灯片可以链接到特定的产品或页面。图像每隔几秒就会改变一次。
轮播有多种尺寸,由主题决定。通常,主题使用的尺寸至少为1200 x 600 像素。轮播图像必须为JPEG/JPG、PNG或GIF格式。
轮播生成器
Carousel Builder 位于Storefront › Home Page Carousel。
将图像添加到幻灯片
您最多可以在轮播中显示五张幻灯片。空幻灯片不会出现在您的店面上。
专家提示!第一次使用 Carousel Builder 时,它会预先加载示例图像。确保在添加新图像之前删除示例幻灯片。
1. 单击空白幻灯片缩略图。预览将变为一条消息,告诉您添加图像。
2. 在您的计算机上,打开包含您的图像的文件夹,然后将图像从您的计算机拖放到轮播预览框。或者,单击从您的计算机中选择并选择要上传的图像。
3. 保存您的更改。
添加文本和链接
您可以选择向每个轮播幻灯片添加文本。幻灯片由标题、按钮文本和常规文本组成,可以链接到商店的另一部分或另一个网站。
- Heading — 大标题文本
- 文本 — 显示在标题下方的常规大小的文本
- 按钮文本 — 显示在滑动按钮中的文本,通常是号召性用语,例如立即购买或了解更多信息。
- 链接 — 幻灯片链接到的商店页面或网页。请参阅下面的将幻灯片链接到另一个页面。
- 预览 — 文本内容的预览,在店面看起来不会像这样。请参阅为什么轮播预览看起来与我的店面不同?
- 幻灯片 — 轮播旋转的图像和文本列表
- 设置 — 确定幻灯片在切换到下一张幻灯片之前显示多长时间。请参阅下面的设置幻灯片的旋转频率。
要编辑幻灯片上的文本,请单击要编辑的幻灯片的缩略图。从这里,您可以在要显示的文本类型旁边的字段中输入消息。
要更改文本颜色,请转到Page Builder。
您的 Carousel Builder 看起来有什么不同吗?旧版蓝图主题具有用于编辑轮播文本颜色的不同设置。有关详细信息,请参阅蓝图主题。
将幻灯片链接到另一个页面
当您的客户单击幻灯片上的任意位置时,将URL 添加到“链接”字段会将其带到指定的页面。
要链接到商店中的页面,例如特定产品或类别,请单击浏览。
选择您要链接到的页面类型的选项卡(产品、类别、品牌、网页或博客),然后从显示在选项卡下方的列表中选择页面,然后单击插入链接。要将购物者引导至其他网站,例如非现场博客,请直接在输入目标链接的字段中输入该网站的 URL 。
设置幻灯片旋转的频率
要更改幻灯片的旋转频率,请更改交换每[数字]秒字段中的数字。间隔必须在 1 到 90,000 秒(25 小时)之间。
重新排序幻灯片
单击并拖动幻灯片以将其移动到您喜欢的顺序。所有文本和链接都将随之移动。
在离开页面之前保存您的更改。
删除幻灯片
删除幻灯片将同时删除图像和文本。
当心!一旦删除,图像将无法恢复,因此请务必备份您使用的图像。
要删除幻灯片,请找到要删除的幻灯片的小缩略图,然后单击缩略图右上角的X。
查找轮播尺寸
我们的每个主题都包括一个轮播或幻灯片,以突出显示产品和号召性用语。由于我们的主题有多种风格,因此它们对轮播图像尺寸的要求也不同。
- 图像尺寸 — 图像的宽度和高度,使用像素 (px) 度量
图像推荐可以在其文档中找到,使用下面的指南来帮助查找这些规范。
需要修复轮播图像?请参阅我们关于调整商店图像设置的指南,以获取有关为轮播设置正确尺寸的图像的帮助。
图像尺寸
模板主题通常使用介于 1200 x 600 像素和 1600 x 900 像素之间的轮播尺寸。在创建和添加轮播幻灯片之前检查您的主题文档,因为不同的主题有不同的推荐尺寸。
超出推荐尺寸的图像可能会出现变形的风险,因为主题会拉伸或挤压图像以使其适合。有关调整图像大小以适合轮播的帮助,请参阅编辑您的商店图像。由于所有 Stencil 主题都是响应式的,因此 Carousel 将根据客户的屏幕尺寸进行调整。
如果您购买了主题,请联系主题的开发人员并查看主题文档。
如果您使用的是基石主题,请参阅基石主题手册。Page Builder 有一个选项可以在更大的屏幕上调整轮播图像大小,强制图像拉伸或不拉伸。
没有看到任何推荐的高度尺寸?如果手册对图像高度没有建议,我们建议使用 600 或 800 像素。确保所有图像使用一致的高度。
不方便调整您的设计或想与专家合作?查看我们的BigCommerce 合作伙伴目录,或考虑使用我们的代理设计请求计划与认证设计合作伙伴合作。由于我们的设计政策,我们的技术支持无法编辑代码或进行设计更改。
常问问题
为什么预览看起来与店面不同?
控制面板中轮播预览的外观可能与您店面上的轮播有很大不同。这是因为控制面板中的预览没有考虑主题的 CSS 样式。店面的轮播展示了用户创建的和基于主题的样式。
主题可以控制轮播的哪些方面?
主题管理以下方面。这些只会显示在店面,不会显示在控制面板的预览中。
- 图片尺寸
- 文字字体
- 文字位置
为什么轮播图像看起来被拉伸或挤压?
如果图像与主题所需的图像尺寸不匹配,图像将被拉伸或挤压以适应。如果您遇到这种情况,请参阅对您的商店图像进行故障排除并查看您的主题文档。
如果轮播切断了我的图像的一部分,我该如何修复它?
某些 Stencil 主题在Page Builder中有一个设置,用于确定如何处理较大的图像。
我可以更改轮播上使用的字体吗?
要更改轮播字体,您必须使用Stencil CLI自定义主题。这可以通过自定义模板文件在旧版蓝图主题中完成。
如何移除轮播?
删除轮播的最简单方法是删除所有幻灯片,使其只有空的幻灯片缩略图。
我可以更改轮播的尺寸吗?
可以通过编辑主题代码来调整轮播的默认尺寸。我们建议通过访问我们的合作伙伴目录或提交代理设计请求与 BigCommerce 合作伙伴联系。
我可以在轮播中使用动画图像或视频吗?
如果需要额外的移动,轮播可以使用动画GIF图像,但不支持视频文件。
我必须有多张幻灯片吗?
您可以有 0 到 5 张幻灯片。如果您只有一张幻灯片,它不会旋转,而是保持静态图像。