本文參考自 <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 分享功能就非常重要了。
Comments
本文大部分摘自於 <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>
相比 Wix 或是 Squarespace , Weebly 最大的優勢就是它允許你修改網站的程式碼 (了解 Wix, Weebly, 和 Squarespace 的差別)。這讓 Weebly 做出來的網站有無限的可能,只要你會一些基本的 Html, CSS, 和 JavaScript 的話。 Weebly 除了提供直接嵌入 HTML 的套件 (如下圖 1),更允許你直接進入後台修改程式碼。如下圖 2 所示, Theme > HTML,就可以在後台修改程式碼了。 本文將會專注探討如何善用 Weebly 後台程式修改的功能。這有兩種方式:一種是使用別人已經寫好的 code,另一種是自己來寫 code。讓我們先聊聊第一種方法。 第一種方法:Weebly in 3 Mins,Webnots 和 Weebly Tricks 有許多已經寫好的 Weebly 套件。只要照著這些網站的教學,你可以在不用自己寫 code 的情況下修改網站。這些網站提供很多連你也沒想過的網站設計和功能,像是固定按鈕,影片背景,非常適合訓練自己的前端設計思維。 第二種方法:自己來寫 code。自己架網站,總是會遇到只有自己網站才獨有的特色或功能,這時候得自己寫 code 了。如圖 3,我們先為你一一介紹 Weebly 程式後台的功能。
1. Tool Bar (功能列,從左至右)
2. Theme Name (主題名稱) 你可以在 Theme Name 上點擊兩下來更改你的主題名稱。每當你在你的 Weebly 網站上進行程式修改,Weebly 會將你的更新儲存在另一個主題。這樣你還是可以保有原生的主題。 3. Header Type (HTML 模板) 你的網站所使用的 html 模板全都放在 Header。所有 Weebly 網站使用的 html 模板基本就是這三種: header, no-header, 和 splash,如下圖。 4. Styles (CSS 模板) 所有你的網頁使用的 CSS (Style Sheets) 都會出現在 styles 中的 main.less 或是 main_style.css 檔案裡。要修改 CSS 也是從這邊修改。順帶一提, 2016 年以後出現的 Weebly 主題都是使用 Less,它是 CSS 的更高階語言。所謂高階,其實也就是簡化在 CSS 上重複的步驟。 延伸閱讀 <如何修改 CSS> < Less > 5. Partials (局部模板) Partials 裡集合了所有拆開的 html 組件,這些組件在許多 html 模板上被重複使用,像是 blog, ecommerce,navigation,membership,search box。 6. Assets (有使用的資源) Assets 集結了你的網站會使用的資源,像是圖片,scripts (也就是 javascript),如下圖。你可以將圖片儲存在 Assets 裡 ; 任何存在 Assets 的圖片都會被賦予一個 url,看延伸閱讀來了解如何製作圖片連結。另外,你可以將 javascripts 存在 Assets,再用連結從 html 提取,請看延伸閱讀。 延伸閱讀:<如何製作圖片連結> <如何嵌入 Javascript> 7. Export Theme (輸出主題) 另外,相比 Wix 或是 Squarespace,Wix 的另一個優勢就是它允許你將整個網站的程式碼輸出並下載下來。如果你想要將你的主題備份起來,以備不時之需,或是製作主題給客戶,這功能是相當重要 (注意備份主題和備份網站是不同的,如果你要備份整個網站,請看 <如何備份整個網站> )。看延伸閱讀來了解如何輸出主題。 延伸閱讀:<輸入和輸出主題> 8. Coding Area (程式介面) 這裡就是你瀏覽和修改程式碼的地方了。 9. Preview (預覽頁面) 在 Coding Area 更新的程式碼都會直接反應在 Preview。如果你在 tool bar 上點選 auto-preview,每一次的程式更改都會引起 Preview 自動更新。 10. Full Screen Mode (全螢幕) 點選 Full Screen Mode 可以全螢幕瀏覽 Preview。 11. Save (儲存) 這大概是本篇文章裡最重要的功能了。每次的程式更改後,絕對不能忘記按下儲存鍵。
本文摘自於 <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。
本文摘自 <Hank Chan 的部落格>
Favicon 是每個網頁都應該具備的基本配備,它在 safari 是出現在 address bar 的最左邊 (如下圖左所示),在 Chrome 則是出現在 tab 的左邊 (如下圖右所示)。有 favicon 的網頁看起來更專業,而且也讓使用者更容易辨識網頁的品牌。
1. 首先,讓我們先製作你網頁專屬的 favicon。準備好你網站 logo 的圖檔 (jpg, png 都行),然後把圖片上傳到 http://www.favicon-generator.org (你也可以使用其他製作 favicon 的網站)。這些網站將會幫你做好 favicon 專用的 (16px * 16px) ico 圖檔。將下載下來的 ico 檔案上傳到 Weebly 的 theme page (下圖 1, 圖 2, 圖 3)。
進入 theme page 後,透過左下方的 assets 上傳你的 ico 圖檔。
上傳後的 ico 圖檔可能就長得像這樣:
最後到你的 Settings >> SEO >> Header Code,把以下的 code 貼上去,再按 save (記得將下面 ico 圖檔的連結置換成你的連結)。 更新你的 Weebly 網站後,就大功告成啦!
摘自: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 的行動瀏覽器在預設上都不支援網頁上的影片背景。所以在設計網站時,也要同時思考如何針對手機的限制做調整。
全文摘自 <Hank Chan's Blog>
前言:Weebly 進階版會使用到一些 Html 和 CSS 的基本技巧。如果你沒有這些網頁的基本背景也沒關係,照著這個文章一步一步做也能達陣。 想必各位使用過 Weebly 的人都知道,Weebly 免費版雖然方便 ,三分鐘內就能快速架站 (不了解如何三分鐘內架站的人,建議參考我的 Weebly in 3 Minutes 網站)。但也因為免費,網站上每個頁面都有 Weebly 的原生廣告,寫著 "Create a Free Website with Weebly" 或是 "Proudly Powered by Weebly"。這些廣告通常都置放在網站的最底下,以頁腳 (footer) 的形式存在。而你也只能升級你的 Weebly 網站到任何一個付費方案才能擺脫廣告。
好消息是,本篇文章將會教你如何擺脫這擾人的 Weebly 廣告。首先,進入到 Theme,然後進到左下角的 "編輯 HTML/CSS"。
接著你會看到這一排 HTML 的程式碼。
我們首先會先針對 landing.html,在跟著這篇文章操作完一次後,你可以如法炮製用一樣的方法在 no-header.html 還有其他 html 模板上。 在這個不是很長的 HTML 程式碼裡,你可以在底端找到負責 Footer 的程式碼。它應該長得像這樣
或是這樣
又或是這樣
但無論你所看到的 Footer 版本是那三樣中的任何一種,他們都是 Weebly 在免費版用戶裡置入他們原生廣告的手段。你只需要將下列第一行的程式碼 style="visibility:hidden" 加入你的 footer div 裡面,如下列第三行程式碼一樣,footer 就會消失了
但有時候這樣的做法會留下後遺症,在有些網頁上消失的 Weebly footer 會被難看的白色背景所取代。如果你想要徹底擺脫 footer 的話,可以在原本的 footer div 裡加上 style="display:none" ,像是這樣:
這樣 footer 就會完整地消失了 Hurray~!
題外話:另外如果你想要自己加上你想要的 footer,可以在 Weebly 本來的 footer 程式碼上面加上以下第一到第七行的程式碼
只要在另外稍微修改一下你要的類別,連結,和年份,就變成你網頁專屬的 footer 囉,如下圖所示~
p.s. 但切記不要直接刪除你的 Weebly footer code,之後如果使用付費版本還想要用 Weebly 原生的 footer 功能將會很麻煩
全文摘自 <Hank Chan's Blog> Weebly 其實有個功能,雖然不廣為人知,但是相當好用。以前對於一個團隊要共同製作和管理一個網站時,往往很頭痛要如何讓大家共同編輯。如果創立一個公共帳號,把密碼帳號公開給大家,又感覺可能被盜很危險。這時候 Weebly 有個功能就不得不跟大家分享了。 Weebly 允許你開放網站的編輯權限 (Editor) 給其他人使用,從 Setting > Editors 進入就可以看到加入共同編輯者的頁面。只要 email 邀請給你想要一起編輯的人,就可以了。 如果你被人邀請共同編輯網站時,只要從你收到的 email 中點擊接受邀請,該網站就會出現在你的 Weebly 首頁上 Sites I contribute to 部分。 對於要開放網站編輯權限的人來說,Weebly 同時也給予你三種開放編輯的權限:全面開放 (Admin), 部分頁面開放 (Author), 不能編輯但開放瀏覽 (Dashboard Only)。對於部分頁面開放的好處是,你可以選擇部分頁面讓他人編輯,但同時又不用讓你整個網站開放給他人,造成有些頁面容易不小心被其他人動到。 不過 Weebly 雖然讓你開放編輯網站的權限,但仍然有些功能是被限制住,無法讓受邀者控制。如果要付費升級 Weebly 網站,只有該網站的擁有人 (owner) 才有辦法,受邀者無論如何是沒辦法幫該網站付費。 總體而言, Weebly 對於團隊管理網站是想的相當面面俱到。即便你有事不再公司內,或是人在國外,都可以毫無障礙的共同編輯你們的 Weebly 網站。
回到攻略首頁
全文摘自 <Hank Chan's Blog>
Weebly 提供了非常完整的購物車程式,除了提供金流外,也提供物流服務 (不過僅限美國本土...)。使用他們的網路上店系統其實管理你的商品相當方便,他們甚至也有 coupon code 功能,來增加消費者對你產品的黏著度。
不過唯一的缺點就是 Weebly 主要的金流系統到現在都還不能接受賣家 新台幣 收款,不曉的是不是因為與台灣嚴格的金管會有關?Weebly 的金流系統目前已經可以接受 美金,歐元,英鎊等主要貨幣,甚至可以接受日圓,新加坡幣,澳幣,馬來西亞令吉等等。
除了 Weebly 不接受台幣的金流系統,你當然是可以選擇使用 Weebly 付費版 (USD 30/month) 來開通 Paypal 來接受付款,不過 Paypal 因為是美國公司,台灣的用戶必須支付相對教高昂的國際費率,至少都要從 3.4% 起跳,除非你的金額龐大到可以使用他們的 2.9% 優惠方案,不過相比下來還是相當昂貴。還不用說你每個月要向 Weebly 繳交將近 1000 新台幣的費用。
那我們有其他的方法嗎?
歐付寶 (All Pay) 是一個想當不錯的選擇,不過在台灣還沒有獲得相當的知名度。目前台灣主要的小型賣家都習慣直接在 "Yahoo! 奇摩商城" 或 "露天拍賣" 上販售,使用的金流系統也都是像露天轄下的 "支付連" 一樣,比較少接觸像歐付寶這樣純粹的獨立金流系統。而大型公司又因為直接與信用卡金流公司合作,所以沒有在用市場上的金流公司。但對於那些夾在中間,不上不下的,想要好好經營自己線上買賣網站的人來說,歐付寶就變得相當好用了。
如何使用歐付寶收款呢?
將歐付寶的付款連結放上你的 Weebly 網站非常簡單,首先在歐付寶建立帳戶後進入你的 "帳戶總覽"
接著,進入 "新增一址付"
填寫好你的商品資料後,將他給你的購買連結複製
複製後,就可以用工具列中的 <Embed Code> 直接貼在你Weebly 網站上的商品頁啰~
大功告成,之後每當消費者點入你的連結後,系統就會自動轉到付款畫面啰~
最後附上: 6/26 (四) 我在創業酒吧 向大家演講 Weebly 2.0 的活動照片,下次有機會歡迎大家在來聆聽 Weebly 的主題演講
Post by iiiNNO Taiwan.
全文摘自 <Hank Chan's Blog> 雖然會寫程式,會架網站的人數近幾年來已經越來越多,但對於大多數沒有接觸過寫程式的人來說,這仍然是一片深海領域,時常想著假日有空就會去學它,但很常裹足不前。 對於像我們 (non-coder) 這樣想學架個自己的特色網站,或是自己專業的部落格,或是自己的網路小舖,又或是幫中小商家架網站,以前通常不是去隨意窩(Xuite),就是去 pchome 用他們提供的網站,再加上一點點的個人化,就心滿意足了。 事實上,我們現在有比這個更好的選項 : Weebly Weebly 可以讓你在完全不需要寫任何 code 的情況下,做出你自己的網站。他們還提供三種類型的網站供你選擇,Site, Blog, Store,滿足網友們各種不同的需求。 除此之外, Weebly 非常重視網站設計,他甚至提供數十種 template 供大家選擇最適合你的網站風格 (當然你要還是不滿意他們提供的 template, 你們也可以親自寫 html and CSS code 上傳你自己的風格) 選擇好你的 template 就可以去編輯你人生第一個網站啰 在編輯上,Weebly 有相當強的工具列 (請看上圖左邊),基本上你想得到的東西上面都有,像是圖片嵌入,文字,地圖,聯絡欄。不過因為篇幅有限,只能請各位網友自己去體驗了。 最後就是令人興奮的 Publish 了。在 Publish 網頁之前, Weebly 會問你是否要用他們給你的域名,又或是你自己另外註冊的域名。免費版的允許你可以使用 Weebly 的 subdomain name ,(i.e. http://rigolettomendoza.weebly.com),或是直接在他們的網站上購買 國際域名;而付費版的才能允許你使用你自己另外在別地方註冊的域名 (i.e. http://abcdefg.com.cn)。升級版的費用有許多種,像是 Starter, Pro 還有 Business,你可以選擇最便宜的方案: 6 個月 50 美金。 選好你要的方案,無論是免費或付費,接著按 Publish 就大功告成啦 ~♫ 總結我的使用感想,我認為網站架設其實已經相當簡單,重點是要如何架出有內容,有設計,又有實際用處的網站。這才是真正考驗的開始。 所以我這邊也放上我用 Weebly 幫我家傳統產業架設的網站 Amherb ,當做一個實際案例給大家參考。 |
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |