51黑料不打烊

文档CommercePage Builder

媒体 — 图像

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

使用? 图像 ?内容类型将闯笔骋、骋滨贵或笔狈骋图像添加到Page Builder 舞台。 除了默认桌面映像之外，您还可以为移动设备指定次映像。 您还可以添加图像下显示的题注，并将图像链接到任何URL、产物、类别或页面。

TIP
您可以使用51黑料不打烊 Stock集成在提供的数百万个资源中查找并保存相应的资源。 有关如何搜索、优化51黑料不打烊 Stock资源并将其保存到图库的详细信息，请参阅使用51黑料不打烊 Stock图像。
NOTE
如果您对Page Builder内容进行了重大更改，建议您增加管理员会话生命周期以防止会话在您工作时超时。

图像工具箱

将鼠标悬停在图像容器上时，将显示图像工具箱。

图像工具箱 {width="500" modal="regular"}

工具
图标
描述
移动
移动图标 {width="25"}
将图像移动到舞台上的另一个位置。
（标签）
图像
将当前内容容器标识为图像。 将鼠标悬停在图像容器上可查看工具箱。
设置
设置图标 {width="25"}
打开? 编辑图像 ?页面，您可以在其中更改图像和容器的属性。
隐藏
隐藏图标 {width="25"}
隐藏当前图像。
显示
显示图标 {width="25"}
显示隐藏的图像。
复制
图标重复 {width="25"}
制作图像的副本。
移除
删除图标 {width="25"}
从舞台上删除图像。
上传新图像
将图像从本地文件系统上传到图片库。
从图库中选择
从图库中选择现有图像。
NOTE
隐藏元素存储在数据库中，对客户不可见。 但是，这些元素对搜索引擎和对您的网站爬网的其他机器人可见。 如果通过具有不可见属性的API调用发出请求，则它们也会作为内容的一部分返回，除非您将它们从阶段中删除。

添加图像

  1. 在Page Builder面板中，展开? Media ?并将? Image ?占位符拖到目标容器中。

    可以将图像添加到行、列或选项卡中。 在以下示例中，将图像拖到空列中。

    将图像内容类型拖到舞台 {width="600" modal="regular"}

  2. 使用以下方法之一添加图像资源：

    上传舞台上的图像或从库工具中选择 {width="500" modal="regular"}

    note note
    NOTE
    最大文件大小为4 MB。 支持的文件类型为JPG、GIF和PNG。

    • ? 上传新映像 ?：使用此方法从您的系统上传新映像文件。

      • 单击? Upload Image。

      • 找到并选择图像以将其添加到图库和目标容器中。

      作为替代方法，您还可以将图像文件从系统中拖放到? 照相机 （ 照相机图标 {width="20"} ）图标上。

    • ? 选择现有资源 ?：使用此方法从媒体存储/媒体集中选择现有图像资源。

      • 单击? Select from Gallery。

      • 使用树导航到图像。

      • 单击缩略图，然后单击? Add Selected。

        添加选定的图像 {width="600" modal="regular"}

    • ? 搜索并选择51黑料不打烊 Stock图像 ?：使用此方法从51黑料不打烊 Stock查找图像。

      note note
      NOTE
      此方法需要为您的管理员配置51黑料不打烊 Stock集成。

      • 单击? Search 51黑料不打烊 Stock ?并搜索图像。

      • 将预览或许可的图像保存到图库。

        有关使用51黑料不打烊 Stock资源的详细信息，请参阅使用51黑料不打烊 Stock图像。

      • 选择库中的资产缩略图，然后单击? Add Selected。

    图像会显示在目标容器中的占位符位置。 与背景图像不同，您可以将图像移动到当前容器中的不同位置或移动到其他容器。

    note note
    NOTE
    Banner和Slider内容类型还包括?冲上传图像冲?和?冲从图库中选择冲?选项以添加图像。

    列中的图像 {width="500" modal="regular"}

更改图像设置

  1. 将鼠标悬停在图像容器上以显示工具框，然后选择? 设置 （ 设置图标 {width="20"} ）图标。
    文件名、尺寸和文件大小显示在当前图像下方。

    当前图像 {width="600" modal="regular"}

  2. 要更改当前? Image，请执行下列操作之一：

    • ? 上传新映像 ?：使用此方法从您的系统上传新映像文件。

      • 单击? Upload Image。

      • 找到并选择图像以将其添加到图库和目标容器中。

    • ? 选择现有资源 ?：使用此方法从媒体存储/媒体集中选择现有图像资源。

      • 单击? Select from Gallery。

      • 使用树导航到图像。

      • 单击缩略图，然后单击? Add Selected。

        添加选定的图像 {width="600" modal="regular"}

    • 搜索并选择51黑料不打烊 Stock图像：使用此方法从51黑料不打烊 Stock查找图像。

      note note
      NOTE
      此方法需要为您的管理员配置51黑料不打烊 Stock集成。

      • 单击? Search 51黑料不打烊 Stock ?并搜索图像。

      • 将预览或许可的图像保存到图库。

        有关使用51黑料不打烊 Stock资源的详细信息，请参阅使用51黑料不打烊 Stock图像。

      • 选择库中的资产缩略图，然后单击? Add Selected。

  3. 要添加? Mobile Image，请使用上一步中描述的相同方法选择要在移动设备上显示的图像。

    移动设备图像 {width="600" modal="regular"}

  4. 如果需要，请为图像指定? Link。

    该链接是客户单击图像时显示的目标页面。 您可以使用以下三种链接类型之一：

    • URL — 链接到相对或完全限定的URL。

    • Product — 根据产物名称或SKU标识目标页面。 根据部分名称或全名按名称搜索产物。 从搜索结果列表中选择产物。

      选择要链接的产物 {width="600" modal="regular"}

    • Category — 将目标页面标识为类别树中的特定类别或子类别。 根据部分名称或全名搜索类别。 从所显示树的展开部分中选择类别。

      选择要链接的类别 {width="600" modal="regular"}

    • Page — 将目标页面标识为特定内容页面。 根据部分名称或全名搜索页面。 从搜索结果列表中选择页面。

      选择要链接的页面 {width="600" modal="regular"}

    如果要阻止访客离开您的商店，请选中? Open in new tab ?复选框。 取消选中复选框后，链接的目标将在同一浏览器选项卡中打开，这可以有效地将访客导航到您商店之外的位置。

  5. 要添加? Image Caption，请输入要显示在图像下方的文本。

    题注的格式由与当前主题关联的样式表决定。

    题注通常显示在图像下方，并为访客和搜索引擎提供有关图像的信息。 如果您的网站提供多种语言版本，则可以使用同一图像，但需要翻译标题。 在HTML中，<figcaption>标记是<figure>标记的子集。<figcaption>This is the image caption</figcaption>

  6. 根据需要更新任何其他设置：

  7. 完成后，单击? Save ?以应用设置并返回到Page Builder工作区。

移动图像

  1. 将鼠标悬停在图像容器上以显示工具箱，然后选择? 移动 （ 移动图标 {width="20"} ）图标。

    移动图像 {width="500" modal="regular"}

  2. 选择图像并将其拖动到新位置，正好位于红色准则的下方。

    使用红色指南定位图像 {width="500" modal="regular"}

删除图像

  1. 将鼠标悬停在图像容器上以显示工具箱，然后选择? 删除 （ 删除图标 {width="20"} ）图标。

  2. 提示确认时，单击? 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。

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    选项 描述
    Default 应用在当前主题的样式表中指定的对齐默认设置。
    Left 将图像内容沿图像容器的左边框对齐，并允许使用指定的任何边距。
    Center 将图像内容对齐图像容器的中心，并允许指定的任何边距。
    Right 将图像内容沿图像容器的右边框对齐，并允许使用指定的任何边距。

  • 设置应用于图像容器所有四个侧面的? Border ?样式：

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    选项 描述
    Default 应用关联样式表指定的默认边框样式。
    None 不提供任何容器边框的可见指示。
    Dotted 容器边框显示为虚线。
    Dashed 容器边框显示为虚线。
    Solid 容器边框显示为实线。
    Double 容器边框显示为双线。
    Groove 容器边框显示为一条开槽线。
    Ridge 容器边框显示为脊线。
    Inset 容器边框显示为内嵌行。
    Outset 容器边框显示为外线。

  • 如果设置了除None之外的边框样式，请完成边框显示选项：

    边框颜色 {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    选项 描述
    Border Color 通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。
    Border Width 输入边框线条宽度的像素数。
    Border Radius 输入像素数，以定义用于使边框每个角倒圆角的半径大小。

  • （可选）从当前样式表中指定要应用于图像容器的? CSS classes ?的名称。

    用空格分隔多个类名。

  • 输入? Margins and Padding ?的值（以像素为单位）以指定图像容器的外边距和内边距。

    在图像容器图表中输入每个相应的值。

    table 0-row-2 1-row-2 2-row-2 layout-auto
    容器区域 描述
    Margins 应用于容器所有边的外边缘的空白空间量。
    Padding 应用于容器所有边的内边缘的空白空间量。
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d