成都網(wǎng)站建設(shè)：如何添加一個倒計時到你的網(wǎng)站

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

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

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

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

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

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

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

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

制備的設(shè)計元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在綜合設(shè)置

更改文本顏色暗

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

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

改變字體“下午”

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

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

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

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

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

添加到自定義0px底緣。

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

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

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

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

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

接下來我們要添加幾行CSS的主要行元素。導(dǎo)航到該行設(shè)置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%）。因?yàn)槲覀兏淖儗挾?，我們需要確保它仍然是中心（margin-left:汽車；右邊距：汽車）。最后，我想行不完全垂直居中，但略高于中心。為了實(shí)現(xiàn)這個我們要利用VH（視口高度）。所以加上：20vh，從屏幕頂部的距離將20%整個視口高度。你可以玩這個把它放在你想要的。

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

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

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

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

所以這是我們迄今為止。

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

添加自定義的CSS

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

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

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

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

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

打開頁面設(shè)置，在屏幕的底部的紫色齒輪圖標(biāo)點(diǎn)擊。如果你沒有看到齒輪圖標(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 {顯示：無；}。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)建的！

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

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

廣告

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