top of page
person-typing-laptop-keyboard-businessman-working-laptop-he-is-typing-messages-colleagues-

資訊集合

News & Insights

網站模板圖文介紹:禪卡占卜師/預約服務網站

已更新:2022年3月10日


這裡是禪卡占卜師(卡洛)網站的「品牌經營分析」及「網站設計重點」的完整經營設計手冊!



經營手冊目錄

一、前言

二、經營思考重點

三、主視覺&主色調設計

四、網站整體架構

五、首頁

1. 主視覺圖區

2. 關於我區

3. 產品服務區

4. 部落格文章區

5. 聯絡我區

6. 新增區塊或網頁

六、關於我頁

七、服務項目頁

八、部落格頁

九、聯絡我頁

十、手機版設計

十一、線上訊息功能

十二、SEO檢查清單認證

十三、升級網站




網站模版簡介

1. 適合對象:提供預約服務者、諮詢顧問、部落客、播客(Podcaster)等個人品牌經營者

​2. 案例產業:禪卡占卜/塔羅諮詢、心靈諮詢、居家整理師等行業

3. 網站功能:1) 個人品牌介紹、2) 服務銷售頁、3) 部落格、3) Podcast廣播區、4) 資料/檔案下載區、聯絡/訂閱區

4. 網頁選單:首頁、關於我頁、服務課程介紹頁、部落格頁、檔案下載頁、廣播節目頁、聯絡我頁,共計7頁選單


 

網站案例分析


一、前言


除了協助他人改善居家生活品質的整理師服務之外,現在也有愈來愈多人透過不同的服務來提升現代人的生活品質,不論是日常生活、工作事業等方面,我們都能尋求專業的建議和協助,每個人將自己的興趣和經歷分享出來,就能幫助到他人!


禪卡占卜師就是透過「牌卡工具」與「對談諮詢」來解決客戶的生活困擾,是非常樂於幫助他人的一群人!



 

二、經營思考重點


與整理師相同,禪卡占卜諮詢師要賣的產品也是「個人的服務」,必須解決客戶「生活各方面的困擾與問題」,甚至比居家整理師的範圍更廣泛,因此,如何讓一個潛在客戶可以「信任」你的服務可以解決他的問題,並實際向你預約服務,就是架設網站與經營品牌的思考重點!


當然,除了禪卡占卜諮詢師之外,只要你的產品是「無形的服務、諮詢類服務」,為了解決特定的客戶問題而提供的專業服務都能這樣思考品牌的經營方向,例如,軟裝師、心理諮商師、塔羅諮詢師、理財規劃師等等行業。



如何讓客戶產生信任感?

1. 一定要定期撰寫「部落格文章」、文字必須特別親切!


要能說服客戶你具備一定的專業、引起興趣來預約服務,我們需要透過圖文來說明,而且文章的內容一定要能夠讓「讀者有所收穫」,例如,你可以分享自己透過牌卡體驗出的人生哲理、如何自我成長、如何定義成功、如何排解孤獨、自己獨特的修行方法,最好條理分明地提供「步驟」、「作法」等具體方法,讓讀者能夠跟著學習!


一旦讀者能夠透過文章中所教導的內容,實際改善自己的生活品質,他就會對你產生信賴感,未來如果遇到更大的問題、有了專業服務的需求,他就會來找你預約了!或者,覺得你說得很有道理,但自己學習或生活遇到困難,就會馬上跟你預約服務了!



甚至,在字裡行間當中,你還要展示親切又專業的口吻,居家整理師還能夠透過整理前後的對比照片來說服客戶自己擁有實力,但由於占卜諮詢師幾乎只是透過「對談諮詢」來提供服務,因此如何說服客戶自己能夠講得好、聽起來舒服,進而獲得高評價,文字使用非常地重要


再者,由於諮詢師或顧問並無實體的成果可以發表,不像攝影師、插畫師、整理師可以有作品集,因此撰寫文章就顯得更為重要了!


如果初期可以先找一些親好好友來練習,將諮詢過程完整地紀錄下來,例如先清楚描述客戶的困擾、情緒集簡單的背景,再說明你是如何解決他的問題的,甚至觀察到對方很緊張、情緒很低落,因此還調整了不同的溝通方式來跟他說明、讓對方更能接受,有系統地呈現這些感性的過程,如果讀者愈清楚你的服務方式,就會愈放心地向你預約服務!


人最愛聽故事了,如果能夠好好發揮這一塊優勢,長期以往一定會有回報的!



新手個人品牌最大的問題就是,自己知道自己很厲害,但卻忘記「別人是不知道的」,往往把預約服務表單做出來、開了價格之後,放上幾張自己排卡的照片,就以為自己會接到案子了;或者,文章只是分享自己的日常記錄,例如,今天來到XX咖啡廳提供諮詢占卜,然後搭配一張喝咖啡和牌卡入境的照片,這樣會比較難以吸引讀者持續追蹤下去!


因此,我們必須撰寫部落格文章,並且定期分享,持續與潛在客戶溝通,客戶才不會忘記你是專業的!


另外,案例或作品集也可以展現專業度提升信任感,但如果你是新手,還沒有經典的案例可以分享,定期撰寫部落格文章絕對是最重要的事情!通常我們看到的專業網站都會有部落格文章,而且不少,會被分享的內容也往往都是有價值、可學習的文章,對吧!


當然「影片」也是非常棒的內容素材,但對新手來說,製作影片的門檻比較高,如果能夠先從寫文章開始,就能會未來撰寫影片腳本打下基礎!



2. 一定要放上你的「專業大頭照」!


我們不一定要穿著套裝拍攝正式的形象照,但我們需要提供一個讓讀者留下親切印象的大頭照,例如,你主打單身/獨居的客群、愛動物人士(就跟自己很像的客群),你就能放上一張相似概念的照片(如下圖),你的照片就會吸引相對應的客群,一旦目標客群聚焦了,你所提供的服務類型、部落格文章的內容類型都能夠更加地聚焦!


再者,如果我們要和一個陌生人見面諮詢,可能是在客戶家或是在諮詢師的工作室等等,基本上我們會希望先知道來的人長什麼樣子,是不是感覺很和善、親切,我們才會比較願意跟他見面吧!



3. 要有自己的獨特風格


不同於公司形象,經營個人品牌、個人服務,一定要有自己的獨特風格,客戶會選擇你的產品或服務,就是因為「欣賞你、喜歡你、信任你」,因為我們無法讓所有人都喜歡自己,我們需要去找到一群欣賞我們獨特風格的客群,而且也只有這個客群能夠為你帶來真正的收入


新手一開始是很難去找到自己專屬的目標客群的,但我們能夠透過文章、大頭照、網站的風格設計來吸引相對的客群,逐漸摸索出客群的樣貌,通常這個樣貌就是「你自己」!


一般占卜師可能什麼都能問,但什麼都可以情況之下就是「沒有辨識度」,讀者看過就忘了,以禪卡占卜師卡洛的網站模版為例,品牌是結合居家生活和心靈生活,從生活環境的空間切入來解決心靈方面的問題,那麼一個有生活空間凌亂、心靈也凌亂的客戶可能就會找上門!



再者,如果又加上的單身、愛貓的特殊設定,也許已婚人士或不愛動物的人可能不會找上門,但相似的客戶一旦找上門,共同的話題與興趣就會讓整個服務流程變得更加順暢,客戶滿意度也會大大的提升!


 

三、主視覺&主色調設計


網站營造出來的感覺或氛圍,會立即決定怎麼樣的目標客群會被吸引,因此我們很建議大家可以先從「想要給客戶什麼樣的感覺」先進行思考!


那這個「想要給客戶什麼樣的感覺」必須從自己身上找,以這個禪卡占卜師卡洛的案例來說,他喜歡「居家米色溫馨的感覺」、很喜歡「貓咪」,剛好牌卡工具是米白色的,家裡的沙發、牆壁和整體空間色調都是米色的,甚至剛好自己的貓咪也是米白色的,自己也喜歡穿米白色的衣服,那麼在設計網站整體色調時,主色調使用「米色」就會比較好操作!


另外,身為一個專業的諮詢師,也希望呈現給客戶專業的感覺,搭配一個比較深色的藍色就能傳遞這樣的形象,以這個案例來說,它就是米色為主色,佔據大部分的視覺,深藍色為輔色,出現在文字、按鈕和頁尾的用色上


未來在選擇商用圖庫的圖片時,也能盡量去挑選米白色較多的圖片,如此放在網站上就會相互呼應、風格就會一致!



所以大家可以根據自己的專業服務中常出現的顏色區抓主色調,例如整理師就會有自己的居家照片(家具軟裝的顏色)、塔羅牌諮詢師會有卡牌(卡牌占卜道具的顏色)、心理諮詢師或醫生會有白袍或其他制服(工作服的顏色)等等,建議都要整體一起思考!


新手在設計網站的時候,常出現的問題就是網站風格和圖片風格不一致,明明喜歡米色,但是卻找了紅色的花朵圖片、藍色的家具圖片等等,當風格不一致的時候會造成讀者是覺得不舒服,他可能就會馬上離開網站了,更不可能有機會去查看我們的服務內容或文章了!


購買網站模版後,如何進行網站微調?

調整「主色調」


當你決定主色調之後,或是挑選了喜歡的網站模版了,想要進一步調整主色調,你可以到Wix的編輯器,點擊左方工具列的「主題管理員」(如下圖)。



你可以在「編輯您的主題顏色」區域調整網站的主色調(如下圖),「顏色1」通常Wix都會預設為黑灰白色調,黑灰白是每個網站的基本色,因此顏色1可以不更動,「顏色2」就是我們的「主色調」,這個網站案例的主色調是米色(顏色2),搭配藍色為副色調(顏色3)。


請記得一旦主色調做了更動,網站上的圖片有可能必須重新調整、更換,主色調和圖片必須風格一致,才不會讓讀者視覺上感到不舒服喔!



改顏色時點擊前方水滴的圖示,你可以在跳出的小視窗中打上你要的色號(如下圖),網站上的色號必須要固定,即使同是綠色,青綠、亮綠、藍綠風格完全都不同,因此必須注意!



當你在網路上找到一個喜歡的顏色,要怎麼知道它的色號呢?


建議可以下載Google擴充功能ColorZilla,下載完成之後,它會被新增到網頁的右上方(如下圖),當你看到某個網頁中的某個顏色很喜歡,你只要點擊ColorZilla,然後把滑鼠移到想要的顏色上,再點擊一下,色號就會被複製起來了!



根據你的滑鼠移到不同的區塊,上方的黑色工具列會變換對應的顏色及其色號(如下圖),選到想要的區域後,再點擊一下,色號就會被複製起來了,然後你再到主題管理員,將顏色2的色號改掉就可以了!



Wix會將整個網站的主色調一次調整好,但建議大家還是要到網站的每一頁去檢查一下,看看是否每個區塊的對應顏色都是你所想要的,你也可以針對幾個特定的區塊做做單獨顏色的調整,每個區塊或元素都可以點擊「設計 (Design)」(毛筆的圖示)進行顏色的調整。


 


四、網站整體架構


一個個人品牌的網站需要基本的五大頁面,分別是「首頁、關於我、商品/服務頁、內容頁以及聯絡頁」,缺一不可。


在這個禪卡占卜師卡洛的網站模版案例中,我們設計的選單分別是「首頁、關於卡洛、服務與課程、心靈部落格、心靈處方箋、卡洛電台、合作洽詢」,相對應的內容除了基本五頁的「首頁、關於我、服務頁、文章頁、聯絡頁」之外,另外還有「檔案頁(心靈處方箋)、Podcast廣播頁(卡洛電台)」。



新手經營者可以先從基本五大頁面開始,隨著你的品牌經營地愈來愈成熟,可以在新增更多的網頁,例如影片頁、廣播頁(Podcast)、檔案頁、更多的服務產品頁。


許多心靈老師也會分享一些心靈小語、心靈圖文或生活處方箋的小手冊或PDF檔,因此我們也設計了這一頁網頁(心靈處方箋),讓你可以上傳一些自己的檔案或文件;另外,許多心靈老師也會透過溫柔的聲音/音頻來分享心靈生活,因此我們也設計了Podcast廣播頁(卡洛電台),讓大家自行運用!



如果你還沒有這些內容,你可以暫時將該頁面隱藏起來,等到自己的素材夠多了,也開始經營音頻節目,再公開分享喔!一階段一階段、一步一腳印地經營自己的個人品牌吧!


等到你有自己的Podcast素材之後,你只要點擊「設定」,再點擊「連線RSS」即可,這裡就會自動同步你的音頻內容囉!Wix是不是很棒,哈!



同樣心靈處方箋的檔案頁,可以在網站上點擊「+檔案」直接上傳即可,非常直覺的操作方式!



