邊距設定｜SHOP Builder

Avatar
SHOPLINE TW Copywriters

4. EC + SC.png

透過 SHOP Builder 新增或編輯進階分頁時，您可以彈性調整元件之間的邊距，找到圖片、商品間最適當的距離，讓您的網站看起來更賞心悅目，從而提供顧客更佳的購物體驗。

本文將介紹：

 

一、邊距類型

在 SHOP Builder 的左側編輯欄可以調整元件上下、側邊、四周的邊距，並可以針對電腦版、手機版的畫面調整。
pastedGraphic_1.png

 

1. 邊距類型及說明

邊距類型

說明
  1. 元件上下邊距

可調整電腦版、手機版元件的上下邊距。
數值：1～30，預設為 30
  1. 組件側邊邊距

可調整電腦版、手機版元件兩側的邊距
數值：1～40，預設為 15
＊注意：電腦版寬度為手機版的 2 倍
  1. 元件四周邊距

可同時調整電腦版元件的上下左右邊距。
數值：1～80，預設為 15
＊注意：手機版無法同時調整四周邊距

 

2. 邊距調整範例

您可以透過不同元件邊距，增進不同元件之間的一致性。例如可以將「圖片組合」、「商品類別」之間的邊距調為 0，營造主圖以及商品之間的整體感。pastedGraphic_2.png

 

範例畫面：
b9NBCx3Rhnj-kqvE_4E-ZbN8I-JVUWs9qA7rde7Iii0R4GyF7jx3hyiFkI_uYQkjNnXW6j3YBKRbMbd9jFQyCbFQ9qr4tJxXMLA4NUM5n9IvTeDdnBdqhCcRbbeg7doayP1HGy8k6GZXI075wo2kMuU.gif

 

二、元件 & 可調邊距對照表

元件

可調整的邊距
  • 圖片組合
  • 商品類別
  • 文字組合
  • 元件上下邊距
  • 組件側邊邊距
  • 元件四周邊距
  • 頁尾編輯器相關元件
  • 元件上下邊距
  • 組件側邊邊距
  • 元件四周邊距
  • 輪播元件
  • 商品列表元件
  • 商品輪播列表元件
  • 影片組合元件
  • 圖文組合元件
  • Instagram 元件
  • 訂閱元件
  • 商品描述元件
  • 部落格元件
  • 折疊段落元件
  • 活動倒數元件
  • 元件上下邊距
  • 元件四周邊距

 

延伸閱讀

 

 

 

 

 

還有其他問題？提交請求

評論