邊距設定|SHOP Builder

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 元件
  • 訂閱元件
  • 商品描述元件
  • 部落格元件
  • 折疊段落元件
  • 活動倒數元件
  • 元件上下邊距
  • 元件四周邊距

 

延伸閱讀

 

 

 

 

 

還有其他問題?提交請求

評論