在設計選單名稱的時候,可以重新命名為較為吸引人的文字,例如「關於我」可以改為「關於占卜師」或「關於卡洛」等等,將選單調整為有個人品牌風格的意象、「服務項目」改為「居家占卜服務」或「人生占卜諮詢」等等、「部落格」改為「心靈部落格」、「療癒文章」等等,展現個人品牌風格、同時又能吸引用戶點擊選單!


當然,也要避免太多重複的文字,例如,關於心靈導師、心靈諮詢、心靈文章、心靈電台等,都是使用一樣的字(心靈)的話反而又感覺太過了,因此需要檢視評估看看!


購買網站模版後,如何進行網站微調?

記得在頁首的部分要先調整「品牌名稱」和「選單文字」(如下圖),你要先思考自己的文字內容,然後再進入Wix編輯器進行編輯。



記得把「卡洛的禪卡諮詢」改成自己的名稱,頁首左上角的「Carol Wang」也要記得改成自己的名稱,例如「艾咪的禪卡」諮詢改為「維尼的塔羅」諮詢、「Carol Wang」改成「Winnie Chu」,品牌名稱盡量設計地好記又簡單,又能馬上識別你是在幹嘛的。


在Wix的編輯器中,「點擊文字兩下」就能修改了,就跟Word打字一樣簡單。



選單的文字要到左方工具列的「網站選單」,點擊每個網頁的「重新命名」,就能修改選單文字囉!你也可以在這裡切換每一頁網頁!



另外,也要記得把右上方的「社群連結」改成自己的連結,點擊「社群工具列」,然後再點擊「設定社群連結」來更換社群網址。



請選取每一個社群圖示,並在右下方點擊連結圖示,重新貼上你的社群連結,如果你需要新增社群圖示,可以點擊上方橘色按鈕「+ 新增圖示」來新增社群




 

五、首頁


首頁的目的是「引起讀者的目光」,進而帶領讀者到其他的選單頁面做更進一步的瞭解,有更多的瞭解才有更高成交的機會!


1. 主視覺圖區


首頁的最上方就是「主視覺圖區」,專業又有質感的主視覺圖會帶動讀者願意往下滑動網頁,除了上方的頁首「清楚的品牌名稱」和「吸引人的選單」之外,必須搭配一張吸睛且符合品牌風格的圖片。


禪卡占卜師卡洛的網站模版之主視覺圖區設計,選擇的就是「大頭照」,個人大頭照其實是最吸引讀者目光的,保證讀者一定會往下滑(XD)!




2. 關於我區

個人品牌的網站非常強調「個人」特色,如果你的主視覺圖區是一張意象圖,那我們強烈建議大家在首頁的「關於我區」一定要放上自己的大頭照,盡快讓讀者知道你長什麼樣子,可以緊接著在主視覺圖區的下方出現,俗話說「見面三分情」,看到你本人的照片,也會增加讀者繼續瀏覽網頁的興趣


你也可以自己去觀察,是不是有放創業家本人的照片的網站會比較吸引你呢?



如果你在主視覺圖區已經放上一張大頭照了,關於我區就可以再放上另一張大頭照,兩張照片可以不同,幫助讀者更加認識你!




首頁的關於我區的字數盡量不要太多,首頁是提供讀者快速瀏覽、快速瞭解這個網站在幹嘛的地方,太多文字內容會讓讀者卻步,將重點簡介出來之後,只要搭配一個行動呼籲按鈕連結至「關於我頁」(這個網站案例是「關於卡洛」),在關於我頁的地方再詳細說明就好,當讀者點擊這個按鈕,也代表他願意花更多的時間瞭解你。


購買網站模版後,如何進行網站微調?

由於我們已經將該網站模版適當的版面大小控制好了,而該網站放置的文字空間是「6行」,建議大家放置約6~8行的文字內容,不要太多也不要太少,以維持版面美感。


記得要把文字改成自己的版本,在Wix編輯器中修改文字非常簡單,只要「點擊文字區兩下」就可以開始打字了,就跟Word打字一樣簡單。



另外,也要記得將大頭照圖片改成自己的,調整該網站模版之大頭照的操作步驟說明如下:


(1) 點擊圖片區之後會出現一個工作列,再點擊「變更圖片」



(2) 點擊「圖片」之後會跳出一個大視窗,你可以點擊「上傳媒體」,然後選擇你電腦當中的檔案來上傳。



