如何使用 Divi 的位置选项创建交互式图像拼贴

已发表: 2020-01-29

Divi 的新位置选项为使用绝对位置属性创建独特的图像拼贴布局打开了大门。这使您可以为设计的每个元素进行更精确的放置。一旦您将其与 Divi 中无数的设计设置组合相结合，您就可以设计出一些非常令人惊叹的图像拼贴画。

在本教程中，我将向您展示如何使用 Divi 的内置位置选项在几分钟内为您的 Divi 网站创建漂亮的交互式图像拼贴。

让我们开始吧！

抢先看

这是我们将在本教程中构建的交互式图像拼贴布局的快速浏览。

Divi 交互式图像拼贴

免费下载布局

要了解本教程中的图像拼贴布局，您首先需要使用下面的按钮下载它。要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程，好吗？

你需要什么开始

扩展角标签

首先，您需要执行以下操作：

如果您还没有安装并激活 Divi 主题。
在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

使用 Divi 的位置选项创建交互式图像拼贴

优化行列

首先，创建一个单列行。

Divi 交互式图像拼贴

行设置

接下来，我们需要更新行，以便模块之间没有任何额外的空间（通过装订线宽度），因此我们将装订线宽度设置为 1。我们还需要确保行跨越浏览器窗口的整个宽度所以我们可以利用 vw 长度单位来定位我们的图像（vw（视口宽度）长度单位与浏览器窗口的宽度有关）。将宽度设置为 100%，我们可以使用 vw 长度单位在行/列中定位我们的图像，以便在所有浏览器宽度上保持位置不变，以实现无缝响应式设计。为了隐藏行外的任何图像溢出，我们需要将溢出设置为隐藏。

为此，请按如下方式优化行设置：

Divi 交互式图像拼贴

设置列高

默认情况下，列的高度由它包含的内容（或 Divi 模块）的高度决定。 Divi 模块（与 HTML 中的所有 div 一样）默认情况下将具有静态位置，这意味着它们将向其父列添加实际空间/高度，因为它位于页面的正常流中。但是，具有绝对位置的 Divi 模块会脱离正常流程，并且不会为列创建实际空间/高度。出于这个原因，我们需要为列添加指定的高度，以便我们可以将图像放置在预定的空间内。

为此，请打开行设置并通过将以下自定义 CSS 添加到主元素来更新列设置。