使用指南/创建内容/媒体/为您的站点添加横幅

为您的站点添加横幅

通常也称为“主图”或“横幅”图片,“封面”区块可用于在您的站点上添加大型图片、视频或文字横幅。本指南将向您介绍如何添加横幅,以及如何选择要显示的图片、视频或颜色。

视频教程

在本视频中,您将学习如何使用“封面”区块为您的 WordPress.com 站点添加视觉页眉或横幅样式的版块。视频涵盖如何添加背景图像或视频、在上方放置文本或其他区块、调整布局和焦点、自定义叠加层,以及在移动设备上预览设计。

添加“封面”区块

您可以使用“封面”区块为您的站点添加横幅图片。要在 页面文章模板中添加横幅,请按以下步骤操作:

  1. 前往您站点的 控制台
  2. 根据您想要添加横幅的位置,前往页面、文章或模板,然后编辑现有内容或新建一个:
    • 页面:前往菜单中的 页面 部分。
    • 文章:前往菜单中的 文章 部分。
    • 模板:前往 外观 → 编辑器,然后选择模板。
  3. 点击 +(区块插入器) 图标,然后搜索“封面”。
    • 或者,在显示 “键入 / 以选择区块” 的位置输入 /封面。
The (+) block inserter sidebar open with the Cover block icon highlighted.
  1. 点击封面图标以插入 “封面”区块
The Cover block before media is added, with the options to upload, select media, or use the featured image.

选择横幅媒体

添加 “封面”区块后,请选择要显示的媒体。您可以从以下选项中进行选择:

  • 上传:点击“上传”按钮,从您的计算机中选择文件。
  • 选择媒体:从以下位置查找媒体:
    • 媒体库:您已上传到站点媒体库中的图片和视频。
    • 您的手机:使用 Jetpack 移动应用程序,直接从手机上传媒体。
    • 使用 AI 生成:简要描述您想使用的图片类型,AI 就会创建设计。
    • Google Photos:从您已连接的 Google Photos 账户中选择媒体。
    • Pexels:从 Pexels 库中搜索免费图片。
    • Openverse:从 Openverse 库中搜索免费图片。
  • 使用特色图片:设置后,会显示页面或文章的特色图片。如果将 “封面”区块添加到模板并选择此选项,系统会自动显示所有使用该模板的页面或文章的特色图片。
  • 颜色:您也可以不添加图片或视频,而是为横幅选择一种纯色。

接下来,您可以在横幅中添加文本和按钮等内容自定义横幅布局,并调整横幅设计

选择图片的提示

为横幅选择图片时,请考虑以下几点:

  • 装饰性或抽象图片通常效果最好,因为在移动设备上,图片不一定总能完整显示。
  • 请将文字直接添加到图片上方,而不要把文字设计在图片本身中。这样可以确保文字在各种屏幕尺寸下都能良好缩放。
  • “封面”区块会将图片用作背景图像,在较小的设备上不会调整大小以显示整张图片的宽度。使用焦点选择器设置,您可以选择在较小屏幕上显示时要突出图片的哪个部分。
    • 如果您希望图片中的内容在所有设备尺寸下都能完整显示,可以改用“图片”区块

创建视频横幅

“封面”区块支持图片、视频和纯色。要将视频上传到“封面”区块,请按以下步骤操作:

  1. 封面区块添加到页面或文章中。
  2. 在区块工具栏中,点击「添加媒体」选项:
"Add media" is highlighted in the Cover block toolbar.
  1. 选择以下任一项:
    • 上传:从您的计算机上传视频文件(需要符合条件的套餐)。
    • 打开媒体库:选择您已上传的视频文件。
    • 从 URL 嵌入视频:粘贴来自 YouTube、Vimeo 或其他提供商的 URL。

封面区块主要用于装饰,而非播放功能,因此不会播放视频文件中的声音。如果您想包含视频音频,请使用 VideoPress 区块播放带声音的视频。

替换或移除横幅媒体

添加封面区块后,您可以随时更改媒体。要替换或移除横幅中的媒体,请按以下步骤操作:

  1. 前往您站点的控制面板
  2. 前往包含该横幅的页面、文章或模板。
  3. 在编辑器左上角选择列表视图
  4. 在列表视图中点击封面区块
The list view open and an arrow pointing from the "List View" icon to the Cover block.
  1. 区块工具栏中,点击替换按钮,选择新的图片或视频。
The "Replace" option highlighted in the Cover block's toolbar.

您可以通过以下任一选项选择新的媒体文件:

  • 打开媒体库:选择您已上传的图片。
  • 上传:从您的设备中选择图片并上传到您的站点。查看支持的文件类型。
  • 使用特色图片:使用页面或文章的特色图片
  • 重置:移除图片,但保留图片区块,以便您可以选择上传、选择图片、使用 AI 生成或从 URL 插入等选项。
  • 您的手机:使用 Jetpack 移动应用程序从手机添加图片。
  • 使用 AI 生成:通过描述您想要的内容,使用 AI 生成图片。
  • Google Photos
  • Pexels 免费图片库
  • Openverse 免费图片
  • 从 URL 嵌入视频:粘贴来自 YouTube、Vimeo 或其他提供商的 URL
Copied to clipboard!