加一個(gè)倒計(jì)時(shí)到您的網(wǎng)站，可以讓你的網(wǎng)站訪客的一種非常有效的方法。你是否想創(chuàng)建一個(gè)特殊的優(yōu)惠或促銷活動(dòng)的緊迫性，史詩(shī)般的產(chǎn)品或網(wǎng)站推出之前制造懸念，或倒到一個(gè)特定的事件如婚禮或音樂(lè)會(huì)，倒數(shù)計(jì)時(shí)器可以完美補(bǔ)充說(shuō)：“觸摸”到你的WordPress網(wǎng)站。

在這個(gè)迷你系列，我要與你分享5種不同的方式，你可以風(fēng)格Divi的倒計(jì)時(shí)器的令人印象深刻的方式。但是，而不是展示你的設(shè)計(jì)，我要潛得更深，并提供對(duì)設(shè)計(jì)過(guò)程的所有方面的教程，你可以學(xué)習(xí)如何自己做。

三倒計(jì)時(shí)模塊：之前和之后

在我們之前，重要的是看我們從。以下是截圖的默認(rèn)設(shè)置倒計(jì)時(shí)模塊劃分。

現(xiàn)在使用分倒計(jì)時(shí)模塊與它的默認(rèn)設(shè)置沒(méi)有錯(cuò)。它的簡(jiǎn)單，干凈，和將要做的工作。但是，這種迷你系列是以設(shè)計(jì)的幾個(gè)步驟，按住“令人印象深刻的標(biāo)題，“讓我們看看我們會(huì)創(chuàng)造今天。

是什么讓這個(gè)倒計(jì)時(shí)是獨(dú)一無(wú)二的全屏幕背景圖像背后的倒計(jì)時(shí)。淡淡的半透明的背景顏色的倒計(jì)時(shí)給它分離，使其從背景中突出，但仍允許能夠顯示背景圖像。

在這個(gè)例子中你可以使用不同的調(diào)色板圖像的各種不同的風(fēng)格，它仍然看起來(lái)很棒。所以你可以跟隨和使用它，或使用作為一個(gè)跳點(diǎn)創(chuàng)造出獨(dú)一無(wú)二的你。

創(chuàng)建“簡(jiǎn)單的優(yōu)雅”分倒計(jì)時(shí)模塊的設(shè)計(jì)

制備的設(shè)計(jì)元素

這個(gè)倒計(jì)時(shí)的大多數(shù)是通過(guò)分設(shè)置和CSS實(shí)現(xiàn)的，所以沒(méi)有很多的準(zhǔn)備工作，我們需要做的。然而，我們需要選擇和修飾的背景圖像。

正如我前面提到的，你會(huì)選擇一個(gè)圖像具有很大的靈活性。由于計(jì)時(shí)器的顏色是中性的，而背景是半透明的，它留給我們很多的發(fā)揮空間與不同的圖像，它仍然看起來(lái)很棒。

有很多地方的網(wǎng)上購(gòu)買股票的圖像，以及尋找免費(fèi)的圖片太。我最喜歡的免費(fèi)圖片來(lái)源unsplash.com，這就是我的發(fā)現(xiàn)今天的教程圖像

當(dāng)你選擇圖像，有助于加深形象一點(diǎn)把重點(diǎn)放在倒計(jì)時(shí)。變暗的圖像在今天的教程中，我使用了Adobe PS圖象處理軟件一個(gè)黑色填充層。然后我玩的不透明度直到我得到它就–正如前面的教程中我們展示了如何做，一步一步

如果你沒(méi)有PS圖象處理軟件，還有其他更便宜（或免費(fèi)）的替代品，如Pixlr編輯器，可以很好的制作簡(jiǎn)單的圖像編輯。

這是一個(gè)之前和之后，被編輯的圖像。

實(shí)施設(shè)計(jì)

現(xiàn)在，我們有我們的圖像選擇和準(zhǔn)備，是時(shí)候去Divi。這種特殊的倒計(jì)時(shí)以及網(wǎng)站的登陸頁(yè)面，讓我們建立在WordPress中新的一頁(yè)，給它一個(gè)名稱，使分，和頭部的視覺(jué)生成器。記住，你不需要?jiǎng)?chuàng)建一個(gè)新頁(yè)面雖然。干脆跳過(guò)這第一步，如果你想添加的倒計(jì)時(shí)到現(xiàn)有的頁(yè)面。

如果你已經(jīng)創(chuàng)建了一個(gè)新的頁(yè)面，然后有我們?cè)诘牡胤降目瞻撞糠?。否則，如果你添加到您現(xiàn)有的分頁(yè)面創(chuàng)建一個(gè)新的部分。

現(xiàn)在，插入一一列行，并添加一個(gè)倒計(jì)時(shí)模塊的行。然后你將被提示選擇一個(gè)日期倒計(jì)時(shí)。你可以隨意選擇一個(gè)倒計(jì)時(shí)器的標(biāo)題以及。在我們的例子中，我們添加了“即將啟動(dòng)…“作為我們的標(biāo)題。我們將重新調(diào)整設(shè)置在一個(gè)點(diǎn)的模塊，但現(xiàn)在點(diǎn)擊綠色的復(fù)選框，保存模塊設(shè)置。

現(xiàn)在，我們要添加的部分圖像作為背景圖像。為此，懸停在部分直到你看到它概述了藍(lán)色。然后，在左上角，點(diǎn)擊齒輪圖標(biāo)打開(kāi)節(jié)設(shè)置。

然后，上傳你的圖像作為背景圖像。在下面的圖片，你會(huì)看到我們有這么遠(yuǎn)。它不是很大，但我們正在取得進(jìn)展。

調(diào)整模塊設(shè)置

現(xiàn)在是時(shí)候開(kāi)始倒計(jì)時(shí)定時(shí)器設(shè)置。懸停在倒數(shù)計(jì)時(shí)器，打開(kāi)模塊設(shè)置（單擊控件時(shí)顯示懸停在倒數(shù)計(jì)時(shí)器的暗灰色的齒輪圖標(biāo)）。

在綜合設(shè)置

更改文本顏色暗

改變背景顏色的使用' '不'

在設(shè)計(jì)設(shè)置

改變字體“下午”

改變字體和字體加粗標(biāo)簽數(shù)量

改變標(biāo)簽的字體全部大寫(xiě)（TT圖標(biāo)）

改變標(biāo)題文字的顏色為白色（# ffffff）

改變標(biāo)簽的文本顏色為白色（# ffffff）

換號(hào)碼的字體52px，和標(biāo)簽的字體大小12px。

添加到自定義0px底緣。

調(diào)整列的設(shè)置

我們現(xiàn)在需要對(duì)行進(jìn)行一些小的調(diào)整。懸停在該行開(kāi)放行設(shè)置（單擊控件時(shí)顯示懸停在排綠色的齒輪圖標(biāo)）。你把一般的設(shè)置相同，但我們需要作出一些調(diào)整設(shè)計(jì)設(shè)置

改變背景顏色RGBA（255255255,0.1）

更改設(shè)置為“保持柱填料移動(dòng)”到“是”

行的背景顏色是什么賦予了倒數(shù)計(jì)時(shí)器的半透明的感覺(jué)?；旧?，它只是一個(gè)與不透明白色背景將下降到只有10%。換句話說(shuō)，它是透明的90%。你可以通過(guò)使用第二滑塊控件旁邊的顏色選擇器，調(diào)整不透明度。

接下來(lái)我們要添加幾行CSS的主要行元素。導(dǎo)航到該行設(shè)置CSS選項(xiàng)卡。向下滾動(dòng)，直到你看到“主元的盒子。”并粘貼以下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>

上面的代碼做的幾件事。首先，它使得該行不會(huì)占用超過(guò)50%的屏幕（大寬度：50%）。因?yàn)槲覀兏淖儗挾?，我們需要確保它仍然是中心（margin-left:汽車；右邊距：汽車）。最后，我想行不完全垂直居中，但略高于中心。為了實(shí)現(xiàn)這個(gè)我們要利用VH（視口高度）。所以加上：20vh，從屏幕頂部的距離將20%整個(gè)視口高度。你可以玩這個(gè)把它放在你想要的。

調(diào)整部分設(shè)置

我們其實(shí)只有一個(gè)很小的調(diào)整，使部分設(shè)置。打開(kāi)節(jié)設(shè)置（單擊控件時(shí)顯示懸停段藍(lán)色齒輪圖標(biāo)），并對(duì)部分設(shè)置CSS選項(xiàng)卡，單擊。向下滾動(dòng)到主元素添加下面一行的CSS：

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

這一行的CSS將使部分“全屏幕”，或者換句話說(shuō)，讓視口的高度100%節(jié)高度。這是全屏幕的設(shè)置，是非常相似的在Divi全寬頭的控制。

所以這是我們迄今為止。

你可以看到它真的開(kāi)始形成。我們快到了。

添加自定義的CSS

我們需要的最后一件事是一個(gè)小小的自定義CSS魔法！是的，我們?cè)诩夹g(shù)上已經(jīng)添加一些CSS的區(qū)和行設(shè)置，但是我們會(huì)將它添加到任何分主題選項(xiàng)面板或單個(gè)頁(yè)面設(shè)置自定義的CSS框自定義CSS盒子。

為什么我們把它在那里，不要直接在模塊、行或段？嗯，分有預(yù)靶向CSS區(qū)域的模塊，設(shè)置行和段，但沒(méi)有目標(biāo)的每一個(gè)CSS樣式，在樣式表可分。在我們可以開(kāi)始添加CSS雖然，我們需要添加自己的自定義類，我們只定義我們目前的工作模塊的CSS，并不是所有的倒數(shù)計(jì)時(shí)器，在現(xiàn)場(chǎng)或?qū)⒃诂F(xiàn)場(chǎng)。

開(kāi)放、模塊設(shè)置，然后單擊在模塊設(shè)置CSS選項(xiàng)卡，并添加custom-countdown-1隨著CSS類

好了，現(xiàn)在我們準(zhǔn)備添加自定義的CSS。我上面提到的，你必須添加以下CSS自定義CSS盒子內(nèi)的分主題選項(xiàng)面板中的選項(xiàng)，或自定義的CSS盒內(nèi)頁(yè)設(shè)置為個(gè)人網(wǎng)頁(yè)，你的工作。

如果你認(rèn)為你會(huì)加入更多的倒計(jì)時(shí)后，這一風(fēng)格的其他網(wǎng)頁(yè)，然后添加CSS的分主題選項(xiàng)面板。否則，你可以把它添加到頁(yè)面設(shè)置自定義CSS盒。

打開(kāi)頁(yè)面設(shè)置，在屏幕的底部的紫色齒輪圖標(biāo)點(diǎn)擊。如果你沒(méi)有看到齒輪圖標(biāo)，點(diǎn)擊，你看到揭露其他紫色按鈕菜單。然后，點(diǎn)擊CSS標(biāo)簽粘貼到下面的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 {顯示：無(wú)；}。custom-countdown-1。值{字母間距：6px；背景顏色：白色；填充：30px 6px！重要的；填充左：11px！重要的；}。custom-countdown-1。小時(shí){保證金左：21px；}">。custom-countdown-1.et_pb_countdown_timer。section.values {寬度：21%；}。custom-countdown-1 div.sep.section {顯示：無(wú)；}。custom-countdown-1。值{字母間距：6px；背景顏色：白色；填充：30px 6px！重要的；填充左：11px！重要的；}。custom-countdown-1。小時(shí){保證金左：21px；}</trans>

你會(huì)馬上通知（感謝生活的視覺(jué)生成器更新），我們倒計(jì)時(shí)了幾件不同的事情。我建議將CSS以上小塊看每個(gè)部分做什么的倒計(jì)時(shí)器。這也將讓你輕松定制，你的愿望。

一定要保存您的更改；然后你可以欣賞你剛剛創(chuàng)建的！

分享標(biāo)題：成都網(wǎng)站建設(shè)：如何添加一個(gè)倒計(jì)時(shí)到你的網(wǎng)站
當(dāng)前地址：http://jinyejixie.com/news42/317592.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站營(yíng)銷、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)