本文摘自 <Hank Chan's Blog>
前言:本文將假設你已經了解 <如何善用 App Center> 做網站時常遇到需要倒數計時器,像是促銷專案將到什麼時候結束,活動報名到什麼時候截止。有了倒數計時器就更能將訪客流量轉換成使用者行動,像是增加購買人數或是報名人數。小米之前的飢餓行銷某種程度上就是善用倒數計時器。 本文將要教你兩種方法如何在 Weebly 上安裝倒數計時器。 1. App Center 首先,因為倒數計時器並不是 Weebly 的預設套件,我們得先去 App Center 下載倒數計時器。搜尋 Countdown,並選擇第一個的 Countdown (免費) 或是第三個的 Countdown Timer (免費),如下圖。 這邊我選擇第一個的 Countdown,點擊後再點 Add,然後將他連到你的 Weebly 網站,如下圖。 回到你的 Weebly Drag & Drop page,將 Countdown 套件拖曳到你想要的位置。接著,點擊 Countdown,他的編輯欄就會冒出來,就像其他的 Weebly 套件一樣,如下圖。 你可以透過 Edit 進去來調整 Countdown Timer 上的文字,時間,大小,和設計,如下圖。
使用第三方為 Weebly 寫的外加套件雖然方便但有個壞處。它們常常提供你兩個版本:免費版和付費版 ; 免費版功能常常有局限外,也常常有他們的 logo。如果你不介意他們的 logo,自然沒問題 ; 如果你介意,可能要自己來寫點 code,請繼續看第二個方法。
2. DIY 在使用第二個方法前,請先閱讀 <如何修改程式碼> 以及 <如何修改 JavaScript>。將以下提供的 HTML, CSS 和 JavaScript 個別貼在所屬的地方。你可以將 HTML code 用 Drag & Drop 的方式貼在網頁上任何地方 ; CSS 則是用 <style></style> 包裹起來後貼在 Page > 有用到 Countdown 的 page > SEO Settings > Header。 因為製作 Countdown Timer 將需要為數較多的 JavaScript,所以我們特地把 JavaScript 獨立出來成一個檔案。進入 Theme > Edit HTML/CSS > Assets,成立新的檔案叫 countdown.js,並將提供的 JavaScript code 貼上,如下圖。
最後,到 Page > 有用到 Countdown 的 page > SEO Settings > Footer,並將下列的 code 貼上。這是用來呼叫獨立出來的 JavaScript 檔案。
這樣就大功告成啦~。 延伸閱讀 <如何製作 Count 套件>
Comments
本文摘自 <Hank Chan's Blog>
前言:此篇文章屬於 Weebly 進階攻略,建議需具備基本的 html, CSS, 和 Javascript 技術來進行操作。此外,建議先閱讀我之前寫的兩篇文章 <如何製作自己的 footer>,<Weebly 更快速的網站架設 (下) - 如何修改 Weebly 網站的程式碼>。 在你的網站 footer 上常常會遇到需要顯示正確的時間,如下圖。在 Copyright © 後面需要接上你的起始年份到最新年份。
許多人通常是選擇自己手動打上最新年份,但這必須每年再手動更改一次,相當麻煩。這邊提供給大家一個用 JavaScript 來自動化時間顯示的教學。我們將要用 Javascipt 來找出現在當下的年份。在網路上 Javascript 的起點時間設定為 1970 年,而之後的時間都是以毫秒來顯示。因此,我們必須將找出來的毫秒除以秒,分鐘,小時,天,年,捨去小數點之後的尾數,再加上 1970 年,就是當今的年份了。 1. 如果你是 Weebly 付費用戶的話,步驟較為簡單。首先,將下列的 html code (只要 html 而已) 複製並嵌入在你網頁的 footer 上,如下圖 1。
接下來再將 CSS code 放入 html CSS 編輯的地方,如圖 2。
最後,到 Setting > SEO > Footer Code,把我提供的 Javascript code 貼上,如圖 3。儲存後就大功告成啦。
2. 如果你是 Weebly 免費版用戶的話,因為沒有 footer 功能,所以得自己來做 footer。請先閱讀這篇文章來了解如何製作自己的 footer。 好,我先假設你已經瞭解如何在 Weebly 免費版上製作自己的 footer。我也假設你已經懂得如何在 Weebly 上編輯程式碼 (瞭解如何在 Weebly 編輯程式碼)。這個方法與第一個方法大同小異,差別在這個方法的前提是你自己已經用 html 做好了 footer,之後的步驟與第一個方法相同。首先,找到你的 footer code,並在你想要的位置嵌入我提供的 html code,如下圖。 剩下要嵌入 CSS 和 Javascript code 的部分都和第一個方法相同。
摘自:Hank Chan's Blog
加入影片背景已經是 2017 年許多架站工具的基本功能了,這不僅僅是為了網站美觀,更重要的是影片能夠在短短的幾秒內傳達本來要花數十秒才能傳達的文字訊息。除此之外,影片更給使用者一種真實感,讓他們增加對你的品牌和你的商品的信任感。
在網站上嵌入影片有許多做法,包括大家長年熟悉的嵌入 Youtube embedded code 。但是相比會自動播放的影片背景,嵌入的 Youtube 影片需要使用者自行去點擊才會播放,這比較被動。而且嵌入的 Youtube 影片是無法用背景的方式呈現,除非你懂得如何更改程式碼。
當然這篇文章就是要教你如何透過幾個簡單的步驟更改程式碼,讓你的網路商店或是個人部落格也可以脫穎而出。不過在進入教學之前,讓我給各位介紹一下 Weebly 目前對影片背景的支援。 Weebly 有支援影片背景,但不幸的是這功能目前只提供給 Business Plan 用戶,而 Business Plan 用戶一個月的月費就超過 20 塊美金。如果你只是想要使用影片背景功能,那就只好 DIY 了。 首先進入 Weebly 後台程式修改。 進入到你想要修改的 html 頁面。這邊我選擇 landing.html ,也就是首頁。你也可以選擇其他頁面。 找到以下的程式碼 在這程式碼的下方直接加上以下的 html code。你可以在 src=" 和 ? 之間更換 Youtube 影片連結。注意:Youtube 的影片連結是從 Youtube embed page 上的 code 擷取,而不是瀏覽器上的 search bar。 這樣就大功告成啦~!當然,修改影片背景有多種方法。以上的方法是為了操作簡單,將所有的程式碼都聚集在 HTML 上。如果你有信心將 CSS 分離出來,另外放置在 main-style.css 或 是 main.css 又或是 global.less 上的話,可以參考以下的 code。 如果你對自己的 JavaScript 有信心,也可以參考這篇部落格文章,利用 JavaScript 來設定影片背景的大小,自動播放,和靜音功能。雖然我個人認為利用 JavaScript 有點牛刀小試,不過還是提供以上這三種方法給各位看官。 後話:雖然在電腦網頁端上加入影片背景已經是個趨勢了,但影片背景目前沒有被行動瀏覽器所接受,因為影片不止耗手機上相對較小的處理器資源,更大幅增加行動上網的流量。 iPhone 和 Android 的行動瀏覽器在預設上都不支援網頁上的影片背景。所以在設計網站時,也要同時思考如何針對手機的限制做調整。 |
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |