2021-05-01|閱讀時間 ‧ 約 39 分鐘

個人品牌經營設計手冊_攝影師吳約翰/預約服務網站

這裡是攝影師(吳約翰)網站的「品牌經營分析」及「網站設計重點」的完整經營設計手冊!

網站模版簡介
  1. 適合對象:提供預約服務/接案者、自由業、部落客等個人品牌經營者
  2. ​案例產業:攝影師、插畫家、藝術家、建築/室內設計師等有作品集的個人品牌經營者
  3. 網站功能:1) 產品/服務列表、2) 個人品牌介紹頁、3) 服務銷售頁、4) 部落格頁、5) 作品頁、6) 聯絡洽談區
  4. 網頁選單:首頁、關於我頁、預約服務頁、作品集頁 (另有4個子選單分類不同類型作品集)、部落格頁、聯絡我頁,共計6頁選單

網站案例分析

一、前言
攝影師、插畫師、畫家、雕刻家等藝術家一直都是我們超佩服的人,像行銷、管理和架設網站都是屬於只要線上學習、蒐集資料幾乎人人都能夠學會不少知識,但是藝術家就需要「天分」,沒天分的人怎麼學都學不來 (XD),而且就算有天分、有興趣的人投入藝術領域,他們仍需要花很長的一段時間才能逐漸累積自己獨特的好作品
每次聽到一個藝術家說,這個作品他花了3年、N年才完成就覺得也太強、神人快拜!我們做一個網站,最快3天就做好了,最長大概也2~3個月就完成了,要全力投入一像作品長達這麼久的時間需要多高的專注力啊!
以攝影師的領域來說,雖然現在的相機設備已經愈來愈好,甚至手機的拍照攝影功能也愈來愈強,但沒有天分、又沒有努力的人和專業攝影師拍出來的就是完全兩個世界,所以我們也特別鼓勵大家去找到自己真正的最高興奮,這樣就會事半功倍!

二、經營思考重點
攝影師的工作可以幫人攝影(幫一般消費者或企業形象/產品照等),或是辦展收門票費,也是一門需要面對客戶的工作
居家整理師禪卡占卜諮詢師要賣的產品也是「個人的服務」,必須讓客戶「相信自己具有專業攝影的能力」,甚至讓客戶「相信自己能夠拍出他想要的感覺」,因此,如何讓一個潛在客戶可以「信任」你的服務可以解決他的問題,並實際向你預約服務,就是架設網站與經營品牌的思考重點!
當然,除了攝影師之外,只要你的產品是「無形的服務、體驗藝術的服務」,為了解決特定的客戶問題而提供的專業服務,或是提供作品成果給對方都能這樣思考品牌的經營方向,例如,攝影師、插畫家、藝術家、建築/室內設計師等有作品集的個人品牌經營者。
當然攝影師也能線上販賣自己的圖庫,現在很多的商用圖庫都是付費的,也是被動收入的一種商業模式,像是我們的網站販售自己所設計的樣板網站也是類似的例子,並不一定侷限於提供專業服務。
如何讓客戶產生信任感?

1. 一定要定期撰寫「部落格文章」、文字必須特別親切!
即使是純粹藝術的創作者,我們仍然建議可以撰寫部落格,藝術有時候會距離一般讀者有一點遙遠,如果我們能透過一些文字補助來傳遞我們創作的理念,就能讓讀者與我們的作品更靠近,這也是為什麼我們會為了每一個樣版網站撰寫一篇「經營設計手冊」的原因之一。
如果你的主要收入來源是提供專業攝影服務,為了要能說服客戶你具備一定的專業、引起興趣來預約服務,我們就更需要透過圖文來介紹我們的作品,而且文章的內容要傳遞出自己對攝影作品的用心,甚至過往與客戶拍攝過程中的點滴都能記錄下來,那麼潛在客戶就能對自己產生信心!
查看案例網站
當然攝影師的網站非常重視「作品集」的區塊,我們需要能快速讓讀者查看我們作品的地方,讓讀者在快速瀏覽作品產生一點讚賞和興趣之後,再透過部落格的文字加深對我們的認識與信任感,花時間經營內容是絕對值得的。
查看案例網站
新手個人品牌最大的問題就是,自己知道自己很厲害,但卻忘記「別人是不知道的」,往往把自己一堆自豪的照片放到網站上去之後,就以為自己會接到案子了;或者,FB粉專貼文或文章只是分享自己拍的一堆照片,如果沒有搭配文字,往往難以吸引讀者持續追蹤下去!
而且,如果我們有持續撰寫部落格文章,並且定期分享,持續與潛在客戶溝通,客戶就不會忘記我們這個專業攝影師,哪一天他有攝影的需求,就會想到我們!(如何經營部落格可以參考這篇文章 (必看!):個人品牌的靈魂在於「你的理念、你的想法」,透過文章內容找到認同你的目標客群!)
另外,如果你是新手,還沒有經典的攝影作品集可以分享的話,那麼定期撰寫部落格文章絕對是最重要的事情!通常我們看到的專業網站都會有部落格文章,而且不少,會被分享的內容也往往都是有價值、可學習的文章,對吧!
當然「影片」也是非常棒的內容素材,但對新手來說,製作影片的門檻比較高,如果能夠先從寫文章開始,就能會未來撰寫影片腳本打下基礎!

2. 一定要放上你的「專業大頭照」!
我們不一定要穿套裝拍攝正式的形象照,但我們需要提供一個讓讀者留下一定印象的大頭照,例如,你的攝影作品主打個性、極簡、俐落、黑色調的風格,那麼你的作品集甚至是個人大頭貼都能應用這樣的風格,不但這是你偏好的攝影路線,同時你的照片也會吸引相對應的客群,一旦目標客群聚焦了,你所提供的服務類型、部落格文章的內容類型都能夠更加地聚焦!
以攝影作品主打個性、極簡、俐落、黑色調的風格為例,搞不好也會吸引到極簡風格的科技類產品,例如耳機、皮件,或是極簡風格的時尚產業、穿搭模特兒,增加商業攝影的收入機會,也比較不會吸引到你不是很想拍攝的XX風格,卻又為了生計要勉強自己!
這就選定一個風格的好處,一開始千萬不要想要什麼都接,認為自己只是新手,什麼都包容、作品集五花八門,而是要開始找出自己的原則與風格,才能建立有價值的品牌!我們當然可以一邊行動、一邊調整,但是一定要先聚焦!
尤其,你是提供專業服務的個人品牌,那麼提供潛在客戶一個好感的印象也是很重要的,如果我們提供服務時又需要與客戶面對面見面的時候,要和一個陌生人見面諮詢、互動,地點可能是在客戶家或是在攝影師的工作室等等,基本上我們會希望先知道來的人長什麼樣子,是不是感覺很和善、親切,我們才會比較願意跟他見面吧!
查看例網站

3. 要有自己的獨特風格
不同於公司形象,經營個人品牌、個人服務,一定要有自己的獨特風格,客戶會選擇你的產品或服務,就是因為「欣賞你、喜歡你、信任你」,因為我們無法讓所有人都喜歡自己,我們需要去找到一群欣賞我們獨特風格的客群,而且也只有這個客群能夠為你帶來真正的收入
新手一開始是很難去找到自己專屬的目標客群的,但我們能夠透過文章、大頭照、網站的風格設計來吸引相對的客群,逐漸摸索出客群的樣貌,通常這個樣貌就是「你自己」!
如同前面提到的,如果你剛好喜歡極簡俐落風格、黑色調,酷酷帥帥的感覺,那就這麼開始經營吧!從「建立網站」開始,我們最能快速地認識這一個個人品牌是不是能和我們產生共鳴,大家可以到我們的網站模版商店上去觀察,每一個網站應該都會帶給你對於這個品牌不同的感受,而我們如何和潛在客戶或讀者開始建立關係,就從這個細微的感受開始了!
查看案例網站
以我們自己為例,在分享極簡生活和整理生活的時候,我們著重在「整理思維」,如何透過一套思維方式來整理和檢視自己的物品和生活,反而不太分享摺衣方法、收納用品等,網站風格的選擇方面,比起溫馨活潑的居家風格,我們偏好的是簡單俐落的風格。這樣也會與其他整理師區分出不同的客群。過往的經驗,會被我們吸引的客群都是重視邏輯性和條理性的人、年輕上班族、單身女性主管、喜歡極簡的人等等。
以Wix網站玩家的網站來說,比起強調網站的功能多厲害、多快、SEO有多強、我們的架站經驗有多豐富和專業,我們更想要傳遞的想法是,每個人都能分享自己的經驗,並且有利於他人,而且一定會幫助得到人的!(我們長到那麼大,最終才發現人生真正的快樂真的就在這裡)
而Wix就剛好是一個好用的工具,幫助我們很好地表達自己,又剛好順便賺取收入、提升生活品質!(對我們來說,Wix還剛好是一個好玩的線上遊戲XD)
因此,我們並不想要什麼類型的網站都做,我們專注在「個人品牌網站」上,甚至是我們有興趣的領域上,你到我們的網站模版商店上去觀察,雖然每個網站的風格都不同,但又有一種很協調一致的感覺,對吧?那就是我們網頁設計的獨特風格啦!^ ^
查看案例網站
為了可以成功讓大家有能力分享自己的內容,我們也特別著重在線上學院玩家社群的設計,透過免費的影片教學、文章分享,以及論壇討論,讓大家可以從我們身上獲得一些資源,不用那麼擔心害怕去嘗試未知的事物,一旦嘗過了分享知識的甜頭、幫助到他人的喜悅,這時候叫你停下來你也停步下來了!(XD)
只有撰寫自己有感覺的內容、呈現自己喜歡的風格,我們才有辦法持續地產出內容、長久經營自己的事業,與其去研究一套最佳的經營方式、找到最賺錢的目標客群,不如將自己有系統地呈現出來,你也會在這個過程中逐漸發現自己、並有利於他人!

