Divi 插件亮点 – Tilt Blurb Divi 模块

模糊在 Divi 布局中很流行。 它们显示文本、图像、图标等，非常适合展示产品和服务。 如果您希望它们更加突出并提供一些有趣的悬停动画怎么办？ 常见的动画可以通过 CSS 来完成，但是如果你想要不同的东西怎么办？ 一个名为 Tilt Blurb Divi Module 的插件可能正是您要找的。

什么是倾斜模糊模块？

Tilt Blurb Module 是 Hadworm 的第三方插件，它向 Divi Builder（适用于 Divi 和 Extra）添加了一个新的模糊模块，该模块添加了有趣的倾斜效果，创建了 3D 外观。 在这个插件亮点中，我们将看看这个模块，看看它可以做什么。 我已经展示了一些 gif，但由于 gif 的文件大小，大多数都是图像。 示例图片来自 Unsplash.com 和 WordPress.org。

安装 Tilt Blurb Divi 模块

正常上传并激活插件。 在仪表板菜单中的插件链接中，您将找到一个名为 Tile Blurb License 的新项目。 单击此按钮，输入您的许可证密钥，然后保存更改。 这将确保您获得更新。

Divi Builder 中添加了一个名为 Tilt Blurb 的新模块。 它在 Divi Builder 中呈紫色，因此很难错过。 我喜欢开发人员为他们的模块使用不同的颜色，以便它们从标准模块中脱颖而出（就其价值而言）。

该模块包括标准选项卡和一个新选项卡：

• 内容 – 文本、链接、图像和图标、背景、管理标签
• 倾斜设置——倾斜设置、倾斜背景、倾斜层
• 设计 – 图像和图标、文本、标题文本、正文、边框、大小、间距
• 高级 – CSS ID 和类、自定义 CSS、动画、可见性

倾斜设置

对于这些示例，我添加了一个背景，然后将一个较小的图像作为前景放置在它上面以创建 3D 效果。 然后煮了咖啡。 很多咖啡。

默认设置示例

这是调整前 3D 倾斜的外观示例。 我添加了标题、文本、背景和图标。 倾斜跟随我的鼠标并将文本和图标与图像区分开来，使其具有 3D 外观。 对我来说，视差效果摆脱了背景，所以我没有使用它。

图像大小

这会使用隐藏图像来调整简介的大小并使内容居中。

带有 2 个带有浮动内容的图像的倾斜模糊大小

这一张包括两张图片——一张用于前景，一张用于背景。 前景图像和文本使用浮动内容功能以 3D 形式呈现。

您可以调整像缩放一样工作的浮动量，使前景内容更接近读者。 此图像使用 200 作为浮动量，已达到最大值。

倾斜量

倾斜量滑块可让您控制图像倾斜的程度。 默认设置为 20。这个使用 100。

倾斜视角

倾斜透视加深了透视。 数字越小，视角越深。 默认值为 1000。此示例为 200。

倾斜秤

倾斜比例是一个缩放级别。 默认值为 1.1，这意味着在悬停时图像乘以 1.1。 此示例为 2。它变为 0，但 0 级别创建了一个连续的前后缩放，该缩放不适用于此图像。 可能需要进行一些试验才能让它按照您的意愿行事。

倾斜速度

倾斜速度控制您悬停时图像的移动速度。 数字越小，移动速度越快。 默认是 100。这个是 5000。我偏向于缓慢的效果。

倾斜反向

Tilt Reverse 改变倾斜的方向。 通常倾斜远离鼠标。 反向使图像朝向鼠标倾斜。

倾斜眩光

倾斜眩光添加跟随鼠标的眩光效果。 眩光量可调。 上图使用默认设置 0.8。 这非常适合创建灯光效果。

边界半径

边框半径更改边框的形状。 默认值为 40。这设置为 100，即最大数量。

倾斜背景

倾斜背景可让您设置背景颜色和边框效果。

倾斜背景

倾斜背景颜色的一个副作用是它会在图像周围产生漂亮的光晕。

调整倾斜背景颜色、边框宽度、背景边框样式、边框宽度以及边框和框阴影颜色。

倾斜背景距离

倾斜背景距离调整阴影的距离。 默认设置为 -50。 本示例使用 -25。

此示例使用 0 的倾斜背景距离和 0.3 的不透明度，这会在背景上创建叠加层。

倾斜背景尺寸/比例

倾斜背景大小/比例改变倾斜背景的距离。 默认值为 1.04。 这是1.2。

倾斜层

Tilt Layers 将相同的图像作为多个图层一遍又一遍地应用，从而创建纯 3D 效果。 它可以使用图像或背景颜色，您可以调整图层深度。 我已经应用了上面的图像，层深度为 50。

我应用的图像在这里被视为边框。 我已经调整了倾斜量以使其更容易看到。

正如预期的那样，图像的底部看起来不同。 这是为边框添加一些纹理的好方法。 较小的层深度将使边界更薄。

这个使用层深度为 10。

此示例同时使用倾斜背景和倾斜图层。

这是一个 3D WordPress 徽标，看起来像是镶嵌在水晶中。 我将logo上传到Image & Icon图片区域，设置倾斜量为100，使用默认倾斜眩光，在Tilt Layers下的图层图片中添加logo，设置图层深度为50，图层颜色设置为白色并且几乎完全透明。

这是没有图层颜色的徽标。 侧面更难看。

许可、支持和文档

该插件可以在无限的网站上为您和您的客户使用。 它包括 6 个月的支持。 开发人员的网站上提供了文档。 它包括有关如何创建网站上显示的一些示例的说明。 我想看到更多的例子，比如标志是如何制作的。

最后的想法

Tilt Blurb Module 提供了许多有趣的倾斜效果，可为图像、图标和文本创建漂亮的 3D 外观。 这是创建 CTA、3D 书籍封面和产品图像的好方法。 倾斜模糊模块既创新又直观。 如果您想为您的简介添加一些不错的倾斜效果，Tilt Blurb Module 值得一看。

我们希望听到您的意见。 您是否尝试过 Tilt Blurb Divi 模块？ 请在下面的评论中告诉我们您对此的看法。

精选图片来自霍比特人/shutterstock.com