WordPress divi主题

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

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧!

抢先看

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

Divi 互动图像拼贴

免费下载布局

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

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

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

WordPress divi主题
  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

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

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

优化行列

首先,创建一个单列行。

Divi 互动图像拼贴

行设置

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

为此,请按如下方式优化行设置:

Divi 互动图像拼贴

设置柱高

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

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

height: 40vw;

在电话选项卡下,将高度恢复为默认状态,因为我们还将图像更改回电话上的静态位置。 将以下自定义 CSS 添加到电话选项卡:

height: auto !important;

Divi 互动图像拼贴

fiverr建站WordPress程序员

添加标题文本

设置列高后,我们可以开始将绝对定位元素添加到列中。 让我们首先为我们的图像拼贴布局的标题添加一个文本模块。

Divi 互动图像拼贴

文本模块内容

然后使用以下内容更新文本:

<h2>Recent Work</h2>

Divi 互动图像拼贴

文本模块设置

然后更新文本模块设置如下:

独立站选品工具
  • 标题 2 字体:Limelight
  • 标题 2 文本对齐:居中
  • 标题 2 文字颜色:#24005b
  • 标题 2 文字大小:5vw(台式机和平板电脑),50px(手机)
  • 宽度:100%
  • 最大宽度:35vw(台式机和平板电脑),100%(手机)
  • 位置:绝对(桌面),默认(手机)
  • 水平偏移(桌面):35vw

Divi 互动图像拼贴

创建和定位图像

现在标题已经到位,让我们为我们的交互式图像拼贴创建第一个图像。 我们的想法是创建第一个具有所有优化的地方,以便我们可以复制它,以便轻松创建和定位拼贴的其余图像。

使用悬停效果、灯箱和绝对定位优化第一张图像。

首先,在文本模块下添加一个图像模块。

Divi 互动图像拼贴

然后将图像上传到模块并选择在灯箱中打开图像的选项。 现在图像将在点击时显示在灯箱中。

高质量外链购买

Divi 互动图像拼贴

悬停时缩放图像

除了灯箱交互,添加悬停效果,使图像放大一点。 为此,请更新以下转换选项:

  • 变换比例(悬停):115%

Divi 互动图像拼贴

悬停时 Z 索引优先的绝对定位

为了定位我们的图像,我们将使用带有 vw 长度单位的绝对位置。 更新位置选项如下:

在台式机(和平板电脑)上

JasperAI 10000字免费额度试用
  • 职位:绝对
  • 位置:左上角
  • 垂直偏移:5vw
  • 水平偏移:-2vw

在电话上

悬停时

Divi 互动图像拼贴

图像设计和响应设置

然后更新以下内容:

  • 图像对齐方式:左(桌面),居中(手机)
  • 宽度:75%(电话)
  • 最大宽度:20vw(台式机和平板电脑),100%(手机)
  • 边距(电话):底部 30 像素
  • 盒子阴影:见截图
  • 饱和度:0%(桌面)、100%(悬停)

Divi 互动图像拼贴

WordPress备份工具updrafplus

使用第一张图像作为模板快速创建和定位其他图像

第一张图像完成后,创建新图像以构建交互式图像拼贴非常容易。 它也是一个强大的设计工具,因为您将能够在实时查看设计的同时将图像拖动到位并调整大小。

这里是过程……

  1. 通过单击复制图标复制图像。 复制的图像将绝对定位在您正在复制的图像顶部的同一位置。
  2. 将图像拖动到位。 由于复制图像继承了前一个图像的 vw 长度单位,因此您可以使用拖动图标将图像准确定位在行内您想要的位置。
  3. 用新的图像更新图像。
  4. 使用内置大小选项调整图像大小。

这是创建第二个图像时的外观说明。

Divi 互动图像拼贴

这个过程最酷的部分是位置(垂直和水平偏移)将在您将图像拖动到位时确定。 无需在设置中手动更新偏移位置。

但是,您可以看到我在此示例中使用的偏移量,我将在下面的每个图像中包含它们以及尺寸调整。

图片 #2 更新

  • 垂直偏移:10.06 vw
  • 水平偏移:16.51 vw
  • 最大宽度:18 大众

Divi 互动图像拼贴

Divi 互动图像拼贴

图片 #3 更新

  • 垂直偏移:24.25vw
  • 水平偏移:7.13vw
  • 最大宽度:20vw

Divi 互动图像拼贴

图片#4更新

  • 垂直偏移:17.69vw
  • 水平偏移:31.91vw
  • 最大宽度:18vw

Divi 互动图像拼贴

图片 #5 更新

  • 垂直偏移:12vw
  • 水平偏移:46.82vw
  • 最大宽度:15vw

Divi 互动图像拼贴

图片#6更新

  • 垂直偏移:19.13vw
  • 水平偏移:58.84vw
  • 最大宽度:12vw

Divi 互动图像拼贴

图片 #7 更新

  • 垂直偏移:28.24vw
  • 水平偏移:54.2vw
  • 最大宽度:10vw

Divi 互动图像拼贴

图片 #8 更新

  • 垂直偏移:32.5vw
  • 水平偏移:74.04vw
  • 最大宽度:8vw

Divi 互动图像拼贴

图片 #9 更新

  • 垂直偏移:1.01vw
  • 水平偏移:75.5vw
  • 宽度:27vw
  • 最大宽度:27vw

Divi 互动图像拼贴

添加背景图片

最后,为该部分添加背景图像,您就完成了!

Divi 互动图像拼贴

最后结果

这就是交互式图像库在台式机和平板电脑上的样子。 请注意将图像带到前面的悬停效果,显示图像的全彩版本,并将图像放大。 然后您可以单击图像以显示灯箱效果。

Divi 互动图像拼贴

这是手机显示屏上的设计。

Divi 互动图像拼贴

为不同的布局设计更改图像的位置点

由于每个图像的偏移量都是相对于位置点的,我们可以更改图像的原始位置点,以便在几秒钟内看到我们的设计来自不同的方向。

为此,请使用 Divi 的多选功能选择所有图像模块。 然后打开其中一个图像模块设置以调出元素设置模式。

然后,您可以将位置更改为布局的不同结构的四个角中的每一个。

右上角位置

左下角位置

右下角位置

最后的想法

Divi 的新位置选项既强大又方便。 正如我们在本教程中所经历的那样,它们为我们提供了一些出色的设计工具,用于为我们的图像设计独特的布局。 希望这个交互式图像拼贴能为您的下一个项目提供一点灵感。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题