這篇完成:在某一頁上增刪區塊、改文字與圖片,並存成前台版面。
新建頁面見 如何新增一頁並發布。預覽與上線見 區塊、預覽與發布。
頁面有兩層編輯,請先分清楚:
| 層級 | 在哪裡 | 通常做什么 |
|---|---|---|
| 頁面詳情 | /admin/pages/ 底下的某一頁 | 標題、URL slug、詳細欄位、SEO、發布 |
| 全螢幕區塊編輯器 | 詳情底欄 開啟頁面編輯器 | 增刪/排序頁面區塊(主視覺、圖文、列表等),所見接近前台 |
並非所有版型都提供全螢幕區塊編輯;若按鈕未出現,該頁不是「可自訂區塊」版型,請在詳情頁維護內容即可。
誰可以使用?
預設僅擁有者(以及提昇科技協助人員)可開啟並儲存。
網站編輯者若看不到入口或儲存時提示無權限,請擁有者改版,或調整協作方式。
開啟與存檔(擁有者)
- 頁面管理 點進要改的頁。
- 底欄點 開啟頁面編輯器。
- 進入全螢幕後:
- 從區塊庫新增…:打開區塊庫,選一種區塊插入。
- 點區塊,在側欄改文字、圖片、按鈕。文字與自訂網址旁可插入 動態欄位:網站名稱/標語、聯絡與社群 已填列,以及(開了會員登入、電商或訂閱時)登入/註冊/忘記密碼路徑。註冊會連到前台
/signup。 - 齒輪 區塊設定:背景、顯示條件等(依區塊而異)。
- 分節導覽點:區塊列表上方有可收合的「分節導覽點」面板(右側開關可直接開啟)。開啟後展開面板,在同一區塊內勾選各區塊的 顯示於分節導覽,並可填導覽標籤(與錨點 ID 分開,不在個別區塊齒輪裡)。可選靠左或靠右、標籤要不要一直顯示、圓點/短膠囊/短橫線,以及 主色 或 強調色(皆跟著 網站樣式)。電腦寬度、至少兩個勾選區塊時,前台側邊才會出現。
- 背景:可選無/純色帶/照片。純色帶除淡底、白、深色反轉、品牌色洗底外,可選 自訂色彩(點色塊開色盤或輸入
#RRGGBB)。 - 照片遮罩:可點預設色票,或同樣用色盤/色碼自訂遮罩顏色。色票裡的 主色、強調色 會跟著 網站樣式 的顏色;之後改網站樣式,遮罩也會跟著變。圖片遮罩(例如 Hero 圖文分欄、雙欄圖文的「遮罩顏色」)同樣有這兩個色票。
- 時間軸/時間軸(條目列表)/路徑流程:齒輪裡可開關 捲動進度動畫(預設開啟)。開啟時,訪客往下捲頁,連接線會跟著填上強調色;時間軸橫向若超出寬度,則跟著左右滑動填色。關閉後維持原本軌道、不填色。減少動態時(系統「減少動態」)或編輯器預覽會一次填滿。
- 時間軸/時間軸(條目列表):齒輪裡可切 排列方式(縱向或橫向)。橫向時一次可見多筆;項目超出寬度會出現左右箭頭,也可在軌道上滑動,不會循環打亂時序。
- 拖曳調整區塊上下順序。
- 可收合卡片,避免一次展開太多。
- 底欄點 儲存區塊(儲存中會顯示「儲存中…」)。成功時可能提示「已儲存區塊設定」。
- 有未存變更時,離開會被提醒——請先存再關。
未儲存的修改不會出現在預覽或前台。
從區塊庫選什麼?(高頻)
實際可選類型依站台與已開模組而異。先認這幾個名稱(與區塊庫標籤一致):
| 區塊名稱 | 用途 |
|---|---|
| 最新消息(自動) | 自動列出已發布消息。可設筆數、排版(卡片/橫列/按鈕列表)、排序、分頁。封面固定 4:3。開啟顯示分類時,分類標籤在標題上方(非疊在封面圖上)。訪客篩選可加分類,也可加「標題與摘要」(顯示方式選「關鍵字搜尋」):關鍵字會比對標題與摘要,其他語言的譯文也算。沒有符合的文章時,區塊與篩選仍會留下,並顯示沒有符合條件。完整列表頁請用獨立頁插入本區塊;「更多」可指向該頁。 |
| 自訂內容列表(自動) | 自動列出某一個自訂內容類型的已發布條目。須選 內容類型;可再設封面圖欄位、摘要欄位(可選條目內建「摘要」,或自訂文字/多行文字/富文字)、標籤欄位(顯示在標題上方;下拉/單選/多選會顯示選項名稱)、附加資訊欄位(可勾選多個欄位,在摘要下方逐行顯示,例如「地區:台北市」「專長:民事、家事」;可改為只顯示值)、篩選。靜態篩選除分類/欄位外,可選 內容關聯:鎖定對端 CPT 條目後,只列出與它有連結的項目(見 如何設定內容關聯)。訪客篩選可加分類或自訂欄位,也可加「標題與摘要」(顯示方式選「關鍵字搜尋」):關鍵字比對條目標題與內建摘要,其他語言的譯文也算,不比對自訂欄位裡另存的文字。訪客篩選 0 筆時同樣保留區塊與篩選。區塊設定可開關 條目按鈕:關閉時整張卡片可點;開啟時僅按鈕可點。條目若關閉「內頁連結」可改填 列表連結 與選填 按鈕文字(有填按鈕文字時列表會顯示該按鈕)。 |
| 聯絡表單(嵌入) | 在頁內顯示表單。須選要用的表單。見 如何嵌入頁面。 |
| 聯絡資訊(自動) | 讀取 聯絡與社群 的列。可勾選要顯示的項目;都不勾則顯示全部已填內容的列。 |
| 聯絡資訊與表單 | 桌機左右分欄:一側聯絡資訊、一側表單。區塊設定可改聯絡資訊在左或在右。手機聯絡在上、表單在下。 |
| 預約表單(嵌入) | 須選 預約項目。見 如何新增預約項目。部分按鈕可設 開啟預約彈窗。 |
| 影片 | 在頁面中段放一支置中的影片(YouTube、Vimeo 或 MP4 網址),可加標題、說明、影片下方小字與按鈕。見下方「影片」段落。 |
| 時間軸 | 依時序列出里程碑(圖示、日期、標題、說明)。區塊設定可切換縱向或橫向;橫向超出寬度時用左右箭頭或滑動檢視。也可開關 捲動進度動畫(預設開)。條目資料也可選 時間軸(條目列表)。 |
| 路徑流程 | 用序號連成一條路徑說明步驟,沒有卡片外框。電腦橫向、手機直向。適合接在服務卡片後面,避免再排一排卡片。可加主按鈕與次要按鈕,齒輪可開關捲動進度動畫(預設開)。 |
| 流程步驟 | 用編號卡片橫列呈現步驟,可調桌機一排欄數。若上一塊已是卡片,改用 路徑流程 較不易重複。 |
| 法拍案件列表 | 精選法拍列表。完整篩選請連到 /foreclosure。見 法拍概覽。 |
| 商品列表(自動) | 自動列出已發布商品。可篩分類、筆數與排版。完整商店請用 /shop。 |
| 商品分類 | 自動列出商店分類卡片(可選封面)。點卡片會進該分類的商店列表。顯示範圍可選僅主分類、僅子分類或全部;區塊設定可開載入更多/頁碼分頁。見 如何管理商品分類。 |
| 商品分類首屏 | 接近滿版(左右仍留邊距)的三張獨立卡片:左欄商店主分類與子分類(全部展開,可顯示分類圖示)、中間輪播圖(電腦把滑鼠移到分類上,會依子分類列出商品名,點名稱進單品頁)、右側自訂快捷連結。手機沒有懸停預覽,點分類會直接進商店。見 如何管理商品分類。 |
許多區塊有 小標(kicker)與 區塊標題;留空則前台不顯示該列。小標旁邊常有小標樣式,兩欄請一併設定。
列表類區塊、條目自動區塊與圖庫,可在標題旁加 「更多」連結:「更多」文字與連結兩個欄位都填才會顯示。特色卡片、圖片服務卡 則是在卡片下方加置中的 「更多」按鈕,一樣兩個欄位都填才會顯示。
桌機欄數(1/2/3/4)只影響桌機。欄數依設定固定,不會因為只有一筆就自動變少。
凡能調桌機欄數的區塊,另有 手機/平板排列,預設標準(手機 1 欄、平板最多 2 欄)。改成緊湊後,手機改成 2 欄、平板改成 3 欄,且不會超過桌機欄數。卡片網格與橫列清單都能調;按鈕列表沒有這個選項。合作對象列預設緊湊。數據亮點沒有桌機欄數,可自行增刪數字列(最多 8 組);3 組時平板仍是 3 欄,4 組以上桌機一排 4 欄、平板最多 2 欄。同一選項只改手機:標準 1 欄、緊湊 2 欄。輪播中的圖庫、自動橫向滾動的合作對象列不會出現這個選項。
排版選 橫列清單 的區塊(最新消息、自訂內容列表、關聯內容列表、法拍案件列表、商品列表、卡片(條目列表))也可在區塊設定調 桌機一排欄數,預設 1 欄(與原本相同)。設 2 欄以上時,每筆仍是左圖右文,圖片會依欄寬自動縮小。卡片網格與橫列清單的欄數各自記錄,切換排版不會互相影響;法拍案件列表與商品列表的卡片網格現在也能調欄數(預設 3 欄)。
評價輪播 與 評價輪播(條目列表) 也可在區塊設定調 桌機一排欄數,預設 1 欄(與原本相同,一次一則置中)。設 2 欄以上時,桌機一次並排多則、每次往旁邊捲一則;手機仍一次一則、平板最多兩則。評價則數沒有超過欄數時(例如 3 則、設 3 欄),會直接並排顯示、不輪播。
合作對象列 也可在區塊設定調 桌機一排欄數,預設 4 欄。靜態展示時另有 手機/平板排列,預設緊湊(手機 2 欄、平板 3 欄,且不超過桌機欄數);欄數愈多、每張 Logo 愈小。自動橫向滾動時不顯示這個選項,4 欄維持原本大小;改成 1~3 欄會把 Logo 放大。同一處可開關 Logo 名稱:關閉時圖片下方不顯示文字;啟用後,每張 Logo 會出現 圖片說明,也可另填 顯示名稱(有填顯示名稱就用它,否則用圖片說明)。
模組相關區塊(商品、法拍、預約等)僅在該功能開通時較有意義,區塊庫也可能依模組隱藏。
圖片
優先從圖庫選擇或上傳,見 上傳與從圖庫選圖。注意欄位旁的建議尺寸。透明背景 Logo 較不易在色塊上糊成一片。
雙欄圖文、特色圖文分欄、Hero 圖文分欄、數據圖文分欄:在「媒體比例」正下方可調 媒體尺寸(圖較小/均等/圖較大)。這是桌機上圖片欄的寬度,不是 4:3、16:9 那種長寬比。Hero 若把媒體放在文字下方,尺寸會改圖片最大寬度。手機仍是單欄全寬。
雙欄圖文、特色圖文分欄 除了主按鈕,也可以加一顆 次要按鈕:在主按鈕欄位下方填 次要按鈕文字,再選連結、表單彈窗或預約彈窗。文字留空就不會顯示。兩顆按鈕排在同一列,畫面不夠寬時會自動換行。
想一邊放圖或短片、另一邊用圖示條列重點,從區塊庫選 特色圖文分欄。版型與雙欄圖文相同(媒體可左右、可改成影片),文案側可新增多筆 圖示+標題+說明;這和整頁網格的 特色卡片 不同,特色列會跟著圖文同一區塊。
Hero 圖文分欄:圖片貼齊螢幕邊緣
預設圖片是放在版面內、有圓角和外框的卡片。想讓圖片延伸到螢幕邊緣、填滿整個首屏高度,點齒輪 區塊設定 → 媒體呈現,選 貼齊螢幕邊緣(滿高)。
| 裝置 | 前台效果 |
|---|---|
| 電腦 | 圖片貼齊螢幕左側或右側(依 媒體位置),從首屏上緣到下緣,直角、無外框;文字仍對齊版面。媒體尺寸 照樣控制圖片寬度。媒體比例 決定首屏至少多高:例如選 4:3,首屏高度至少是圖片寬度的 3/4;直式比例(2:3、4:5)會讓首屏變得很高。文字比圖片高時,首屏照文字長高,圖片裁切填滿。 |
| 手機、平板 | 圖片在文字上方、左右滿版、直角,比例依 媒體比例。 |
- 媒體位置 選 下方 時不作用,維持卡片。
- 媒體類型是 YouTube 或 Vimeo 影片時不作用(影片無法裁切,貼邊會有黑邊);直接上傳的影片檔可以貼邊。
- 圖片會被裁切成首屏的高度,重要主體請放在畫面中間,不要貼著圖片邊緣。
圖庫、圖片輪播:點圖開預覽或連到別頁
這三個區塊預設都是純展示(點圖不會有動作)。要讓訪客點圖,請在編輯器裡開啟;同一張圖不能同時「開預覽」又「跳連結」。
| 區塊名稱 | 在哪裡設定 | 前台效果 |
|---|---|---|
| 圖庫 | 每一張圖的 點擊圖片 | 無動作(預設)/開啟圖片預覽(跳出大圖,可左右切換)/連結至頁面/網址(才會出現連結欄,可選站內頁或自訂網址) |
| 圖庫(條目) | 區塊的 點擊圖片開啟預覽 | 關閉(預設)/開啟。圖片來自條目或頁面的「圖庫」欄,無法為單張設連結。詳情版型見 如何設計詳情頁版面。 |
| 圖片輪播 | 每一張的 點擊圖片 | 無動作(預設)/開啟圖片預覽。圖下方的按鈕(連頁、表單彈窗、預約彈窗)仍可同時使用。 |
| 圖文輪播(條目列表) | 區塊的 點擊圖片開啟預覽 | 關閉(預設)/開啟。圖片來自條目或頁面的重複列表(圖文卡片),圖下方按鈕/連結仍可同時使用。 |
預覽視窗類似商品頁、法拍物件圖:可左右切、關閉。開著預覽時輪播會暫停自動播放。
Hero 輪播沒有「點整張圖開預覽」;請用畫面疊上的按鈕連到別頁。
舊頁面若圖庫某張已填連結,會維持可點連結,不會突然變成預覽。若改成「無動作」或「開啟圖片預覽」,就不會再跟著舊連結跳走。
圖庫、圖庫(條目):圖片下方標題
兩個圖庫區塊都可以在每張圖下方顯示一行標題。網格會顯示在卡片的圖片下方,輪播顯示在圖框下方(跟著目前那張切換),開啟圖片預覽時也會顯示在大圖下方。
| 區塊名稱 | 在哪裡設定 | 說明 |
|---|---|---|
| 圖庫 | 每一張圖的 圖片標題(選填) | 直接輸入要顯示的文字;留空就不顯示。多語網站可在各語言分頁分別填寫。 |
| 圖庫(條目) | 齒輪 區塊設定 的 圖片標題 | 不顯示(預設)/顯示圖庫的替代文字。標題來自圖庫裡每張圖的 Alt 文字,所有用到這張圖的地方都會顯示同一段文字。 |
圖庫(條目)注意事項:
- 上傳圖片時,Alt 文字會先自動帶入檔名(例如
IMG_1234)。請在 上傳與從圖庫選圖 的圖庫視窗中,把 Alt 文字 改成要顯示的標題,否則前台會出現檔名。 - Alt 文字沒有分語言,多語網站的每個語言都會顯示同一段文字。
- 某張圖沒有 Alt 文字時,那張圖下方不顯示標題。
內容分頁、圖文輪播:圖片放左邊或右邊
下面這幾個區塊預設是文字在上、圖片在下(輪播是圖片在上、文字在下)。要改成左右並排,點齒輪 區塊設定:
| 區塊名稱 | 設定名稱 | 可選 |
|---|---|---|
| 內容分頁、分頁(條目列表) | 分頁圖片位置 | 文字下方(預設)/圖片在左/圖片在右 |
| 圖片輪播、圖文輪播(條目列表) | 圖文位置 | 文案在圖片下方(預設)/圖片在左、文案在右/圖片在右、文案在左 |
- 左右並排只在平板與電腦寬度生效;手機一律圖片在上、文字在下。
- 某個分頁只有圖片或只有文字時,那一頁會自動排成單欄。
- 輪播只要有一張填了標題、說明或按鈕,上一張/下一張按鈕就會移到圖片外:圖片在上時放在文案左右,左右並排時放在整列最左與最右;頁碼點在文案下方(左右並排時在整個區塊下方置中)。手機上按鈕改夾在頁碼點兩側。區塊設定的 切換按鈕位置(偏上/置中/偏下)會決定按鈕對齊該列的上、中、下。
- 輪播所有張都沒有文字時(純圖片輪播),維持單欄,按鈕仍疊在圖片上。
- 圖片只剩半寬,比例 21:9 會顯得很扁。改成左右並排時,建議把圖片比例調成 16:9 或 4:3。
內容分頁每個分頁另有 內容標題(選填):顯示在分頁內容最上方,和頁籤上的「分頁標題」分開填。分頁(條目列表) 要顯示內容標題,重複列表裡須有欄位代碼為 heading 的文字欄,見 如何設計詳情頁版面。
影片
想讓影片當主角(產品介紹、客戶訪談、活動紀錄),從區塊庫選 影片。影片置中顯示,上方可放小標、標題與說明,下方可放一行小字與按鈕。要圖文左右並排,改用 雙欄圖文 或 特色圖文分欄,並把齒輪裡的 媒體類型 切成影片;要整個首屏都是影片背景,用 Hero 影片背景。
- 在 影片網址 貼上 YouTube、Vimeo 的影片網址,或 MP4 檔案的網址。YouTube Shorts 網址也可以。
- 視需要選 封面圖。YouTube 沒選封面時會自動用影片縮圖;Vimeo 和 MP4 沒選封面時,播放前只會看到播放鍵。
- 標題、說明、影片下方小字、按鈕都可留空,留空的那一列前台不顯示。
- 點齒輪 區塊設定 調整版面:
| 設定 | 可選 |
|---|---|
| 影片寬度 | 窄/中(預設)/寬(與內容同寬) |
| 影片比例 | 16:9(預設)/4:3/1:1/9:16(直式/Shorts) |
| 文字對齊 | 置中(預設)/靠左 |
| 自動播放 | 關閉(使用者點擊播放)(預設)/開啟(靜音自動播) |
| 顯示控制列 | 顯示(預設)/隱藏 |
- 預設是訪客點了播放鍵才開始載入 YouTube/Vimeo 播放器並播放(有聲音),頁面開起來比較快。開啟自動播放時,影片會在進入畫面時靜音播放;瀏覽器規定自動播放一定要靜音。
- 選 9:16 時,不論影片寬度設哪個,影片都會維持手機直式的寬度,避免在電腦上變得非常高。
- 影片網址還沒填時,編輯器預覽會顯示提示框;前台則整個區塊都不顯示(標題、小字、按鈕也一起隱藏),填好網址並儲存後才會出現。
雙欄圖文、特色圖文分欄 的影片模式也一樣,改成先顯示封面和播放鍵,點了才載入播放器。原本已設的封面、自動播放、控制列設定都照舊。
次要按鈕顏色
第二顆按鈕(次要按鈕)預設是外框樣式。要改成實心色,例如 LINE 綠底白字,在次要按鈕的文字、連結欄位下方找 次要按鈕顏色。
| 區塊名稱 | 在哪裡設定 |
|---|---|
| Hero 圖文分欄、Hero 影片背景、CTA 橫幅、雙欄圖文、特色圖文分欄、影片 | 區塊內容的次要按鈕欄位下方 |
| Hero 純文字 | 同上;操作列 選 按鈕 時才會出現 |
| Hero 輪播 | 每一張畫面各自設定,可以每張不同色 |
| 選項 | 前台效果 |
|---|---|
| 預設(外框) | 不設定,維持原本的外框按鈕 |
| 主色/強調色 | 跟著 網站樣式 的顏色;之後改網站樣式,按鈕也會跟著變 |
| LINE 綠 | LINE 官方綠色底、白字 |
| 黑色/白色 | 白色按鈕會自動加上淡色外框,避免在白底上看不到 |
| 自訂色碼 | 點色盤或輸入 #RRGGBB;按鈕文字會依底色深淺自動用黑字或白字 |
與「同步區塊/範本」的差別
多頁要共用或複製整組區塊時,見 同步區塊與範本概覽。日常改某一頁,用「從區塊庫新增」選 區塊類型 即可。
怎麼驗
- 儲存區塊後,用預覽看桌面與手機寬度。
- 無痕打開已發布頁,區塊順序與文案符合。
- 動態列表:對應消息/條目須已發布,且區塊選對分類或內容類型。
- 表單區塊:試送一筆,收件匣看得到。
常見卡住
| 狀況 | 怎麼辦 |
|---|---|
| 沒有「開啟頁面編輯器」 | 不是可自訂版型,或不是擁有者。 |
| 儲存失敗/無權限 | 編輯者無法存全螢幕編輯器。請擁有者操作。 |
| 區塊庫沒有消息/商品列表/商品分類 | 模組未開,或該區塊不適用此頁角色。 |
| 列表區塊是空的 | 還沒發布內容、選錯分類/類型、或篩選太嚴。 |
| 存了前台沒變 | 頁面仍是草稿;或看的是別的站台/快取。見 發布了前台還是舊的。 |
| 點圖沒開預覽 | 該張仍是「無動作」(預設)。圖庫請把「點擊圖片」改成「開啟圖片預覽」;圖庫(條目)或圖文輪播(條目列表)請打開「點擊圖片開啟預覽」。已設「連結」的那張會跳頁,不會開預覽。 |
| 圖庫(條目)的標題顯示成檔名 | 標題取自圖庫的 Alt 文字,上傳時預設是檔名。請到圖庫視窗把該圖的 Alt 文字 改成要顯示的標題。 |
| 影片區塊在前台整個不見 | 影片網址 沒填。沒有影片網址時整個區塊會隱藏;請貼完整網址(例如 https://www.youtube.com/watch?v=…),儲存後重新整理。 |
| 影片沒有封面、只有播放鍵 | Vimeo 和 MP4 不會自動抓縮圖,請在 封面圖 選一張圖。 |
| 找不到圖片連結欄 | 圖庫請先把「點擊圖片」改成「連結至頁面/網址」,連結欄才會出現。選了連結後即可填站內頁或網址(不必先填網址才能選連結)。 |
下載專區上傳 PDF/ZIP 的說明見 區塊、預覽與發布。