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

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

網站模版簡介

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

四、網站整體架構

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

五、首頁

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

1. 主視覺圖區

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

2. 關於我區

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

六、關於我頁

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

七、服務項目頁

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

八、部落格頁

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

九、聯絡我頁

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

十、手機版設計

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

十一、線上訊息功能

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

十二、SEO精靈設定

恭喜你網站都完成啦!最後就只剩下SEO精靈的設定啦!(SEO一定是最後一步喔~)
我們特別喜歡Wix的SEO精靈設定,只要一步步照照著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千字完結灑花~~~
玩家 布蘭達&維尼

加入成為玩家

瞭解如何「貢獻世界的六大步驟」: )
為什麼會看到廣告
Hi, 我們是Brenda和Winnie,以前我們是Wix網頁設計師,現在則是Wix網頁玩家,還有,我們也是極簡生活家。我們喜歡專注在「玩生活」這件事上,尤其喜歡「玩網頁」和「玩整理」,感恩這個地球提供這麼好的環境給我們玩,也感恩和我們一起玩的所有人!我們也希望能夠貢獻二己之力,讓大家也能開心地玩、平靜自在地玩!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
1. 適合對象:提供預約服務或無形服務者、諮詢顧問、部落客等個人品牌經營者 ​ 2. 案例產業:收納整理、整理師、軟裝師、空間設計師、心理諮商等行業  3. 網站功能:1) 產品/服務列表、2) 個人品牌介紹、3) 服務銷售、4) 部落格/作品集、5)
1. 適合對象:提供預約服務或無形服務者、諮詢顧問、部落客等個人品牌經營者 ​ 2. 案例產業:收納整理、整理師、軟裝師、空間設計師、心理諮商等行業  3. 網站功能:1) 產品/服務列表、2) 個人品牌介紹、3) 服務銷售、4) 部落格/作品集、5)
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這篇文章分享了個人品牌持續力的重要性以及如何持之以恆地進行品牌營造。透過故事和技巧,提供了持續力的重要性、市場聲量的累積和經營策略等相關建議。
Thumbnail
這是我的個人品牌經營心路歷程系列內容,第一篇會分享我對於剛開始想做個人品牌的人一些建議,主要會用我自身的經驗來分享,如果你想經營個人品牌,歡迎鎖定這系列內容。
Thumbnail
在經營個人品牌的過程中,逐步過渡到全職經營個人品牌可能是更為穩健的方式。這篇文章分享從正職到兼職經營個人品牌的經驗和見解,大家在做出職業轉變的決策時一定要根據自己的情況和能力慎重考慮。
Thumbnail
有些學員夥伴會問:「個人品牌是不是就是自媒體經營?就是等同於我經營社群媒體po po文?」到底兩者是不是一樣?如果不同,又有甚麼相異呢?讓Cynthia透過這篇文章說明。
Thumbnail
因為自己的工作室【學習玩家】是採用「內容創業模式」,就需要持續實驗與創造有價值的知識內容,並專注經營部落格平台與社群,最終能將知識轉換成產品與服務,為他人帶來改變。 特別是還有正職工作和兩個小孩要陪伴,只能優化工作效能,擠出早晚與假日的時間來投入,但經過幾年的時間,終於在下半年有一些興奮的小突破.
Thumbnail
【重要事件公告】 各位舊雨新知(好老派的說法😆)和讀者們,為了能更完整的呈現個人品牌,及後續經營的擴展,艾莎的文章經營型態會做調整,所有文章發布的主力將以粉專以及個人部落格為主。
Thumbnail
「個人品牌定位就是一個找自己的過程。」 斜槓技能滿點的YUANCHi身兼插畫家、品牌經營者與藝文空間主理人等多重身份,她如何在短短幾年內蛻變成長,打造個人品牌?這篇文章報深度分享了YUANCHi透過清楚的品牌定位、自媒體經營、出版、開課、參展及販售商品,不斷跨出舒適圈,挑戰新領域,成為更好的自己。
Thumbnail
一定要保持禮貌和禮儀並真實性面對粉絲受眾 言行一致,要說到做到 要有本事=專業 注意顏值管理和外表穿著 要做對社會有意義的事以及讓大家一起共好 《影響有影響力的人》作者丁菱娟 (世紀奧美公關創辦人)提到品牌經營要先做好個人形象管理,以上這五點是她提出的重點。 建立個人品牌五大
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
這篇文章分享了個人品牌持續力的重要性以及如何持之以恆地進行品牌營造。透過故事和技巧,提供了持續力的重要性、市場聲量的累積和經營策略等相關建議。
Thumbnail
這是我的個人品牌經營心路歷程系列內容,第一篇會分享我對於剛開始想做個人品牌的人一些建議,主要會用我自身的經驗來分享,如果你想經營個人品牌,歡迎鎖定這系列內容。
Thumbnail
在經營個人品牌的過程中,逐步過渡到全職經營個人品牌可能是更為穩健的方式。這篇文章分享從正職到兼職經營個人品牌的經驗和見解,大家在做出職業轉變的決策時一定要根據自己的情況和能力慎重考慮。
Thumbnail
有些學員夥伴會問:「個人品牌是不是就是自媒體經營?就是等同於我經營社群媒體po po文?」到底兩者是不是一樣?如果不同,又有甚麼相異呢?讓Cynthia透過這篇文章說明。
Thumbnail
因為自己的工作室【學習玩家】是採用「內容創業模式」,就需要持續實驗與創造有價值的知識內容,並專注經營部落格平台與社群,最終能將知識轉換成產品與服務,為他人帶來改變。 特別是還有正職工作和兩個小孩要陪伴,只能優化工作效能,擠出早晚與假日的時間來投入,但經過幾年的時間,終於在下半年有一些興奮的小突破.
Thumbnail
【重要事件公告】 各位舊雨新知(好老派的說法😆)和讀者們,為了能更完整的呈現個人品牌,及後續經營的擴展,艾莎的文章經營型態會做調整,所有文章發布的主力將以粉專以及個人部落格為主。
Thumbnail
「個人品牌定位就是一個找自己的過程。」 斜槓技能滿點的YUANCHi身兼插畫家、品牌經營者與藝文空間主理人等多重身份,她如何在短短幾年內蛻變成長,打造個人品牌?這篇文章報深度分享了YUANCHi透過清楚的品牌定位、自媒體經營、出版、開課、參展及販售商品,不斷跨出舒適圈,挑戰新領域,成為更好的自己。
Thumbnail
一定要保持禮貌和禮儀並真實性面對粉絲受眾 言行一致,要說到做到 要有本事=專業 注意顏值管理和外表穿著 要做對社會有意義的事以及讓大家一起共好 《影響有影響力的人》作者丁菱娟 (世紀奧美公關創辦人)提到品牌經營要先做好個人形象管理,以上這五點是她提出的重點。 建立個人品牌五大