的内置转换选项 Divi 已被证明是一种非常有用的设计工具，可让您轻松调整页面上的任何元素的大小、旋转、倾斜或定位。 您甚至可以选择将项目转换为悬停状态以获得出色的悬停效果。 所以今天我们将向您展示如何一键部署这些动画。
此方法需要使用 jQuery。 这种技术的伟大之处在于您可以使用内置的设计参数 Divi 设置变换属性的样式，然后通过单击鼠标启用（或禁用）这些变换属性。 这将为揭示信息提供大量独特的可能性 内容 通过单击而不是悬停时移动项目来隐藏。 它还有助于减少了解大量 CSS 的需要。
让我们开始。
你需要什么才能开始
对于本教程，您所需要的只是 Divi。 首先，请转到您的 WordPress 仪表板。 创建一个新页面，为您的页面指定一个标题，然后在前台的 Divi 构建器上继续进行设计。 选择“从头开始构建”选项。 现在您已经准备好出发了！
基本思想解释
在开始本教程的详细介绍之前，我将简单介绍几个技巧。
每次在Divi中自定义元素（节，线或模块）时，都会在背景中向该元素添加自定义CSS。 例如，使用Divi的内置设置，可以将转换旋转属性添加到blurb模块，以便它沿Z轴将模块旋转20度。
但是在幕后，您创建了一个自定义CSS，并将其添加到此文本模块中，如下所示：
.et_pb_text_0 {transform：rotateZ（20deg）; }
很简单。 假设您要添加相同的悬停转换选项。 您只需要在Divi Builder的设置中将转换属性应用于悬停状态。
代码在幕后看起来像这样：
.et_pb_text_0：悬停{transform：rotateZ（20deg）; }
但是，如果要在单击时部署transform属性，则工作方式将有所不同。 您将需要输入一些JavaScript代码来触发元素（或文本模块）上的click事件。
在当前示例中，我们的主要目标基本上是在单击时打开和关闭变换属性“ transform：rotationZ（20deg）”。 一种简单的方法是使用属性“ transformer：none！”创建一个自定义CSS类。 重要”页面（或外部样式表）中的设置。 它看起来像这样。
.toggle-transform-animation {transform：none！important; }
有了该CSS。 我们可以将CSS类“ toggle-transform-animation”添加到具有transform属性的blurb模块元素中。
这将禁用（覆盖）转换属性并阻止它最初激活，即使转换属性的样式已经添加到其中。
现在，您要做的就是单击元素时激活（添加和删除）此自定义CSS类。 因此，每次我们单击该元素时，该类都将被删除，并且转换属性（使用Divi添加的属性）将被部署。
这是一个简单的例子。 首先，将另一个CSS类添加到名为“ transform_target”的blurb模块中。
接下来，转到 Divi > 主题选项 > 集成，并将以下 jQuery 脚本添加到头部 您的博客:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
就这样 ！ 现在，每次单击演示文稿模块时，将启用或禁用在Divi中添加到演示文稿中的transform属性。
现在，让我们构建一个示例，以便您可以看到这对您自己的项目可能有什么用。
如何在单击上切换转换属性以在Divi中显示内容
对于这个例子，我们将继续使用上面使用的一个简单的简介示例。 接下来，我们将在其后面添加额外的简介，以便每当您单击顶部简介时，它都会移开以显示 内容 文件后面有额外的简介。
前后创建Blurb模块
然后将演示文稿模块添加到1列。
更新 内容 简介仅包含标题（删除默认的正文内容），然后添加简介图标。
然后，如下更新设计参数：
背景颜色：#4c5866
图标颜色：#ffffff
文本方向：中心
文字颜色
：轻量级自定义边距：底部为0px
自定义填充：顶部15％，底部15％，左侧10％，右侧10％
稍后，我们将返回该模块，但现在，我们需要创建第二个Blurb模块，该模块将作为带有附加内容的“返回”模块。
为此，请复制刚创建的演示模块。
然后，在第二个模块上，删除演示图标（和默认图像），然后将正文内容添加回该模块。 然后，如下更新设计参数：
背景颜色：rgba（76,88,102,0.3）
文字颜色：黑色
自定义填充：20％顶部
将模块放在摘要之前
现在我们已经对两个Blub进行了样式设置，我们需要回到我们的前（顶部）Blurb并将其放置在背面（底部）Blurb上方。 为此，我们给它一个绝对位置，高度为100％，宽度为100％。
首先，打开顶部/顶部演示模块设置并更新以下内容：
身高：100％;
宽度：100％;
然后将以下自定义CSS代码添加到main元素：
位置：绝对！重要; 过渡：所有.5s;
然后，如下更新z索引：
Z指数：2000
绝对位置与100％的高度和宽度以及z索引相结合，可确保Blub模块位于其后的Blub模块顶部。 实际上，transition属性是我们将在下次单击时部署的转换选项的过渡持续时间。 而“光标：指针”将更改光标，以便该元素对用户而言可点击。
将转换选项和自定义类添加到前面的blurb
现在是时候将我们的变换属性添加到前Blur了。 然后，我们将添加jQuery所需的自定义CSS类，以在单击时切换这些属性。
在前Blubl设计参数下，添加以下转换属性：
X和y转换比例：20％
转换原点：顶部中心
请记住，此时您看到的转换设计将是单击触发的设计。 我们只是利用Divi构建器来获得所需的设计。 在这种情况下，前blur会收缩，并像单击可点击图标一样居中于其顶部。
完成后，添加两个使用jQuery定位前模糊对象所需的CSS类，如下所示：
CSS类：toggle-transform-animation transform_target
（请确保将每个班级名称用空格分开）
然后添加以下自定义CSS代码段，这些代码段将用于启用和禁用jQuery的转换属性。
.toggle-transform-animation {transform：无！重要； }
您会注意到，由于添加了此类，因此先前添加的Blubl转换属性已被禁用。
现在转到Divi>主题选项>集成，然后将以下jQuery脚本添加到博客的头部：
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
让我们看看最终结果。
您可以使用此示例来创建更令人印象深刻的设计。 请不要在评论部分中分享您的意见。
