如何在 Divi 中创建带有悬停效果的 3D 路标

我们都知道一个好的网站可以让访问者轻松快速有效地找到他们想要的东西。 而且，如果您可以使您的内容更具吸引力，它总是有帮助的。 在本教程中，我将向您展示如何设计 3D 路标，以吸引用户并让他们以独特的方式轻松找到他们正在寻找的内容。 为此，我们将在多个模糊模块上使用 Divi 的变换选项和透视 css 属性来创建在帖子上旋转的标志的 3D 效果。

让我们开始吧！

抢先看

免费下载 3D 路标布局

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

下载文件

免费下载

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

下载

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

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

让我们进入教程好吗？

订阅我们的 YouTube 频道

你需要什么开始

要开始，您将需要以下内容：

1. 确保您在 WordPress 网站上安装并激活了 Divi 主题。
2. 如果您想创建自己的帖子图像，则需要使用 Photoshop、Gimp 或 Sketch 等照片编辑器。 或者，您可以使用免费布局下载中提供的图像用于上述设计。
3. 除此之外，我们将在 Divi Builder 的前端从头开始构建所有内容。

为路标创建图像

为此设计创建路标的最简单方法是创建一个小的可重复图像块，我们可以将其添加为背景图像，该图像在页面的部分或行中垂直重复。 如果你想跳过这一步，你可以导入上面免费下载中包含的json布局来开始。 但是，如果您想使用您选择的自定义颜色创建自己的颜色，请按以下步骤操作。

在这个例子中，我将使用 Photoshop，但其他流行的照片编辑器的过程也非常相似。

在 Photoshop 中，单击以创建一个自定义高度和宽度为 25px 的新文档。

将前景色设置为黑色 (#000000) 或您想要的任何颜色。

然后选择油漆桶工具并在空方形图层内单击以将方形涂成黑色。

然后将您的图像以 jpeg 格式保存到您的计算机。 这是我们将在设计中使用的图像，用于为我们的 3D 路标设计创建柱子。

在 Divi 中实现 3D 路标设计

准备好后，请确保创建一个新页面，为页面指定标题，并在前端部署 Divi Builder。 选择“从头开始构建”选项。

您的空白画布等待着您！

现在创建一个具有一列行的新常规部分。

自定义行

在我们添加模块之前，打开行设置并更新以下内容：

背景图片：[为帖子插入自定义方形图片]
背景图片尺寸：实际尺寸
背景图像重复：重复 Y（垂直）

然后更新以下内容：

天沟宽度：1
最大宽度：980px
自定义填充：2vw 顶部，2vw 底部

然后我们需要将以下自定义 CSS 添加到 Column Main Element 中，如下所示：

perspective: 1000px;

每当我们使用变换选项旋转它时，这个透视 css 属性对于获得标志（或模糊）的 3D 效果是必要的。

有关这方面的更多信息，请查看透视如何与 Divi 的变换选项配合使用。

使用 Blurb 模块创建标志

为了在我们的 3D 路标上创建我们的第一个标志，我们将使用一个模糊模块。 继续向该行添加一个模糊模块。

然后打开blurb设置并更新blurb的内容如下：

减少模拟内容以仅包含几行文本。

使用图标：是
图标：左箭头（见截图）

背景颜色：#1a233f

图标颜色：#9eb3c2
图像/图标放置：左
使用图标字体大小：是
图标字体大小：80px

文字方向：居中
标题字体：Playfair Display
标题文字颜色：#9eb3c2
标题文字大小：38px（桌面），26px（手机）
最大宽度：600px
模块对齐：居中
自定义填充：顶部 5%，底部 5%，左侧 5%，右侧 5%

圆角：20px

边框宽度：3px
边框颜色：#21335e

这会处理我们的模糊模块的样式，但是为了获得我们的 3D 效果，我们需要使用变换选项来旋转我们的模糊模块。 为此，请更新以下内容：

变换旋转 X 轴：20 度

复制行以获得更多标志

现在我们已经完成了一个标志设计，我们可以复制该行以制作更多。 每次我们复制行时，我们只需要更新变换旋转，以便标志围绕柱子以不同的角度旋转。

继续复制该行并更新新行中的模糊模块，如下所示：

变换旋转 X 轴：-30deg

复制该行以创建第三个标志并更新该新行中的模糊模块，如下所示：

变换旋转 X 轴：40 度

改变第二个标志的方向

现在所有的箭头都指向同一个方向。 要从左到右改变方向，我们需要稍微更新一下模糊模块设置。

打开第二行（中间的）blurb模块的设置，更新如下：

图标：右箭头（见截图）

文本方向：左

我们可以翻转模糊内容的顺序，使文本在左侧，图标在右侧。 为此，我们需要向 Main Element 添加一行自定义 CSS，如下所示：

direction: rtl;

现在宣传内容颠倒了，你有一个指向新方向的标志！

在悬停时将标志旋转回原始状态

关于此设置的一个很酷的事情是您可以轻松添加悬停状态以将旋转的模块恢复到原始 (0deg) 旋转。 这允许用户在将鼠标悬停在模块上时与内容互动并清楚地查看文本。

由于我们要为所有三个模糊模块添加相同的悬停状态，因此使用多选来选择所有三个模糊模块并打开其中一个模块的设置以调出元素设置模式。 然后更新以下内容：

变换旋转 X 轴（悬停）：0deg

保存设置，就是这样！

现在检查到目前为止的设计和功能。

使用背景图像自定义我们的部分

对于我们的最后一步，我们可以向我们的部分添加一个新的背景图像。 这当然是可选的，但正确的图像看起来真的很酷，尤其是如果您使用视差效果。

打开该部分并添加新的背景图像。 （我使用的是我们的 Agency Layout Pack 中的图片）

然后更新以下内容：

使用视差效果：是
自定义填充：0px 顶部，0px 底部

最后结果

最后的想法

创建 3D 路标确实为您的网站添加了一个富有创意且引人入胜的设计元素，可以真正让您的内容脱颖而出（字面意思）。 悬停效果允许用户在没有 3D 效果的情况下查看内容，从而获得不错的后备效果。 不要忘记您可以轻松地将链接 URL 添加到模糊模块，以便它可以作为可点击的导航元素（如果需要）。 不管怎样，我希望这能给你的下一个项目一些灵感。

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

干杯!