WordPress divi主题

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

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

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

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

google广告开户

让我们开始吧!

抢先看

divi 3D 路标

divi 3D 路标

divi 3D 路标

免费下载 3D 路标布局

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

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

让我们来看看教程好吗?

订阅我们的 Youtube 频道

WordPress divi主题

你需要什么开始

要开始,您将需要以下内容:

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

为路标创建图像

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

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

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

divi 3D 路标

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

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

divi 3D 路标

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

在 Divi 中实现 3D 路标设计

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

fiverr建站WordPress程序员

你的空白画布在等着你!

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

自定义行

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

背景图片: [insert custom square image for post]
背景图像尺寸:实际尺寸
背景图像重复:重复 Y(垂直)

divi 3D 路标

独立站选品工具

然后更新以下内容:

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

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

perspective: 1000px;

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

divi 3D 路标

高质量外链购买

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

使用 Blurb 模块创建标志

为了在我们的 3D 路标上创建我们的第一个标志,我们将使用一个简介模块。 继续在行中添加一个简介模块。

divi 3D 路标

然后打开简介设置并更新简介内容如下:

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

JasperAI 10000字免费额度试用

使用图标:是
图标:左箭头(见截图)

divi 3D 路标

背景颜色:#1a233f

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

divi 3D 路标

WordPress备份工具updrafplus

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

divi 3D 路标

圆角:20px

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

divi 3D 路标

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

变换旋转X轴:20度

divi 3D 路标

复制更多标志的行

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

继续复制该行并更新新行中的简介模块,如下所示:

变换旋转X轴:-30度

divi 3D 路标

复制该行以创建第三个标志并更新该新行中的简介模块,如下所示:

变换旋转X轴:40度

divi 3D 路标

改变第二个标志的方向

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

打开第二行(中间)的简介模块的设置并更新以下内容:

图标:右箭头(见截图)

divi 3D 路标

文字方向:左

divi 3D 路标

我们可以翻转简介内容的顺序,使文本在左侧,图标在右侧。 为此,我们需要向主元素添加一行自定义 CSS,如下所示:

direction: rtl;

divi 3D 路标

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

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

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

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

变换旋转X轴(悬停):0度

divi 3D 路标

保存设置,就是这样!

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

divi 3D 路标

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

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

打开该部分并添加新的背景图像。 (我使用的是我们的代理布局包中的图像)

然后更新以下内容:

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

divi 3D 路标

最后结果

divi 3D 路标

divi 3D 路标

divi 3D 路标

最后的想法

创建 3D 路标确实为您的网站添加了一个富有创意且引人入胜的设计元素,可以真正让您的内容弹出(字面意思)。 悬停效果允许用户在没有 3D 效果的情况下查看内容,以获得不错的回退效果。 不要忘记,您可以轻松地将链接 URL 添加到简介模块,以便在需要时将其用作可点击的导航元素。 无论如何,我希望这能为您的下一个项目提供一些灵感。

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

干杯!

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