添加定位图层容器.

Learn DXPR BuilderBuild pagesAdd contentLay-out

当需要元素重叠或位于精确位置(行和列做不到)时使用 Positioned layers。获得画布,将每个元素拖到想要的位置,如照片上的标题。本例将白色开放日标题叠在图像上。普通并排内容,行和列 在手机上更易保持整洁。

白色 Spring Open Day 标题及其日期叠加在橙色抽象画左上方的图层

添加定位图层容器

  1. 悬停列并点击 + 在其控制栏中,或 + 在空白列中间,以打开元素选择器。
  2. 在 Layout 选项卡,点击 Positioned layers.
  3. 其设置首先打开。设置 Height 以便最高图层容纳,然后点击 Save。空画布出现。
  4. 悬停画布并点击 + 在其控制栏中以添加元素,例如 Text 或一个 Image。添加的每个元素成为可定位的图层。

您会看到的内容

画布保持您设置的高度,每个图层位于您放置的位置,在其他图层之上或之下。访客看到的构图与编辑器中一致。位置按画布比例存储,因此画布变窄时图层保持位置。文本保持大小,除非打开 Responsive.

设置定位图层

从以下位置打开设置 More > Settings:Positioned layers 控制栏。

设置 它的作用 默认值
Width 画布宽度,例如 100% 或 600px 100%
Height 画布高度(像素) 500
Responsive 随画布宽度缩放画布高度和文本,以便构图在小屏幕上保持比例 Off

定位图层

  • Select:点击图层。控制柄出现在其角和边上。
  • Move:通过图层在其控制栏中的名称拖拽图层,例如 Text 或 Image。图层保留在画布内。
  • Resize:拖拽所选图层的控制柄。
  • Add at a spot:双击画布空白处。元素选择器打开,新元素落在您点击的位置。

每个图层的 More 菜单有四个额外项。100% width 和 100% height 将图层拉伸到整个画布。Bring forward 和 Send backward 将其移到其他图层之上或之下。

如果您看不到它

  • 拖拽时图层不动。 图层仅通过控制栏中带其名称的手柄移动。悬停图层并拖动手柄。
  • 图层藏在另一图层后面。 它在堆叠中位置较低。打开图层的 More 菜单并选择 Bring forward.
  • 图层在手机上重叠或溢出。 Responsive 关闭,因此画布高度和文本保持尺寸。打开 Responsive:Positioned layers 设置。
  • 定位图层在画布内的选择器中缺失。 画布不能容纳另一个画布。添加新的 Positioned layers 元素到列中。
  • 定位图层在所有位置的选择器中缺失。 DXPR Builder 用户资料省略它。管理员勾选 Layers 在 Elements 在您的资料中,位于 /admin/dxpr_studio/dxpr_builder/profile.

接下来做什么?

  • 版块:为画布周围区域设置背景颜色或图像。
  • 嵌套:在更复杂的布局中将图层与行列结合。
  • 动画选项卡:让每个图层以自己的进入效果出现。