给版块配颜色、照片或渐变背景.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

任何版块都可以用颜色、照片或渐变填充。颜色和照片来自 Style 面板，版块、行、列和元素都有。版块多一个 Background effects 面板，用于渐变、固定和视差照片以及 YouTube 视频。示例搭建深蓝色版块，配城市照片、白色文字和顶部渐变。

该视频在版块后添加照片，再用渐变覆盖。

添加颜色和照片

  1. 点击空内容区的 Add Elements，再选择 Section（Layout 选项卡中）。
  2. 悬停版块，打开 More > Settings。
  3. 打开 Style 面板。
  4. 为 Background 选择深蓝色色板。
  5. 为 Font color 选择白色。
  6. 在 Background image 下点击 Select Image。搜索媒体库，勾选照片并点击 Insert selected。
  7. 将 Background style 设为 Cover。
  8. 将 Background position 设为 Center center，点击 Save。
  9. 点击版块上的 +，选择 Text（Content 选项卡中）。
  10. 输入标题（例如 Evening lectures）和下方一行。将标题设为 Heading 2，在编辑器工具栏中将两行居中。
  11. 打开 Style 面板，将 Font color 设为白色，点击 Save。

添加渐变

  1. 悬停版块，再次打开 More > Settings。
  2. 打开 Background effects 面板，将 Background effect 设为 Gradient。
  3. 选择 Start color 和 End color，点击 Save。
  4. 点击工具栏上的 Save，打开视图菜单（眼睛图标）并选择 Preview。

您会看到的内容

前几步完成后，照片铺满白色标题后的整个版块。Cover 裁掉放不下的部分，Center center 让照片中间留在视野中。深蓝色只在照片加载时或照片盖不到的地方显示。

渐变从顶部的起始色混合到底部的结束色。它盖在照片上方。不透明颜色完全盖住照片；半透明颜色让照片透出来。

设置

Style 面板（每个版块、行、列和元素）

设置 作用 默认值
Background 颜色选择器或主题色板的填充色 无
Background image 图片来自媒体库，选择用 Select Image 无
Background style Cover 填满元素并裁剪；Contain 显示整图，可能留空；No repeat 按原尺寸显示一次；Repeat 平铺 Theme defaults
Background position 裁剪时图片的哪部分留在视野中，例如 Center center 或 Left top Theme defaults

设置好 AI 图像生成后，Background image 也接受提示词。请参阅 AI 图像生成。

Background effects 面板（仅版块）

背景效果 作用 额外设置
Simple image（默认） 照片随页面滚动 无
Fixed image 照片固定，页面从上方滚过 无
Parallax image 照片比页面移动得慢。示例见 主视觉版块。 Parallax speed、Parallax mode（Fixed 或 Local）、Disable on mobile
Gradient 两种颜色在版块上混合，有照片时盖在照片上方 Start color、End color、Gradient direction（180 度为从上到下）、Start position、End position
YouTube video 静音 YouTube 视频填满版块；勾选 Loop 重复播放 YouTube video URL、Video options、Start time in seconds、Stop time in seconds

固定和视差效果移动您在 Style 面板中设置的照片。YouTube 视频不需要照片。

如果您看不到背景

  • 没有 Background effects 面板。 只有版块有。请悬停版块（不是行、列或元素），打开 More > Settings。
  • 照片被裁掉了。 Cover 裁掉版块放不下的部分。请更改 Background position 留住主体，或选择 Contain。
  • 渐变盖住了照片。 渐变在上方，不透明颜色盖住照片。请在颜色选择器中降低 Start color 和 End color 的不透明度。
  • 版块没有显示渐变。 渐变需要两种颜色。请同时选择 Start color 和 End color。
  • YouTube 视频不播放。 YouTube video URL 为空，或不是单个视频的链接。请粘贴视频的完整地址，例如 https://www.youtube.com/watch?v= 加其 ID。

接下来做什么？