威海网站建设：如何添加一个倒计时到你的网站

加一个倒计时到您的网站，可以让你的网站访客的一种非常有效的方法。你是否想创建一个特殊的优惠或促销活动的紧迫性，史诗般的产品或网站推出之前制造悬念，或倒到一个特定的事件如婚礼或音乐会，倒数计时器可以完美补充说：“触摸”到你的WordPress网站。

在这个迷你系列，我要与你分享5种不同的方式，你可以风格Divi的倒计时器的令人印象深刻的方式。但是，而不是展示你的设计，我要潜得更深，并提供对设计过程的所有方面的教程，你可以学习如何自己做。

三倒计时模块：之前和之后

在我们之前，重要的是看我们从。以下是截图的默认设置倒计时模块划分。

现在使用分倒计时模块与它的默认设置没有错。它的简单，干净，和将要做的工作。但是，这种迷你系列是以设计的几个步骤，按住“令人印象深刻的标题，“让我们看看我们会创造今天。

是什么让这个倒计时是独一无二的全屏幕背景图像背后的倒计时。淡淡的半透明的背景颜色的倒计时给它分离，使其从背景中突出，但仍允许能够显示背景图像。

在这个例子中你可以使用不同的调色板图像的各种不同的风格，它仍然看起来很棒。所以你可以跟随和使用它，或使用作为一个跳点创造出独一无二的你。

创建“简单的优雅”分倒计时模块的设计

制备的设计元素

这个倒计时的大多数是通过分设置和CSS实现的，所以没有很多的准备工作，我们需要做的。然而，我们需要选择和修饰的背景图像。

正如我前面提到的，你会选择一个图像具有很大的灵活性。由于计时器的颜色是中性的，而背景是半透明的，它留给我们很多的发挥空间与不同的图像，它仍然看起来很棒。

有很多地方的网上购买股票的图像，以及寻找免费的图片太。我最喜欢的免费图片来源unsplash.com，这就是我的发现今天的教程图像

当你选择图像，有助于加深形象一点把重点放在倒计时。变暗的图像在今天的教程中，我使用了Adobe PS图象处理软件一个黑色填充层。然后我玩的不透明度直到我得到它就–正如前面的教程中我们展示了如何做，一步一步

如果你没有PS图象处理软件，还有其他更便宜（或免费）的替代品，如Pixlr编辑器，可以很好的制作简单的图像编辑。

这是一个之前和之后，被编辑的图像。

实施设计

现在，我们有我们的图像选择和准备，是时候去Divi。这种特殊的倒计时以及网站的登陆页面，让我们建立在WordPress中新的一页，给它一个名称，使分，和头部的视觉生成器。记住，你不需要创建一个新页面虽然。干脆跳过这第一步，如果你想添加的倒计时到现有的页面。

如果你已经创建了一个新的页面，然后有我们在的地方的空白部分。否则，如果你添加到您现有的分页面创建一个新的部分。

现在，插入一一列行，并添加一个倒计时模块的行。然后你将被提示选择一个日期倒计时。你可以随意选择一个倒计时器的标题以及。在我们的例子中，我们添加了“即将启动…“作为我们的标题。我们将重新调整设置在一个点的模块，但现在点击绿色的复选框，保存模块设置。

现在，我们要添加的部分图像作为背景图像。为此，悬停在部分直到你看到它概述了蓝色。然后，在左上角，点击齿轮图标打开节设置。

然后，上传你的图像作为背景图像。在下面的图片，你会看到我们有这么远。它不是很大，但我们正在取得进展。

调整模块设置

现在是时候开始倒计时定时器设置。悬停在倒数计时器，打开模块设置（单击控件时显示悬停在倒数计时器的暗灰色的齿轮图标）。

在综合设置

更改文本颜色暗

改变背景颜色的使用' '不'

在设计设置

改变字体“下午”

改变字体和字体加粗标签数量

改变标签的字体全部大写（TT图标）

改变标题文字的颜色为白色（# ffffff）

改变标签的文本颜色为白色（# ffffff）

换号码的字体52px，和标签的字体大小12px。

添加到自定义0px底缘。

调整列的设置

我们现在需要对行进行一些小的调整。悬停在该行开放行设置（单击控件时显示悬停在排绿色的齿轮图标）。你把一般的设置相同，但我们需要作出一些调整设计设置

改变背景颜色RGBA（255255255,0.1）

更改设置为“保持柱填料移动”到“是”

行的背景颜色是什么赋予了倒数计时器的半透明的感觉。基本上，它只是一个与不透明白色背景将下降到只有10%。换句话说，它是透明的90%。你可以通过使用第二滑块控件旁边的颜色选择器，调整不透明度。

接下来我们要添加几行CSS的主要行元素。导航到该行设置CSS选项卡。向下滚动，直到你看到“主元的盒子。”并粘贴以下CSS盒子里：

<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>

上面的代码做的几件事。首先，它使得该行不会占用超过50%的屏幕（最大宽度：50%）。因为我们改变宽度，我们需要确保它仍然是中心（margin-left:汽车；右边距：汽车）。最后，我想行不完全垂直居中，但略高于中心。为了实现这个我们要利用VH（视口高度）。所以加上：20vh，从屏幕顶部的距离将20%整个视口高度。你可以玩这个把它放在你想要的。

调整部分设置

我们其实只有一个很小的调整，使部分设置。打开节设置（单击控件时显示悬停段蓝色齿轮图标），并对部分设置CSS选项卡，单击。向下滚动到主元素添加下面一行的CSS：

<trans data-src="height: 100vh;" data-dst="身高：100vh；">身高：100vh；</trans>

这一行的CSS将使部分“全屏幕”，或者换句话说，让视口的高度100%节高度。这是全屏幕的设置，是非常相似的在Divi全宽头的控制。

所以这是我们迄今为止。

你可以看到它真的开始形成。我们快到了。

添加自定义的CSS

我们需要的最后一件事是一个小小的自定义CSS魔法！是的，我们在技术上已经添加一些CSS的区和行设置，但是我们会将它添加到任何分主题选项面板或单个页面设置自定义的CSS框自定义CSS盒子。

为什么我们把它在那里，不要直接在模块、行或段？嗯，分有预靶向CSS区域的模块，设置行和段，但没有目标的每一个CSS样式，在样式表可分。在我们可以开始添加CSS虽然，我们需要添加自己的自定义类，我们只定义我们目前的工作模块的CSS，并不是所有的倒数计时器，在现场或将在现场。

开放、模块设置，然后单击在模块设置CSS选项卡，并添加custom-countdown-1随着CSS类

好了，现在我们准备添加自定义的CSS。我上面提到的，你必须添加以下CSS自定义CSS盒子内的分主题选项面板中的选项，或自定义的CSS盒内页设置为个人网页，你的工作。

如果你认为你会加入更多的倒计时后，这一风格的其他网页，然后添加CSS的分主题选项面板。否则，你可以把它添加到页面设置自定义CSS盒。

打开页面设置，在屏幕的底部的紫色齿轮图标点击。如果你没有看到齿轮图标，点击，你看到揭露其他紫色按钮菜单。然后，点击CSS标签粘贴到下面的CSS盒子。

<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>

你会马上通知（感谢生活的视觉生成器更新），我们倒计时了几件不同的事情。我建议将CSS以上小块看每个部分做什么的倒计时器。这也将让你轻松定制，你的愿望。

一定要保存您的更改；然后你可以欣赏你刚刚创建的！