T: 400-6065-301
102
欢迎来到这个6部分系列的第4部分，它将教您如何使用Divi的新动画选项来设计令人敬畏的页面部分。我将带领你们了解如何构建我们的不同部分现场演示页面为了向您展示添加动画到您的网站的技术。动画功能真正有趣和易于使用。使用VisualBuilder，您可以看到您的创作在每一个阶段都得到了实现。来和我一起探索Divi动画的力量。
在我们的晋中网点制作上一篇文章中，我向您展示了一些创造性的方法来设计和动画4个模糊模块，并一步地组织起来。
今天，我们将建立我们的动画演示页面第6节。本节展示了一些伟大的设计和动画展示特色产品或下载。色彩的使用和动画在这些模糊模块上绽放的效果确实使这个部分脱颖而出。
我们跳进去！
订阅我们的YOUTUBE频道
使用VisualBuilder，让我们从向布局中添加另一个常规部分开始。然后在您的部分中添加一个三列(半行、四分之一行)。
在添加第一个模块之前，转到节设置并更新以下内容：
在Content选项卡下…
背景颜色：#00252 d
在“设计”选项卡…下
自定义填充：80 px顶部，80 px底部
保存设置
现在，让我们回到我们的三列行，并在左列中添加一个文本模块。按以下方式更新文本设置：
在Content选项卡下…
在“内容”框的“文本”选项卡中添加以下H1标题：
01 | <h1>Build Like You Mean It</h1> |
在“设计”选项卡…下
标题字体：Lato，Bold(B)
页眉字体大小：38 px
标题文本颜色：#ffffff
标头线高度：1.3em
注：因为我们的内容有h1标题，所以只有标题文本选项才能对其进行样式化。
自定义保证金：20 px底部
动画风格：幻灯片
动画方向：左
动画强度：16%
注：这个动画给标题一个轻微的幻灯片向左。这里的关键是给它一个较低的强度，这样幻灯片就不会覆盖那么多的地面，或者需要太长时间才能完成。
保存设置
通常情况下，您可能只需继续将其余的文本添加到同一个文本模块的h1标题下。但是，由于我们想要添加一个不同的动画效果到H1标题和它下面的文本，我们将需要创建另一个文本模块。继续，在刚才创建的模块下添加一个文本模块，并按如下方式更新设置：
在Content选项卡下…
内容：“Lorem ipsum dolor，consectetur adipipcing elit.”[医]双贝母和长臂猿，孕鼠。SED NEC purus tempus，慈姑，有效Nisl.SED NEC purus tempus，慈姑，有效Nisl.“
在“设计”选项卡…下
文本颜色：光
文本字体大小：18 px
文字颜色：RGBA(255，255，255，0.66)
文本线高度：1.9em
自定义保证金：40 px底部
动画风格：幻灯片
动画方向：左
动画强度：8%
注：请注意，该文本的动画设置的强度(8%)略低于其上方的标题文本(16%)。这意味着它看起来移动得更快，因为它在相同的时间内移动的距离较短。即使两个文本模块都需要相同的时间(持续时间)来完成动画，因为它们从不同的强度级别开始，它们将以不同的速度移动。这就像两个赛车手同时开始和结束比赛，其中一个拥有一个显著的领先优势。
保存设置
现在，让我们在左列的两个文本模块下面添加一个Button模块。然后按以下方式更新设置：
在Content选项卡下…
但是文本：下载所有
按钮url[输入url]
在“设计”选项卡…下
为按钮使用自定义样式：是
按钮文本大小：15 px
按钮文本颜色：#01254c
按钮背景色：#ffcd1c
按钮边框宽度：0 px
按钮边框半径：65 px
按钮字母间距：1 px
按钮字体：粗体(B)，大写(TT)
定制填充：10 px顶部，30 px右，10 px底部，30 px左
动画风格：幻灯片
动画方向：左
动画强度：16%
注：此动画效果与第一个文本模块动画匹配。
<="" em="" style="box-sizing: border-box;">
让我们不要忘记添加这个奇妙的辉光效果使用框阴影CSS属性。在“自定义CSS”下查找“主元素”框并添加以下内容：
01 | box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5); |
保存设置
这就是我们左边的专栏。现在，让我们向中间列添加一个BlurbModule(这是第一列-第四列)。
更新设置如下：
在Content选项卡下…
标题：divi
使用图标：是的
图标：[选择图标]
背景渐变颜色：#8b56ff，#5d3dff
梯度型：线性
梯度方向：140度
在“设计”选项卡…下
图标颜色：#ffffff
文本颜色：光
文本定位：中心
标题字体：粗体(B)，大写(TT)
标题字母间距：10 px
海关保证金：12%底部
自定义填充：40 px顶部，30 px右，30 px底部，30 px左
动画风格：折叠
动画方向：左
动画延迟：200 MS
注：每个blurb模块的动画方向将是不同的。第一个在左边展开。
在高级选项卡…下
在晋中网点制作我们可以添加发光效应到我们的模块和缩进头，只是一点。
将以下CSS添加到主元素框中：
01 02 | border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2); |
将以下CSS添加到Blurb标题框中：
01 | text-indent: 10px; |
保存设置
现在我们有了我们的第一个Blurb模块设计和动画，我们可以复制该模块，以创建剩余的空白。
悬停在BlurbModule并单击重复模块图标。在下面出现的新复制模块中，请按以下方式更新设置：
在Content选项卡下…
标题：Bloom
图标：[选择新图标]
背景渐变颜色：#ff56f9，#c43dff
在“设计”选项卡…下
动画方向：向下
注：折叠动画有一个向下的方向在这一脱口。
在高级选项卡…下
将主元素框中的CSS替换为：
01 02 | border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2); |
保存设置
再次复制blurb模块，并将该复制拖到极右列。然后使用以下设置更新该Blurb模块：
在Content选项卡下…
标题：额外
图标：[选择新图标]
背景渐变颜色：#56 ffda，#38d5ea
在“设计”选项卡…下
动画方向：向上
注：折叠动画有一个向上的方向在这一脱口。
在高级选项卡…下
将主元素框中的CSS替换为：
01 02 | border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2); |
再次复制刚才在右边列中更新的blurb模块，使其直接出现在下面。然后使用以下设置更新该Blurb模块：
在Content选项卡下…
头衔：君主
图标：[选择新图标]
背景渐变颜色：#f2743a，#ff5656
在“设计”选项卡…下
动画方向：右
注：在这个脱口处，动画向右展开。
在高级选项卡…下
将主元素框中的CSS替换为：
01 02 | border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2); |
注：由于这4个脱口将共享相同的风格和延迟，这创造了一个反向开花的效果，因为所有的4个模块将折叠在不同的方向。
保存设置
现在，让我们按如下方式更新您的行设置，以获得正确的间距：
在“设计”选项卡…下
使用自定义宽度：是
自定义宽度：1366 px
使用自定义水槽宽度：是
排水沟宽度：2
自定义填充：80 px顶部，0 px右，160 px底部，0 px左
定制填充：140 px顶部
现在，我们准备为我们的节创建下一行。为了加快速度，我们将从先前设计的行和模块中复制和复制设计元素。
首先，让我们向我们的部分添加一个新的一列行。然后用以下内容更新行设置：
使用自定义宽度：是
自定义宽度：1366 px
使用自定义水槽宽度：是
排水沟宽度：2
保存设置
接下来，复制您创建的包含h1标题的第一行中的第一个文本模块。然后按以下方式更新设置：
在Content选项卡下…
将当前的h1标记替换为：
01 | <h1>Don't Settle for Less</h1> |
在“设计”选项卡…下
文本定位：中心
动画风格：翻转
动画强度：70%
保存设置
接下来，从上一行复制按钮模块，并将其粘贴到文本模块下面，您刚刚在第二行中完成了更新。然后按以下方式更新按钮模块：
在Content选项卡下…
按钮文本：“今日加入”
在“设计”选项卡…下
按钮对齐：中心
动画风格：翻转
动画强度：70%
注：按钮和上面的标题都有相同的动画。
保存设置
最后一排。创建一个具有半列结构的新行。在添加模块之前，按以下方式更新行设置：
在“设计”选项卡…下
使用自定义水槽宽度：是
排水沟宽度：2
保存设置
接下来，从上一行复制紫色的“Divi”Blurb模块，并将其粘贴到新行的左列中。然后更新以下设置：
在Content选项卡下…
标题：建筑工人
图标：[选择新图标]
背景渐变颜色：#ff568e，#ff3d5d
注：如果您看到正确的blurb模块，动画方向应该已经“左”了。如果不是的话，一定要确定。
在高级选项卡…下
将主元素框中的CSS替换为：
01 02 | border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2); |
保存设置
接下来，复制您创建的第一行最右侧列顶部的蓝绿色“额外”blurb模块。然后将其粘贴到新的第三行的右列中。
然后按以下方式更新blurb设置：
在Content选项卡下…
标题：宁静
图标：[选择新图标]
背景渐变颜色：#3 da4ff，#385 eea
注：如果您看到正确的blurb模块，动画方向应该已经“向上”了。如果不是的话，一定要确定。
在高级选项卡…下
将主元素框中的CSS替换为：
01 02 | border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2); |
保存设置
就这样。
作为一种额外的好处，我们已经将今天的教程中的部分打包成免费下载，您可以使用下面的电子邮件选择表单。只要输入你的电子邮件，下载按钮就会出现。如果你已经是我们Divi通讯的一部分，不要担心“重新订阅”。重新输入您的电子邮件将不会导致更多的电子邮件或重复。它只会显示下载。
好好享受吧！
加入DiviNewlsetter，我们将电子邮件给你一个最终的Divi登陆页面布局包的副本，加上吨其他惊人的和免费的Divi资源，提示和技巧。跟着走，你很快就会成为迪维大师。如果您已经订阅，只需在下面键入您的电子邮件地址，然后单击下载以访问布局包。
窗体顶端
下载
窗体底端
要使用这些下载，首先要定位已压缩的文件动画效果部分4.zip在我们的下载文件夹中。解压缩以显示下列进口。
动画效果第4部分(第1节)
动画效果第4部分(第2节)
在WordPress管理中导航到divi>divi库>导入和导出。当可移植模式弹出时，单击IMPORT选项卡并单击标记为SELECT FILE的按钮。
选择您喜欢的json文件，然后单击“ImportDiviBuilder布局”。导入完成后，导航到POST或页面，您想要向其中添加上述部分之一。
激活视觉构建器。导航到要添加上述部分之一的页面。单击“添加新部分”图标时，将显示“从库中添加”选项。选择此选项并选择所需的布局。
我希望你们喜欢一起建造这个令人叹为观止的部分。色彩，发光阴影和创意动画的结合，使这是一个出色的布局显示您自己的下载或产品。
我期待着在晋中网点制作下面的评论中听到你的意见。
最新文章
随机推荐
