WordPress divi主题

如何在 Divi 中创建在 3D 空间中碰撞的浮动模块

by | May 12, 2022 | Divi主题使用教程 | 0 comments

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

探索使用 Divi 可能的新设计总是很有趣。 而今天,我们将使用 Divi 探索 3D 空间! 从技术上讲,我们将探索如何设计看起来像是在 3D 空间中碰撞的浮动模块。 这种设计将通过展示您在您的网站上拥有“广泛”的服务、产品或资源,作为一种让访问者惊叹的创造性方式。

google广告开户

显然,本教程无法与我想象的现实生活中的太空探索相提并论。 但是,希望你们在那里的 Divi 探索者可以在此过程中学到一些东西。

抢先看

这是我们将共同构建的设计的先睹为快。

divi浮动模块

免费下载在 3D 空间布局中碰撞的浮动模块

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

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

让我们来看看教程好吗?

订阅我们的 Youtube 频道

预制布局入门

要开始使用,请确保您已安装并激活 Divi 主题。 然后创建一个新页面,给页面一个标题,然后部署 Divi Builder(在前端)。 选择“选择预制布局”选项。 然后选择 Video Game Landing Page 布局并将其导入新页面。

WordPress divi主题

divi浮动模块

为了在我们的设计中抢占先机,我们将使用标题为“游戏功能”的部分,其中包含我们将用于设计的简介。 由于这是我们真正需要的唯一部分,请继续删除除两行简介之外的每个部分和行。

divi浮动模块

在 Divi 中实现 3D 空间设计中的浮动模糊

创建第一行 Blubs

在包含两行简介的预制布局部分内,创建一个新的一列行并将其拖动到该部分的顶部。

divi浮动模块

现在使用 Divi 的多选功能(按住 ctrl/cmd,同时选择每个简介),选择下面两列中的 5 个简介并将它们拖到该部分顶部的新一列行中。

divi浮动模块

现在您可以删除下面预制布局附带的两行。 之后,您应该只有一个包含 5 个简介的单列行。

divi浮动模块

为我们的部分添加透视图

为了获得我们在这个设计中寻找的 3D 效果,我们需要将透视 css 属性添加到我们的部分。 每当我们使用变换选项旋转行时,这将向我们的行添加 3D 透视图。

fiverr建站WordPress程序员

打开部分设置并将以下自定义 CSS 添加到主元素:

perspective: 1000px;

divi浮动模块

稍后,您可能希望增加或减少透视值,以使 3D 元素(在本例中为行)在查看屏幕时离用户的透视更近或更远。

有关更多信息,请查看透视如何与 Divi 中的变换选项一起使用。

自定义行

在我们开始设计我们的简介之前,让我们首先配置我们的行设置。 对于此设计,我们需要在行级别更改三项主要内容:

独立站选品工具
  1. 我们需要使用“display:flex”水平对齐我们的简介。 这将使我们的设计在所有设备上保持一致和响应(而不是使用会在平板电脑和手机上中断的 5 列布局)。
  2. 我们需要通过将装订线宽度设置为 1 来摆脱默认的列边距。
  3. 我们需要使用 transform rotate 将行在 X 轴上旋转 45 度。 将透视属性添加到父级(部分)后,行及其所有元素都具有我们正在寻找的 3D 效果。

打开行设置并更新以下内容:

天沟宽度:1
宽度:80%(台式机)、100%(平板电脑)、100%(手机)
变换旋转X轴:45度

列主元素 CSS:

display: flex;
justify-content: center;

divi浮动模块

调整模糊样式和间距

现在是时候稍微调整一下我们的简介的内容和样式了。

高质量外链购买

因为我们想对所有的简介应用相同的自定义,所以再次使用多选来选择所有的简介并部署元素设置模式。

divi浮动模块

首先,删除正文内容。

divi浮动模块

然后添加背景颜色:

JasperAI 10000字免费额度试用

背景颜色:rgba(20,241,217,0.16)

divi浮动模块

然后更新以下间距:

