作品集
把完工照片丟進來就建好一個案例，再補故事與規格、排序並放到頁面上。
共 5 項操作・22 個步驟・最後複驗 2026-10-03
從哪裡進入
網站後台 → 作品案例
照著下方圖文逐步完成
重點摘要（TL;DR）
公開站會產生作品集列表（/portfolio）與案例詳情頁，也能把已發佈案例自動帶進一般頁面的作品集區塊。
什麼時候會用到
- 要用有公開權利的真實成果建立信任
- 要在頁面自動展示已發佈案例
- 手上有一批完工照片，想快速放上網站
開始前先準備
- • 作品案例模組已啟用
- • 準備有使用權的完工照片與案例內容
- • 你是網站擁有者、共同管理者或內容編輯
第一次設定，照這個順序做
共 5 站。每一站都連到詳細步驟，做完一站再往下。
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
用照片快速新增案例
先把完工照片丟進來、取個標題就建立案例；故事、規格與前後對比之後再補。
- 1
這一步要做
到「作品案例」按「+ 新增案例」，進入「新增案例」頁。
為什麼：這一頁只問最少的幾件事，讓你先把照片放上來；進階欄位都在建立後的案例編輯頁。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
看到「完工照片」上傳區與案例標題欄位。 - 1操作
- 位置：
- 畫面上的「+ 新增案例」。
- 動作：
- 到「作品案例」按「+ 新增案例」，進入「新增案例」頁。
- 結果：
- 看到「完工照片」上傳區與案例標題欄位。
完成後會看到
看到「完工照片」上傳區與案例標題欄位。
- 2
這一步要做
把完工照片拖進「完工照片」區，或點擊一次選多張。照片會一張一張上傳，上傳完出現在縮圖列。
為什麼：第一張就是作品牆卡片上的封面。想換封面，在那張縮圖上按星號把它移到第一位；按垃圾桶可以拿掉。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
縮圖列顯示「共 N 張・第一張是封面」，第一張標著「封面」。 - 2操作
- 位置：
- 畫面上的「完工照片」。
- 動作：
- 把完工照片拖進「完工照片」區，或點擊一次選多張。照片會一張一張上傳，上傳完出現在縮圖列。
- 結果：
- 縮圖列顯示「共 N 張・第一張是封面」，第一張標著「封面」。
完成後會看到
縮圖列顯示「共 N 張・第一張是封面」，第一張標著「封面」。
做錯或略過會怎樣
有照片上傳失敗時會顯示「有 N 張沒有上傳成功（檔名）」，其餘照片已經加入；把沒成功的那幾張再拖進來一次就好。
- 3
這一步要做
在「這個案例叫什麼？」填標題。標題含中文時，下方會多出一格「網址」，請填一個英文網址。
為什麼：中文沒辦法直接當網址；標題沒有中文時，系統會自動用標題產生網址，不會問你。
欄位怎麼填
- 這個案例叫什麼？
- 用客人看得懂的描述，例如「深灰橡木｜白色線板住宅全室」。
- 網址
- 只在標題含中文時出現，而且必填。用英文、數字與連字號，例如 dark-oak-residence。建立後就固定了，之後改標題也不會變。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
網址欄下方預覽「訪客網址：/portfolio/你填的網址」。 - 3操作
- 位置：
- 畫面上的「這個案例叫什麼？」。
- 動作：
- 在「這個案例叫什麼？」填標題。標題含中文時，下方會多出一格「網址」，請填一個英文網址。
- 結果：
- 網址欄下方預覽「訪客網址：/portfolio/你填的網址」。
完成後會看到
網址欄下方預覽「訪客網址：/portfolio/你填的網址」。
做錯或略過會怎樣
網址打了中文或符號，送出時會退回並顯示「網址只能用英文、數字與連字號，請換一個。」
- 4
這一步要做
視需要填一句話描述、選分類、填地點。
欄位怎麼填
- 一句話描述（可留空）
- 作品牆卡片上唯一的說明文字，例如「淺色調住宅的完整鋪面，含樓梯周邊與磁磚交界」。留空卡片只會有標題。
- 分類
- 選單來自「案例設定」的案例分類；還沒建分類就留「（不指定）」。
- 地點（可留空）
- 例如「台中市西屯區」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
這些資訊會出現在作品牆卡片與案例頁開頭。 - 4操作
- 位置：
- 畫面上的「一句話描述」。
- 動作：
- 視需要填一句話描述、選分類、填地點。
- 結果：
- 這些資訊會出現在作品牆卡片與案例頁開頭。
完成後會看到
這些資訊會出現在作品牆卡片與案例頁開頭。
- 5
這一步要做
要馬上公開就按「建立並發佈」；還想再整理就按「先存草稿」。
為什麼：草稿不會出現在公開站，可以先建好再慢慢補故事。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
回到案例列表，新案例以「已發佈」或「草稿」狀態出現。 - 5操作
- 位置：
- 畫面上的「建立並發佈」。
- 動作：
- 要馬上公開就按「建立並發佈」；還想再整理就按「先存草稿」。
- 結果：
- 回到案例列表，新案例以「已發佈」或「草稿」狀態出現。
完成後會看到
回到案例列表，新案例以「已發佈」或「草稿」狀態出現。
做錯或略過會怎樣
還沒放任何照片時「建立並發佈」按不下去（沒有照片的案例在作品牆上是一張空卡片），照片上傳中也要等傳完。
注意事項
- • 客戶名稱、成果數字、故事與照片都必須正確且取得公開權利。
- • 案例網址建立後就固定，編輯頁沒有地方改；建立前確認好。
補完整案例內容與搜尋資訊
在案例編輯頁補上故事、規格、照片分組與 SEO，讓案例頁有足夠的資訊讓客人比較與詢價。
- 6
這一步要做
在案例列表點開案例進入編輯頁，核對「案例標題」「一句話描述」，在「封面圖」上傳，或展開「使用圖片網址」填入有使用權的圖片來源。
為什麼：用照片建立的案例，封面就是你當時的第一張；這裡可以單獨換一張。
欄位怎麼填
- 封面圖
- 選最能代表成果的一張，可貼網址或直接上傳。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
封面必須是有使用權且能代表成果的圖片。 - 6操作
- 位置：
- 封面圖設定。
- 動作：
- 設定封面圖片來源。
- 結果：
- 案例取得封面。
完成後會看到
封面圖預覽出現，列表與詳情頁會用這張。
- 7
這一步要做
補案例資訊：類別、地點、客戶名稱、專案日期與外部網站 URL。
為什麼：客戶、地點與日期讓案例看起來是真的做過的工作，也是同地區客人最在意的資訊。
欄位怎麼填
- 類別
- 與快速建立時的分類同一份清單。
- 客戶名稱
- 只填已取得同意公開的名稱；不確定就留空。
- 外部網站 URL
- 案例本身是網站時才填，例如做好的客戶官網。
完成後會看到
案例頁顯示這些補充資料。
- 8
這一步要做
寫「案例故事」，再依需要加「數字成果」與「專案規格」。
為什麼：規格是客人拿來跟另一家比較的事實（坪數、工法、型號、工期）；數字成果是當賣點的數字，兩者分開放。
欄位怎麼填
- 案例故事
- 先說需求與選擇，再說處理方式與完成感受。工具列可插入標題、圖片與影片。
- 數字成果
- 每一筆填標籤、數字與註記，例如「詢價量成長 / 3× / vs 改版前」。留空就不顯示這一段。
- 專案規格
- 每一列填項目與內容，例如「坪數 / 32 坪」「工期 / 5 天」。
完成後會看到
案例頁出現故事段、數字成果格與規格表。
做錯或略過會怎樣
沒有根據的成果數字不要填；案例頁會照實放大顯示。
- 9
這一步要做
在「完工圖庫」整理照片：照片多時按「+ 新增一組照片」分成幾組，每組填小標，每張照片寫圖片描述與圖說。
為什麼：建議 6–14 張：全景、另一個視角、自然光、細節、施工處理與收邊。
欄位怎麼填
- 這一組的小標（可留空）
- 例如「客廳・大面積連續鋪設」。
- 排版方式
- 每組可各自選；選「跟隨版型預設」最省事。型錄式版型不使用這一格。
- 圖片描述（替代文字）
- 說明照片拍的是什麼，例如「暖原木地板在客餐廳自然光下的完整效果」，看不到圖的人與搜尋引擎靠它理解。
- 圖說（可留空）
- 這張照片要讓客人看懂什麼。
完成後會看到
案例頁依分組顯示照片。
- 10
這一步要做
需要時用「這個案例的版型」單獨覆寫這一個案例的版型，並在「SEO（搜尋引擎顯示）」填搜尋標題與描述。
欄位怎麼填
- 這個案例的版型
- 預設「跟隨站台設定」。照片少的案例用文字主導比較不會空，照片多的用照片主導。
- SEO 標題
- 留空會用案例標題。
- SEO 描述
- 留空會用一句話描述；精準說明這個案例做了什麼。
完成後會看到
這個案例套用指定版型，搜尋結果預覽顯示你填的文字。
- 11
這一步要做
按頁面最下方「儲存變更」。
為什麼：這個案例如果已經發佈，存檔後公開的案例頁就會換成新內容；還是草稿的案例存檔後仍不公開。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
儲存只更新草稿，不等於發佈。 - 11操作
- 位置：
- 案例編輯頁操作列。
- 動作：
- 按「儲存變更」。
- 結果：
- 案例內容存起來；發佈狀態不會因此改變。
完成後會看到
內容存起來，發佈狀態不會因此改變。
做錯或略過會怎樣
作品案例沒有另外的草稿層：已發佈案例按「儲存變更」會直接更新公開頁（畫面上也寫著「已發佈的會立刻反映在公開頁」），改到一半不要先存。
注意事項
- • 案例網址在建立時決定，編輯頁不能改；公開後換網址只能重建案例，舊連結會失效。
排序、發佈或撤下案例
控制作品集的先後順序與訪客可見狀態。
- 12
這一步要做
回到「全部」案例清單，抓住拖曳把手把主打案例移到前面。
為什麼：作品牆第一排就是客人最先看到的案例，把最有代表性的放前面。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
排序只在「全部」清單開放。 - 12操作
- 位置：
- 案例列左側。
- 動作：
- 拖曳案例到新位置。
- 結果：
- 清單保存新順序。
完成後會看到
完整清單保存新順序，公開作品集沿用相同排序。
做錯或略過會怎樣
切到「已發佈」或「草稿」篩選時拖曳會鎖住，把手提示「篩選狀態下無法拖曳排序」。
- 13
這一步要做
在案例編輯頁按「立即發佈」公開；要暫時撤下時按「取消發佈」，不要刪除。
為什麼：取消發佈只是讓訪客看不到，之後隨時可以再發佈。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
暫時撤下使用取消發佈，內容仍保留。 - 13操作
- 位置：
- 案例編輯頁狀態列。
- 動作：
- 按「取消發佈」。
- 結果：
- 案例回到草稿且不再公開。
完成後會看到
案例可在已發佈與草稿間切換；取消發佈保留全部內容。
- 14
這一步要做
想指定時間上線，在編輯頁展開「排程發佈 —— 指定一個時間自動上線」，選日期與整點時間後按「排程發佈」；已發佈的案例同一處會變成「排程下架」。
為什麼：系統每小時整點檢查一次，適合配合活動或客戶同意公開的日期上線。
欄位怎麼填
- 日期（台灣時間）
- 只能選今天之後的日期，最多 400 天後。
- 時間
- 只能選整點。
完成後會看到
顯示「已排程」與時間，會在該時間之後一小時內自動上線或下架。
- 15
這一步要做
確定不要的案例，在列表按垃圾桶圖示並確認，或在編輯頁按「刪除」。
完成後會看到
案例從後台與公開站移除。
做錯或略過會怎樣
刪除無法復原。編輯頁的「刪除」按下去不會再問一次，只是暫時不公開請用「取消發佈」。
注意事項
- • 已發佈或草稿篩選中會鎖住排序；先切回「全部」。
- • 刪除不可復原；只是暫時不公開時請取消發佈。
把作品集自動列表加入頁面
讓首頁或服務頁自動顯示已發佈案例。
- 16
這一步要做
在作品案例按「放到頁面編輯」。
為什麼：重複按不會疊出第二個區塊：頁面上已經有就直接帶你到那一塊。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
從作品案例直接把作品集接到頁面。 - 16操作
- 位置：
- 作品案例頁上方。
- 動作：
- 按「放到頁面編輯」。
- 結果：
- 進入視覺編輯器。
完成後會看到
系統進入視覺編輯器，並新增或聚焦作品集自動列表。
- 17
這一步要做
在視覺編輯器核對作品集區塊已讀到案例；完成頁面配置後，再發佈該頁面的草稿。
為什麼：還沒有已發佈案例時，編輯器裡會先放範例作品讓你看版型，網站訪客看不到。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
作品集區塊自動讀取已發佈案例。 - 17核對
- 位置：
- 視覺編輯器畫布。
- 動作：
- 核對作品集區塊。
- 結果：
- 區塊顯示已發佈案例。
完成後會看到
作品集區塊自動顯示已發佈案例，頁面發佈後訪客可見。
- 18
這一步要做
點選區塊，在面板調整顯示數量、只顯示某個類別，以及「查看全部」按鈕的文字與連結。
欄位怎麼填
- 顯示數量（1-24）
- 首頁放 3 或 6 個最常見；最多 24。
- 查看全部 連結
- 通常填 /portfolio。
完成後會看到
首頁只顯示你要的數量，按鈕帶訪客到完整作品集。
做錯或略過會怎樣
沒有任何已發佈案例時，這個區塊在公開頁會整段不顯示。
注意事項
- • 沒有已發佈案例時，自動列表在公開頁可能不顯示。
- • 新增區塊先寫入頁面草稿；要讓訪客看到仍需發佈頁面。
案例設定：分類、詳情版型與列表頁文案
決定作品集有哪些分類可篩選、案例頁長什麼樣子，以及 /portfolio 的標題與行動按鈕。
- 19
這一步要做
在「作品案例」上方切到「案例設定」分頁。
為什麼：這裡的設定套用到所有案例，個別案例仍可在編輯頁單獨覆寫版型。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
看到列表頁文案、案例分類、版型與內頁行動區等設定。 - 19操作
- 位置：
- 畫面上的「案例設定」。
- 動作：
- 在「作品案例」上方切到「案例設定」分頁。
- 結果：
- 看到列表頁文案、案例分類、版型與內頁行動區等設定。
完成後會看到
看到列表頁文案、案例分類、版型與內頁行動區等設定。
- 20
這一步要做
在「案例分類」新增分類名稱。
欄位怎麼填
- 案例分類
- 每個分類填名稱即可，例如「品牌形象」「住宅」「商空」。改名不影響已分類的案例。沒有任何分類時，作品集頁不會顯示分類篩選。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
訪客可在作品集用分類篩選；新增案例時分類選單會出現這些選項。 - 20操作
- 位置：
- 畫面上的「+ 新增分類」。
- 動作：
- 在「案例分類」新增分類名稱。
- 結果：
- 訪客可在作品集用分類篩選；新增案例時分類選單會出現這些選項。
完成後會看到
訪客可在作品集用分類篩選；新增案例時分類選單會出現這些選項。
- 21
這一步要做
在「案例詳情版型」選一種案例頁版型。
欄位怎麼填
- 案例詳情版型
- 案例研究：單欄敘事，適合服務與設計案。視覺專案：大圖主導，適合完工實績與空間案。型錄式：主圖＋縮圖切換，適合同一批照片要快速翻看比較。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
沒有單獨覆寫版型的案例都改用這個版型。 - 21操作
- 位置：
- 畫面上的「案例詳情版型」。
- 動作：
- 在「案例詳情版型」選一種案例頁版型。
- 結果：
- 沒有單獨覆寫版型的案例都改用這個版型。
完成後會看到
沒有單獨覆寫版型的案例都改用這個版型。
做錯或略過會怎樣
選型錄式後，照片分組的「排版方式」不會生效；分組的小標仍會跟著照片顯示在主圖下方。
- 22
這一步要做
填列表頁標題、副標，以及案例頁底部的主要行動按鈕，最後按「儲存設定」。
欄位怎麼填
- 列表頁標題
- 訪客打開 /portfolio 看到的主標題，例如「案例實績」。
- 列表頁副標
- 主標題下方一段說明，留空就不顯示。
- 內頁主要行動按鈕文字
- 例如「聊聊你的需求」，引導看完案例的人詢價。
- 內頁主要行動按鈕連結
- 預設 /quote，也可以填 /apply 或你的 LINE 連結。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
公開 /portfolio 與每個案例頁套用新的文字與按鈕。 - 22操作
- 位置：
- 畫面上的「列表頁標題」。
- 動作：
- 填列表頁標題、副標，以及案例頁底部的主要行動按鈕，最後按「儲存設定」。
- 結果：
- 公開 /portfolio 與每個案例頁套用新的文字與按鈕。
完成後會看到
公開 /portfolio 與每個案例頁套用新的文字與按鈕。
做錯或略過會怎樣
沒按「儲存設定」就離開，這一頁的修改都不會留下。
遇到問題先看這裡
- 案例已發佈但頁面沒有出現？
- 案例資料與頁面區塊是兩件事。先在「作品案例」按「放到頁面編輯」，確認頁面上有作品集自動列表，再發佈網站；/portfolio 列表頁則不用放區塊，案例發佈後就看得到。
- 為什麼不能拖曳排序？
- 排序只在「全部」清單開放；先清除已發佈或草稿篩選。
- 「建立並發佈」按不下去？
- 至少要有一張照片才能發佈，照片上傳中也會暫時停用。先把完工照片拖進「完工照片」區、等上傳完成；只想先建起來就按「先存草稿」。
- 為什麼要我另外填英文網址？
- 標題含中文時，中文無法直接當網址，所以會多出必填的「網址」欄。用英文、數字與連字號；沒填會退回並顯示「中文標題請另外填一個英文網址。」
- 建立後想改案例網址？
- 案例編輯頁沒有改網址的欄位，網址在建立時就固定了。真的要換，只能用新網址重建一個案例，再把舊的取消發佈或刪除；舊網址的連結會失效。
- 已發佈的案例，改了內容會馬上上線嗎？
- 會。作品案例沒有另外的草稿層，已發佈案例按「儲存變更」後公開頁就會更新。想先整理好再公開，可以先按「取消發佈」，改完再「立即發佈」。
- 照片分組的「排版方式」沒有作用？
- 這個案例用的是型錄式版型時，所有照片會收進主圖＋縮圖列，分組排版方式不會生效。到「這個案例的版型」或「案例設定」的「案例詳情版型」改成其他版型就會恢復。