攝影師吳約翰的案例中,關於我頁除了介紹自己的區塊之外,還多設計一個「客戶評價區」,客戶評價區可以增加整個品牌的信任感與可靠度,它可以放在關於我區,也可以放在產品服務頁或銷售頁;通常關於我頁都會在放置一個按鈕連結至「產品服務頁」或是「文章頁」,引導讀者繼續動作、更加深瞭解服務、甚至成交。
如果你的自我介紹內容想要再放更多內容,我們可以「新增區塊」,可以把客戶評價區往下移,將新增的區塊塞在中間,目前最上方的關於我區的版面配置為「左邊文字、右邊圖片」,下方新增的區塊可配置「左邊圖片、右邊文字」,讓畫面變得豐富,最下面就接客戶評價區。
七、服務項目頁
通常在首頁中的「產品服務區」只會顯示簡單的服務名稱、簡介文字及圖片,在「產品服務頁」中則可詳細地介紹自己的服務,包含價格、服務流程、服務內容、預約方式等等,但攝影師約翰的首頁是沒有放置「產品服務區」的,且在「產品服務頁」仍維持一貫的簡潔的內容和排版。
不像居家整理師屬於少數人瞭解的行業,需先用較多篇幅來介紹服務,攝影服務相對單純易於理解,而且在有完整作品集的考慮之下,即使沒有很多文字篇幅說明,還是沒問題的!而且還能夠維持極簡、俐落的調性。
許多的產品服務區都是「一列多欄式」的設計 (如下圖為一列三欄式的設計),這也是最經典的版面,我們自己的官網也是一列三欄式的設計 (如下下圖)。
選擇不同的版面設計,需要先考慮到整個網頁頁面「不同區塊的版面配置」,以攝影師吳約翰的網站來說,由於多為跨頁/一列一欄或一列兩欄等較為大氣的設計,因此比起將產品項目排排站成一列,不如一列就只放一個項目!
以諮詢顧問或服務性質的行業來說,多數人都會使用「預約表單」來讓客戶填寫預約服務的需求,包含客戶的基本資訊,客戶想問的問題等等,因此我們可以在這裡設計按鈕,並連結至表單的網址。
使用「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個,例如,「攝影作品理念」、「攝影案例分享」、「攝影器材開箱」、「吳的攝影日常」等等,透過文章的專業分類也可以提升讀者的信任感,以專業文章為主,輔以搭配個人的日常點滴,讓讀者學習收穫許多,同時又感到親近感。
在實際撰寫文章之前,先好好思考自己文章主題的大方向,列出幾個撰寫的主題之後,會幫助我們有架構地寫東西,也比較不會有不知道該寫什麼的煩惱喔!
你也可以稍微感受一下,即使你還沒真正開始閱讀這個個人品牌的文章,光是看他這幾個專業的文章分類就覺得他一定有不少料吧!
購買網站模版後,如何進行網站微調?
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操作步驟教學可以參考以下文章:
- 【WiX實作#07】訂閱我區設計:學習Contact元素
- 【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的免費版本其實已經非常夠用,非常足以製作非常精美的網站了!
由於我們一開始鎖定的目標客群很小,雖然網站流量不大,但是相對應的訂單量卻不少,因此免費的版本對我們而言就很夠用了,尤其在資金不是很雄厚的創業初期,那要如何評估是否要升級付費方案呢?
我們在這一篇文章中有更仔細的分析,幫助你思考並決定是否需要升級付費方案喔!
你的下一步
以上就是這個網站模版的經營設計手冊啦~~
- 如果你有任何問題,歡迎在玩家社群論壇提出來討論喔!
- 如果你想再看一下網站整體設計,立即查看網站
- 如果你決定要購買這個網站模版,購買網站模版
- 如果你想挑選看看其他網站模版,逛逛其他網站
- 如果你想要先學習Wix線上課程或文字筆記,進入線上學院
- 如果你已經購買了網站模版、要繼續編輯,登入Wix後台
1萬5千字完結灑花~~~
玩家 布蘭達&維尼
加入成為玩家
瞭解如何「貢獻世界的六大步驟」: )