三、主視覺&主色調設計
網站營造出來的感覺或氛圍,會立即決定怎麼樣的目標客群會被吸引,因此我們很建議大家可以先從「想要給客戶什麼樣的感覺」先進行思考!(你可以先看這篇文章 (必看!):架站前可以先思考的事:定調你的個人品牌「第一印象」,順便思考你的「目標客群」!)
那這個「想要給客戶什麼樣的感覺」必須從自己身上找,以這個攝影師吳約翰的案例來說,他喜歡「個性、極簡、俐落、黑色調的感覺」,自己喜歡的攝影工具或場景/工作室的色調也以黑色為主,甚至自己也喜歡穿黑色的衣服,那麼在設計網站整體色調時,主色調使用「黑色」就會蠻適合的!
另外,身為一個專業人員,通常希望呈現給客戶專業的感覺,一般都會至少搭配一個比較深色的顏色,以禪卡占卜師卡洛的網站為例,他就搭配了一個深色的藍色來傳遞這樣的形象,它是以米色為主色,佔據大部分的視覺,深藍色為輔色,出現在文字、按鈕和頁尾的用色上
查看案例網站
攝影師吳約翰的網站色調主要就是「黑色」,沒別的顏色了,只搭配一些白底色,其實這樣的設計是有點大膽的,需要很有個性、很有想法的人才能駕馭(XD),但也因為如此不覺得特別有魅力、特別吸引人嗎?哈哈~(我們在製作這個網站的時候特別享受耶~)
未來在選擇照片或商用圖庫的圖片時,需要特別注意,必須挑選與全黑色調感覺一致的照片,照片需要有一定比例的黑色,搭配白色和灰色調也相對安全,偶爾可以做點跳色沒關係(如下圖案紅色調的僧侶圖),如此放在網站上就會相互呼應、風格就會一致!
由於亞洲人大多是黑色頭髮的,所以人物像的封面圖整體搭起來是不錯的,只是要小心穿搭衣物不能太過鮮豔!
查看案例網站
所以大家可以根據自己的專業服務中常出現的顏色區抓主色調,例如整理師就會有自己的居家照片(家具軟裝的顏色)、塔羅牌諮詢師會有卡牌(卡牌占卜道具的顏色)、心理諮詢師或醫生會有白袍或其他制服(工作服的顏色)等等,建議都要整體一起思考!
新手在設計網站的時候,常出現的問題就是網站風格和圖片風格不一致,明明喜歡米色,但是卻找了紅色的花朵圖片、藍色的家具圖片等等,當風格不一致的時候會造成讀者是覺得不舒服,他可能就會馬上離開網站了,更不可能有機會去查看我們的服務內容或文章了!
購買網站模版後,如何進行網站微調?

調整「主色調」
當你決定主色調之後,或是挑選了喜歡的網站模版了,想要進一步調整主色調,你可以到Wix的編輯器,點擊左方工具列的「主題管理員」(如下圖)。
登入Wix編輯器
你可以在「編輯您的主題顏色」區域調整網站的主色調(如下圖),「顏色1」通常Wix都會預設為黑灰白色調,黑灰白是每個網站的基本色,因此顏色1可以不更動,「顏色2」就是我們的「主色調」、顏色3就是我們的「副色調」,但這個網站案例的主色調就是黑色(顏色1),所以顏色2和3可以不用去理會它;如果你想將黑色主色調改掉,就可以調整顏色2及3。
請記得一旦主色調做了更動,網站上的圖片有可能必須重新調整、更換,主色調和圖片必須風格一致,才不會讓讀者視覺上感到不舒服喔!
登入Wix編輯器
改顏色時點擊前方水滴的圖示,你可以在跳出的小視窗中打上你要的色號(如下圖),網站上的色號必須要固定,即使同是綠色,青綠、亮綠、藍綠風格完全都不同,因此必須注意!
登入Wix編輯器
當你在網路上找到一個喜歡的顏色,要怎麼知道它的色號呢?
建議可以下載Google擴充功能ColorZilla,下載完成之後,它會被新增到網頁的右上方(如下圖),當你看到某個網頁中的某個顏色很喜歡,你只要點擊ColorZilla,然後把滑鼠移到想要的顏色上,再點擊一下,色號就會被複製起來了!
根據你的滑鼠移到不同的區塊,上方的黑色工具列會變換對應的顏色及其色號(如下圖),選到想要的區域後,再點擊一下,色號就會被複製起來了,然後你再到主題管理員,將顏色2的色號改掉就可以了!
Wix會將整個網站的主色調一次調整好,但建議大家還是要到網站的每一頁去檢查一下,看看是否每個區塊的對應顏色都是你所想要的,你也可以針對幾個特定的區塊做做單獨顏色的調整,每個區塊或元素都可以點擊「設計 (Design)」(毛筆的圖示)進行顏色的調整。

四、網站整體架構
一個個人品牌的網站需要基本的五大頁面,分別是「首頁、關於我、商品/服務頁、內容頁以及聯絡頁」,缺一不可。
在這個攝影師吳約翰的網站模版案例中,我們設計的選單分別是「首頁、關於、服務、作品、文章、聯絡」,一共6頁選單,相對應的內容除了基本五頁的「首頁、關於我、服務頁、文章頁、聯絡頁」之外,另外還多了「作品頁」,由於作品集對於攝影師來說非常重要,因此特別獨立一頁,而且放在選單的第一項,可以讓潛在客戶快速瀏覽自己各種作品、引起興趣。
另外,由於網站整體是極簡風格,但為了增加一點設計感,比起單純打上中文字,在右上方LOGO處 (JOHN WU 吳約翰) 以及選單的文字上都設計為「中文字 + 英文字」,由於選單變長了,於是將「首頁」隱藏起來避免冗長感
查看案例網站
新手經營者可以先從基本五大頁面開始,隨著你的品牌經營地愈來愈成熟,可以在新增更多的網頁,例如影片頁、廣播頁(Podcast)、檔案頁、更多的服務產品頁。
例如,許多心靈老師也會分享一些心靈小語、心靈圖文或生活處方箋的小手冊或PDF檔,因此也可以多設計了這一頁網頁(如心靈處方箋),讓你可以上傳一些自己的檔案或文件;另外許多心靈老師也會透過溫柔的聲音/音頻來分享心靈生活,因此也可以設計了Podcast廣播頁(如卡洛電台),讓大家自行運用!
查看案例網站
如果你還沒有這些內容,你可以暫時將該頁面隱藏起來,等到自己的素材夠多了,也開始經營音頻節目,再公開分享喔!一階段一階段、一步一腳印地經營自己的個人品牌吧!
等到你有自己的Podcast素材之後,你只要點擊「設定」,再點擊「連線RSS」即可,這裡就會自動同步你的音頻內容囉!Wix是不是很棒,哈!
登入Wix編輯器
通常在設計選單名稱的時候,可以重新命名為較為吸引人的文字,以禪卡占卜師卡洛的網站為例,例如「關於我」可以改為「關於占卜師」或「關於卡洛」等等,將選單調整為有個人品牌風格的意象、「服務項目」改為「居家占卜服務」或「人生占卜諮詢」等等、「部落格」改為「心靈部落格」、「療癒文章」等等,展現個人品牌風格、同時又能吸引用戶點擊選單!
但以攝影師吳約翰的網站為例,因為走的是極簡風格,文字上要盡量簡單俐落,只搭配英文字做修飾,因此每種設計都是要看該網站想要呈現的風格與定位而定!
購買網站模版後,如何進行網站微調?
記得在頁首的部分要先調整「品牌名稱」和「選單文字」(如下圖),你要先思考自己的文字內容,然後再進入Wix編輯器進行編輯。
查看案例網站
記得把「吳約翰攝影工作室」改成自己的名稱,例如「朱維尼的平面設計工作室」,頁首左上角的「JOHN WU 吳約翰」也要記得改成自己的名稱,例如「WINNIE CHU 朱維尼」,例如「關於 About Wu」改成「關於 About Chu」,品牌名稱盡量設計地好記又簡單,又能馬上識別你是在幹嘛的。
在Wix的編輯器中,「點擊文字兩下」就能修改了,就跟Word打字一樣簡單。
登入Wix編輯器
選單的文字要到左方工具列的「網站選單」,點擊每個網頁的「重新命名」,就能修改選單文字囉!你也可以在這裡切換每一頁網頁!
登入Wix編輯器
另外,也要記得把右上方的「社群連結」改成自己的連結,點擊「社群工具列」,然後再點擊「設定社群連結」來更換社群網址。
登入Wix編輯器
請選取每一個社群圖示,並在右下方點擊連結圖示,重新貼上你的社群連結,如果你需要新增社群圖示,可以點擊上方橘色按鈕「+ 新增圖示」來新增社群
登入Wix編輯器
購買B&W的網站模版好處就是,可輕鬆又快速改成自己的網站!

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

1. 主視覺圖區
首頁的最上方就是「主視覺圖區」,專業又有質感的主視覺圖會帶動讀者願意往下滑動網頁,除了上方的頁首「清楚的品牌名稱」和「吸引人的選單」之外,必須搭配一張吸睛且符合品牌風格的圖片。
多數網站的主視覺圖,會選擇一張「產品圖」(如下圖星巴克網站)或是「意象圖」(如下圖房仲服務網站/由B&W製作),再搭配一段品牌訴求文字以及行動呼籲難紐。
個人品牌的網站除了選擇一張「意象圖」之外,我們也非常建議直接放上自己的「大頭照」,這兩種選擇都可以,整理師艾咪的網站模版就是以意象圖來設計主視覺圖,而禪卡占卜師卡洛攝影師吳約翰的網站模版都是用大頭貼來設計。
整理師艾咪的網站模版為例,它就是選擇一張居家意象圖,主色調的綠色與主視覺圖的綠色植栽很協調地搭配起來了!主視覺圖區也放上了一段「品牌訴求文字」,例如,「平衡生活,從整理開始」,也和上方選單部落格頁的「平衡生活配方」相呼應,快速瞭解這個整理師品牌的理念就是「生活應該要平衡」,整體網站的訴求也必須以這個理念為中心思想,自然也能吸引認同該理念的讀者或潛在客戶。
查看案例網站
禪卡占卜師卡洛攝影師吳約翰的網站模版之主視覺圖區設計,選擇的就是「大頭照」,個人大頭照其實是最吸引讀者目光的,保證讀者一定會往下滑(XD)!
查看案例網站
查看案例網站
我們自己的網站也是選擇直接放上一張「大頭照」,雖然沒有太好看!哈哈~
查看案例網站
你可以在主視覺圖區放上一個「行動呼籲按鈕」,讓立即被引起興趣的讀者能透過點擊按鈕更快地認識你或你的服務,如果你希望讀者可以趕快瞭解你的服務或是更加認識你,你就可以將按鈕連結至服務項目頁,或是關於我頁。
頁首和主視覺圖區的詳細Wix操作步驟教學可以參考以下兩篇文章:
  1. 【WiX實作#01】註冊WiX、編輯器介紹以及網站頁首區(Header)設計
  2. 【WiX實作#02】主視覺區(/輪播圖)設計:學習Image、Video、Slider、Shape元素

2. 關於我區
個人品牌的網站非常強調「個人」特色,如果你的主視覺圖區是一張意象圖,那我們強烈建議大家在首頁的「關於我區」一定要放上自己的大頭照,盡快讓讀者知道你長什麼樣子,可以緊接著在主視覺圖區的下方出現,俗話說「見面三分情」,看到你本人的照片,也會增加讀者繼續瀏覽網頁的興趣
你也可以自己去觀察,是不是有放創業家本人的照片的網站會比較吸引你呢?
查看案例網站
如果你在主視覺圖區已經放上一張大頭照了,關於我區就可以再放上另一張大頭照,兩張照片可以不同,幫助讀者更加認識你!
查看案例網站
攝影師吳約翰的網站模版走的是比較有個性和極簡的路線,首頁就只有一個主視覺圖區而已,沒有任何其他區塊,然後就接到頁尾區了,這種簡潔俐落的設計,有時候也更能吸引讀者繼續探索網站呢!
首頁這裡還是會放置一個「行動呼籲按鈕」,帶領讀者進行下一個動作,你可以選擇想先讓讀者多認識你一點,連結至「關於我頁」,或是想先讓讀者看看自己的作品集或理念文章,連結至「作品集頁」或「部落格頁」,最常見的就是連結至「產品服務頁」了。
查看案例網站
一般首頁版面的主流規劃還是會包含有「主視覺圖區」、「關於我區」、「產品服務區」、「部落格文章區」、「聯絡我區」等等,在分別連結至對應的選單頁面,如果你想在首頁放置更完整的版面設計,可以參考其他篇的經營設計手冊喔!
購買網站模版後,如何進行網站微調?
由於我們已經將該網站模版適當的版面大小控制好了,包括圖片和文字的左右配置與其比例,因此建議大家修改改文字和圖片就好,以維持版面美感。
圖片的部份要記得將大頭照圖片改成自己的,調整該樣版網站大頭照的操作步驟說明如下:
(1) 點擊圖片區兩下之後會出現一個工作列,再點擊「變更欄背景」
登入Wix編輯器
(2) 而後會跳出一個小視窗,點擊「圖片」,如果你想放影片,就點擊「影片」。
登入Wix編輯器
(3) 點擊「圖片」之後會跳出一個大視窗,你可以點擊「上傳媒體」,然後選擇你電腦當中的檔案來上傳。
登入Wix編輯器
(4) 點擊「從電腦上傳」,就會跳出電腦的檔案資料夾視窗,你可以在這裡選擇你的電腦中的檔案;你也可以從其他的社群媒體(如Facebook、Instagram、Google Drive等)匯入圖片。
登入Wix編輯器
(5) 你所上傳的所有檔案會被放在「網站檔案」區,隨時都能存取,點選你要的檔案之後,再點擊右下方的按鈕「選擇圖片」,圖片就會被置換了!
登入Wix編輯器
(6) 為了有利於SEO,變更圖片之後,請再點擊「設定」,在「圖片中有什麼?告訴Google」的地方輸入品牌名稱或相關的關鍵字,例如「攝影師吳約翰」,每次變更圖片的時候都要記得調整喔!
登入Wix編輯器
登入Wix編輯器
若要調整按鈕,點擊按鈕一下,再點擊工具列中的「變更文字」,就可以修改文字和按鈕的連結去處囉!
登入Wix編輯器
恭喜你完成關於我區的設計!
關於我區的詳細Wix操作步驟教學可以參考以下文章:

