滑动图像内容设计，可以增加网站设计的视觉效果

网站添加动画的技巧。动画功能真的很有趣，易于使用。通过Visual Builder，您可以看到自己的创作在每一个阶段都生活起来。来和我一起探索Divi动画的力量。

我们创建了动画演示页面的前两部分。第一部分中标题的设计和动画展示了一种独特的方法，可以在全屏标准部分内对文本模块的元素进行动画化。在构建第二部分时，我们发现了一种将微妙和谐的动画结合到内容行中的方式，可以轻松地用于以具有吸引力的方式在目标网页上展示内容。

今天，我们正在继续我们的旅程，设计在滚动页面时有效（创造性地）使用动画的部分布局。我们将建立我们现场演示页面的第三部分和第四部分，展示Divi动画功能的强大功能。这两个部分都有可以很容易地用于您自己的项目来展示产品或服务的布局。

这是一个潜移默化的今天我们将要建设的东西

第3节

第4节

准备设计元素

准备好你的图像

对于第三部分，您将需要两个图像。第一个需要约880×600，第二个约为790×880。这些图像大小不一定要精确。我只是包含这些维度来给你一个想法。

在构建第四部分的时候，你也可以在600×400左右的两张图像。

使用Visual Builder

这里不需要高级代码 我们将只使用Visual Builder来设计我们在本系列的第1部分中创建的页面的两个部分。由于你的页面已经设置好了，所以你已经准备好了。

构建演示的第3节

第3部分是一个很好的例子，说明如何使用附带图片设计和动画“动作模块”。

我们来吧

使用Visual Builder，添加一个带有两列行的常规部分。在左栏添加图像模块。

按如下所示更新图像设置：

• 在“内容”标签下

• 图片网址：[插入880×600图片]

• 在设计选项卡...

• 强制全宽：是

• 动画风格：幻灯片

• 动画方向：左

• 动画强度：20％

• 动画开始不透明度：100％

注意：此动画只能从右到左滑动图像。这里的关键动画设置是强度。将动画强度设置为20％会缩短图像必须行进的距离才能到达最终的休息位置。

保存设置

添加分频模块

在右栏中，我们将使用分频模块和号召性用语模块展示我们的内容。分频器模块将用于在文本上方添加一个短分隔线。

在右列添加一个分频器模块。

• 然后更新设置如下：

• 在“内容”标签下

• 显示分隔线：是

• 在“设计”标签下

• 颜色：＃e4ca77分隔线

• 重量：4px

• 宽度：80px（您必须键入此值，因为默认值为百分比）

• 模块对齐：默认（左）

• 自定义边距：60px顶部，0px底部

• 动画风格：折叠

• 动画方向：右

• 动画持续时间：1200ms

• 动画延迟：50ms

• 动画强度：70％

• 动画开始不透明度：0％

添加号召性用语模块

在分隔线模块下，添加一个号召性用语模块，具有以下设置：

在“内容”标签下

标题：“完美视图”

按钮文字：“了解更多”

内容：“Lorem ipsum dolor sit amet，consectetur adipiscing elit。茜草（Fasisus bibendum est vitae felis rhoncus gravida）Sed nec purus tempus，sagittis mi id，efficiencyit nisl。Lorem ipsum dolor sit amet，consectetur adipiscing elit。茜草（Fasisus bibendum est vitae felis rhoncus gravida）Sed nec purus tempus，sagittis mi id，efficiencyit nisi“

链接：＃

使用背景颜色：NO

• 在“设计”标签下

• 文字颜色：深色

• 文字方向：左

• 头字体：Lato，大写（TT）

• 标题字体大小：

• 38px

• 标题文字颜色：＃0c0c0c 标题字母间距：0.2em

• 标题行高度：1.4em

• 身体字体：Lato

• Body字号：18px

• Body Text颜色：＃9e9e9e

• Body Line身高：1.8em

• 使用自定义样式按钮：YES

• 按钮文字大小：15px

• 按钮文字颜色：＃000000

• 按钮背景颜色：rgba（225,225,225,0）

• 按钮边框宽度：0px

• 按钮字母间距：2px

• 按钮字体：Lato，Bold（B），大写（ TT）

• 按钮图标：右箭头

• 只显示图标上悬停按钮：NO

• 按钮悬停信号间距：0px

• 动画风格：折叠

• 动画方向：右

• 动画持续时间：1200ms

• 动画延迟：50ms

• 动画强度：70％

• 动画开始不透明度：0％

注意：当图像向左滑动时，此动画会将文本的外观从图像后面折出。

现在单击以编辑行设置并更新以下内容：

在“设计”标签下

使用自定义宽度：YES

自定义宽度：1366px

在高级选项卡下

将以下自定义CSS添加到列1主元素框：

z-index: 999;

注意：在自动化期间，右侧的文本与图像重叠。此CSS确保图像（第1列）保留在整个动画的文本顶部，创建更清晰的效果。

保存设置

复制您的行并更新它

这是第一行。为了节省创建第二行的时间，请复制刚创建的行。

编辑重复的行设置如下：

在高级选项卡下

取出第1列主要元素中的自定义CSS，并将其添加到第2列主要元素框中。

• 上一篇：网站建设的布局、色彩、信息、欣赏体例
• 下一篇：在做网站之前必须要做的这些事儿！