區塊排版與圖片設定

區塊內容完成後,切到設定視窗的「排版」頁籤調整間距、圖片比例與對齊。若目前編輯的是 Vibe 畫布,還能從「版面區塊」上方設定整張畫布與頁首及頁尾之間的空白。

秒站多欄式區塊的排版設定,包含圖片比例、卡片內容對齊與進場動畫
不同區塊會顯示適用的排版欄位;多欄式可調整圖片比例、卡片內容對齊與進場動畫。

設定 Vibe 畫布上下間距#

秒站頁面編輯器的頁面上下間距視窗,可選擇保留 60 px,無保留空白或自訂上下間距
Vibe 畫布可選擇保留 60 px,完全不留白,或輸入自訂上下間距。
  • 上下有保留空白(60px):維持標準頁面呼吸感。
  • 上下無保留空白:讓畫布內容貼齊頁首與頁尾,適合滿版設計。
  • 自訂上下間距:可輸入 30px5%2rem 這類數值,上下會使用同一個間距。

選好後按「套用」才會儲存;按「取消」會保留原本設定。這組數值也會和 Vibe 畫布的另一個編輯入口同步,不需要重複設定。

調整區塊間距#

間隔區塊可用高度欄位控制空白;其他區塊則依版型提供上下留白或內容間距。調整時先小幅修改,再用右側預覽確認,不要一次加入過大的空白。

調整圖文左右欄比例#

秒站圖文區塊的排版頁籤,可選擇 3:7 到 7:3 的電腦版左右欄比例
圖文區塊可用圖示選擇電腦版左欄與右欄的比例,也能分開設定桌機與手機的文字對齊。

電腦版可選擇 3:7、4:6、5:5、6:4 或 7:3。比例一律依畫面上的「左欄:右欄」解讀,即使把版型切成右圖左文,也不用反過來換算。白卡版型的圖片會填滿圖片欄;透明滿版則可另外設定圖片比例與垂直對齊。

設定圖片比例#

  • 16:9:適合橫幅,服務介紹與影片感版面。
  • 4:3:適合卡片,作品與一般內容配圖。
  • 原始比例:保留圖片本身比例,適合不希望固定裁切的素材。

設定圖文垂直對齊#

  • 置上對齊:圖片頂端與文字欄頂端對齊。
  • 垂直置中:圖片置於文字欄中間。
  • 置下對齊:圖片底端與文字欄底端對齊。
  • 填滿空間:讓圖片欄與文字欄等高,圖片以裁切方式填滿。

分別設定電腦版與手機版文字對齊#

秒站圖文區塊排版頁籤,可分別設定電腦版與手機版文字對齊
圖文區塊可分別設定電腦版與手機版的文字對齊,不必讓兩種裝置使用同一個設定。

電腦版文字預設置左,手機版文字預設置中。你也可以依內容改成置左、置中或置右;調整其中一個裝置時,不會覆蓋另一個裝置的選擇。完成後請切換兩種預覽,確認標題、說明與按鈕的閱讀順序。

多欄卡片內容對齊#

多欄式區塊可選卡片內容靠左或置中。靠左適合文字較多,閱讀導向的卡片;置中適合短標題,圖示與方案特色。若同一列卡片都有按鈕,系統會維持卡片等高與按鈕對齊。

調整圖片輪播的圓角與箭頭#

秒站圖片輪播設定,可調整圖片圓角與左右切換箭頭
圖片輪播可設定圓角,也能決定是否顯示左右切換箭頭。

圖片輪播的「設定」頁籤可調整圖片圓角,範圍為 0~200 px;填入 0 會顯示直角。若希望畫面更簡潔,可將「左右切換箭頭」改為隱藏,底部的分頁圓點仍會保留。

完成後檢查電腦版與手機版#

固定圖片比例與填滿效果在桌機,手機可能有不同呈現。儲存後切換電腦版與手機版預覽,特別檢查人臉,產品主體與文字是否被裁掉。

延伸閱讀#

常見問題

每個區塊都有相同的排版欄位嗎?

不一定。系統會依區塊能力顯示可用欄位;所有原生區塊都有進場動畫設定,有圖片的區塊才會顯示圖片比例,圖文類區塊才會顯示垂直對齊。

選原始比例會不會裁切圖片?

原始比例會盡量沿用圖片本身比例;固定 16:9 或 4:3 時,版面會以指定比例呈現,必要時可能使用置中裁切。

填滿空間適合什麼情況?

適合希望圖片與旁邊文字欄等高的圖文版型。圖片會以填滿方式裁切;手機改成上下排列時會恢復合理比例。

圖片輪播可以隱藏左右切換箭頭嗎?

可以。在圖片輪播的設定頁籤將「左右切換箭頭」改為隱藏即可;底部的分頁圓點不受影響。

圖文區塊可以分開設定電腦版與手機版的文字對齊嗎?

可以。電腦版與手機版各有獨立的文字對齊設定,調整其中一個裝置時,不會覆蓋另一個裝置的選擇。