六、關於我頁
在關於我頁的部分,你可以分享更多關於自己的內容,例如你的經營理念、你的故事、你的願景等等,如何撰寫自我介紹,你可以參考這一篇文章:如何有特色地呈現個人品牌的自我介紹?設計你的官網名片!
攝影師吳約翰的案例中,關於我頁除了介紹自己的區塊之外,還多設計一個「客戶評價區」,客戶評價區可以增加整個品牌的信任感與可靠度,它可以放在關於我區,也可以放在產品服務頁或銷售頁;通常關於我頁都會在放置一個按鈕連結至「產品服務頁」或是「文章頁」,引導讀者繼續動作、更加深瞭解服務、甚至成交。
查看案例網站
記得在Wix編輯器中,切換網頁頁面可以透過左上角的選單進行切換(如下圖),文字的部分要記得改成自己的版本喔!
登入Wix編輯器
如果你的自我介紹內容想要再放更多內容,我們可以「新增區塊」,可以把客戶評價區往下移,將新增的區塊塞在中間,目前最上方的關於我區的版面配置為「左邊文字、右邊圖片」,下方新增的區塊可配置「左邊圖片、右邊文字」,讓畫面變得豐富,最下面就接客戶評價區。
新增區塊或網頁的方法
(1) 新增區塊
如果你有設計更多的頁面,也可以在首頁新增更多的區塊,例如,你想要在使用關於我區這樣一列兩欄的版面配置,你可以點擊關於我區一下,你會看到一個藍色的框線將該區給選取了起來(如下圖),並看到上方顯示「帶狀圖片」的字樣,每個被選取的元件都有其對應的名稱,例如文字、圖片、按鈕等等,每個元件都能透過複製重複利用
登入Wix編輯器
當你想要複製元件或刪除元件時,只要點擊該元件之後,再按右鍵選取「複製」、「貼上」或「刪除」即可。移動元件時,只要用滑鼠按住元件不放,就能移動至任何你想讓它去的地方
登入Wix編輯器
另外,你也可以將滑鼠移到藍色框線上方的「↓ (Drag) 圖示」,你可以往上拉動或往下拉動,當你拉動元件時,下方的所有元件都會跟著一起移動,下方所有的元件都會一起移動到相對應的位置,如此一來我們就不需要一個一個元件移動位置。
登入Wix編輯器
(2) 新增網頁
如果你想要新增更多的網頁,你可以直接複製現有的網頁來進行編輯和調整 (如下圖),如此一來就不需要一個一個區塊進行新增和複製。
登入Wix編輯器

七、服務項目頁
通常在首頁中的「產品服務區」只會顯示簡單的服務名稱、簡介文字及圖片,在「產品服務頁」中則可詳細地介紹自己的服務,包含價格、服務流程、服務內容、預約方式等等,但攝影師約翰的首頁是沒有放置「產品服務區」的,且在「產品服務頁」仍維持一貫的簡潔的內容和排版。
查看案例網站
不像居家整理師屬於少數人瞭解的行業,需先用較多篇幅來介紹服務,攝影服務相對單純易於理解,而且在有完整作品集的考慮之下,即使沒有很多文字篇幅說明,還是沒問題的!而且還能夠維持極簡、俐落的調性。
查看案例網站
產品服務區我們會建議大家至少可以思考3種類型的服務項目,你如果可以將你的服務細分為三,就能提高服務的專業形象,例如,比起「專業攝影服務」,若細分為「人物形象攝影」、「專業形象攝影」及「商業形象攝影」則會提高整體質感,詳細的理由可以參考這一篇文章:決定你的個人品牌之核心業務!設計提供完整面向之服務主題,行動呼籲在這裡!
許多的產品服務區都是「一列多欄式」的設計 (如下圖為一列三欄式的設計),這也是最經典的版面,我們自己的官網也是一列三欄式的設計 (如下下圖)。
查看案例網站
查看案例網站
選擇不同的版面設計,需要先考慮到整個網頁頁面「不同區塊的版面配置」,以攝影師吳約翰的網站來說,由於多為跨頁/一列一欄或一列兩欄等較為大氣的設計,因此比起將產品項目排排站成一列,不如一列就只放一個項目!
以諮詢顧問或服務性質的行業來說,多數人都會使用「預約表單」來讓客戶填寫預約服務的需求,包含客戶的基本資訊,客戶想問的問題等等,因此我們可以在這裡設計按鈕,並連結至表單的網址。
使用「Facebook訊息」預約服務的方式也有,那就可以將按鈕的連結設定為FB訊息的連結;或者,如果你有上架某些專家平台,按鈕也可以連結平台的預約頁面連結;我們最近有試用看看「事事問」平台,給大家參考。
查看預約頁面
當然,你也可以透過一整個網頁(銷售頁)來設計和介紹你的服務,例如你有3個服務,你甚至可以設計3個網頁(銷售頁)來分別介紹每一個服務。通常我們會建議先設計好其中一個服務項目之後,再透過「複製頁面」來新增第2個和第3個服務,增加網頁設計的效率。
查看案例網站
每一個服務銷售頁可以包含許多區塊,例如服務內容、服務流程、服務方案、適合的對象、預約守則、客戶評價、個人資歷或獎項、常見問題等等,豐富又專業的內容也能增加潛在客戶的成交機會!
購買網站模版後,如何進行網站微調?
「重複項 (Lists & Grids)」 的元件不同於帶狀圖片 (Strip),帶狀圖片 (Strip)的每一個區塊都是獨立編輯的,例如左邊一塊設計文字和按鈕、右邊一塊設計圖片區,而「重複項 (Lists & Grids)」裡面的每個元素都會重複出現在每一個區塊中,如此也方便統一管理和調整
像是產品服務項目就很適合使用「重複項 (Lists & Grids)」,因為每一個產品項目都一樣有一張圖片、一些大標題、一些小標題,以及按鈕,因此可以統一規格來設計。
登入Wix編輯器
像是我們的網站模版商店區,也是使用「重複項 (Lists & Grids)」 的元件來設計的喔!
查看案例網站
由於我們已經將規格設計好了,所以大家只要更改圖片和文字即可,更改圖片請點擊圖片區在右鍵點擊「變更圖片」,然後上傳自己要的圖片或是挑選Wix內建圖庫。
登入Wix編輯器
修改及編輯文字的做法與都是一樣的,按鈕的部分也要記得改成自己預約的連結,例如表單的連結、Facebook私訊的連結,或是另外的銷售頁。
登入Wix編輯器
登入Wix編輯器
作品集頁的設計
除了基本五頁之外,攝影師的網站還多了一頁「作品集頁」,這裡設計了4種類別的作品集 (對應4種服務項目),且有相對應的4個子頁面來呈現作品照片們。
作品集這裡使用的元件是「Wix藝廊 (Wix Pro Gallery)」,放在Wix藝廊的每張圖片都能連結到特定網頁,因為這裡設計了4種類別的作品集,分別是人物形象、全家福照、專業形象和商業形象,所以就放了4張照片,各自會連結至對應的子作品集頁。
點擊「管理媒體」就可以管理這些照片和連結。
登入Wix編輯器
我們的四個類別的作品代表照片就在下圖的視窗之中,可以拖曳調整順序,也可以更換圖片。點擊圖片時,右方有設定的欄位,這裡可以編輯「標題」以及「連結」。
登入Wix編輯器
連結的網頁則選擇希望連過去的子作品集頁,這幾頁目前在選單中是設計被隱藏起來的,只有在作品集頁的圖片被點擊時,才會開啟網頁。
登入Wix編輯器
子作品集頁也是用「Wix藝廊 (Wix Pro Gallery)」的元件,你的所有攝影照片都在視窗中 (如下下圖) 做管理和增減即可,非常方便,不會動到網頁版面。
登入Wix編輯器
登入Wix編輯器
如果你是有作品集的個人品牌,就可以活用「Wix藝廊 (Wix Pro Gallery)」的元件喔!

