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

在這個迷你系列，我要與你分享5種不同的方式，你可以風格Divi的倒計時器的令人印象深刻的方式。但是，而不是展示你的設計，我要潛得更深，并提供對設計過程的所有方面的教程，你可以學習如何自己做。

三倒計時模塊：之前和之后

在我們之前，重要的是看我們從。以下是截圖的默認設置倒計時模塊劃分。

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

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

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

創(chuàng)建“簡單的優(yōu)雅”分倒計時模塊的設計

制備的設計元素

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

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

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

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

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

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

實施設計

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

如果你已經(jīng)創(chuàng)建了一個新的頁面，然后有我們在的地方的空白部分。否則，如果你添加到您現(xiàn)有的分頁面創(chuàng)建一個新的部分。

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

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

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

調(diào)整模塊設置

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

在綜合設置

更改文本顏色暗

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

在設計設置

改變字體“下午”

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

改變標簽的字體全部大寫（TT圖標）

改變標題文字的顏色為白色（# ffffff）

改變標簽的文本顏色為白色（# ffffff）

換號碼的字體52px，和標簽的字體大小12px。

添加到自定義0px底緣。

調(diào)整列的設置

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

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

更改設置為“保持柱填料移動”到“是”

行的背景顏色是什么賦予了倒數(shù)計時器的半透明的感覺。基本上，它只是一個與不透明白色背景將下降到只有10%。換句話說，它是透明的90%。你可以通過使用第二滑塊控件旁邊的顏色選擇器，調(diào)整不透明度。

接下來我們要添加幾行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:汽車；右邊距：汽車）。最后，我想行不完全垂直居中，但略高于中心。為了實現(xiàn)這個我們要利用VH（視口高度）。所以加上：20vh，從屏幕頂部的距離將20%整個視口高度。你可以玩這個把它放在你想要的。

調(diào)整部分設置

我們其實只有一個很小的調(diào)整，使部分設置。打開節(jié)設置（單擊控件時顯示懸停段藍色齒輪圖標），并對部分設置CSS選項卡，單擊。向下滾動到主元素添加下面一行的CSS：

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

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

所以這是我們迄今為止。

你可以看到它真的開始形成。我們快到了。

添加自定義的CSS

我們需要的最后一件事是一個小小的自定義CSS魔法！是的，我們在技術上已經(jīng)添加一些CSS的區(qū)和行設置，但是我們會將它添加到任何分主題選項面板或單個頁面設置自定義的CSS框自定義CSS盒子。

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

開放、模塊設置，然后單擊在模塊設置CSS選項卡，并添加custom-countdown-1隨著CSS類

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

如果你認為你會加入更多的倒計時后，這一風格的其他網(wǎng)頁，然后添加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以上小塊看每個部分做什么的倒計時器。這也將讓你輕松定制，你的愿望。

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

分享標題：成都網(wǎng)站建設：如何添加一個倒計時到你的網(wǎng)站
當前地址：http://www.rwnh.cn/news42/317592.html

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

廣告

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