媒体 — 图像
创建对象:
- 初学者
- 中级
- 用户
使用 图像 内容类型将JPG、GIF或PNG图像添加到Page Builder 舞台。 除了默认桌面映像之外,您还可以为移动设备指定次映像。 您还可以添加图像下显示的题注,并将图像链接到任何URL、产品、类别或页面。
图像工具箱
将鼠标悬停在图像容器上时,将显示图像工具箱。
工具 | 图标 | 描述 |
---|---|---|
移动 |
![]() | 将图像移动到舞台上的另一个位置。 |
(标签) | 图像 | 将当前内容容器标识为图像。 将鼠标悬停在图像容器上可查看工具箱。 |
设置 |
![]() | 打开 编辑图像 页面,您可以在其中更改图像和容器的属性。 |
隐藏 |
![]() | 隐藏当前图像。 |
显示 |
![]() | 显示隐藏的图像。 |
复制 |
![]() | 制作图像的副本。 |
移除 |
![]() | 从舞台上删除图像。 |
上传新图像 | 将图像从本地文件系统上传到图片库。 | |
从图库中选择 | 从图库中选择现有图像。 |
添加图像
-
在Page Builder面板中,展开 Media 并将 Image 占位符拖到目标容器中。
可以将图像添加到行、列或选项卡中。 在以下示例中,将图像拖到空列中。
-
使用以下方法之一添加图像资源:
NOTE
最大文件大小为4 MB。 支持的文件类型为JPG、GIF和PNG。-
上传新映像 :使用此方法从您的系统上传新映像文件。
-
单击 Upload Image。
-
找到并选择图像以将其添加到图库和目标容器中。
作为替代方法,您还可以将图像文件从系统中拖放到 照相机 (
)图标上。 -
-
选择现有资源 :使用此方法从媒体存储/媒体集中选择现有图像资源。
-
单击 Select from Gallery。
-
使用树导航到图像。
-
单击缩略图,然后单击 Add Selected。
-
-
搜索并选择Adobe Stock图像 :使用此方法从Adobe Stock查找图像。
NOTE
此方法需要为您的管理员配置Adobe Stock集成。-
单击 Search Adobe Stock 并搜索图像。
-
将预览或许可的图像保存到图库。
有关使用Adobe Stock资源的详细信息,请参阅使用Adobe Stock图像。
-
选择库中的资产缩略图,然后单击 Add Selected。
-
图像会显示在目标容器中的占位符位置。 与背景图像不同,您可以将图像移动到当前容器中的不同位置或移动到其他容器。
-
更改图像设置
-
将鼠标悬停在图像容器上以显示工具框,然后选择 设置 (
)图标。
文件名、尺寸和文件大小显示在当前图像下方。 -
要更改当前 Image,请执行下列操作之一:
-
上传新映像 :使用此方法从您的系统上传新映像文件。
-
单击 Upload Image。
-
找到并选择图像以将其添加到图库和目标容器中。
-
-
选择现有资源 :使用此方法从媒体存储/媒体集中选择现有图像资源。
-
单击 Select from Gallery。
-
使用树导航到图像。
-
单击缩略图,然后单击 Add Selected。
-
-
搜索并选择Adobe Stock图像:使用此方法从Adobe Stock查找图像。
NOTE
此方法需要为您的管理员配置Adobe Stock集成。-
单击 Search Adobe Stock 并搜索图像。
-
将预览或许可的图像保存到图库。
有关使用Adobe Stock资源的详细信息,请参阅使用Adobe Stock图像。
-
选择库中的资产缩略图,然后单击 Add Selected。
-
-
-
要添加 Mobile Image,请使用上一步中描述的相同方法选择要在移动设备上显示的图像。
-
如果需要,请为图像指定 Link。
该链接是客户单击图像时显示的目标页面。 您可以使用以下三种链接类型之一:
-
URL — 链接到相对或完全限定的URL。
-
Product — 根据产品名称或SKU标识目标页面。 根据部分名称或全名按名称搜索产品。 从搜索结果列表中选择产品。
-
Category — 将目标页面标识为类别树中的特定类别或子类别。 根据部分名称或全名搜索类别。 从所显示树的展开部分中选择类别。
-
Page — 将目标页面标识为特定内容页面。 根据部分名称或全名搜索页面。 从搜索结果列表中选择页面。
如果要阻止访客离开您的商店,请选中 Open in new tab 复选框。 取消选中复选框后,链接的目标将在同一浏览器选项卡中打开,这可以有效地将访客导航到您商店之外的位置。
-
-
要添加 Image Caption,请输入要显示在图像下方的文本。
题注的格式由与当前主题关联的样式表决定。
题注通常显示在图像下方,并为访客和搜索引擎提供有关图像的信息。 如果您的网站提供多种语言版本,则可以使用同一图像,但需要翻译标题。 在HTML中,
<figcaption>
标记是<figure>
标记的子集。<figcaption>This is the image caption</figcaption>
-
根据需要更新任何其他设置:
-
完成后,单击 Save 以应用设置并返回到Page Builder工作区。
移动图像
-
将鼠标悬停在图像容器上以显示工具箱,然后选择 移动 (
)图标。 -
选择图像并将其拖动到新位置,正好位于红色准则的下方。
删除图像
-
将鼠标悬停在图像容器上以显示工具箱,然后选择 删除 (
)图标。 -
提示确认时,单击 OK。
搜索引擎优化
这些设置的文本对搜索引擎可见,并改进了为页面编制索引的方式。
-
对于 Alternative Text,输入要显示的数字辅助工具的 alt 文本说明。
替代文本的使用是辅助功能的最佳实践,在某些区域是法律所要求的。 在HTML中,
alt
属性是image
标记的子集:<image title="tooltip" alt="description" src="image.jpg">
。 -
对于 Title Attribute,输入要作为鼠标悬停时的工具提示显示的文本。
作为最佳实践,请选择一个描述性且关键词丰富的标题,以改进搜索引擎为图像编制索引的方式。 在HTML中,
title
属性是image
标记的子集:<image title="tooltip" alt="description" src="image.jpg">
。
Advanced
-
要控制添加到容器的图像的水平位置,请选择 Alignment。
选项描述Default
应用在当前主题的样式表中指定的对齐默认设置。Left
将图像内容沿图像容器的左边框对齐,并允许使用指定的任何边距。Center
将图像内容对齐图像容器的中心,并允许指定的任何边距。Right
将图像内容沿图像容器的右边框对齐,并允许使用指定的任何边距。 -
设置应用于图像容器所有四个侧面的 Border 样式:
选项描述Default
应用关联样式表指定的默认边框样式。None
不提供任何容器边框的可见指示。Dotted
容器边框显示为虚线。Dashed
容器边框显示为虚线。Solid
容器边框显示为实线。Double
容器边框显示为双线。Groove
容器边框显示为一条开槽线。Ridge
容器边框显示为脊线。Inset
容器边框显示为内嵌行。Outset
容器边框显示为外线。 -
如果设置了除
None
之外的边框样式,请完成边框显示选项:选项描述Border Color通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。Border Width输入边框线条宽度的像素数。Border Radius输入像素数,以定义用于使边框每个角倒圆角的半径大小。 -
(可选)从当前样式表中指定要应用于图像容器的 CSS classes 的名称。
用空格分隔多个类名。
-
输入 Margins and Padding 的值(以像素为单位)以指定图像容器的外边距和内边距。
在图像容器图表中输入每个相应的值。
容器区域描述Margins应用于容器所有边的外边缘的空白空间量。Padding应用于容器所有边的内边缘的空白空间量。