八、部落格頁
由於部落格頁是由Wix內建的系統,因此我們不太需要去更動什麼設計,只要專心在產出文章即可,為了讓潛在客戶第一次進入網站就能夠感受到我們的專業度,請務必先放上多一點的文章,如果只有一兩篇文章,讀者一看到就會發現你是新手,自然就會降低向你預約的機會。
查看案例網站
文章的類別也可以新增3~5個,例如,「攝影作品理念」、「攝影案例分享」、「攝影器材開箱」、「吳的攝影日常」等等,透過文章的專業分類也可以提升讀者的信任感,以專業文章為主,輔以搭配個人的日常點滴,讓讀者學習收穫許多,同時又感到親近感。
在實際撰寫文章之前,先好好思考自己文章主題的大方向,列出幾個撰寫的主題之後,會幫助我們有架構地寫東西,也比較不會有不知道該寫什麼的煩惱喔!
你也可以稍微感受一下,即使你還沒真正開始閱讀這個個人品牌的文章,光是看他這幾個專業的文章分類就覺得他一定有不少料吧!
購買網站模版後,如何進行網站微調?
文章是整個網站的靈魂,請事先撰寫至少3~6篇文章放到網站上,部落格文章的經營方式請參考這一篇文章:個人品牌的靈魂在於「你的理念、你的想法」,透過文章內容找到認同你的目標客群!
Wix有內建的部落格系統(APP),請到「部落格頁」新增文章,點擊下方部落格區之後會出現一個工作列,再點擊「管理貼文」
登入Wix編輯器
所有的文章都可以在這裡編輯,我們在這裡目前先放置了6篇文章,請記得改成自己撰寫的文章喔!
登入Wix編輯器
在文章的編輯頁面中,請記得將每一個文章分配到對應的「文章類別」(可複選)喔!
登入Wix編輯器
如果真的想要調整部落格的版面配置,可選取部落格區之後,點擊「設定」(如下圖)。
登入Wix編輯器
然後再點擊「版面配置」,這裡有6種版面配置,你可以嘗試都點擊看看,看看哪一個版面配置你比較喜歡,「所有文章」和「文章類別動態」的版面配置可以個別設計不同的配置。
登入Wix編輯器
文章區的詳細Wix操作步驟教學可以參考以下文章:

九、聯絡我頁
通常在首頁的最下方都會放置聯絡我們或訂閱網站的表單,讓潛在客戶如果有問題時可以找得到我們,通常客戶如果有問題想聯絡,也代表成交的機率很高,所以一定要留下聯繫的方式,例如Email、Facebook、Instagram、LINE、電話、地址等等。
查看案例網站
除了放在頁尾之外,也能夠選擇獨立一頁聯絡我頁,攝影師約翰的網站為了要符合簡潔俐落的風格,每一頁的區塊都維持都只放一到兩個區塊,如果在每一頁頁尾都出現聯絡我區,會增加複雜的感覺。
查看案例網站
購買網站模版後,如何進行網站微調?
記得把文字和對應的連結改成自己的版本,例如,「歡迎填單留言給吳」就必須改成「歡迎填單留言給維尼」、「Email: c.19890124@gmail.com」就必須改成自己的Email,地址和電話也要記得改掉,如果是你用的其他社群連結就改成其他文字。
登入Wix編輯器
在「編輯文字」中,將需要連結的文字選取起來,並點擊「連結圖示」,你可以直接貼連結,如果是 Email 或是電話,你可以選擇Wix的內建連結,以 Email 為例(如下圖),選擇「電子郵件」,並輸入你希望客戶聯絡的 Email 即可
登入Wix編輯器
另外文字左下方的「社群工具列」也要改成自己在用的社群圖示,以及貼上對應的連結網址。
登入Wix編輯器
最後,頁尾的文字也要記得調整成自己的內容,例如,Copyright © 2021 By 「Photographer John Wu」 All rights reserved. 改為 Copyright © 2021 By Minimalist Winnie All rights reserved.
頁尾的社群文字和連結也要記得改掉喔!
登入Wix編輯器
恭喜你完成聯絡我區的設計!
聯絡我區的詳細Wix操作步驟教學可以參考以下文章:
  1. 【WiX實作#07】訂閱我區設計:學習Contact元素
  2. 【WiX實作#08】頁尾區設計:學習Social元素

十、手機版設計
手機版網頁的設計是每個網站的必要設計,並有利於SEO,每個網站模版的手機版我們都已經幫大家設計好了,除非你有新增網頁或是區塊,或是新增太多或太少文字造成畫面跑版,那就必須進到手機版畫面進行調整,Wix編輯器的左上方有電腦和手機的圖示,點擊圖示可以切換「桌面版設計」與「手機版設計」
登入Wix編輯器
手機版網站可以調整文字的大小、顏色、圖片的長寬、按鈕的長寬,以及各元件的相對位置,也能隱藏元件,讓某些元件在手機版不被顯示,如果發現需要更改文字或其他設定,則必須回到「桌面版」來設計
比較要注意的是,右下方的訊息圖示,請記得點擊圖示進行編輯,並點選「設定快速動作」,然後編輯社群的設定,將連結改成自己的版本,移除自己不需要的社群連結,亦可點擊按鈕「更多動作」新增需要的社群。
登入Wix編輯器
手機版設計操作不難,請務必在桌面版設計完成之後,到手機版的畫面檢查一下,看看畫面有沒有跑掉,或是用自己的手機看一下畫面順不順暢。
手機版設計的詳細Wix操作步驟教學可以參考以下文章:

十一、線上訊息功能
線上訊息功能讓潛在客戶可以在網站上和我們互相訊息,讓用戶能隨時立即聯絡我們,但是為了維持簡潔俐落感,攝影師吳約翰的網站模版上我們並沒有設計這個訊息功能。
查看案例網站
但在聯絡我頁的表單及客戶的連絡資訊都會集中在Wix後台,Wix的後台非常強大,所有的訊息都可以集中在這裡管理,而且當你將Wix連結你的Facebook粉絲專頁之後,連Facebook的私訊內容都會同步出現在這裡,你就不會錯過任何一個潛在客戶的訊息啦!
登入Wix編輯器
線上訊息功能的詳細Wix操作步驟教學可以參考以下文章:

十二、SEO精靈設定
恭喜你網站都完成啦!最後就只剩下SEO精靈的設定啦!(SEO一定是最後一步喔~)
我們特別喜歡Wix的SEO精靈設定,只要一步步照照著Wix指示的步驟完成就搞定了,這也是Wix平台的設計初衷:把簡單的介面交給使用者,困難的他們一手包辦!
登入Wix編輯器
SEO精靈的設定需自行設定,單購4,500元的網站模版並無提供SEO設定的服務,但是它的操作步驟並不難,你可以參考Wix線上學院課程的第19單元,這裡有非常詳細的操作步驟。(線上課程都是免費的,沒有購買網站也能免費學習~)
之所以網站模版沒有替大家先設定SEO精靈是因為每個人經營的品牌名稱和內容是不一樣的。
例如,你是一個「插畫家」,購買了「攝影師」網站模版(因為商業模式相似只需微調圖文),那麼我們預先設定了攝影服務或攝影接案的SEO關鍵字就會不相關,所以請大家在調整完圖文之後,再自行設定SEO精靈。
如果你希望B&W幫你設定SEO精靈請加購「Wix SEO精靈設定,當你的網站的圖文都完成修改之後,B&W會幫你設定後續SEO精靈喔!
SEO精靈設定的詳細Wix操作步驟教學可以參考以下文章:

十三、升級網站
對於剛要開始經營個人品牌的新手創業家而言,WiX的免費版本其實已經非常夠用,非常足以製作非常精美的網站了!
由於我們一開始鎖定的目標客群很小,雖然網站流量不大,但是相對應的訂單量卻不少,因此免費的版本對我們而言就很夠用了,尤其在資金不是很雄厚的創業初期,那要如何評估是否要升級付費方案呢?
我們在這一篇文章中有更仔細的分析,幫助你思考並決定是否需要升級付費方案喔!
如果你決定要購買付費方案,你也可以點擊這裡
查看案例網站

你的下一步
以上就是這個網站模版的經營設計手冊啦~~
  1. 如果你有任何問題,歡迎在玩家社群論壇提出來討論喔!
  2. 如果你想再看一下網站整體設計,立即查看網站
  3. 如果你決定要購買這個網站模版,購買網站模版
  4. 如果你想挑選看看其他網站模版,逛逛其他網站
  5. 如果你想要先學習Wix線上課程或文字筆記,進入線上學院
  6. 如果你已經購買了網站模版、要繼續編輯,登入Wix後台
1萬5千字完結灑花~~~
玩家 布蘭達&維尼

加入成為玩家
瞭解如何「貢獻世界的六大步驟」: )

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.