本文摘自 <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 了。它提供更複雜的使用者互動介面,並讓你的靜態網頁開始具備運算能力。本文章將會教你如何在 Weebly 上嵌入 JavaScript,進行 Google Analytics 追蹤,嵌入簡單的 JQuery 套件,或者是呼叫其他網站服務的 API。 1. Settings > SEO > Footer Code
當 JavaScript 放在 Setting 時,他的應用範圍是全網站的。舉個例子,當你想要用 Google Analytics 功能來追蹤你的網站訪客來源和數量時,Google 會要求你將一段他們提供的 JavaScript code 複製在每個頁面上。JavaScript 一般而言最適合放在 footer,因為這樣可以讓 瀏覽器優先顯示 <Body> 中的 HTML 物件才去 compile JavaScript,才不會拖累到在 <Body> 中 HTML 物件的顯示速度。以下 2. ~ 4. 的方法也都建議將 JavaScript 放在 footer。
應用:Google Analytics,Facebook Like 按鈕 2. Pages > 你要的 Page > SEO > Footer Code
應用:呼叫 JQuery 的 CDN,並且用 JQuery 對網站套件進行修改 3. Theme > HTML Editings > 直接嵌入在 HTML 模板
和修改 HTML 模板的途徑一樣,你可以直接在原始碼上直接添加 JavaScript。這樣的應用範圍限於 HTML 模板,像是 Header Page 和 Landing Page。
應用:用 JavaScript 為 Landing Page 添加一些特殊功能,像是小遊戲。 4. Theme > HTML Editings > Assets > Upload or Create JavaScript
當 JavaScript Code 的數量越來越多時,最好就是將 JavaScript 獨立出來打包成一個檔案。所有 JavaScript 的檔案名就是 .js,而你可以將這些檔案存在 Assets (沒錯,就是那個也能存圖片,CSS files 的地方)。接著,你可以在 HTML 模板或是各別頁面上用 Script 的方式呼叫這些 js 檔案,如下列的 code。
應用:需要較多 JavaScript code 的時候 5. Drag & Drop > HTML Embed 最後一個方法,也是大家最熟悉的方法: Drag & Drop。透過 Drag & Drop 你可以輕鬆地將第三方套件直接嵌入你的網頁上,像是 Disqus 的留言套件,和 Mailchimp 套件。但是由於從 Drag & Drop 放入的 JavaScript 和頁面上的其他物件都會被放在 <body> 中,瀏覽器有時候得優先處理 JavaScript 才能繼續跑其他的 HTML 物件,所以會拖累到 <body> 裡 HTML 物件的顯示速度。只有在少量 JavaScript code 的情況下才會推薦使用。 應用:嵌入 Disqus 留言套件,嵌入 Mailchimp Signup 套件 =========================================================== 懂得 JavaScript 將會開啟創作 Weebly 套件的大門。透過 JavaScript 你將可以了解如何運用我們提供的 <如何嵌入影片背景> <如何顯示年份> 等進階文章。 延伸閱讀:<3 種修改 HTML 的方法> <四種修改 CSS 的方法>
本文摘自 <Hank Chan's Blog>
前言:本文假設你已經了解 <如何修改程式碼> 只要是稍微進階的 Weebly 使用者都會難免遇到要修改 HTML 的狀況。本文將要教你三種技巧來修改 HTML。 1. Drag & Drop 將 HTML Embed 套件拖曳到你想要的位置,如下圖。通常會使用這樣的情況還蠻多的。像是 將 Mailchimp 的 Sign Up Form 嵌入進的你的網頁,或是向使用者討讚 XD。 2. Theme > Edit HTML/CSS > Header Type 進入後台程式編輯後,在 Header Type 中找到你想要編輯的頁面,如下圖。這通常是當你想要對頁面設計做大幅度的更改,像是遮蔽掉 Weebly 免費版中強制嵌入的廣告,或是增加另外一個 section。 在編輯完後,回到 Page > 你的 Page > Header Type,來確認你使用的 Header Type 是一致的。
3. 使用 tpl
這是相當進階的做法,只有在為數相當多的 HTML code 的情況下推薦使用。 Weebly 使用 Mustache 技術將同個 block 的 HTML 脫離出去成立另一個檔案。在原本的 Header Type file 中就只剩下如以下的 code。第二段中用 curly braces 包夾的名稱就取代了原本佔了幾十行的 HTML code,在日後維護程式碼也簡潔多了。
接著將脫離出去的 HTML block 存在獨立的 tpl file 中。先在 Partials 中成立一個新的 file,並將副檔名命名為 tpl,檔名則必須要和之前在 HTML 模板中留下的 curly braces 一樣。如果 curly braces 是長這樣 {{>alternative-footer}},那麼檔名則必須是 alternative-footer.tpl,如下圖一樣。
本文摘自 <Hank Chan's Blog>
前言:本文假設讀者已經具有 CSS 的基本知識。 Weebly 雖然不像 Wix 一樣有許多的主題和套件模板供你選擇,但他們開放程式碼讓你修改 HTML, CSS, 和 JavaScript,讓你可以自己打造和客製化自己的套件 (點這了解如何修改程式碼)。本文章將要教你四種在 Weebly 修改 CSS 的方法。 1. 為單一頁面增添 CSS 有時候為了在特定頁面上添加一些額外套件,尤其是 Weebly 沒有的套件,像是 背景影片 或是 banner,就必須添加額外為套件所寫的 CSS。首先,進入 Pages > 選擇你要的 Pages > SEO settings > Header Code,並照以下指示添加程式碼。 這樣的 CSS code 只能應用在單一頁面上,好處是它不會增加其他頁面 loading 的負擔。
2. 在網站的 SEO Setting 修改 CSS
如果想要針對整個網站的設計進行簡單的修改, 像是改變整體文字的預設大小或顏色,可以到 Settings > SEO > Header Code 添加以下的 code。 3. 在 main style sheet 或是 main.less 上修改 CSS 如果是要從事更複雜的 CSS 修改,像是 navigation bar, footer,就必須要修改你的 main style sheet。這邊,我假設你已經閱讀了 <如何修改程式碼>。進入 HTML Edit,然後找到 main-style.css,或是 main.css,或是 main.less,如下圖。 ( p.s. 不同的 Weebly 主題模板使用不同的 CSS file,2016 以前的 Weebly 主題使用純 css,之後使用 less。Less 是 CSS 的 pre-processor,它簡化了一些 CSS 的步驟,不過同樣是可以接受 CSS code。) 這邊你可以找到所有網站套件會使用到的 CSS。你可以直接編輯這些 CSS,或是透過 !important 的手段另外寫 CSS 來 override 本來的設定。要記得的是,只要是有添加或是更改 CSS 都要用 comments 來標注本來的設定,如以下。每次修改 CSS 加上 comments 是個好習慣,尤其是之後要再回復成原本設定就方便了。 因為 main style sheet 上的 CSS 會應用到整個網站,所以不建議隨意修改。而且在 main style sheet 上添加太多的 CSS 會造成後續維護的負擔。 4. 上傳額外的 CSS 檔案 最後一個也是最少人知道的手段,就是上傳額外的 CSS 檔案。進入 Theme > HTML Edit > Assets 後,你可以將 CSS 檔案上傳到這邊,如下圖。 之後在 Page > Header Code 中添加下列的 code 呼叫 CSS file 就好了。 對某些人來說 - 當需要寫為數較多的 CSS 時,在單一頁面上的 header code 既不適合,而 main style sheet 也已經負載過多,這時候有個獨立的 CSS 檔案就有好處。另外,如果你還沒有意識到的話,其實你也可以在你的 Weebly 網站上存放 CSS 檔案和其他圖片資源來供你的其他網站使用。 延伸閱讀:<如何修改 HTML> <如何修改 JavaScript>
本文摘自於 <Hank Chan's Blog>
經營網站或是部落格久了,就會常遇到要將網站搬家搬到另外一個主機或是另一個部落格或是架站服務,這時候網址轉換就很頭大了。舉個例子,之前的網站可能要求你所有網頁的網址後面加上 php 檔名,但是你搬家後的新網站則是要求換成 html 檔名。可是,大部分的人只知道你的舊網址,而不知道你的新網址。這時候," 301 (Redirect)" 就很重要了。它是 HTTP 一個可以將網址導向另外一個網址的方法。當伺服器接到 301 的訊息,知道本來輸入的網址現在已經是另外一個網址,它會立即連到另外一個網址。 接下來,把你的舊網址列在 "Old URL" 下方,然後再把對應的 Weebly 頁面列在對應的 Destination Page,如下圖。 儲存之後,你可以以此類推繼續接下去,如下圖。另外,多個舊網址可以同時連到一個新網址。 " 301 "的應用非常廣。許多時候,當你要將兩個網頁合併成一個網頁,需要把其中一個網址導向至另外一個網址,都可以使用 "301 Redirect"。 延伸閱讀 < 如何客製化 "404 找不到" 頁面 >
本文摘自於 <Hank Chan's Blog>
"404 找不到" 是 HTTP 裡的預設反應。當伺服器沒辦法提供網頁給使用者輸入的連結時, 404 頁面就會回傳給使用者。通常是因為使用者輸入的連結已經損壞或是更新,導致他現在輸入的網址沒有對應的網頁。想必大家一定有經歷過 Google 上的 404 頁面。
雖然 "404 找不到" 乍看之下不是很重要,但是專業的網站總是會賦予它一些令人驚喜的設計,像是 Imgur 的 404 頁面,如下圖。英國的 Metro News 特地為 404 頁面做了報導,因為越來越多網路公司認知到 - 有好的 404 頁面設計會給找不到網址的使用者一點安慰和一點驚喜。
不過 Weebly 的平台上有個小竅門讓你可以客製化你自己的 "404" 頁面。首先,在你的網站上成立一個頁面,命名為 "404",並點選 Hide in Navigation 將它隱藏起來,如下圖。你也可以更進一步到 SEO settings 將 404 頁面隱藏起來,不被搜尋引擎找到。
成立 404 頁面後,Weebly 會將你網站上搜尋不到的網址自動導向至這個頁面。接下來,你就可以針對這個 404 頁面重新設計啦~♫。你可以將一些有趣的 imgur GIF 連結附在你的 404 頁面上,像是 Weebly in 3 Min 的 404 頁面 ; 你也可以參考國外這個部落格統整了 <36 樣有趣的 404 頁面設計>。 好的 404 頁面設計具備以下三大特徵: 1. 引導使用者到正確的網址或者是首頁。 2. 提供使用者直接聯絡你的方法。通常會被引導到 404 頁面是因為網址出現問題,或者是舊的網址已經故障。 3. 發揮你的創意~♫。
最後,404 頁面可以想成是網站上的最後一道防線,因為輸入的網址已經損壞或是更新了。如果要防止網址損壞或是更新的問題,讓使用者可以順利找到他想要的連結,建議參考我的 <善用 301 頁面>
本文摘自於 <Hank Chan's Blog>
2016 年推出的 Weebly 4 有許多新功能,其中最矚目的功能就是 section 套件。section 是目前許多網頁首頁 (landing page) 設計的特色,它把網頁分成一層一層的,所以可以在一個頁面上敘述更多資訊,如下圖。
網頁首頁有了 section 功能,就能完整得敘述一個故事,也更能說服為什麼顧客需要購買你的產品。要知道,通常新到訪的顧客只會花幾秒的時間來瀏覽你的首頁,決定要不要繼續看下去。如果你的首頁不吸引人,就算你的服務再好使用者也不會再繼續看下去。 1. Drag & Drop 要在 Weebly 上使用 section 套件,首先,在 drag and drop 上找到 section,然後拖曳到你想要的位置,如下圖。
如上圖, section 另有提供你幾種不同的 layout 選擇,有 Gallery, Team, Featured, Menu, 和 contact。你可以依據你頁面上的內容來選擇想要的 layout。在給大家一個使用 section 的案例來參考。
2. 使用 <section>
如果你使用的 Weebly 主題 (Theme) 是 2016 年前的,可能會沒有支援 Section 功能。這樣你得親自寫 code 了。
本文將教你如何使用 HTML 5 的最新功能 <section>,來輕鬆寫出自己的第一個 Landing Page。先閱讀 <如何修改程式碼> 和 <三種修改 HTML 的技巧>,並找到下列的位置
Theme > Edit HTML/CSS > Header Type > 你想要的 HTML 模版上。在你想要的位置上貼上以下的 code。
你可以使用 CSS Style 來為這個 section 製作背景顏色和圖片。
3. 使用 <div>
此方法相當類似於第二個方法,不同處在於是使用 <div>。<div> 在 <section> 推出前是用來製作 section 的主要方法,其方法也是大同小異。將下列的 code 貼在你想要的位置上。 ======================================================================== <section> 作為專門用來製作 section 非常合適,因為它在後續維護程式上不容易和其他一堆 <div> 混淆,而且所有瀏覽器在 2014 年前後都開始支援 <section> 了。看看下一篇關於如何透過 section 套件來使用 parallax 特色。
本文參考自 <Hank Chan's Blog>
前言:本文假設你有一些基本的 HTML CSS and JavaScript 概念,以及如何在 Weebly 上進行程式更改的動作。你可以閱讀這篇 <如何在 Weebly 上修改程式>。 用 Facebook 和 Line 來分享是台灣目前的主流。相較 Facebook 提供了很多的分享套件,和許多網站提供的分享按鈕,Line 的分享按鈕反而相當少見。本文章將要教你如何善用 Line 官網所提供的按鈕,方便你的用戶直接將你的網頁分享到 Line 的群組,如下圖。
首先,到 Line 的 social plugin 開發網頁。他有三個分享的按鈕給你選擇:"Line it", "Add friend", "Like"。你依照你的需求選擇相應的 social plugin。這邊將用 "Like" 來當作範例教你如何嵌入到你的 Weebly 網頁,如下圖 1 和 下圖 2。 1. 在 Set URL 上加入你想要用 Line 分享的網頁網址。 2. 在 Select a share option 的兩個選項中選一個你想要的按鈕。這邊是選擇左邊的按鈕。 3. 再往下滑,如圖 2,它會問你要不要加上 "Add friend"。如果沒有 Line 的官方粉絲帳號,就選擇左邊的 off。 4. 經過這一系列的設定後,Line 就會幫你產生出 code。它通常長得像下面這一段 code。 5. 你可以將第一段的 HTML code 嵌入在你的 Weebly 網頁上任何一個地方,透過 embed code 這個套件。你也可以透過 Theme > Edit HTML 直接嵌入這段 HTML code 到原始碼中。 6. 將第二段的 JavaScript 嵌入在 Settings > SEO > Footer Code。這樣你的 Line sharing button 就大功告成了。 Line 是 Facebook 之外台灣人目前最喜歡用的聊天 app,尤其是中老年人特別喜歡用 Line 群組來分享一些圖文並茂的文章。如果你網頁針對是這樣年齡層的使用族群,那麼在你的網頁上加上 Line 分享功能就非常重要了。
本文大部分摘自於 <Hank Chan's Blog>
Parallax 自 2014 年起開始風行於國外各網站首頁。它是一個讓你在滑動網頁時,可以將背景圖片定格在固定位置的功能。使用 Parallax 功能可以增加你的網站層次 (layer),讓你的網站設計看起來更豐富,如下圖。
p.s. 如果你使用的 Weebly 主題是在 2016 年以前推出的,可能就沒有辦法使用 section 功能,也就沒有辦法使用 Parallax。 有兩種方法可以在 Weebly 上使用 Parallax: 1. 在有使用 header 的頁面上,點擊 header 兩下來設定 header 的背景,接著會跳出兩個選項,選擇 Edit Background,然後選擇 Image,如下圖 1。
接著選擇 Scrolling Effect >> Parallax,如下圖 2。
更新後,你將發現網頁的 header 就有 Parallax 的功能了。
2. 其實在 header 以外的地方也可以使用 Parallax。在 Drag and Drop 的 section 套件也可以讓你section 上的 background image 做 Parallax 的功能,如下圖 1 和 圖 2。
當然在 section 上添加 Parallax 的過程中,你會發現 section 其實有非常多的功能。我們在另外一篇文章會討論更多關於 <Weebly 新推出的 section 功能>。
本文摘自於 <Hank Chan's Blog>
Lightbox 是一個讓圖片和影片 popup 的一個功能,如下圖所示。在 popup 的情況下,使用者仍然能在變暗的網頁上繼續瀏覽。只要輕輕一點變暗的區域, popup 功能就會解除。
在 Weebly 上使用 Lightbox 相當簡單。Weebly 的圖片功能上直接有 Lightbox 功能的選項,如下圖。 向右滑曳, 就可以開啟 lightbox 功能。 那到底該什麼時候使用 lightbox 呢?以下幾種情況供你思考。 1. 高畫素的大圖片有時候被迫縮小成小圖片。 2. 縮小後的圖片上文字看不清楚。 3. 相簿上的照片。 使用 lightbox feature 的幾個常識:
1. 因為 Weebly 是使用 fancybox.com 上的 jQuery fancybox script 來提供 lightbox 功能,你可以透過 fancybox 上提供的 tips 來客製化你想要的 lightbox feature。
2. 不過也因為是使用 jQuery,lightbox 可能會拖累網站 loading time 。另外,如果使用者的瀏覽器設定是停用 JavaScript 的話,所有 jQuery 的功能都會連帶被停用,這就包括使用 jQuery 的 lightbox。
|
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |