免費 Wix 中文教學 2024｜直觀地架設與設計網站｜方案費用推薦

在這篇「免費 Wix 中文教學」，我會跟你分享如何在 Ｗix 架設一個客製化的網站。

或許你有網站設計的需求，但卻苦於自己缺乏設計的能力，所以一直遲遲沒有開始架設網站。

別擔心！我會從頭開始跟你一起利用 Wix 這個架站平台直觀地設計網站。

只要跟著這篇筆記一步步操作，相信你就能掌握基本功能，輕鬆打造出屬於自己的網站了！

對了，我還發現了 能讓 Wix 方案更便宜的小秘訣，我也會在這篇筆記跟你分享！

👉 想看看這篇筆記的網站範例，可以點我前往： 諾特斯旅遊

如果你偏好用影片學習，歡迎觀看下面的 YouTube 影片。

如果你喜歡透過圖文學習，請繼續往下閱讀吧 ！

圖文版會比較詳細、方便快速瀏覽，還會持續更新與補充內容。

Wix 是什麼？

Wix.com 是 2006 年在以色列成立的線上架站平台，目前在全球 190 個國家，有超過 2.5 億人使用它來架設網站。

Wix 提供了完整的一站式網站建立服務，包含網站設計、網域註冊、網站管理等。

使用者只需要操作 GUI (圖形使用者介面)，用拖拉的方式，簡簡單單就能編輯好網頁。

就算不懂程式碼也能輕鬆設計、建立自己的網站。

註冊與登入 Wix.com

那麼，讓我們現在就開始架設網站吧！

免費註冊 Wix 帳號

首先，可以點擊下方連結，前往 Wix 網站。

然後點擊畫面中央「現在就開始」，進入註冊畫面。

第一次使用 Wix 的你，需要先註冊一個免費的新帳號。

在左側欄位依序填入電子郵件及密碼，點擊「註冊」 Wix 帳號。

套用模板 (網頁範本)

完成註冊後，Wix 會問幾個問題來分析我們架站的需求，並自動幫我們設計出一個簡易的網頁架構。

不過今天我想要帶你利用 Wix 豐富的網頁範本資源來建立網站，所以我們點擊右下角的「略過」。

下一步，選擇「在沒有 AI 的協助下設定」。

後續的問題也都按「略過」。

進入後台管理介面，Wix 會請我們幫網站命名，這個名字可以先填個暫時的就好，之後都還能再更改。

點擊「繼續」到下一步。

接著，Wix 會繼續詢問其他跟設定相關的問題，我們都點選右下角「略過」。

最後，點選「前往管理介面」。

在後台管理介面的右上角按「設計網站」。

點擊右側的「挑選範本」進入網頁範本的選單。

Wix 提供超過 800 種「網站範本」能直接套用，這些範本可以幫我們輕鬆完成一個有設計感又專業的網站。

這次我以架設一個旅行社網站做示範，依照「旅遊服務」的主題挑選適合的網站範本。

點擊「查看」能預覽網站範本的完整頁面樣式。

我覺得這個網站範本的藍綠色調很有輕鬆度假的氛圍，還有簡潔的圖表設計，風格滿適合我們用來設計旅行社網站的！

選定後，點擊右上角「編輯這個網站」，將網站範本載入 Wix 編輯器。

認識 Wix 編輯器：網站的基本架構

一個網頁的組成主要分為三個部分：頁首、頁面和頁尾。

可以看到，網頁的上下各有一條橫向的虛線。

第一條虛線以上是頁首，頁首通常包含了網站的 LOGO、名稱和選單。

第二條虛線以下是頁尾，大部分網站會放置版權聲明、聯絡表單等等。

頁首和頁尾裡的內容會被標示為橘色，表示框選範圍內的內容都會出現在網站所有的分頁裡。

兩條橫向虛線之間的範圍就是頁面，也就是網頁的內容。

頁面裡的內容會被標示為紫色，代表這些內容只會出現在目前編輯中的分頁裡。

左右兩條縱向的虛線則代表了網頁內容的安全範圍邊界，兩條虛線之間的內容不會因瀏覽裝置大小不同而被切除。

而超出邊界的內容，則有可能會因為瀏覽裝置，例如手機或平板，螢幕比較小而無法完整顯示！

操作 Wix 編輯器：網站設計

接下來，我們正式進入網站編輯吧！

開啟自動儲存

首先，到編輯器的右上方，點擊「儲存」。

會彈出一個視窗要求設定網址，只能填寫數字和英文。

免費版 Wix 的網址前面灰色的部分都不能修改，會包含「wixsite.com」。

在後面的筆記，我會告訴大家 如何購買 Wix 方案並設定自己的域名，提升網站的專業度。

輸入完畢後，按下視窗右下角的「儲存並繼續」。

再按「已完成」關閉視窗。

Wix 非常貼心，在我們手動按下儲存後，接下來它就會定時幫我們自動儲存囉。

更換頁面背景

我希望訪客一進到網站就能看到我的主打服務是「東京旅行」，背景的海島圖片其實並不符合網站主題。

那就到左側工具列，點擊「網站設計」、「頁面背景」來修改背景。

我想要讓背景簡單一點，填入單色背景就好，選擇「色彩」打開色彩挑選器。

如果不太會配色的人也不用擔心！網站範本都有預設的主題色彩可以挑選。

點擊「粉藍色」，就將背景更換好囉。

編輯網站首圖

網頁一進來的第一個區段是首圖，是指一進入網站時訪客第一個看見的畫面，是網站的門面。

通常會用圖片或影片搭配簡短有力的一段文字，營造品牌形象和氣氛。

我們現在開始來設計它吧！

原先範本內有一些不想要的元件，點選它，按「Delete」或是點擊滑鼠右鍵選擇「刪除」，一一將它們刪掉。

快捷鍵：刪除
Windows / Mac 系統：Delete

新增圖片

再來，我要新增一張圖片。

在左側工具列點擊「新增元件」，選擇「圖片」、「上傳與匯入」、「上傳圖片」。

從電腦的資料夾將圖片拖曳進 Wix 來上傳圖片。

上傳完畢後選取圖片，

在右側的動作欄位點擊「裁切與編輯」進入「相片工作室」。

Ｗix 的相片工作室可以進行簡單的裁切、參數調整，還可以添加文字、裝飾等等，甚至還能幫圖片去背，堪稱是簡易版的 Photoshop。

我將照片套用濾鏡，按右上角「儲存」。

選取另存好的新圖片，點擊視窗右下角「新增到網頁」將它添加到頁面中。

拖動圖片邊緣調整大小，再移動到首圖左側。

編輯標題、文字

在最大的標題文字上連擊滑鼠左鍵兩下，開啟「文字設定」視窗。

輸入標題文字「跟諾特斯一起去東京」，把文字大小設成「40」。

增加效果「C」。

字元間距改成「0.1」。

小標題輸入「四天三夜經典行程」，一樣調整一下設計。

如果對更動的結果不滿意，就點擊編輯器右上角的「復原」或是快捷鍵「Ctrl + Z」回到上一步。

快捷鍵：復原
Windows 系統：Ctrl + Z
MAC 系統：Cmd + Z

接下來，到左側工具列，點擊「新增元件」、「文字」、「段落」，選取一段文字，拖曳到頁面中。

輸入一些介紹東京的內容，並調整文字設定。

設計收納盒

接著，我想調整標題後面的這個裝飾框。

這個元件在 Wix 中被稱為「收納盒」，可以與擺放在收納盒中的元件附著在一起，拖曳時就不會被分開了。

點選收納盒，在彈出的選項中點擊「變更設計」，這邊有許多預設的主題式方塊可以直接套用。

點擊「自訂設計」，可以再微調收納盒的形狀跟顏色。

再調整一下圖文排版，就完成首圖的編輯了。

製作行程表

下一個區段，我打算製作行程表來介紹包套行程。

原先網頁範本中的收納盒設計還滿符合我的需求，想把它變成單日的行程卡。

收納盒最上方的標題文字先改成「DAY 1」，套用樣式「標題 6」。

備註：關於標題
這篇筆記中使用 H6 標題只是範例，實際架設網站時，應遵循 H1~H6 規則來保持網站結構清晰，也有助於網站排名。

下面的文字我要分成兩組來製作。

第一組先輸入行程，讓它靠左對齊。

再按右鍵選擇「複製」、「貼上」，增加第二組文字。

把第二組文字輸入景點，在文字設定選擇「靠右對齊」。

設計一下文字跟收納盒的排版，這樣看起來會比原本的設計還要整齊！

新增裝飾

但是文字之間分隔地有點遠，我想要再添加幾條線引導一下閱讀視線。

在左側工具列點擊「新增元件」、「裝飾」，選擇「水平線」，將「虛線」拖曳到頁面中。

然後點擊「變更設計」、「自訂設計」。

修改線條的透明度跟寬度。

把水平線放置在兩段文字之間，再調整它的長度讓兩邊連接起來。

下一步，按住鍵盤「Alt / Option」鍵，用滑鼠拖曳虛線，就能複製出第二條虛線。

快捷鍵：滑鼠拖曳複製 (元件)
Windows 系統：滑鼠拖曳 + Alt
MAC 系統：滑鼠拖曳 + Option

調整虛線，把左右兩邊的第二行文字也連接起來，完成「DAY 1」的行程卡設計。

群組元素

接著，按住鍵盤「shift 鍵」再點選行程卡的收納盒跟圖片， 點擊彈出選項中的「群組元素」，將行程卡所有元件組成一個群組。

快捷鍵：滑鼠連續選取 (元件)
Windows 系統 / MAC 系統：滑鼠點擊 + Shift

這樣後續要移動或複製行程卡時，就不用再一個一個慢慢選取，比較方便！

目前只有一天的行程，我們還要多做幾個。

原先範本內其他用不到的元件，點選它們，按「Delete」一一刪除。

快捷鍵：刪除
Windows / Mac 系統：Delete

再來，選擇行程卡群組，按快捷鍵「Ctrl + D」複製貼上。

快捷鍵：重複 (複製並貼上)
Windows 系統：Ctrl + D
MAC 系統：Cmd + D

把內容修改成其他幾天的行程和景點。

新增收納盒、標題

下一步，我要幫這一串行程卡製作一個大標題。

在左側工具列點「新增元件」、「方塊」、「收納盒」，將「收納盒」拖曳到頁面上。

再點「新增元件」、「文字」，選擇一個「標題」放到收納盒上。

當輔助說明出現「附加於框裡」就可以放手，讓兩個元件附著在一起。

先把標題文字改成「精選行程」。

再調整收納盒設計，設定一點透明度，看起來會更有質感。

設計完成後，將這個大標題放在區段最上方。

使用參考線來排版

接著我想將行程卡依日期左右交錯排列。

我們先打開一個好用的輔助工具，點擊編輯器右上角的「工具」並勾選「尺規」。

開啟後，在尺規上面點一下，就能新增輔助參考線。

如果要移動參考線的位置，就將滑鼠移到尺規，當出現「雙箭頭」的圖示時就可以拖曳參考線。

或者是點數字兩下輸入數字來設定參考線的位置。

備註：移動參考線
輸入數字時也可以使用「加減法」，例如輸入「450 – 30」，參考線就會移動到「420」的位置上。

接下來，我再多新增幾條參考線，方便排版。

拖曳行程卡移動時，如果看到桃紅色的輔助線，就代表元件有確實對齊參考線。

依照日期將行程卡一左一右排列整齊。

排版完成後，如果不會再用到這些參考線的話，只要在尺規的參考線上按滑鼠左鍵兩下 ，再按「垃圾桶」圖示就可以刪除它。

更換區段背景 (搜尋 Ｗix 媒體圖庫)

下一步，我們在這個區段的空白處點一下，在彈出的選項中按「變更背景」，選擇「圖片」。

用關鍵字「tokyo」(東京) 搜尋 Ｗix 媒體，挑選一張很有東京代表性的晴空塔的照片，按右下角「變更背景」來套用。

再點擊「設定」。

將圖片不透明度設為「20%」。

到這邊，就差不多完成行程表了。

修改主題樣式

但這時，如果我突然想改變行程卡的標題字型， 難道要再一個一個重新調整嗎？

當然不用囉！

我們只需要點擊左側工具列的「網站設計」、「文字主題」。

選擇「自訂標題樣式」，找到行程卡標題所使用的樣式「標題 6」。

修改字型，完成後點擊右下角「套用」。

整個頁面中所有使用「標題 6」這個樣式的文字都會統一變更設計！

未來如果又改變主意，只需要回到工具列的「網站設計」中做調整，就能一鍵替換好所有相同標題樣式的文字。

不用一個一個手動修改，替我們大大節省了時間！

新增團隊介紹 (新增區段)

完成行程表之後，我要再新增團隊介紹的區段，讓網站內容豐富一些。

滑鼠移到行程表區段最下面，按下「+ 新增區段」。

再選擇「+ 空白區段」。

依照我 前面筆記寫的方式，添加團隊圖片跟介紹文字，也別忘了要做排版設計。

編輯分頁

接下來，我要新增一個分頁，用來介紹行程中的景點。

點選左上角第二排的「頁面」，可以自由切換、查看網站的所有頁面。

目前看到範本預設已經幫我們預先做好了幾個頁面，但我們想要自己設計新的。

那就點擊選單下方「管理頁面」。

點選頁面最右邊「更多」、「刪除」。

在跳出的警告視窗也選擇「刪除」，將其它預設頁面都一一刪除掉。

新增分頁

再來，到選單下方點擊「+ 新增選單項目」，選擇「新頁面」。

Wix 有提供許多預設的範本可以套用，但這次我選擇左上角「+ 空白網頁」，開啟一個空白的新分頁。

將新分頁命名為「景點介紹」，按「Enter」儲存設定。

快捷鍵：輸入
Windows / Mac 系統：Enter

新增帶狀區

現在開始編輯這個頁面吧！

在左側工具列「新增元件」、「帶狀區」、「關於」，挑選一個帶有圖片和文字的雙欄位帶狀區，拖曳到頁面中。

更改分欄配置

不過，我發現範本的照片佔比有點太大了，需要調整圖文的佔比。

選取帶狀區，在彈出的選項先按「管理欄」再按「版面配置」，將欄比例調整成 40%：60％。

選擇「已延伸」，調整延伸帶狀圖片的邊界為「120 px」，將帶狀區兩側往內縮。

再點選空白處，把背景改成白色。

接著，依序點選圖片及文字，替換成景點介紹的內容。

(忘記怎麼編輯圖文的話，可以看 這裡 )

新增按鈕

除了圖文介紹外，我想再增加可以跳轉到各景點官方網站的連結。

在左側工具列點擊「新增元件」、「按鈕」、「文字與圖示按鈕」，拖曳到頁面中。

點選按鈕，選擇「設計」、「自訂設計」。

將「角落」「半徑」設定為「10 px」，把按鈕設計成圓角的話，風格看起來比較柔和。

點擊「變更文字和圖示」，將文字改為「官方網站」，點選「選擇連結」，設定「要連結到哪裡？」。

點選「網址」，並貼上網址 (URL)，最後，按右下角「已完成」。

想要確認連結有沒有生效的話，可以點擊編輯器右上角的「預覽」，進入預覽模式進行測試。

確認好按鈕可以正確連結到指定網站後，按「回到編輯器」繼續設計網站。

之後用「重複」功能再製造出其他兩個帶狀區，新增更多的景點介紹。

快捷鍵：重複 (複製並貼上)
Windows 系統：Ctrl + D
MAC 系統：Cmd + D

為了增添一點版面變化，我點選第二個景點介紹左邊的照片，選擇「管理欄」、「往右移」。

讓第二個帶狀區的圖片跟文字位置左右對調，讓網頁在瀏覽時能有圖文錯位的效果。

建立社群連結

再來，回到首頁。

我打算新增一個社群連結，讓訪客也能轉跳到我的 YouTube 頻道，查看更多資訊。

從左側工具列點擊「新增元件」、「社交平台」、「社群工具列」，拖曳出來放到頁面中。

預設的社群連結是 6 個圖示一組，我只要保留 YouTube 圖示就好。

先點擊「設定社群連結」。

按圖示右下角的「移除圖片」將不需要的圖示刪除。

如果預設裡沒有出現我們想要的圖示，也可以按「＋新增圖示」手動添加其他圖示。

按右邊「連結」並輸入網址，點擊「已完成」來儲存設定。

釘選元件 (轉貼至螢幕)

那如果我希望這個連結永遠停留在畫面右側，方便隨時點擊的話，該怎麼設定呢？

只要點選圖示按滑鼠右鍵，選擇「轉貼至螢幕」。

調整位置及水平 / 垂直偏移量，完成後，按「X」關閉視窗並儲存設定。

這樣無論我怎麼滑動頁面，社群連結都會固定在畫面右下角，隨時都可以看到囉。

編輯頁首

首先，要先將範本圖片變更成我們自己的 LOGO，點選「變更圖片」。

到這邊，頁面的內容大致都完成了，現在我們來編輯頁首吧！

上傳自己準備好的 LOGO 圖片 (上傳圖片的方法可以看這裡)，選取它，按「裁切與編輯」。

利用相片工作室中的「擷取」功能，點擊「自動擷取」將圖片背景去掉，並按「儲存」，另存一個去背好的 LOGO 圖片。

然後，點擊右下角「選擇圖片」，將頁首的 LOGO 替換掉。

文字部分更改成我的品牌名稱「諾特斯旅遊」，並調整圖文排版。

建立錨點

接下來，我要編輯頁首的網頁選單，在這之前，得先對選單的項目做設定。

首先，如果想讓瀏覽網頁的訪客快速跳轉到他們想要看到的內容，就需要先定位好內容的所在位置。

在左側工具列點擊「新增元件」、「選單與錨點」、「錨點」，把「錨點」拖曳到行程表區段的最上方。

在彈出的視窗中，將錨點命名為「精選行程」，輸入完畢後，按視窗右上角的「✕」關閉視窗並儲存設定。

同樣的，也幫團隊介紹設定一個錨點，命名為「專業團隊」。

編輯網站頁面與選單

接著要調整選單項目，將設定好的錨點加入選單中。

先選擇左側工具列的「頁面與選單」，點擊下方的「+ 新增選單項目」、「錨點」。

在「在頁面的哪裡？」欄位，選擇剛剛設定好的「精選行程」，最後按「已完成」儲存設定。

重複這個步驟，將「專業團隊」也加入選單。

最後，用拖曳的方式排列選單順序。

新增網站選單

接著，刪掉原本範本預設的網頁選單。

快捷鍵：刪除
Windows / Mac 系統：Delete

從左側工具列「新增元件」、「選單與錨點」、「橫式選單」，重新挑選一個選單，拖曳到頁首正中央。

設計網站選單外觀

接下來，我們要修改一下選單的外觀。

選取網站選單，在彈出的選項中按「設計」、「自訂設計」。

選擇設計「選單項目」。

針對選單的三種型態進行編輯：

• 固定：一般情況下的選單項目
• 浮動：滑鼠停留在選單項目上
• 當前網頁：正在瀏覽此選單項目的頁面

我先設計「固定」型態，修改背景及文字顏色。

取消邊框。

並把邊緣改為圓角。

再加上陰影。

剩下的「浮動」跟「當前網頁」型態，在設計上做一點變化，建議大家可以用同個色系做配色，這樣的選單看起來會更有整體感。

如果你覺得我這樣的設計還蠻好看的話，可以參考以下參數做設定：

編輯完成後，按視窗右上角的「✕」關閉視窗並儲存設定。

變更頁首設計

在頁首空白處按右鍵，選擇「變更頁首設計」。

換掉頁首的背景。

再按住頁首最底下的「橘色雙箭頭」，將頁首調整到適合的高度。

編輯頁尾

接著，把頁面往下滑到最底部就是頁尾的區域。

新增行動呼籲與連絡表單

我想要在頁尾增加行動呼籲跟連絡表單。

首先，刪除不需要的元件。

再將預設文字修改成我的行動呼籲「等不及開始旅程了吧！現在就與我們聯絡！」。

滑鼠移到帶狀區最下方，當滑鼠變成雙箭頭的時候按住往下拖曳，將頁尾拉長留出一段空間，等等要放入連絡表單。

從左側工具列點擊「新增元件」、「連絡與表單」、「聯絡」，將表單拉進頁尾，靠右放置。

把背景改成「白色」。

新增版權聲明

在頁尾的底部新增版權聲明的文字段落，版權聲明通常會寫成以下形式：

諾特斯觀眾小默契

我再來提倡一個諾特斯與讀者之間的小默契，你可以在自己的網站頁尾加上「✏️」的 Emoji。

這個鉛筆的符號，就是諾特斯觀眾的秘密記號。

有加這個秘密記號的人，都有著一段看諾特斯的影片或文章，架設網站的共同回憶。

以後看到頁尾有這個秘密記號的網站，就知道是自己人，大家可以互相照顧一下。

設定動態效果

到這裡，其實網站內容已經相當完整，但瀏覽起來感覺還是有點單調。

這時候可以再加入一些動態效果，讓網站更有互動性！

頁首捲動設定

首先，回到頁首，在空白處點擊滑鼠右鍵，選擇「頁首捲動設定」。

目前 Wix 提供 4 種捲動效果可以選擇，我選擇套用「凍結」。

用預覽檢查看看效果。

在瀏覽網頁時，當訪客上下捲動網頁， 頁首的選單依然會一直保留在網頁最上方。

再按「回到編輯器」，繼續設定動態效果。

針對頁面內容，Wix 所提供的動態效果主要有以下幾種：

背景捲動效果

在帶狀區裡的背景圖片上點擊滑鼠右鍵，選擇「背景捲動效果」。

選擇捲動效果為「視差效果」。

再次用預覽檢查，在滾動網頁時會呈現一種圖文漂浮在頁面上的感覺。

懸停互動

選擇行程卡的收納盒後，在彈出的選項中按「懸停互動」、「立即開始」進入懸停模式。

點擊「選擇效果」，套用「發展」再點下「自訂」。

設定發展成 110%、發展起點在中上方。

設定好，點擊空白處就可以退出懸停模式，再依序將其他行程卡都設定完成。

在預覽中能看到，當滑鼠停留在行程卡上方時，行程卡就會突出放大。

動畫

先選取文字，點擊滑鼠右鍵，選擇「動畫」。

套用「懸浮進入」。

用預覽檢查看看，在瀏覽網頁時，文字內容會由右向左漸漸浮現。

編輯行動版網站

因為行動裝置的普及，現在有很多人是用手機或平板來瀏覽網站，我們還需要確保網站在行動裝置上的排版是整齊的。

點擊編輯器左上方的「轉換到行動裝置」。

看到新手指引，選擇「略過這個」，進入行動版網站編輯器。

一開始可能會看到網站內容亂成一團，但別擔心！

當你調整行動版的排版時，並不會影響到電腦版網站看到的畫面，所以可以安心的移動行動版中跑掉的元件。

隱藏元件

往下滑到行程表，有些裝飾用的元件在行動版這樣較窄的畫面裡反而顯得多餘。

選取不想要顯示的元件，點擊滑鼠右鍵，選擇「隱藏」，這樣在行動版網站上就看不到了！

接著，要繼續調整頁面排版直到所有元件排列整齊，這個過程會稍微有點繁瑣，但這是不可以忽略的設計細節。

移動欄位

在景點介紹的分頁中，原本左右排列的圖文在行動版網站會變成上下排列，目前版面是「文字在上、圖在下」的形式。

點選圖片欄位，在彈出的選項中點擊「管理欄」。

選擇「往上移」，將圖片與介紹文字的位置交換。

改成圖上文下，讓瀏覽網站的訪客先被圖片吸引目光，再看文字介紹，這樣的圖文順序會更符合手機使用者的瀏覽習慣。

新增「回到頂端」按鈕

還有，行動版網站通常會變得比較長，所以我們可以新增一個「回到頂部」的按鈕，方便瀏覽網站的訪客快速回到頁首。

在左側工具列點擊「行動工具」，將「回到頂端」按鈕「新增至網站」。

如果想要移動按鈕的位置，就按下「版面配置」進行調整，完成後按視窗右上角的「✕」關閉視窗並儲存設定。

發佈網站

到這邊，我的網站就完成設計了。

點擊右上角的「發佈」，就能正式將網站公開在網路上讓大家瀏覽囉！

升級網站：2024 方案費用與優惠

雖然我們已經完成自己的網站，但目前使用的 Ｗix 免費版，不能連結自訂域名，而且在網站上會顯示 Wix 的廣告。

如果要打造出自己的品牌感，增加專業性，我推薦可以升級成付費方案。

Wix 網站費用

要選擇哪種 Wix 方案主要取決於個人的需求和預算。

所有的進階方案都能移除網站上的 Wix 廣告，還有更多的儲存空間和瀏覽頻寬。

除了可以自訂域名外，還會贈送一年的免費網域，而且所有網域都提供了免費 SSL 憑證。

如果你想瞭解 SSL 憑證是什麼，可以點擊下方連結，閱讀我的另一篇詳細筆記！

進階方案目前有 4 種：

輕盈方案：

• 價格：最便宜，每個月 7 美金 (約 210 台幣)
• 共同作業者：2 位
• 2G 儲存空間
• 適合哪些人：想用最少預算建立個人網站的人

而「核心」、「商業」、「高級商業」三種方案，都包含了電子商務跟網站分析的功能。

只是依照方案等級不同，分為基本、標準、進階服務的差異，儲存空間、頻寬也會隨方案等級提升而遞增。

核心方案：

• 價格：每個月 11 美金 (約 330 台幣)
• 共同作業者：5 位
• 50 GB 儲存空間
• 基本行銷套裝、網站分析
• 適合哪些人：初期發展階段的電商網站

商業方案：

• 價格：每個月 22 美金 (約 660 台幣)
• 共同作業者：10 位
• 100 GB 儲存空間
• 標準行銷套裝、網站分析
• 特點：多幣種顯示、自動計算銷售稅
• 適合哪些人：成熟的電商品牌

高級商業：

• 價格：最高，每個月 46 美金 (約 1380台幣)
• 共同作業者：15 位
• 無限儲存空間
• 進階行銷套裝、網站分析
• 特點：進階開發人員平台、24 小時優先客戶服務
• 適合哪些人：組織規模較大的企業。

不過，後來我又發現可以 用更便宜的價格升級 的方法！

備註：
諾特斯網站提到的台幣價格，都是以美金對台幣匯率 1：30 估算。但是，匯率會隨時間浮動，實際的台幣價格還是要以交易當下的匯率為準喔。

Wix 費用：省錢小秘訣

台灣時間 (UTC+8) 每週二下午三點開始，會有 48 小時的限時優惠，升級到「核心」以上的方案都可以折扣 50% (相當於打 5 折)。

像是「核心」方案的價格就降到每個月 5.5 美金 (約 165 台幣)，比最初階的「輕盈」方案還便宜！

你會收到 Wix 寄出的優惠 Email，或是在限時優惠期間 登入 Wix 網站後台，都可以看到這項優惠。

我已經將 Wix 進階方案價格做成一份簡單的表格，讓你參考看看。

方案	高級商業	商業	核心	輕盈
原價	46 美金 / 月 (約 1380 台幣)	22 美金 / 月 (約 660 台幣)	11 美金 / 月 (約 330 台幣)	7 美金 / 月 (約 210 台幣)
限時優惠價	23 美金 / 月 (約 690 台幣)	11 美金 / 月 (約 330 台幣)	5.5 美金 / 月 (約 165 台幣)	維持原價
共同作業者	15	10	5	2
儲存空間	無限	100 GB	50 GB	2GB
行銷套裝	進階	標準	基本	精簡
一年免費網域	✔️	✔️	✔️	✔️
自訂網域	✔️	✔️	✔️	✔️
移除 Wix 品牌廣告	✔️	✔️	✔️	✔️
免費SSL憑證	✔️	✔️	✔️	✔️
網站分析	進階	標準	基本	✘
電子商務 (接受付款)	✔️	✔️	✔️	✘
多幣種換算	10 種	5 種	✘	✘
特點	進階開發人員平台、 優先客戶服務	多幣種顯示、 自動計算銷售稅	電子商務最基本版	最基礎的入門選擇
適合哪些人	企業	成熟的電商品牌	剛起步的小型電商	個人

備註：
以上價格皆為一年約的單月價格。

這邊也提醒大家，所有進階方案都贈送了一年的免費域名，但從第二年開始，就需要另外支付域名的費用。

升級 Wix 進階方案

這次我要升級限時優惠有 50% 折扣的「核心」方案。

選擇編輯器左上方「網站」，點擊「我的管理介面」進入網站後台管理介面。

按介面上方的「升級」，開啟選擇進階方案的新頁面。

點擊「核心」方案的「選購」。

年付方案的價格是 5.5 美金 (約 165 台幣) x 12 個月，如果選擇 2 年約，單月價格則會再更便宜。

如果還不確定會不會長久使用 Wix 這個平台的話，可以先選擇合約期一年的「年付」，按右下角的「繼續結帳」。

目前 Wix 有提供 PayPal 跟信用卡兩種付款方式，這次的筆記裡我以信用卡為例，依序填寫信用卡及請款單地址、電話等資料。

最後檢查帳單金額，確認 50% 優惠有確實折扣，另外再加收 5% 加值營業稅，才是最終價格。

確認完後，按下「提交購買」，就完成方案升級了。

備註：
Wix 方案的「退款」 ： Wix 有 14 天內免費的退款政策，在購買付費方案後的 14 天內取消方案，可以全額退款。
Wix 方案的「升級」： Wix 方案可以隨時升級，只要補上方案間的差額，新方案的所有服務會立即生效。

連結自訂網域

最後，我們要設定自己的網域名稱。

在畫面中間的欄位填上想申請的網域名稱，常見的命名方式會像是品牌名稱、關鍵字等。

輸入想使用的域名後，按下「搜尋」，Wix 會辨識這個域名是不是已經被註冊。

如果可以使用，就按下「立即取得」。

接著選擇註冊期間，由於 Wix 付費方案中已經包含一年的免費網域，所以不管選擇幾年的註冊期，都會免除一年的費用。

選擇「1 年」後，可以在右側摘要看到費用折扣完變成 0 元，點擊「繼續」到下一步。

再來，要填寫網域註冊者的聯絡資訊，地址必須填寫英文的才能通過。

如果需要中文地址翻譯成英文地址的工具，請點擊下方連結：

👉 點我前往： 中華郵政全球資訊網：郵務業務｜中文地址英譯

填完資料後，按「繼續」前往下一步驟。

如果你比較注重個資隱私的話，可以考慮加購「保密註冊」，價格是一年 9.9 美金 (約 297 台幣)。

我這次選擇「公開註冊」則是完全免費的，點「繼續」進行結帳。

確認付款方式跟金額後，點擊「提交購買」，域名就購買成功了。

接著，先到剛剛註冊時填寫的 E-mail 信箱，我們會收到一封來自 Wix 的網域聯絡資訊確認信。

點擊信件中的橘色按鈕「Confirm」(確認)，跳轉到驗證聯絡資訊的頁面。

點擊畫面最下方橘色按鈕「VERIFY INFORMATION」 (驗證資料) ，完成驗證。

最後，回到 Wix ，按左下方「前往網域」回到網站管理介面。

點擊網址旁的「開啟新分頁」。

可以看到網頁上的 Wix 廣告已經不見了，域名也已經正式生效。

備註：域名生效時間
官方公告的網域生效時間最多需等待 24 小時，如果當下開啟網頁時無法正常顯示，也是正常的喔！
域名註冊後通常要等一段時間才會生效，可以明天再回來檢查看看。

這樣就完成整個網站的架設囉！

👉 想看這篇筆記的網站成品，點我前往： 諾特斯旅遊

筆記使用到的 Wix 快捷鍵整理

指令	Windows 系統	Mac 系統	備註
刪除	delete	delete	–
復原	Ctrl + Z	Cmd + Z	回到上一步
滑鼠「拖曳複製」	滑鼠拖曳 + Alt	滑鼠拖曳 + Option	按著Alt， 同時以滑鼠拖曳元件
滑鼠「連續選取」	shift + 滑鼠點擊	shift + 滑鼠點擊	按著 shift， 同時以滑鼠點擊元件
重複	Ctrl + D	Ctrl + D	將選定的元件複製並貼上
輸入	Enter	Enter	–

總結：用元件組合直觀地設計 Wix 網頁

恭喜你！今天我們一起從零開始，利用 Wix 這個平台打造了一個屬於自己的網站！

是不是很有成就感呢？

希望透過這篇筆記，能夠讓你體會到，原來自己設計網站真的很簡單。

大家可以注意到，今天我們就是透過組合各種「元件」，來完成網頁的設計。

未來如果有觀察到其它網站的設計，覺得很漂亮，也可以試著在腦袋裡拆解看看，思考它是用哪些元件組合起來的呢？

我們可以學習其它網站的優點，再回過頭持續優化自己的網站設計。

祝大家在架設網站的路上一切順利！

⭐ 其他相關筆記
Wix、WordPress 比較｜哪個才是架設網站最好的平台？

參考資料

• How to Make a Website With Wix: Wix Tutorial for Beginners
• 《Wix編輯器教學》第 1 堂課：使用 Wix 編輯器開始創建你的網站
• Build your website with the Wix Editor | Full Course
• How to Make a Website – Wix Tutorial for Beginners
• Wix Tutorial 2023(Full Tutorial For Beginners) – Create A Professional Website
• 如何使用 Wix 輕鬆製作個人網站 + 作品集？

製作團隊

總編輯、發佈：諾特斯
文字撰寫、文字編輯、圖片製作、圖片編輯：鹹魚
圖片製作：蚊子