(3) 點擊「從電腦上傳」,就會跳出電腦的檔案資料夾視窗,你可以在這裡選擇你的電腦中的檔案;你也可以從其他的社群媒體(如Facebook、Instagram、Google Drive等)匯入圖片。



(4) 你所上傳的所有檔案會被放在「網站檔案」區,隨時都能存取,點選你要的檔案之後,再點擊右下方的按鈕「選擇圖片」,圖片就會被置換了!



(5) 為了有利於SEO,變更圖片之後,請再點擊「設定」,在「圖片文字」的地方輸入品牌名稱或相關的關鍵字,例如「禪卡占卜師卡洛」,每次變更圖片的時候都要記得調整喔!



恭喜你完成關於我區的設計!



3. 產品服務區


在介紹個人品牌之後,讓讀者知道你有提供什麼服務就是最重要的事情了,如果想要透過個人品牌賺取收入,我們就必須先讓讀者知道我們的產品和服務,如此一來在他認同我們的理念,或是從部落格文章中獲得有價值的免費資訊之後,他才會連想到你的收費服務


除非你只是想要單純的分享好文章、好內容,只是想要打發時間,那就可以忽略產品服務區,雖然我們比較建議大家還是可以設計一下產品服務區。




選擇不同的版面設計需要先考慮到整個網頁頁面「不同區塊的版面配置」,主視覺圖區是一個區塊、關於我區是一個區塊、產品服務區也是一個區塊,通常相鄰的區塊部會使用類似的版面配置,如此才能維持網頁的質感與活潑性!


通常主視覺圖區會是「一列一欄」的版面,亦即一張圖片橫跨整個螢幕寬度,而關於我區會是「一列兩欄」的形式,亦即一邊大頭照圖片、一邊文字說明文字,而產品服務區和文章區則可以多元設計,只要相鄰的塊版面設計不同即可。


以這個占卜師的網站模版來說,因為產品服務區的下方是「一列一欄式」的心靈小語區,橫跨整個頁面,它的上方是「一列兩欄式」的關於我區,產品服務區則是「一列五欄式」的設計,盡可能讓相鄰的版面和元件的設計不同,再加上由於上下區塊均已放置許多圖片,如果又放3~5張圖片,視覺上會比較疲勞、凌亂,因此設計了5個簡單的小圖示!


當然產品服務區也不一定只能放置產品或服務,如果你只是單純的部落客,你也可以放上你的內容主題標籤或類別,或是像這個案例占卜師卡洛的諮詢服務,也許涵蓋較大的範圍或面向,所以選擇透過這樣的設計來呈現。



購買網站模版後,如何進行網站微調?

同樣的,你只需要記得改文字和小圖示就好,文字的編輯方法與前面相同,點擊文字區兩下即可進行編輯,記得5個區域都要編輯到喔!



另外,為了版面的美感,我們會建議維持一列五欄式的設計,請你盡可能整理出自己的5個關鍵字,應該不會太難的,如果你真的想要增減欄位,點擊「帶狀圖片」的元件後會出現一個工具列,再點擊「管理欄」


選取你想要的欄位,再點擊「刪除」(垃圾桶的小圖示)就能減少欄位(如下圖),想要增加欄位就點擊「重複(複製)」,至多五欄。



小圖示的部分也可以進行調整,但如果你的關鍵字和小圖示的意象差不多,也可以不用改喔!如果需要調整,請選取你要的小圖示,工具列中請點擊「變更向量插圖」



Wix內建許多小圖示的素材,你可以在這裡重新挑選喜歡的小圖示,如果你有自己的檔案,也可以點擊「上傳媒體」,上傳自己放在電腦裡的檔案。



如果你是使用Wix內建的小圖示,你可以再進一步調整它的顏色,點擊工具列中的「設計」,盡可能將顏色調整與主色調或輔色調為一致,Wix已將主題顏色小視窗打開讓你選擇,非常地方便;如果你有自己想要的顏色,也可以點擊「新增顏色」直接貼上色號。



另外,補充說明在「變更向量插圖」時,我們是不能選取「圖片」的,因為他們不是一樣的元件,一個是向量插圖、一個是圖片,如果希望在這裡放上圖片,你可以很直覺地直接把小圖示右鍵刪除掉,再複製一個圖片元件進來就好。


小圖示或圖片的的大小都可以點擊四周的小圈圈進行拖拉,或是使用右方的工具列,在「大小 / 像素」輸入寬和高的數值。