企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站开发

Website development

如何添加一个倒计时到你的网站

发布时间:2016-12-06 08:42:28

TAGS:网站开发

如何添加一个倒计时到你的网站.jpgoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

添加一个倒计时到您的网站,可以让你的网站访客的一种非常有效的方法。你是否想创建一个特殊的优惠或促销活动的紧迫性,史诗般的产品或网站推出之前制造悬念,或倒到一个特定的事件如婚礼或音乐会,倒数计时器可以完美补充说:“触摸”到你的WordPress网站。
oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在这个迷你系列,我要与你分享5种不同的方式,你可以风格Divi的倒计时器的令人印象深刻的方式。但是,而不是展示你的设计,我要潜得更深,并提供对设计过程的所有方面的教程,你可以学习如何自己做。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

三倒计时模块:之前和之后oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在我们之前,重要的是看我们从。以下是截图的默认设置倒计时模块划分。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联


oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在使用分倒计时模块与它的默认设置没有错。它的简单,干净,和将要做的工作。但是,这种迷你系列是以设计的几个步骤,按住“令人印象深刻的标题,“让我们看看我们会创造今天。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联


oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

是什么让这个倒计时是独一无二的全屏幕背景图像背后的倒计时。淡淡的半透明的背景颜色的倒计时给它分离,使其从背景中突出,但仍允许能够显示背景图像。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在这个例子中你可以使用不同的调色板图像的各种不同的风格,它仍然看起来很棒。所以你可以跟随和使用它,或使用作为一个跳点创造出独一无二的你。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

创建“简单的优雅”分倒计时模块的设计oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联


oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

制备的设计元素oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联


oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这个倒计时的大多数是通过分设置和CSS实现的,所以没有很多的准备工作,我们需要做的。然而,我们需要选择和修饰的背景图像。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

正如我前面提到的,你会选择一个图像具有很大的灵活性。由于计时器的颜色是中性的,而背景是半透明的,它留给我们很多的发挥空间与不同的图像,它仍然看起来很棒。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有很多地方的网上购买股票的图像,以及寻找免费的图片太。我喜欢的免费图片来源unsplash.com,这就是我的发现今天的教程图像oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

当你选择图像,有助于加深形象一点把重点放在倒计时。变暗的图像在今天的教程中,我使用了Adobe PS图象处理软件一个黑色填充层。然后我玩的不透明度直到我得到它就–正如前面的教程中我们展示了如何做,一步一步oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果你没有PS图象处理软件,还有其他更便宜(或免费)的替代品,如Pixlr编辑器,可以很好的制作简单的图像编辑。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这是一个之前和之后,被编辑的图像。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

实施设计oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联


oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在,我们有我们的图像选择和准备,是时候去Divi。这种特殊的倒计时以及网站的登陆页面,让我们建立在WordPress中新的一页,给它一个名称,使分,和头部的视觉生成器。记住,你不需要创建一个新页面虽然。干脆跳过这第一步,如果你想添加的倒计时到现有的页面。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果你已经创建了一个新的页面,然后有我们在的地方的空白部分。否则,如果你添加到您现有的分页面创建一个新的部分。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在,插入一一列行,并添加一个倒计时模块的行。然后你将被提示选择一个日期倒计时。你可以随意选择一个倒计时器的标题以及。在我们的例子中,我们添加了“即将启动…“作为我们的标题。我们将重新调整设置在一个点的模块,但现在点击绿色的复选框,保存模块设置。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在,我们要添加的部分图像作为背景图像。为此,悬停在部分直到你看到它概述了蓝色。然后,在左上角,点击齿轮图标打开节设置。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

然后,上传你的图像作为背景图像。在下面的图片,你会看到我们有这么远。它不是很大,但我们正在取得进展。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

调整模块设置oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

现在是时候开始倒计时定时器设置。悬停在倒数计时器,打开模块设置(单击控件时显示悬停在倒数计时器的暗灰色的齿轮图标)。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在综合设置oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

更改文本颜色暗oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变背景颜色的使用' '不'oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在设计设置oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变字体“下午”oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变字体和字体加粗标签数量oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变标签的字体全部大写(TT图标)oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变标题文字的颜色为白色(# ffffff)oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变标签的文本颜色为白色(# ffffff)oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

换号码的字体52px,和标签的字体大小12px。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

添加到自定义0px底缘。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

调整列的设置oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们现在需要对行进行一些小的调整。悬停在该行开放行设置(单击控件时显示悬停在排绿色的齿轮图标)。你把一般的设置相同,但我们需要作出一些调整设计设置oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

改变背景颜色RGBA(255255255,0.1)oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

更改设置为“保持柱填料移动”到“是”oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

行的背景颜色是什么赋予了倒数计时器的半透明的感觉。基本上,它只是一个与不透明白色背景将下降到只有10%。换句话说,它是透明的90%。你可以通过使用第二滑块控件旁边的颜色选择器,调整不透明度。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

接下来我们要添加几行CSS的主要行元素。导航到该行设置CSS选项卡。向下滚动,直到你看到“主元的盒子。”并粘贴以下CSS盒子里:oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<trans data-src="max-width: 50%;margin-left: auto;margin-right: auto;top: 20vh;" data-dst="大宽度:50%;margin-left: auto;右边距:汽车;顶部:20vh;">大宽度:50%;margin-left: auto;右边距:汽车;顶部:20vh;</trans>oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

上面的代码做的几件事。首先,它使得该行不会占用超过50%的屏幕(大宽度:50%)。因为我们改变宽度,我们需要确保它仍然是中心(margin-left:汽车;右边距:汽车)。后,我想行不完全垂直居中,但略高于中心。为了实现这个我们要利用VH(视口高度)。所以加上:20vh,从屏幕顶部的距离将20%整个视口高度。你可以玩这个把它放在你想要的。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

调整部分设置oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们其实只有一个很小的调整,使部分设置。打开节设置(单击控件时显示悬停段蓝色齿轮图标),并对部分设置CSS选项卡,单击。向下滚动到主元素添加下面一行的CSS:oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<trans data-src="height: 100vh;" data-dst="身高:100vh;">身高:100vh;</trans>oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

这一行的CSS将使部分“全屏幕”,或者换句话说,让视口的高度100%节高度。这是全屏幕的设置,是非常相似的在Divi全宽头的控制。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

所以这是我们迄今为止。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你可以看到它真的开始形成。我们快到了。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

添加自定义的CSSoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们需要的后一件事是一个小小的自定义CSS魔法!是的,我们在技术上已经添加一些CSS的区和行设置,但是我们会将它添加到任何分主题选项面板或单个页面设置自定义的CSS框自定义CSS盒子。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

为什么我们把它在那里,不要直接在模块、行或段?嗯,分有预靶向CSS区域的模块,设置行和段,但没有目标的每一个CSS样式,在样式表可分。在我们可以开始添加CSS虽然,我们需要添加自己的自定义类,我们只定义我们目前的工作模块的CSS,并不是所有的倒数计时器,在现场或将在现场。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

开放、模块设置,然后单击在模块设置CSS选项卡,并添加custom-countdown-1随着CSS类oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

blob.pngoSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

好了,现在我们准备添加自定义的CSS。我上面提到的,你必须添加以下CSS自定义CSS盒子内的分主题选项面板中的选项,或自定义的CSS盒内页设置为个人网页,你的工作。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如果你认为你会加入更多的倒计时后,这一风格的其他网页,然后添加CSS的分主题选项面板。否则,你可以把它添加到页面设置自定义CSS盒。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

打开页面设置,在屏幕的底部的紫色齿轮图标点击。如果你没有看到齿轮图标,点击,你看到揭露其他紫色按钮菜单。然后,点击CSS标签粘贴到下面的CSS盒子。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<trans data-src=".custom-countdown-1.et_pb_countdown_timer .section.values {width: 21%;}.custom-countdown-1 div.sep.section {display: none;}.custom-countdown-1 .value {letter-spacing: 6px;background-color: white;padding: 30px 6px !important;padding-left: 11px !important;}.custom-countdown-1 .hours {margin-left: 21px;}" data-dst="。custom-countdown-1.et_pb_countdown_timer。section.values {宽度:21%;}。custom-countdown-1 div.sep.section {显示:无;}。custom-countdown-1。值{字母间距:6px;背景颜色:白色;填充:30px 6px!重要的;填充左:11px!重要的;}。custom-countdown-1。小时{保证金左:21px;}">。custom-countdown-1.et_pb_countdown_timer。section.values {宽度:21%;}。custom-countdown-1 div.sep.section {显示:无;}。custom-countdown-1。值{字母间距:6px;背景颜色:白色;填充:30px 6px!重要的;填充左:11px!重要的;}。custom-countdown-1。小时{保证金左:21px;}</trans>oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

你会马上通知(感谢生活的视觉生成器更新),我们倒计时了几件不同的事情。我建议将CSS以上小块看每个部分做什么的倒计时器。这也将让你轻松定制,你的愿望。oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一定要保存您的更改;然后你可以欣赏你刚刚创建的!oSf北京网站设计开发,小程序开发,公众号,微信开发-云智互联

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

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

客户评价

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

    潘涛

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

    谭娇

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

    陈曦

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

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号