网站设计

Website development

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

发布时间：2017-10-13 10:23:39

使用Divi的动画来展开含有滑动图像的内容

网站添加动画的技巧。动画功能真的很有趣，易于使用。通过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列主要元素框中。

原创不易，未经授权，严禁转载

原文地址：https://www.yzlink.cn/i,72,7320,0.html

上一篇：在做网站之前必须要做的这些事儿！

下一篇：网站设计中如何提出修改反馈和意见？

您还有可能感兴趣的内容

建站流程

Website development

网站需
求分析
网站策
划方案
页面风
格设计
程序设
计研发
资料录
入优化
确认交
付使用
后续跟
踪服务
+86 10 64758810
18510861135

热门标签

Website development

客户评价

更多+

感谢云智互联，系统提前完成，在整个项目周期内，云智互联对待我们并不像是对待客户，更像是朋友一样，每一次，都能以专业的角度向我们提出更合理、更有效的解决方案，并快速、细致地完成我们的每一个需求，再次感谢以至诚之心做事的云智互联团队。

潘涛
我是东方龙马集团，在云智家做了2个企业官网，服务态度超级好。如果想做网站，选择他家一定不后悔。性价比高，服务态度好。值得你的信赖！

谭娇
技术好，设计精良，操作便利，很专业！配套的服务和后续的服务都很好,网站封面堪称精品，运行方便，后台操作的简单。技术还会耐心教我,很好的云智互联（北京）科技有限公司，建站很不错的。

陈曦
不错，价格比较合适，重点是响应速度蛮快，有什么问题都会马上给你解决，公司很满意，因为他们都是针对每个项目建了相应的讨论组，有问题可以再里面提出，人员分工到位，解决问题很及时。

张经理