WordPress Elementor 中文教學：打造履歷 / 接案作品集網站，讓客戶一看就下單

你剛開始接案，或正準備投履歷，卻不知道怎麼讓客戶、面試官一眼看見你的實力嗎？

其實，做一個簡潔、有質感的作品集網站，就是展示自己最有效的方法！

不論你是設計師、攝影師、插畫家，或是其他需要展示作品的自由工作者，這篇筆記都很適合你。

我會帶你一步步打造出專屬的接案作品集網站，不只能展示作品，還包含簡單的履歷，讓你輕鬆呈現專業形象，提升接案成功率！

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

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

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

接案作品集網站製作規劃

接案作品集網站成果展示

在正式開始操作之前，先讓你看看跟著這篇筆記做出來的成品，整個網站由兩個核心頁面組成：

首頁的重點，是幫你建立專業又俐落的第一印象。

內容會包含個人形象、代表作品、學經歷、服務項目，以及清楚的聯絡方式。

讓案主一打開網站，就能快速知道你是誰、擅長什麼，也清楚怎麼進一步和你洽談合作。

我們會另外做一個獨立的作品頁，把所有專案統整起來，方便案主深入了解你的能力與風格。

簡單來說，這是一個以「接案」為核心的作品集網站，透過履歷與作品展示，為你爭取更多合作機會。

接案作品集網站製作流程

1. 用 Bluehost 主機架設 WordPress 網站

為什麼推薦用 Bluehost 主機製作接案作品集網站？

① 操作簡單

Bluehost 的使用者介面非常直覺、好上手。

作為 WordPress 官方推薦的主機之一，在 Bluehost 上同時租用主機和註冊域名，系統會自動處理好大部分後台設定，幫你解決繁瑣的技術細節，把心力完全放在作品呈現上。

② 24 小時真人文字客服

如果你在架站過程中遇到任何問題，客服都能即時提供協助，排除問題。

③ 價格親民，CP 值高

Bluehost 是高 CP 值共享主機 (虛擬主機)，我另外向 Bluehost 公司爭取到專屬優惠，透過 諾特斯連結 註冊，每個月最低只要 $2.99 美金 (約 $90 台幣)。

備註：
台幣價格是用美金兌台幣匯率 30 來估算。不過，因為匯率會隨時間浮動，實際的台幣價格還是要看交易時的匯率喔。

點擊連結優惠即生效！

🎁 取得專屬 3 折優惠

這個價格附贈免費的 SSL 憑證和 CDN 服務，還多送你 1 年免費域名。

如果你預算有限，又想快速做一個專業的接案作品集網站，Bluehost 會是非常理想的選擇！

但這邊要補充一點，如果你的網站符合以下情況之一：

• 需要放置大量的高解析度影音
• 想做各種華麗的動態效果
• 未來有打算販售商品，需要電子商務功能

共享主機資源有限，網站運行起來比較吃力，我會建議你考慮 效能更強、速度更快的 Cloudways 主機。

👉 延伸閱讀：Bluehost vs Cloudways｜該選哪個 WordPress 主機來架設網站？

(1) 選擇適合的 Bluehost 主機方案

第 1 步

點擊下方諾特斯觀眾專屬連結，進到 Bluehost 官方網站。

點擊連結優惠即生效！

🎁 取得專屬 3 折優惠

第 2 步

點擊按鈕「Get Started Now」(現在開始) 。

第 3 步

Bluehost 方案價格已經自動套用 諾特斯優惠，點擊 Starter (入門方案) 的「Choose Plan」(選擇方案)。

如果你有考慮其他更進階的方案，可以點擊下方連結，參考我整理的 Bluehost 方案介紹。

Bluehost WordPress 完整教學與費用分析｜高 CP 值主機推薦

進一步瞭解

(2) 註冊 Bluehost 域名

第 1 步

填寫想要註冊的域名，也就是網站的網址。

✏️ 取域名的小技巧

① 使用個人元素或主題關鍵字：用你的英文名字、綽號來取域名。

② 簡短好記：避免使用符號，或是英數交錯混用，讓訪客更容易記住你，加深品牌印象。

③ 優先選擇 .com 域名：目前全世界有超過 40% 的網站都是用 .com 域名，最常見又好記，看起來比較正規，讓人更有信任感。要是 .com 域名已被註冊，改註冊 .net 或 .org 也是可以的。

備註：域名註冊後不能修改！註冊的時候務必仔細檢查，不要拼錯。

✏️ 現在還沒有想好要用什麼域名，可以之後再註冊嗎？

當然可以，只要點「Choose domain later」(稍後選擇域名) 就可以先跳過「註冊域名」步驟。

不過，事後補註冊的操作步驟會比較麻煩，所以我會建議在註冊前就先計劃好要用什麼域名。

第 2 步

把「Add Domain Privacy + Protection」(新增域名隱私保護) 取消勾選。

第 3 步

點擊「UNPROTECTED」(不受保護)。

第 4 步

按下「Search For Domain」(搜尋域名)。

(3) 租用 Bluehost 主機

第 1 步

輸入「Email」(電子信箱) 並自訂一組「Password」(密碼)，這會是之後登入 Bluehost 用的帳號、密碼。

第 2 步

「Recommended Add-ons」(推薦附加元件) 都是要另外付費加購的，目前用不到，所以全部「取消勾選」。

第 3 步

對照附圖的中文翻譯，填寫「Billing Information」(帳單資訊)。

第 4 步

如果你是為了求職等短期目標而架設網站，不確定未來還會不會用得到的話，「Shopping Cart」(購物車) 第一項可以切換成「1 Year」(1 年)，每個月的主機價格是 $3.99 美金 (約 $120 台幣)。

這樣啟動成本最低，不用一開始就砸一大筆錢，之後有需要延續再換到 更高階的主機 就好。

第 5 步

Data Center (資料中心) 是指主機的所在位置，系統會依照先前在「Billing Information」(帳單資訊) 填寫的地址，自動選擇離你最近的地點。

以亞洲地區為例，預設會是「India, Mumbai」(印度，孟買)。

因為購買 Starter 方案會贈送 1 年的免費域名，所以費用就是 0 元。

第 6 步

「Professional Email Trial」(專業 Email 試用) 因為有贈送 1 個月試用所以費用顯示為 0 元。

但是它試用結束後會自動續訂，為了避免後續忘記取消而被收取額外費用，建議先點擊「Remove」(移除) 把它刪掉。

真的有需要時，再到 Bluehost 後台加購 比較省錢！

第 7 步

要是不想收到 Bluehost 的促銷資訊，把「YES, I want special offers and educational content from Bluehost.」(是的，我想收到 Bluehost 的特別優惠與教育內容。) 取消勾選。

第 8 步

按下藍色按鈕「SUBMIT PAYMENT」(提交付款)。

如果你有遇到無法付款的問題，我之前有將解決的 5 種方法整理成筆記，你可以點擊下方連結前往。

購買 Bluehost 主機時無法付款怎麼辦？

進一步瞭解

(4) 在 Bluehost 主機安裝 WordPress

Bluehost 會自動安裝 WordPress.org 提供給我們的免費 WordPress 軟體。

👉 延伸閱讀：wordpress.com和wordpress.org 有什麼差別？

當看到如下圖的 Bluehost 後台介面，就代表網站已經準備好了，點擊域名就可以打開網站。

目前網址已經是我註冊的域名，但是 SSL 憑證還沒有生效，所以網站會出現「不安全」的警告。

有的時候，不只是 SSL 憑證還沒生效，還可能遇到正式域名還沒生效，導致網站顯示臨時網址的情況。

遇到這些狀況，其實都不用緊張！

只要耐心等待幾個小時到 1 天的時間，Bluehost 會自動把註冊的域名和網站連結起來，並安裝好免費的 SSL 憑證了。

✏️ 諾特斯的經驗分享

這次諾特斯示範時，大約是在註冊完域名的 4 小時後，網址已經自動變成我註冊的正式域名，並安裝好 SSL 憑證。

✏️ SSL 憑證與域名尚未生效時，我可以繼續後續的架站操作嗎？

域名跟 SSL 憑證還沒生效時，如果你等不及想馬上開始架站了，可以安心地照著後續步驟直接開始設定。

Bluehost 會在背景自動完成設定，不會影響到後續操作。

✏️ SSL 憑證與域名一直沒有生效怎麼辦？

要是你等了一整天，域名和 SSL 憑證都還沒生效，只要從 Bluehost 後台，點擊「Ask BLU」(詢問 BLU)，Bluehost 客服會非常快速、免費幫你解決問題！

(5) 收取域名聯絡資訊確認信

第 1 步

到剛剛註冊時填寫的 Email 信箱，我們會收到幾封來自 Bluehost 的信件。

「Order Confirmation」(訂單確認) 是租主機的收據，建議保留起來。

點開主旨寫著「Alert: Keep Your Domain Active」(提醒：保持你的域名活躍) 的「域名聯絡資訊確認信」。

第 2 步

點擊橘色按鈕「CONFIRM EMAIL ADDRESS」(確認電子郵件地址)。

看到「Your Email is Confirmed」(你的電子郵件已確認)，就表示驗證成功。

(6) WordPress 網站設定

什麼是 WordPress 前台/後台？

在 WordPress 相關的筆記中，你會常常看到「WordPress 前台」、「WordPress 後台」這兩個詞，有時候也寫作「網站前台」、「網站後台」，意思都是一樣的。

WordPress 前台指的是訪客能直接看到的部分，也就是網站對外呈現的畫面。

相對的，WordPress 後台是管理、編輯網站的地方，只有管理者 (你自己) 才能進入。

做網站時，我們時常會在前台、後台之間切換，例如在後台做設定，再到前台檢查訪客看到的畫面是否正確。

如何從 Bluehost 前往網站前台？

在 Bluehost 後台，點擊域名即可開啟網站。

如何從 Bluehost 前往網站後台？

在 Bluehost 後台，點擊網站名稱最右側的「WordPress Admin」(WordPress 管理員)。

[1] 網站基礎設定 (WordPress 後台)

第 1 步

點擊 WordPress 後台左側欄位的「Settings」(設定)、「General」(一般)。

第 2 步

找到「Site Language」(網站語言)，點開選單，選擇「繁體中文」。

第 3 步

點擊「Save Changes」(儲存變更)。

介面變成中文，操作更直覺、方便。

第 4 步

填寫「網站標題」與「網站說明」。

第 5 步

檢查 WordPress 位址跟網站位址的部分，如果正式域名已經確實套用、網址的開頭也變成「https」，表示 Bluehost 提供的免費 SSL 憑證已經生效。

✏️ 不要自行更改網址

如果你還沒等域名或 SSL 憑證生效就開始設定 WordPress，WordPress 位址跟網站位址可能會顯示 Bluehost 的臨時域名，網址開頭會是 http。

請不要手動變更此處網址，以避免網站發生錯誤導致無法開啟後台，Bluehost 將會在域名與 SSL 憑證生效後自動修正網址。

第 6 步

根據你的所在地點，選擇對應的「時區」。

第 7 步

「日期格式」跟「時間格式」的部分，我個人都會選擇「第 1 個選項」，看起來比較符合中文閱讀的習慣。

• 「Y 年 n 月 j 日」，範例：2024 年 8 月 21 日
• 「a g:i」，範例：上午 2:17

第 8 步

點擊「儲存設定」。

[2] 刪除不需要的外掛

第 1 步

在 WordPress 後台，點擊左側欄位的「外掛」，進到外掛列表。

Bluehost 已經預先幫我們安裝好幾款外掛了，但暫時都用不到。

我們可以刪掉這些外掛，讓後台變得更簡潔，既不會浪費主機資源又能提升網站速度。

之後如果真的有需要，再把外掛重新安裝回來就好！

第 2 步

勾選藍底的外掛。

第 3 步

「批次操作」選擇「停用」。

第 4 步

點擊「套用」。

第 5 步

停用的外掛會變成白底，把要刪掉的外掛通通打勾。

第 6 步

「批次操作」選擇「刪除」。

第 7 步

點擊「套用」。

第 8 步

點擊「確定」。

2. 安裝 Blocksy 佈景主題 & Elementor 頁面編輯器

Blocksy 佈景主題是什麼？

WordPress 佈景主題通常簡稱為「主題」，提供了豐富的網站模板和設計工具讓我們選擇。

我們可以把網站想像成一棟房子：WordPress 就像房子的結構，確保一切正常運作；網站外觀是裝潢。

我們挑選佈景主題，就像是選擇裝潢的設計師。主題會提供我們不同的網站模板，讓我們可以快速變換網站的整體風格。

更換網站模板，就像重新裝潢一樣，網站內容不會變，但網站外觀可能完全不同。

在試用過各種佈景主題之後，我最推薦的是一款免費 WordPress 主題 —— Blocksy！

🎁 免費下載 Blocksy

Blocksy 主題 不但風格簡約，功能還非常強大，像這個網站就是用 Blocksy 做的。

很多在別的主題要付費才有的功能，例如：固定頁首、側邊欄或是客製化網站配色等等，Blocksy 都是免費提供，真的很佛心。

Elementor 頁面編輯器是什麼？

「頁面編輯器」顧名思義就是用來編排網頁內容的工具。

WordPress 本身有內建的古騰堡編輯器 (Gutenberg)，不過這次我會使用一款叫做 Elementor 的頁面編輯器外掛。

🎁 免費下載 Elementor

Elementor 是用拖拉的方式來編輯內容，靈活度更高，你能夠一邊調整一邊從預覽畫面看到變化，這種所見即所得的特性，讓操作非常直觀。

更棒的是，Elementor 提供了豐富的設計元素，讓我們不用寫程式，也能控制每一個細節，輕鬆做出你想要的視覺效果。

Blocksy vs Elementor (區分使用範圍)

這次我們會用佈景主題 Blocksy 搭配頁面編輯器 Elementor，來製作接案作品集網站。

看到這裡你可能會想：「為什麼做一個網站，要同時用兩個工具呢？」

簡單來說，Blocksy 是整個網站設計的基礎，幫網站奠定整體的視覺風格。

當我們想做出更靈活、更細節的頁面排版，Blocksy 本身功能不敷使用時，就需要 Elementor 來補足。

兩者搭配的好處是：網站既能維持一致的整體風格，也能在重點頁面做出更豐富的設計。

實際操作的時候，哪些地方要用 Blocksy、哪些地方要用 Elementor 呢？

所以這次教學，我會先用 Blocksy 把網站設計的大方向定好，再用 Elementor 去編輯各個頁面的內容。

(1) 安裝主題 Blocksy

第 1 步

點擊下方連結，前往 Blocksy 官方網站。

🎁 免費下載 Blocksy

🎁 免費下載 Blocksy

第 2 步

點擊「Free Download」(免費下載)。

第 3 步

點擊「Download」(下載)，取得主題 zip 檔。

第 4 步

回到 WordPress 後台，從左側欄位點擊「外觀」。

第 5 步

點擊「安裝佈景主題」。

第 6 步

點擊「上傳佈景主題」。

第 7 步

將佈景主題 zip 檔拖曳進來上傳。

第 8 步

按下「立即安裝」。

第 9 步

點擊「啟用」。

第 10 步

點擊「安裝 Blocksy Companion」。

這是 Blocksy 主題的附加外掛，安裝之後，可以讓 Blocksy 主題的功能變得更強大。

(2) 安裝頁面編輯器 Elementor

第 1 步

點擊下方連結，前往 Elementor 官方網站。

🎁 免費下載 Elementor

第 2 步

點擊「Download free」(免費下載)。

第 3 步

輸入你的 Email —— 圖片標註 ➀。

把使用條款「打勾」—— 圖片標註 ➁。

第 4 步

點擊「Let’s Go」(開始吧)，下載外掛 zip 檔。

第 5 步

回到 WordPress 後台，從左側欄位選擇「外掛」。

第 6 步

點擊「安裝外掛」。

第 7 步

點擊「上傳外掛」。

第 8 步

拖曳上傳外掛 zip 檔。

第 9 步

按下「立即安裝」。

第 10 步

點擊「啟用外掛」。

(3) 套用作品集網站模板

為了快速完成接案作品集網站，我們可以套用 Blocksy 主題 提供的現成模板來節省設計的時間。

第 1 步

點擊左側欄位的「Blocksy」。

第 2 步

切換到「範本網站」。

第 3 步

選擇「Portfolio」(作品集) 分類。

第 4 步

點「預覽」可以進一步查看模板網站細節。

「Beverr」模板網站展示了作品、學經歷、服務項目和聯絡方式，還加入了動畫跟游標互動的效果，非常符合我對作品集的需求。

第 5 步

回到 WordPress 後台，點擊「匯入」模板。

第 6 步

頁面編輯器選擇「Elementor」—— 圖片標註 ➀。

按「下一張」—— 圖片標註 ➁。

第 7 步

按「下一張」。

第 8 步

點擊「安裝」。

第 9 步

點擊「查看網站」，就能看到網站已經套好模板的樣式。

3. 使用 Blocksy 自訂器編輯全站通用設計

開啟 Blocksy 主題自訂器的方法

方法 ①：從 WordPress 前台進入 Blocksy 自訂器

點擊上方選單的「自訂」。

方法 ②：WordPress 後台進入 Blocksy 自訂器

點擊左側欄位的「外觀」、「自訂」。

認識 Blocksy 自訂器介面

• 左：設定區
• 右：預覽畫面

在設定區進行調整，右邊就能即時看到變化。

(1) 調整網站配色 (色彩)

在所有設定裡面，我習慣最先處理網站配色。

因為顏色可以說是網站視覺佔比最重的元素 —— 光是顏色，就能決定整個網站的風格走向。

如果我們想要更換網站配色，所有區塊都手動調整真的會累死！

最有效率的做法，應該是先從 Blocksy 設定好整體色彩，之後再微調「個別區塊」的顏色。

第 1 步

點擊左側欄位的「色彩」。

第 2 步

點擊「進階」、「色彩調色盤」。

Blocksy 很貼心地提供了「整體色彩調色盤」功能，內建 10 多款配色方案，如果你對配色沒有什麼想法，直接套用這些調色盤，網站就很好看了！

第 3 步

如果想自訂顏色，可以點擊調色盤裡的圓形色塊。

第 4 步

拖動圓圈或直接輸入色碼來修改顏色，可以從右邊的即時預覽，看到套用新色彩後的網站長什麼樣子。

舉例來說，當我修改了「色彩 1」，預覽畫面就會即時更新，所有套用「色彩 1」的元素都會換成新的配色。

這樣就能快速切換不同的配色組合，而且保持整個網站的風格一致。

第 5 步

修改完調色盤後，點擊「進階」、「儲存調色盤」。

之後就能在「色彩調色盤」的「自訂」中直接套用這組配色，省去重新設計的麻煩。

如果你喜歡我這次示範網站的配色，可以參考以下參數設定：

1.  **主題**：[請填寫你的網站主題或品牌類型]
2.  **風格**：[請描述你期望的風格關鍵詞]
3.  **靈感來源 (請提供 3-5 個)**：
    *   [靈感一]
    *   [靈感二]
    *   [靈感三]
    *   (可自行增減)
4.  **色彩限制 (選填)**：[請描述色彩規則，如：避免某色、多用某色系等]
---
# 指令

你是一位專業的視覺設計師。根據我上方提供的「主題」、「風格」、「靈感來源」與「色彩限制」，完成以下兩項任務：

**任務 1：生成色票總圖**
生成一張圖片。圖片為簡潔的平面設計風格，包含 5 個橫向排列的色帶。每個色帶由 6 個並排的顏色方塊組成，分別對應你設計的 5 組配色方案。每一組方案都必須基於一個獨特的靈感來源，確保彼此風格各異。

**任務 2：提供文字說明**
在圖片後，以 Markdown 格式條列出 5 組配色的詳細資訊，每組都需包含：
1.  **主題名稱**：富有創意的名稱。
2.  **完整色碼**：6 個 HEX 色碼，順序與圖片對應。
3.  **用途建議**：主色、輔色、背景、文字、點綴色。

(2) 修改字型 (排版樣式)

「排版樣式」可以分別設定不同類型 (例如：一般內文、各級標題、按鈕、連結…) 的文字，每一種都能調整字體、字型大小、行高、字元間距等等細節。

一定要注意的是：系統預設的字體是「英文字體」，並不支援中文。

當網站內容是中文時，瀏覽器會自動抓使用者電腦裡的預設中文字體來顯示，結果就是 —— 每個訪客看到的字體都不一樣。

為了確保網站風格一致，我們需要手動設定字體。

不過中文字體需要注意版權問題，檢查是否「免費商用」。

聽起來有點頭痛對吧？

別擔心，Blocksy 主題 內建 Google Fonts 字體庫，其中的「Noto Sans TC」和「Noto Serif TC」都支援繁體中文，幾乎不會缺字、又可以免費商用，是中文網站非常穩定的好選擇。

所以，我會把所有文字項目的字體都改成「Noto Sans TC」。

第 1 步

在左側欄位選擇「排版樣式」。

第 2 步

在搜尋欄輸入「Noto Sans TC」。

第 3 步

點擊「Noto Sans TC」就能完成設定。

重複同樣的操作，把所有文字項目的字體都改成「Noto Sans TC」。

(3) 設計頁首

[1] 更換標誌 (Logo)

第 1 步

滑鼠移到頁首 Logo 圖片上 —— 圖片標註 ➀。

點擊彈出的「⋯」圖示，叫出「標誌」選項—— 圖片標註 ➁。

第 2 步

點擊左側編輯區的 Logo 圖片。

第 3 步

把自己的 Logo 圖片拖進來上傳。

第 4 步

按下「Select」(選擇)。

第 5 步

覺得 Logo 太小的話，可以把標誌高度調整成「35 px」會比較適合。

備註：「35 px」只是建議參數，實際請依照個人情況調整。

第 6 步

「打開」網站標題。

第 7 步

「標誌圖片位置」選擇「左」，就能讓 Logo 圖片和網站名稱並排顯示。

第 8 步

切換到「設計」。

第 9 步

把「網站標題」的字重改成「標準 400」。

第 10 步

點開「網站標題色彩」下的「初始」。

第 11 步

選擇「色彩 6」。

[2] 設計選單樣式

第 1 步

滑鼠移到頁首選單上 —— 圖片標註 ➀。

點擊彈出的「⋯」圖示，叫出「選單 1」選項—— 圖片標註 ➁。

第 2 步

把「項目內部間距」改成「60 px」。

至於選單項目，需要等網站內容與內部連結先完成才能設定，這部分會留到 步驟 6 再進行。

[3] 設計 CTA 按鈕

第 1 步

從預覽畫面下方的「編輯器」把「社交網路服務」按「✕」刪掉。

第 2 步

從左側編輯區按住「按鈕」，拖曳到「主要列、右邊」的位置。

第 3 步

點擊「按鈕」。

第 4 步

切換到「設計」。

第 5 步

點「標籤文字色彩」下的「初始」，選擇「色彩 6」。

第 6 步

「按鈕色彩」的「初始」改成「色彩 7」。

第 7 步

切換到「一般」。

第 8 步

選擇鏤空邊框的樣式「Ghost」。

第 9 步

「大小」選「中型尺寸」。

第 10 步

「標籤文字」輸入「跟我聯絡」。

備註：可以加上 emoji，感覺更親切！

「連結/網址」先不動，留到「步驟 6：設定網站選單與內部連結」再處理。

(4) 設計頁尾

第 1 步

預覽畫面滑到最底部，滑鼠移到頁尾區域，點擊「編輯」。

第 2 步

頁尾我只保留「版權聲明」，其他不需要的元素，直接點 「✕」 刪除即可。

第 3 步

點擊「下面列」。

第 4 步

「欄」改為「1」，變更欄位數量。

第 5 步

切換到「設計」。

第 6 步

「列上面分隔線」選擇「實線」。

第 7 步

點擊「版權」。

第 8 步

把「版權文字」改成「版權所有 © + 年份 + 品牌名稱」的格式。

✏️ 版權所有 © {current_year} —— (品牌名稱)

第 9 步

「水平對齊」改為「置中對齊」。

(5) 頁首 & 頁尾的響應式設計 (RWD)

響應式網頁設計是什麼？

響應式網頁設計 (Responsive Web Design，簡稱 RWD) 指的是讓網站能依照不同裝置的螢幕尺寸，自動調整排版的設計。

也就是說，不管是用電腦、平板還是手機打開網站，版面都會自動調整成最適合瀏覽的樣子。

在這個大家手機不離身的時代，如果你的網站手機版不好用，幾乎等於直接流失一半以上的訪客。

所以，做好「響應式設計」真的超級重要，絕對不能忽略！

Blocksy 主題有支援 RWD，我們只需要微調平板跟手機的視覺效果，網站就能在各種螢幕上漂亮呈現。

目前所有設計都是以「電腦版」畫面為主，要切換到「平板」畫面或「手機」畫面，要點擊左下角的三個裝置圖示來切換。

第 1 步

點擊「平板」圖示，切換到平板畫面。

第 2 步

滑鼠移到頁首上，點擊「主要列」。

第 3 步

把「社交網路服務」按「✕」刪掉。

第 4 步

從左側編輯區按住「按鈕」，拖曳到「觸發器」的左邊。

第 5 步

點擊預覽畫面裡的「 Ξ 」圖示，會出現行動裝置特有的「滑出式區域」，也就是行動版選單 (又稱作「漢堡選單」)。

因為手機、平板的螢幕比電腦窄很多，沒辦法直接顯示完整選單，所以選單會變成這種「滑出式」的設計 —— 平常收起來、使用者點擊才展開，方便訪客在小螢幕上操作。

第 6 步

因為 Logo 在頁首已經出現過了，我覺得選單這邊可以再簡潔一點，所以把「滑出區域標誌」直接按 「✕」 刪掉就好。

✏️ 行動版選單無法關閉？

第 1 步

點擊「發佈」儲存設計進度。

第 2 步

「重整」網頁後，通常就會正常顯示了。

第 7 步

點擊「手機」圖示，切換到手機畫面。

第 8 步

在左側欄位點擊「頁首」。

第 9 步

點擊預覽下方「編輯器」的「標誌」。

第 10 步

切換到「設計」。

第 11 步

把「網站標題」的字型大小改為「20 px」。

第 12 步

點擊「按鈕」。

第 13 步

關閉「元件可見度」的「手機」項目，讓 CTA 按鈕在手機畫面被隱藏起來。

第 14 步

點擊「發佈」儲存設計。

第 15 步

點擊「✕」關閉 Blocksy 自訂器。

4. 用 Elementor 設計作品集 / 履歷頁面 (首頁)

開啟 Elementor 頁面編輯器的方法

方法 ①：從 WordPress 前台進入 Elementor 頁面編輯器

點上方選單的「使用 Elementor 編輯」。

方法 ②：從 WordPress 後台進入 Elementor 頁面編輯器

第 1 步

點左側欄位的「頁面」。

第 2 步

滑鼠移到要編輯的頁面項目上方，點擊「使用 Elementor 編輯」。

認識 Elementor 頁面編輯器介面

➀ 設定區

➁ 預覽畫面

③ 結構視窗：懸浮可移動，會列出頁面中所有元素及階層架構

在設定區進行調整，預覽畫面就能即時看到變化。

「Beverr」模板的首圖設計得簡潔明瞭，已經很符合我的需求，所以我不會做太大改動。

基本上，只需要把原有的項目翻譯成中文，少部分依照自身需求再微調就好。

(1) 編輯首圖

首圖是指訪客一進到網站時，第一眼看到的畫面，也可以說是網站的門面。

[1] 修改標題 / 文字

第 1 步

把滑鼠移到「文字」上，看到粉紅色框線的時候，點滑鼠左鍵一下，就可以開啟編輯選項。

第 2 步

全選文字，把原文「Hey, my name is」直譯為「嗨，我是」。

第 3 步

點擊預覽畫面的「標題」文字，改為「你的名字」。

第 4 步

再點黃色曲線下方的「文字」，改成你的專業定位，比如說：「平面設計師、攝影師…」。

[2] 製作進場動畫 (動作特效)

第 1 步

從結構視窗點擊「第 2 個 Container」。

✏️ Container 是什麼？

Container 直翻就是「容器」，是 Elementor 用來幫我們定位、排版的工具。

你可以把它想像成一個收納盒，大小可以自由調整，裡面可以裝入文字、圖片、按鈕等各種元素。

當網站越做越複雜，就會派上用場——你可以從「結構視窗」查看每個 Container 的位置、裡面裝了哪些元素。

第 2 步

切換到「進階」。

第 3 步

點開「動作特效」。

第 4 步

「進場動畫」選擇「Fade In」(淡入)。

我只要對外層的 Container 設定動態效果，裡面的元素就會一起動起來，不用一個一個重複設定。

[3] 替換圖片

這次接案作品集網站，總共會用到 3 張人像照，我會建議你準備正面照、側身照、比動作的半身照各 1 張。

第 1 步

滑鼠移到圖片上，看到粉紅色框線後，點滑鼠左鍵一下，開啟編輯選項。

第 2 步

從左側欄位點擊「選取圖片」。

第 3 步

把圖檔拖曳上傳。

第 4 步

勾選正面照，按下「選取」。

[4] 調整計數器

第 1 步

點擊文字 —— 圖片標註 ➀。

輸入「從業經驗」—— 圖片標註 ➁。

第 2 步

點擊數字 —— 圖片標註 ➀。

把「結束數字」設為「8」—— 圖片標註 ➁。

第 3 步

「數字後綴」輸入「(空格) 年」。

第 4 步

「動畫持續時間」設成「1200」，也就是 1.2 秒。

另外兩組計數器，編輯方式皆相同，這邊就省略操作示範。

[5] 刪除 Container

把滑鼠移到圖卡旁邊，出現粉紅色框線的時候，點上方的「✕」刪除 Container。

[6] 調整邊界 & 邊框間距

第 1 步

點擊右上角的「結構」。

第 2 步

點選結構視窗最上方的 Container。

第 3 步

從左側欄位切換到「進階」。

✏️ 「邊界」和「邊框間距」的差別？

「邊界」控制的是 Container 跟 Container 之間的距離，也就是向『外』增加或縮減距離。

「邊框間距」則是控制 Container 跟裡面元素的距離，也就是向『內』增減距離。

第 4 步

把「邊界」的「下」設為「120 px」。

第 5 步

把「邊框間距」的「上」設為「50 px」，讓首圖內容上下置中。

✏️ 諾特斯小提醒

每完成一部分設定，記得點擊「發佈」儲存進度，避免網路不穩定或網頁異常，讓辛苦設計的成果一夕消失！

(2) 編輯「作品展示」區塊

[1] 刪除文字 (內容編輯器)

第 1 步

點擊標題，輸入「精選作品」。

第 2 步

對下方文字點右鍵 —— 圖片標註 ➀。

點擊「刪除」—— 圖片標註 ➁。

[2] 新增按鈕

第 1 步

點擊左上角的「+」。

第 2 步

找到「按鈕」，拖到標題下方。

第 3 步

把「文字」改成「🔍 看更多」。

第 4 步

在「連結」直接輸入「Projects」，點「第一個選項」，就能連結到模板的「Projects」(專案) 分頁。

第 5 步

切換到「樣式」。

第 6 步

點開「色彩」的「地球」，選擇「色彩 1」。

第 7 步

切換到「游標暫留」。

第 8 步

點開「色彩」的「地球」圖示，選擇「色彩 2」。

第 9 步

點開「Box Shadow」(方塊陰影) 的「鉛筆」圖示，開啟陰影。

第 10 步

「轉場持續期間」輸入「0.1」。

第 11 步

「懸停動畫」選擇「Grow」(放大)。

第 12 步

「框線圓角半徑」設為「20」。

[3] Container 的組合應用

每個 Container 都只有一種排列規則，例如只有「上到下」、只有「左到右」。

如果我想要下圖這樣的排版的話，就要另外建立一個 Container，才能套用不一樣的排列規則。

運用這樣的規則，就能做出多種精美的排版。

第 1 步

點左上角的「+」。

第 2 步

拖一個「Container」到標題上方。

第 3 步

把標題和按鈕都拖進這個 Container 裡。

第 4 步

點擊標題左上角的「灰色小方框」，選取整個 Container。

第 5 步

在左側編輯區的「Items」(項目) 的「方向」點選「→」。

第 6 步

把 Container 的「Justify Content」(內容對齊) 改為「之間的空間」。

第 7 步

點選「標題」—— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 8 步

把「邊界」的「下」改為「0 px」。

第 9 步

點選「按鈕」—— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 10 步

「Align Self」(自身對齊) 選擇「置中」。

[4] 編輯背景圖片

第 1 步

滑鼠移到圖片上，點擊左上角的灰色小方框，叫出 Container 的編輯選項 —— 圖片標註 ➀。

切換到「樣式」—— 圖片標註 ➁。

點開圖片 —— 圖片標註 ➂。

第 2 步

拖曳上傳作品圖片。

第 3 步

按下「選取」替換作品圖片。

第 4 步

切換到「游標暫留」，一樣替換成同一張圖片。

第 5 步

左下角的「標題」改成「專案名稱」。

第 6 步

左下角的「內容編輯器」改成「設計項目」。

剩下三組圖卡，也是用相同的方式完成編輯。

[5] 新增圖片轉盤

除了展示作品以外，還可以加碼列出你合作過的品牌，展現你實務經驗豐富的一面。

第 1 步

點擊左上角「+」。

第 2 步

點兩下「標題」把它加入頁面中。

第 3 步

「標題」輸入「合作品牌」。

第 4 步

切換到「樣式」—— 圖片標註 ➀。

「對齊」設為「置中」—— 圖片標註 ➁。

第 5 步

點擊排版樣式的「鉛筆」圖示 —— 圖片標註 ➀。

「尺寸」輸入「28 px」—— 圖片標註 ➁。

第 6 步

把「Letter Spacing」(字距) 改為「20 px」。

第 7 步

點擊左上角「+」。

第 8 步

點兩下「圖片轉盤」把它加入頁面中。

第 9 步

點擊「新增圖片」。

第 10 步

拖曳上傳幾張品牌 Logo。

第 11 步

點擊「建立圖庫」。

第 12 步

按下「插入圖庫」。

第 13 步

把「顯示幻燈片」設為「6」—— 圖片標註 ➀。

「導航列」選擇「無」—— 圖片標註 ➁。

第 14 步

打開「其他選項」。

第 15 步

「自動播放速度」設為「3000」，也就是 3 秒轉動一次。

第 16 步

切換到「樣式」—— 圖片標註 ➀。

把「間距」設為「自訂」—— 圖片標註 ➁。

第 17 步

把「圖片間距」拉到「100」。

第 18 步

把滑鼠移到粉紅色框框裡，按住「6 個點」圖示。

把整個 Container 向上拖，到「作品圖卡」下方再放手。

第 19 步

點「6 個點」圖示，選取外層 Container —— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 20 步

把「邊界」的「下」改成「20 px」。

第 21 步

點標題上方的「6 個點」圖示，打開 Container 選項 —— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 22 步

解開「邊界」的鎖定 —— 圖片標註 ➀。

把「下」改為「120 px」—— 圖片標註 ➁。

(3) 編輯「學經歷」區塊

[1] 修改圖示方框

第 1 步

將「標題」改為「設計資歷」。

第 2 步

切換到「樣式」—— 圖片標註 ➀。

「對齊」選擇「置中」—— 圖片標註 ➁。

第 3 步

點擊數字 —— 圖片標註 ➀。

修改成「經歷的年份」—— 圖片標註 ➁。

第 4 步

點擊文字。

第 5 步

大字的部分要修改「標題」欄位，填上「所屬機構 (學校、公司) 名稱」。

第 6 步

小字要修改「描述」，填上「就讀科系 / 工作職務」。

剩下的其他經歷，也用相同的方式編輯完成。

[2] 背景加入滾動特效

第 1 步

從「結構視窗」裡點選「所有學經歷內容的 Container」。

第 2 步

在結構視窗裡，把 Container 拖到標題下方。

讓「標題」和「所有學經歷內容的 Container」一起被收在同個大 Container 裡。

第 3 步

點擊上方的「6 個點」圖示，選取到上層的大 Container —— 圖片標註 ➀。

在「Items」(項目) 的「方向」選擇「↓」—— 圖片標註 ➁。

第 4 步

切換到「樣式」。

第 5 步

在「背景」的「Background Type」(背景類型) 點擊「油漆刷」圖示。

第 6 步

點擊「選取圖片」。

第 7 步

拖曳上傳背景圖。

第 8 步

按下「選取」來套用圖片。

第 9 步

「附件」選擇「固定」—— 圖片標註 ➀。

「Display Size」(顯示大小) 選擇「覆蓋全區」—— 圖片標註 ➁。

就可以做出文字漂浮在上層的感覺。

第 10 步

點開「背景覆蓋」。

第 11 步

點擊「Background Type」(背景類型) 的「油漆刷」圖示。

第 12 步

按下「色彩」裡的「地球」圖示 —— 圖片標註 ➀。

選擇「色彩 6」—— 圖片標註 ➁。

第 13 步

不透明度設成「0.85」把背景刷淡。

第 14 步

繼續切換到「進階」。

第 15 步

把「邊界」的「下」設為「120 px」。

第 16 步

把「邊框間距」的「上」設為「50 px」。

第 17 步

從「結構視窗」裡點擊下圖這個小 Container —— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 18 步

把「邊界」的「下」改成「20 px」。

(4) 製作「服務項目」區塊

[1] 調整標題排版

第 1 步

按「✕」關掉結構視窗。

第 2 步

滑鼠移到右邊的按鈕上，點擊「灰色小方框」。

第 3 步

點擊滑鼠右鍵，選擇「刪除」。

第 4 步

點擊左側「標題」，輸入「我能提供的服務」。

第 5 步

切換到「樣式」。

第 6 步

標題的「對齊」選擇「置中」。

第 7 步

滑鼠移到標題上，點擊左上角的灰色小方框，選取整個 Container。

第 8 步

把「寬度」拉到「100 %」，標題就會置中了。

[2] 新增跳轉錨點

等一下在「步驟 6」，我們要在頁首選單設計一個項目，讓訪客點擊後能夠快速跳到「服務項目」區塊，看到「你能提供哪些服務」。

為了實現這種「一鍵跳轉」的功能，我們需要先為這個區塊設定一個定位點。

第 1 步

切換到『進階』。

第 2 步

在「CSS ID」輸入一個英文代號，例如「services」。

這就像是為區塊取一個專屬名稱，等一下在編輯選單時，才能順利找到它。

[3] 編輯圖示方框

第 1 步

點擊圖示 —— 圖片標註 ➀。

按下「上傳 SVG 檔案」—— 圖片標註 ➁。

第 2 步

拖曳上傳 svg 圖檔。

第 3 步

按下「插入媒體」。

第 4 步

標題輸入「服務項目名稱」，例如「平面設計」。

第 5 步

在「描述」欄位簡單介紹這項服務。

其他 2 個服務項目也用一樣的方式編輯好。

第 6 步

點擊「✕」刪除多餘的 Container。

(5) 製作「與我聯絡」區塊

第 1 步

把畫面裡不需要的「標題」、「按鈕」刪掉。

第 2 步

點擊「文字」—— 圖片標註 ➀。

輸入「想找我做設計？」—— 圖片標註 ➁。

第 3 步

切換到「樣式」。

第 4 步

點開「排版樣式」的「鉛筆」圖示 —— 圖片標註 ➀。

把尺寸改成「28 px」—— 圖片標註 ➁。

第 5 步

點擊右上角的「+」。

第 6 步

選擇「內容編輯器」。

第 7 步

輸入你的聯絡方式，例如 Email 信箱、LINE@ 帳號。

第 8 步

切換到「樣式」—— 圖片標註 ➀。

把「對齊」改成「置中」—— 圖片標註 ➁。

第 9 步

點擊人像照片 —— 圖片標註 ➀。

再點「選取圖片」—— 圖片標註 ➁。

第 10 步

勾選先前上傳的人像照，按下「選取」來替換照片。

第 11 步

點擊「6 個點」圖示選取整個區塊。

因為先前在頁首有設計一個「跟我聯絡」按鈕，所以需要在「聯絡方式」設置定位點做連結。

第 12 步

切換到「進階」。

第 13 步

在 CSS ID 輸入「contact」。

(6) 首頁的響應式設計 (RWD)

第 1 步

點擊「平板」圖示，切換到平板畫面。

第 2 步

點擊「精選作品」區塊最上方的「6 個點」圖示，選取最外層 Container —— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 3 步

把「邊界」的「下」調到「40 px」。

第 4 步

點擊「圖片轉盤」—— 圖片標註 ➀。

把「顯示幻燈片」設成「4」—— 圖片標註 ➁。

第 5 步

調整被擠成兩行的「設計資歷的年份」。

點一下數字 —— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 6 步

「寬度」改成「115 px」。

第 7 步

右鍵點擊年份數字，按下「複製」。

第 8 步

滑鼠右鍵點擊其他年份，選擇「貼上樣式」，就能幫每組年份快速套用一樣的設定。

第 9 步

點擊「手機」圖示，切換到行動裝置畫面。

第 10 步

點擊「圖片轉盤」—— 圖片標註 ➀。

把「顯示幻燈片」改為「2」—— 圖片標註 ➁。

隱藏元件

第 1 步

首圖因為元素被排成一列會拉得很長，所以裝飾性元素可以優先省略，讓排版緊湊一點。

點擊「筆刷圖片」—— 圖片標註 ➀。

切換到「進階」—— 圖片標註 ➁。

第 2 步

點開「回應式」。

第 3 步

打開「Hide On 行動裝置」(在行動裝置上隱藏)，這個元素在手機版畫面就看不到了。

第 4 步

點擊「發佈」儲存設定。

第 5 步

點右上方的「 ⌵ 」圖示 —— 圖片標註 ➀。

選擇「檢視頁面」—— 圖片標註 ➁。

同時，也可以拿出平板、手機，檢查網站在不同裝置下呈現的畫面。

5. 製作「所有作品」頁面

(1) 將不需要的頁面設為草稿

第 1 步

在 WordPress 後台的左側欄位點擊「頁面」。

第 2 步

模板一開始就幫我們建好了五個頁面，但是這次我只會用到「Home」(首頁) 以及「Projects」(專案) 這兩頁。

把其他三個頁面勾選起來。

第 3 步

點開「批次操作」，選擇「編輯」。

第 4 步

按下「套用」。

第 5 步

打開「狀態」，選擇「草稿」—— 圖片標註 ➀。

按下「更新」—— 圖片標註 ➁。

暫時用不到的頁面就會被隱藏起來，不會出現在網站前台。

(2) 編輯「Projects」頁面 (作品頁面)

第 1 步

點擊「Projects」下方的「使用 Elementor 編輯」。

第 2 步

點擊「標題」—— 圖片標註 ➀。

輸入「我的作品」—— 圖片標註 ➁。

第 3 步

切換到「樣式」。

第 4 步

點開「排版樣式」旁邊的「鉛筆」圖示 —— 圖片標註 ➀。

把「尺寸」設為「72 px」—— 圖片標註 ➁。

第 5 步

點擊人像照 —— 圖片標註 ➀。

點擊「選取圖片」—— 圖片標註 ➁。

第 6 步

勾選「側身照」，按下「選取」來替換圖片。

第 7 步

模板中其他不需要的文字，可以直接點擊粉紅色框框上的「✕」，將整個 Container 移除。

刪掉多餘的 Container 後，你可能會發現上下兩個區塊的距離不太夠，圖片甚至會重疊在一起。

第 8 步

把滑鼠移到藍色背景上，點擊彈出的「6 個點」圖示，打開 Container 的編輯選項。

第 9 步

切換到「進階」。

第 10 步

把「邊界」的「下」設成「300」，就可以把間距拉開了。

第 11 步

點擊「發佈」儲存設定。

第 12 步

點擊上方的「Projects」(專案) —— 圖片標註 ➀。

切換成「Home」(首頁) —— 圖片標註 ➁。

第 13 步

往下滑到「聯絡方式」的區塊，滑鼠點擊右鍵，選擇「複製」。

第 14 步

點擊上方的「Home」(首頁) —— 圖片標註 ➀。

切換回「Projects」(專案) —— 圖片標註 ➁。

第 15 步

在頁面最下方的虛線區域點擊滑鼠右鍵，選擇「從其他網站貼上」。

第 16 步

依據畫面指示按「Ctrl + V / Cmd + V」就能把整個「聯絡方式」區塊複製過來。

第 17 步

把模板原本內建的「聯絡方式」Container 按「✕」刪掉。

第 18 步

點擊「發佈」儲存設定。

第 19 步

點擊左上角的「Elementor」圖示 —— 圖片標註 ➀。

選擇「Exit to WordPress」(退出至 WordPress) —— 圖片標註 ➁。

第 20 步

點擊左上角的「WordPress」圖示，回到網站後台。

(3) 刪除預設作品

第 1 步

點擊左側欄位的「Projects」(專案)。

第 2 步

打勾「全選」模板的預設專案。

第 3 步

「批次操作」選擇「移至回收桶」。

第 4 步

點擊「套用」，把預設專案都清空。

(4) 新增作品

第 1 步

點擊「Add New Project」(新增專案)。

第 2 步

WordPress 編輯器的使用方式其實跟 Word 之類的文書軟體差不多，最上方要輸入「專案名稱」。

第 3 步

下方輸入內文，文字可以調整對齊、粗體、顏色等設定。

第 4 步

除了文字，還可以添加圖片或影片來介紹你的作品。

點擊「+」—— 圖片標註 ➀。

選擇「圖片」—— 圖片標註 ➁。

第 5 步

點擊「媒體庫」。

第 6 步

拖曳上傳圖檔。

第 7 步

勾選要使用的圖片，點擊「選取」來插入圖片。

第 8 步

在「Projects」頁面中，可以看到每個作品都以一格格的預覽圖呈現，這個預覽圖需要在建立專案時，預先設定好「精選圖片」才能正確顯示。

在右側欄位點擊「Project」(專案)。

第 9 步

點擊「Set Featured Image」(設定精選圖片)。

第 10 步

選一張作品代表圖，按下「Set Featured Image」(設定精選圖片)。

第 11 步

點擊「發佈」。

第 12 步

按下「發佈」公開專案。

第 13 步

點擊「Add New Project」，繼續新增下一個專案。

後續就是用相同方式，把所有作品一個個加入網站。

第 14 步

新增完所有專案後，點擊左上角的「WordPress」圖示，退出編輯器。

第 15 步

點擊左上角的「網站名稱」，前往網站前台。

第 16 步

點擊「Projects」(專案)。

就會看到所有專案都已經替換成你自己的作品。

點擊作品圖，即可開啟詳細介紹的分頁。

6. 網站選單與內部連結

(1) 調整選單項目

第 1 步

在 WordPress 後台的左側欄位點擊「外觀」→「選單」。

第 2 步

點擊「About」右邊的「▼」圖示。

第 3 步

按下「移除」。

第 4 步

重複以上操作，把「Contacts」項目也刪掉。

第 5 步

點擊「Home」右邊的「▼」圖示。

第 6 步

把「導覽選單項目標籤」改為「首頁」。

第 7 步

點擊「Projects」右邊的「▼」圖示。

第 8 步

把導覽選單項目標籤改為「所有作品」。

第 9 步

從左側「新增選單項目」裡，點開「自訂連結」。

第 10 步

「網址」輸入「https://你的域名/#services」。

第 11 步

「連結文字」輸入「服務項目」。

第 12 步

點擊「新增至選單」。

第 13 步

按下「儲存選單」。

(2) 編輯頁首 CTA 按鈕連結

第 1 步

在 WordPress 後台的左側欄位點擊「自訂」，進入 Blocksy 自訂器。

第 2 步

把滑鼠移到頁首按鈕上 —— 圖片標註 ➀。

點擊彈出的「⋯」圖示 —— 圖片標註 ➁。

第 3 步

在「連結／網址」輸入「https://你的域名/#contact」。

第 4 步

點擊「發佈」來儲存設定。

第 5 步

點擊「✕」關閉 Blocksy 自訂器。

第 6 步

點擊「網站名稱」，從前台檢查一遍選單、按鈕是否正確連結。

結語：用 Elementor 打造專業接案作品集網站

今天，我們一起用 Elementor 打造了專業的接案作品集網站。

這個網站不只是放作品的地方，更是一份數位履歷 —— 就像一張可以隨時遞出去的線上名片，

有機會幫你爭取到更多合作機會。

Elementor 的功能非常豐富，筆記篇幅有限，沒辦法把每個細節逐一說明。

🎁 免費下載 Elementor

建議你有空多動手嘗試、玩玩看，熟練了之後，就能做出比模板更多樣、更有個人風格的網站設計。

希望這次的教學對你有幫助，也祝你接案事業順順利利、案子接不完！

如果你想知道更多有關網站架設的細節，歡迎觀看我用心製作的其他 WordPress 筆記。

WordPress 新手教學 (總整理)

前往免費筆記

參考資料

• This is Elementor | The complete website building experience for WordPress
• Elementor WordPress Tutorial For Beginners 2026 (Step-by-Step)
• How to create a WordPress Website in Elementor - FREE (2025) - Step by Step Guide
• Wall of Portfolios

製作團隊

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