自定义边距(桌面):2vw 右
自定义边距(平板电脑和手机):0vw right

自定义填充:顶部 2%、底部 2%、左侧 3%、右侧 3%

WordPress备份工具updrafplus

divi浮动模块

接下来,添加边框如下:

边框宽度:2px
边框颜色:rgba(20,241,217,0.66)

divi浮动模块

在这一点上,所有的宣传语都有适当的样式。 我们仍然需要使用变换选项来单独更改每个简介的比例和位置,这将增加简介的 3D 浮动效果。 但在我们这样做之前,让我们复制该行以创建我们的第二行简介。

创建第二行简介

要创建第二行简介,只需复制您刚刚自定义的 5 行简介。

divi浮动模块

要创建碰撞效果,我们可以沿相反方向(-45 度)旋转复制的行。

打开重复的行并更新以下内容:

变换旋转X轴:-45度

divi浮动模块

增加顶部和底部填充

此时,前面的简介可能会延伸到该部分之外。 要解决此问题,请将以下填充添加到您的部分:

自定义填充:顶部 15%,底部 15%

divi浮动模块

使用变换选项单独调整每个模糊的大小和位置

在这一点上,您已经准备好通过您希望每个广告在 3D 空间中“漂浮”的方式来发挥创意。 为此,您可以使用转换选项将每个简介一一调整大小并准确定位到您想要的位置。 通过这样做,您的简介将在 3D 空间中呈现出不同的深度。

为了方便起见,我将从 1 到 10 对宣传语进行编号,从最上面一行的最左边的宣传语 (Blurb #1) 开始,到第二行的最右边的宣传语结束 (Blurb #10)。

divi浮动模块

模糊#1

让我们从顶行的第一个简介开始。 打开简介设置并更新以下内容:

变换比例(x 和 y 轴):90%

divi浮动模块

模糊 #2

打开 Blurb #2 的设置并更新以下内容:

变换比例(x 和 y 轴):80%
变换平移 X 轴:-10%

divi浮动模块

模糊 #3

变换比例(x 和 y 轴):80%
变换平移 X 轴:20%

模糊 #4

变换比例(x 和 y 轴):85%
变换平移 X 轴:-30%

模糊 #5

变换比例(x 和 y 轴):60%

完成后,您的第一行应该看起来像这样。

divi浮动模块

继续自定义简介 6-10 的变换选项,从第二行最左侧的简介 #6 开始。

模糊 #6

变换比例(x 和 y 轴):60%
变换平移 X 轴:-40%
变换平移 Y 轴:-20%

模糊 #7

变换比例(x 和 y 轴):90%
变换平移 X 轴:20%

模糊 #8

变换比例(x 和 y 轴):70%
变换平移 X 轴:-50%

模糊 #9

变换比例(x 和 y 轴):80%
变换平移 X 轴:-20%

模糊 #10

变换比例(x 和 y 轴):70%
变换平移 X 轴:-60%

现在让我们看看第二行在 3D 空间中与我们的第一行碰撞时的样子。

divi浮动模块

为了完成设计,我们可以在该部分添加一个漂亮的 3D 空间背景图像。 我正在使用我们在本教程中使用的视频游戏登陆页面布局附带的顶部背景图像。

最终设计

现在让我们看看我们的 3D 浮动模块的最终设计。

桌面

divi浮动模块

药片

divi浮动模块

电话

divi浮动模块

由于有 5 个广告在行中延伸,所以要适应所有 5 个广告而不延伸到视口之外就有点挑战了。 要解决此问题,您可以简单地在手机的每一行中隐藏远处的简介。 或者,您可以在手机上为您的每个宣传语提供更小的尺寸。

divi浮动模块

最后的想法

我希望本教程能给您一些启发,让您了解如何在 3D 空间中创建自己的浮动模块。 真正需要的只是几个步骤,使用透视和变换选项让整个模块行以 3D 形式旋转。 之后,您可以定位每个模块以将它们浮动到您想要的任何位置。

尽情探索吧。

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

干杯!

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