設定連結的時候,可以直接貼上該文具類別頁之連結(https://minimalistslife.wixsite.com/kimixu/blog/categories/手帳筆記開箱)。
2. 關於我區
個人品牌的網站非常強調「個人」特色,如果你的主視覺圖區是一張意象圖或產品圖,那我們強烈建議大家在首頁的「關於我區」一定要放上自己的大頭照,盡快讓讀者知道你長什麼樣子,可以緊接著在主視覺圖區的下方出現,俗話說「見面三分情」,看到你本人的照片,也會增加讀者繼續瀏覽網頁的興趣。
你也可以自己去觀察,是不是有放創業家本人的照片的網站會比較吸引你呢?
首頁的關於我區的字數盡量不要太多,首頁是提供讀者快速瀏覽、快速瞭解這個網站在幹嘛的地方,太多文字內容會讓讀者卻步,將重點簡介出來之後,只要搭配一個行動呼籲按鈕連結至「關於我頁」即可,在關於我頁的地方再詳細說明就好,當讀者點擊這個按鈕,也代表他願意花更多的時間瞭解你。
購買樣版網站後,如何進行網站微調?
由於我們已經將該樣版網站適當的版面大小控制好了,而該網站放置的文字空間是「6行」,建議大家放置約6~8行的文字內容,不要太多也不要太少,以維持版面美感。
另外,也要記得將大頭照圖片改成自己的,調整該樣版網站大頭照的操作步驟說明如下:
(1) 點擊圖片區2下之後會出現一個工作列,再點擊「變更欄背景」。
(2) 後出現一個小視窗,再點擊中間按鈕的「圖片」。
(3) 點擊「圖片」之後會跳出一個大視窗,你可以點擊「上傳媒體」,然後選擇你電腦當中的檔案來上傳。
(4) 點擊「從電腦上傳」,就會跳出電腦的檔案資料夾視窗,你可以在這裡選擇你的電腦中的檔案;你也可以從其他的社群媒體(如Facebook、Instagram、Google Drive等)匯入圖片。
(5) 你所上傳的所有檔案會被放在「網站檔案」區,隨時都能存取,點選你要的檔案之後,再點擊右下方的按鈕「選擇圖片」,圖片就會被置換了!
(6) 為了有利於SEO,變更圖片之後,請再點擊「設定」,在「圖片中有什麼?告訴Google」的地方輸入品牌名稱或相關的關鍵字,例如「文具控女孩Kimi」,每次變更圖片的時候都要記得調整喔!
恭喜你完成關於我區的設計!
關於我區的詳細Wix操作步驟教學可以參考以下文章:
3. 產品服務區
通常在介紹個人品牌之後,讓讀者知道你有提供什麼服務就是最重要的事情了,如果想要透過個人品牌賺取收入,我們就必須先讓讀者知道我們的產品和服務,如此一來在他認同我們的理念,或是從部落格文章中獲得有價值的免費資訊之後,他才會連想到你的收費服務!
文具控女孩的網站案例比較特別,由於網站是以文章為主要內容,聯盟行銷或是廣告收益的連結也都是置入在文章當中,所以緊接在「關於我區」之後就是引導讀者進入部落格文章區了,尤其還包含推薦好物的文章區塊!
當然,如果你已經準備好要舉辦活動、舉辦文具分享會,你也可以在關於我或文章區的下方新增一個「活動」的元件(如下圖)。
或者直接在關於我區新增一個按鈕,連結置活動頁也可以(如下圖),這種設計方式也很簡明,也因為活動並非隨時都在舉辦,屬於非常態項目,為了不影響首頁的版面配置,這樣的設計也很不錯。
產品服務區小教室
許多的產品服務區都是「一列多欄式」的設計(如下圖為一列三欄式的設計),這也是最經典的版面,我們自己的官網也是一列三欄式的設計(如下下圖)。
選擇不同的版面設計需要先考慮到整個網頁頁面「不同區塊的版面配置」,主視覺圖區是一個區塊、關於我區是一個區塊、產品服務區也是一個區塊,通常相鄰的區塊部會使用類似的版面配置,如此才能維持網頁的質感與活潑性!
通常主視覺圖區會是「一列一欄」的版面,亦即一張圖片橫跨整個螢幕寬度,而關於我區會是「一列兩欄」的形式,亦即一邊大頭照圖片、一邊文字說明文字,而產品服務區和文章區則可以多元設計,只要相鄰的塊版面設計不同即可。
以這個
禪卡占卜師的網站模板來說,
因為產品服務區的下方是「一列一欄式」的心靈小語區,橫跨整個頁面,它的上方是「一列兩欄式」的關於我區,產品服務區則是「一列五欄式」的設計,盡可能讓相鄰的版面和元件的設計不同,再加上由於上下區塊均已放置許多圖片,如果又放3~5張圖片,視覺上會比較疲勞、凌亂,因此設計了5個簡單的小圖示!
當然產品服務區也不一定只能放置產品或服務,如果你只是單純的部落客,你也可以放上你的內容主題標籤或類別,或是像這個案例占卜師卡洛的諮詢服務,也許涵蓋較大的範圍或面向,所以選擇透過這樣的設計來呈現。
購買樣版網站後,如何進行網站微調?
在Kimi的文具控世界的區塊中,這裡使用的元件也是「Wix藝廊 (Wix Pro Gallery)」,因此操作方法和前面完全一樣喔!
恭喜你完成產品服務區的設計!
關於我區的詳細Wix操作步驟教學可以參考以下文章:
4. 部落格文章區
我們會很建議大家在首頁的地方放上文章區,當讀者在瀏覽頁面時,如果看到產品服務區還沒有想要預約服務或購買產品的想法,至少要透過文章吸引讀者繼續認識我們、進而追蹤我們,未來才有成交的機會,文章可以放置3~6篇文章,總有一篇會被點擊來看看!
以文具控女孩Kimi的案例來說,產品服務區和文章區已經做了結合(如前述所說明),當然如果你想要直接將幾篇精選文章SHOW出來也是不錯的做法,建議可以使用2*2的版面配置來設計(放4篇文章)!
購買樣版網站後,如何進行網站微調?
Wix有內建的部落格系統(APP),請到「部落格頁」新增文章,點擊下方部落格區之後會出現一個工作列,再點擊「管理貼文」。
所有的文章都可以在這裡編輯,我們在這裡目前先放了「文具控必懂」類別文章有6篇、「Kimi日常」類別文章2篇、以及4個文具開箱類別各4篇文章,共24篇,請記得改成自己撰寫的文章內容喔!
在文章的編輯頁面中,請注意將每一個文章分配到對應的「文章類別」(可複選)喔!
恭喜你完成部落格文章區的設計!
文章區的詳細Wix操作步驟教學可以參考以下文章:
5. 聯絡我區
通常在首頁的最下方都會放置聯絡我們或訂閱網站的表單,讓潛在客戶如果有問題時可以找得到我們,通常客戶如果有問題想聯絡,也代表成交的機率很高,所以一定要留下聯繫的方式,例如Email、Facebook、Instagram、LINE、電話、地址等等。
我在在這裡設計了讓讀者留下Email的訂閱表單,如此一來在文章更新或新商品開箱的時候,我們就能寄信通知讀者,會留下Email的讀者也是對於你的網站和文章感興趣的人,因此我們可以持續與客戶溝通,增加客戶黏著度。
另外,我們在最下方還設計一些連結的分類區塊,有文章類的、產品開箱類的,還有合作的品牌,由於文具產品有機會和一些特定品牌進行合作或聯盟行銷,我們可以在這裡放上一些欣賞的品牌。
購買樣版網站後,如何進行網站微調?
記得把文字和對應的連結改成自己的版本,例如,「Email: c.19890124@gmail.com」就必須改成自己的Email,「LINE」也要記得改掉,如果是你用的其他社群連結就改成其他文字。
在「編輯文字」中,將需要連結的文字選取起來,並點擊「連結圖示」,你可以直接貼連結,如果是 Email 或是電話,你可以選擇Wix的內建連結,以 Email 為例(如下圖),選擇「電子郵件」,並輸入你希望客戶聯絡的 Email 即可。
另外,右下方的「社群工具列」也要改成自己在用的社群圖示,以及貼上對應的連結網址。
最後,頁尾的文字也要記得調整成自己的內容,例如,© 2021 By 「Stationery Girl Kimi」改為 © 2021 By 「Minimalist Winnie」。
恭喜你完成聯絡我區的設計!
聯絡我區的詳細Wix操作步驟教學可以參考以下文章:
- 【WiX實作#07】訂閱我區設計:學習Contact元素
- 【WiX實作#08】頁尾區設計:學習Social元素
6. 新增區塊或網頁
以上一共分享了首頁的「五大區塊」,包含主視覺圖區、關於我區、服務項目區、部落格區及聯絡我區,關於我區會有按鈕可以連結至關於我頁、服務項目區會有連結可以連結至服務項目頁,同理部落格區及聯絡我區。
(1) 新增區塊
如果你有設計更多的頁面,也可以在首頁新增更多的區塊,例如,你想要在使用關於我區這樣一列兩欄的版面配置,你可以點擊關於我區一下,你會看到一個藍色的框線將該區給選取了起來(如下圖),並看到上方顯示「帶狀圖片」的字樣,每個被選取的元件都有其對應的名稱,例如文字、圖片、按鈕等等,每個元件都能透過複製重複利用。
當你想要複製元件或刪除元件時,只要點擊該元件之後,再按右鍵選取「複製」、「貼上」或「刪除」即可。移動元件時,只要用滑鼠按住元件不放,就能移動至任何你想讓它去的地方!
另外,你也可以將滑鼠移到藍色框線上方的「↓ (Drag) 圖示」,你可以往上拉動或往下拉動,當你拉動元件時,下方的所有元件都會跟著一起移動,下方所有的元件都會一起移動到相對應的位置,如此一來我們就不需要一個一個元件移動位置。
(2) 新增網頁
如果你想要新增更多的網頁,你可以直接複製現有的網頁來進行編輯和調整 (如下圖),如此一來就不需要一個一個區塊進行新增和複製。
六、關於我頁
記得在Wix編輯器中,切換網頁頁面可以透過左上角的選單進行切換(如下圖),文字的部分要記得改成自己的版本喔!
七、服務項目頁/活動頁
在首頁中的「產品服務區」只會顯示簡單的服務名稱、簡介文字及圖片,在「產品服務頁」中則可詳細地介紹自己的服務,包含價格、服務流程、服務內容、預約方式等等。
以諮詢顧問的行業來說,多數人都會使用「預約表單」來讓客戶填寫預約服務的需求,包含客戶的基本資訊,客戶想問的問題等等,因此我們可以在這裡設計按鈕(如下圖),並連結至表單的網址。
使用「Facebook訊息」預約服務的方式也有,那就可以將按鈕的連結設定為FB訊息的連結;或者,如果你有上架某些專家平台,按鈕也可以連結平台的
預約頁面連結;我們最近有試用看看「事事問」平台,給大家參考。
當然,你也可以透過一整個網頁(銷售頁)來設計和介紹你的服務,例如你有3個服務,你甚至可以設計3個網頁(銷售頁)來分別介紹每一個服務。通常我們會建議先設計好其中一個服務項目之後,再透過「複製頁面」來新增第2個和第3個服務,增加網頁設計的效率。
每一個服務銷售頁可以包含許多區塊,例如服務內容、服務流程、服務方案、適合的對象、預約守則、客戶評價、個人資歷或獎項、常見問題等等,豐富又專業的內容也能增加潛在客戶的成交機會!
以文具控女孩Kimi的案例來說,主要的產品服務就是活動(
文具控小聚),這一頁主要是使用「Wix Events」系統的APP,我們可以點擊活動區,然後點擊「管理活動」,所有活動設定的細節都在這裡。
這裡是活動設定的後台,你可以在這裡增減活動、管理與會名單,是Wix非常優秀的系統。
活動名稱、宣傳圖、議程規劃/活動流程內容、地點、人數上限、報名表單等都可以在這裡設定。
還能連結Zoom進行線上視訊會議,提供大家線上分享會的模式選擇。
報名表可以在這裡客製化編輯,如果你想使用外部表單,例如Google表單或是SurveyCake,這裡也可以設定外部連結。
八、部落格頁
由於部落格頁是由Wix內建的系統,因此我們不太需要去更動什麼設計,只要專心在產出文章即可,為了讓潛在客戶第一次進入網站就能夠感受到我們的專業度,請務必先放上多一點的文章,如果只有一兩篇文章,讀者一看到就會發現你是新手,自然就會降低向你預約的機會。
文章的類別也可以新增3~5個,例如,「文具控必懂」、「手帳筆記開箱」、「文具控Kimi的日常」等等,透過文章的專業分類也可以提升讀者的信任感,以專業文章為主,輔以搭配個人的日常點滴,讓讀者學習收穫許多,同時又感到親近感。
在實際撰寫文章之前,先好好思考自己文章主題的大方向,列出幾個撰寫的主題之後,會幫助我們有架構地寫東西,也比較不會有不知道該寫什麼的煩惱喔!
你也可以稍微感受一下,即使你還沒真正開始閱讀這個個人品牌的文章,光是看他這幾個專業的文章分類就覺得他一定有不少料吧!
如果真的想要調整部落格的版面配置,可選取部落格區之後,點擊「設定」(如下圖)。
然後再點擊「版面配置」,這裡有6種版面配置,你可以嘗試都點擊看看,看看哪一個版面配置你比較喜歡,「所有文章」和「文章類別動態」的版面配置可以個別設計不同的配置。
文章區的詳細Wix操作步驟教學可以參考以下文章:
九、聯絡我頁
由於首頁已經有了一個聯絡我區的區塊,為增加架站效率,並統一管理聯絡表單,於是選單頁的「聯絡我頁」是透過「錨點 (Anchor)」來設定連結,點擊頁首選單的「聯絡」,畫面會直接移到首頁的聯絡我區。
「錨點 (Anchor)」可以設定在網頁中的任何一個區塊上,它不是一個網頁連結,而是一個網頁中的「位置/定點」,任何按鈕或是網頁選單都可以連結至「錨點 (Anchor)」,這也是網頁設計中很常使用的設計。
例如,我們在首頁的聯絡我區上方放上一個「錨點 (Anchor)」(如下圖),它會出現一條螢光藍線,我們可以命名它的名稱,例如「Contact」,以識別網站上不同的「錨點 (Anchor)」。
我們希望「聯絡」頁可以連到首頁的聯絡我區,在選單中點擊「變更連結」,選擇連結設定視窗中的「錨點」,在選擇對應名稱的「錨點」,例如「Contact」,這樣就設定成功了!
當然如果你有更多的內容想要單獨設計一個聯絡我的網頁,例如放上Google地圖、交通資訊、更多的社群資訊等等,也是完全沒問題的喔!
十、手機版設計
手機版網頁的設計是每個網站的必要設計,並有利於SEO,每個樣版網站的手機版我們都已經幫大家設計好了,除非你有新增網頁或是區塊,或是新增太多或太少文字造成畫面跑版,那就必須進到手機版畫面進行調整,Wix編輯器的左上方有電腦和手機的圖示,點擊圖示可以切換「桌面版設計」與「手機版設計」。
手機版網站可以調整文字的大小、顏色、圖片的長寬、按鈕的長寬,以及各元件的相對位置,也能隱藏元件,讓某些元件在手機版不被顯示,如果發現需要更改文字或其他設定,則必須回到「桌面版」來設計。 比較要注意的是,右下方的訊息圖示,請記得點擊圖示進行編輯,並點選「設定快速動作」,然後編輯社群的設定,將連結改成自己的版本,移除自己不需要的社群連結,亦可點擊按鈕「更多動作」新增需要的社群。
手機版設計操作不難,請務必在桌面版設計完成之後,到手機版的畫面檢查一下,看看畫面有沒有跑掉,或是用自己的手機看一下畫面順不順暢。
手機版設計的詳細Wix操作步驟教學可以參考以下文章:
十一、線上訊息功能
線上訊息功能讓潛在客戶可以在網站上和我們互相訊息,讓用戶能隨時立即聯絡我們,而 WiX Chat 的功能還能讓我們更好地管理這群用戶名單。
Wix的後台非常強大,所有的訊息都可以集中在這裡管理,而且當你將Wix連結你的Facebook粉絲專頁之後,連Facebook的私訊內容都會同步出現在這裡,你就不會錯過任何一個潛在客戶的訊息啦!
線上訊息功能的詳細Wix操作步驟教學可以參考以下文章:
十二、SEO精靈設定
恭喜你網站都完成啦!最後就只剩下SEO精靈的設定啦!(SEO一定是最後一步喔~)
我們特別喜歡Wix的SEO精靈設定,只要一步步照照著Wix指示的步驟完成就搞定了,這也是Wix平台的設計初衷:把簡單的介面交給使用者,困難的他們一手包辦!
SEO精靈的設定需自行設定,單購450元的樣版網站 (方案X) 並無提供SEO設定的服務,但是它的操作步驟並不難,你可以參考
Wix線上學院課程的第19單元,這裡有非常詳細的操作步驟。(線上課程都是免費的,沒有購買網站也能免費學習~)
之所以樣版網站沒有替大家先設定SEO精靈是因為每個人經營的品牌名稱和內容是不一樣的。
例如,你是一個「插畫家」,購買了「攝影師」樣版網站(因為商業模式相似只需微調圖文),那麼我們預先設定了攝影服務或攝影接案的SEO關鍵字就會不相關,所以請大家在調整完圖文之後,再自行設定SEO精靈。
如果你希望B&W幫你設定SEO精靈請
加購「Wix SEO精靈設定」,當你的網站的圖文都完成修改之後,B&W會幫你設定後續SEO精靈喔!
SEO精靈設定的詳細Wix操作步驟教學可以參考以下文章:
十三、升級網站
對於剛要開始經營個人品牌的新手創業家而言,WiX的免費版本其實已經非常夠用,非常足以製作非常精美的網站了!
由於我們一開始鎖定的目標客群很小,雖然網站流量不大,但是相對應的訂單量卻不少,因此免費的版本對我們而言就很夠用了,尤其在資金不是很雄厚的創業初期,那要如何評估是否要升級付費方案呢?
我們在這一篇文章中有更仔細的分析,幫助你思考並決定是否需要升級付費方案喔!
你的下一步
以上就是這個網站模版的經營設計手冊啦~~
- 如果你有任何問題,歡迎在玩家社群論壇提出來討論喔!
- 如果你想再看一下網站整體設計,立即查看網站
- 如果你決定要購買這個網站模版,購買網站模版
- 如果你想挑選看看其他網站模版,逛逛其他網站
- 如果你想要先學習Wix線上課程或文字筆記,進入線上學院
- 如果你已經購買了網站模版、要繼續編輯,登入Wix後台
1萬5千字完結灑花~~~
玩家 布蘭達&維尼
加入成為玩家
瞭解如何「貢獻世界的六大步驟」: )