本文轉載於 <Hank Chan's Blog> 網路上已經有許多文章歸類出主要架站服務之間的不同和優勢,而台灣的部落客也在近年紛紛寫下了許多對這些架站網站的觀察,像是 北方羽林 對 Weebly 和 Wix 的看法,還有 浩剛 對 Weebly 的研究。不過大部分的文章並沒有點出 Weebly,Wix,和 Squarespace 在本質上的分析。 在架站服務進入三國時代前,網路上的架站服務一直是由 WordPress 所統治。 2003 年成立的 WordPress 主打著每個部落客都可以有自己的部落格,而之後衍伸得第三方套件也都是環繞在這個服務上。隨著網路使用者不斷增加,架站服務也隨之分化。2004 年成立的 Squarespace, 2006 年中陸續成立的 Weebly 和 Wix,以及其他不大不小的架站服務,也都加入了戰局。漸漸的,Squarespace,Weebly 和 Wix 進化成以個人網站和線上商店為主的架站服務,三分天下。它們之中又更衍伸出因應不同使用者族群的特色。 1. Weebly - 開發者的架站首選 其實 WordPress 仍然是許多開發者的架站選擇,但如果你是要為你的客戶架個公司網站或是個人商店,Weebly 絕對是首選。Weebly 的架站服務環繞在這個基本原則上:設計簡化和後台程式修改 ; 他既適合不會寫程式的客戶做網站內容修改,它也方便開發者為網站編寫延伸應用和功能擴充。 Weebly 有著需多對針對開發者的設計元素,某種程度上,可以說是保有許多 WordPress 架站的影子。依照這樣的理念,Weebly 衍伸出兩個特色,那就是為 Weebly 提供其他特色主題的第三方開發者,還有第三方插件的使用。 不過對於著眼大陸市場的台灣朋友們,Weebly 可能會讓你小失望了。大部分 Weebly 做出來的網站在大陸遭到屏蔽,可能是因為 Weebly 的伺服器 ip 設置在美國而被大陸屏蔽。 <Weebly 小檔案> 成立於 2006 年,現在總部設在舊金山灣區。Weebly 的三個創辦人中的兩個來自賓州大學 (Penn State University),當年因為賓大要求所有在校生必須擁有自己的網站,他們靈機一動決定成立架站服務。Weebly 隨即在 2007 Winter 被 Y Combinator (地表最強大的加速器) 錄取,而紅衫資本 (Seqoul Capital) 一直是其主要金主。2014 年起,提供多種語言,並開始在五大洲成立辦公室。Weebly 在 2018 年被 Square 收購。 2. Wix - 消費者的架站首選 Wix 做為一個以一般消費者為主體的架站服務公司,專注在自動化和提供最簡單的服務。Wix 的使用者通常完全不需要任何程式背景就可以用 Wix 做出非常專業的網站。Wix 將這些自動功能標榜為 AI,但其中有多少 AI 的成分,就見仁見智了。 我並不常用 Wix,因為 Wix 並不提供程式後台供我修改程式,但或許一般大眾也不需要這樣的功能。這大概是為什麼 Wix 是這三者中使用戶最多的。 3. Squarespace - 設計者的架站首選
回到攻略首頁
Squarespace 是這三個架站服務裡最重視設計元素的。這個 2004 年就成立在紐約的公司,主打簡約風格,但功能也是這三者中最少的。 不過相比於前兩者, Squarespace 對於 IPO 是最沒野心的。這也似乎解釋為什麼這三者中最早成立的架站服務,至今使用者數量仍然落後於 Weebly 和 Wix。最近幾年他們在網紅行銷中下了血本,如果有在國外 YouTube 頻道的,多少都看過 Squarespace 的廣告。 Squarespace 雖然目前仍是這三大架站服務中使用者最少的,但他培養出一批對設計非常堅持的死忠客戶。如果你是個藝術家或是設計師,Sqaurespace 絕對值得一試。 Reference 1. Website Builder Expert 2. Website Builders Comparison Chart for 2017 3. Weebly v.s. Wix
Comments
本文摘自 <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 套件>
本文摘自 <Hank Chan's Blog>
Weebly 的預設套件讓他相比 Wix 看似遜色很多,但其實在它的 App Center 裡收藏了上百種外加套件,其中有許多殺手級應用等著你去發掘。Weebly 這樣做是為了讓使用介面更輕便,反正一般使用者不需要到這麼多複雜的功能。( 點這了解更多 Weebly 和 Wix 的差別 ) 在 2016 年以後的 Weebly 版本裡,App Center 位於 Drag & Drop 工具欄的最下方,如下圖。本文將為你解說 App Center 裡的殺手級應用。 App Center 將所有外加套件歸類成四種。如上圖所示,但我個人認為這樣的分類其實不清楚,反而找不到許多功能強大的套件。如果你已經有鎖定的第三方 App,建議直接輸入關鍵字搜尋。以下是我用過,且相當推薦的套件: - Counter - Countdown Timer - Powr Countdown - FAQ - PinPoll - Powr Hit Counter - Price Chart - Tab - Team Card 如果你有注意到,Powr 推出了許多非常方便的套件。Powr 是個在推出第三方網頁應用上非常有名氣的公司,他除了在 Weebly,也在 WordPress上推出許多應用。 App Center 裡除了有少數由 Weebly 自己開發的外掛套件之外,大部分都是第三方所寫的 App。使用第三方的外掛套件有個壞處是它們總是有 Logo,除非你打算付費來移除 Logo。不過,本專欄也設有教學讓你自己 Coding 就可以製作這些套件: <Weebly 攻略 - Hit Count 來訪人數> <Weebly 攻略 - 製作到數計時器> <Weebly 攻略 - 如何製作 Count 套件> <Weebly 攻略 - 你的產品收費表> <Weebly 攻略 - 應用 Accordion 套件> 延伸閱讀 <Weebly 攻略 - 如何成為 Weebly 開發者>
本文摘自 <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>
前言:此篇文章屬於 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>
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 特色。 |
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |