跳到內容
免費安裝
繁體中文
在 Claude 中開啟 針對此頁面提問在 ChatGPT 中開啟 針對此頁面提問

橫幅內容與元素

橫幅可包含的六種元素、如何排序,以及如何用群組讓一個橫幅傳達兩則訊息。

Content 面板是建構器側欄中的第一個圖示,包含橫幅要說的所有內容。

Content 面板,含列出 Text、Countdown 和 Button 的 Elements 卡片、Add element 按鈕,以及下方的 Add group 按鈕

元素在橫幅中由左至右排列,順序與它們在此清單中的順序相同。

  • Add element 會開啟六種類型的選單。新元素會加到清單的最後。
  • 拖曳控點(位於每列左側)即可移動該列。橫幅會依此處的順序排列。
  • 將游標移到某一列上,會顯示複製和刪除按鈕。
  • 點擊某一列,即可在右側欄中開啟其設定。

訊息本身。可設定文字內容、大小、粗體、斜體、底線,以及專屬的顏色。

顏色留空時,文字會沿用橫幅本身的文字顏色,因此重新設計橫幅樣式時,訊息也會一併更新。

橫幅內的即時計時器,有三種模式:

模式 顧客看到的內容
Count down to a date 所有人看到相同的剩餘時間
Fixed minutes per visitor 每位顧客抵達時都有自己的計時
Daily recurring 在選定的星期幾,於兩個時間之間執行

您還可以選擇要顯示哪些單位(天、小時、分鐘、秒)、是否在數字下方顯示單位說明,以及說明的文字。說明留空即會使用英文預設值。

When the timer ends 決定倒數到零時會發生什麼事:隱藏橫幅、停在零,或重新開始。

一個標籤加上一個動作:

On click 作用
Open a link 將顧客帶到某個 URL
Scroll to a section 以 CSS 選擇器跳到目前頁面的某個區塊
Apply a discount code 將折扣碼套用到顧客的購物車

對於連結,您也可以開啟 Open in a new tab,讓您的商店保持在背景開啟。

其餘是樣式設定:形狀(方形、圓角、膠囊形)、字型大小、尺寸預設、粗體/斜體/底線、背景、標籤顏色和邊框。

折扣碼本身,以虛線外框顯示。開啟 Copy on click 後,顧客只要點擊就能複製,無需選取,也無需輸入。

可設定其邊框樣式、圓角半徑和專屬顏色。

標誌或徽章。貼上 URL,或上傳檔案,欄位會自動填入。可設定高度和替代文字。

替代文字是螢幕閱讀器會朗讀的內容,也是圖片載入失敗時顯示的內容。

沒有可見的內容。它後面的所有內容都會從新的一行開始,讓較長的橫幅能分成兩列,而不是擠成一列。

將它拖曳到兩個元素之間,就能在您想要的位置分行。

開啟除 line break 以外的任何元素,其 Style 區段的開頭是 Device settings,包含三個圖示:眼睛、桌機和手機。

Countdown 元素的 Style 區段,頂端是 Device settings 列,顯示眼睛、桌機和手機圖示

Device settings 位於 Style 的頂端,其下方的所有設定都會依您選擇的圖示而定。

眼睛是一般情況:您的設定會套用到兩種螢幕。

桌機和手機圖示會將其下方的設定限縮到該螢幕。選擇手機並將字型大小調為 12,就只有手機會是 12,桌機則維持眼睛所設定的值。Style 中的所有設定都能這樣拆分:字型大小、倒數計時的數字和標籤大小、顏色和顯示的單位、圖片高度、按鈕的形狀和大小、折扣碼的邊框和顏色。

選擇某種螢幕後,還會顯示 Hide on desktop 或 Hide on mobile 切換開關。您可以藉此隱藏不適合手機的元素(例如長句子或圖片),而不必另外建立第二個橫幅。該元素仍會顯示在另一種螢幕上。

Line break 沒有 Style 區段,因此保留單純的 Show on 控制項:Both screens、Desktop only 或 Mobile only。

在元素清單下方是 Add group。

一個群組是一般情況。新增第二個群組後,橫幅會在它們之間循環:先顯示第一個群組,接著是第二個,然後再回到第一個。每個群組各有自己的元素,因此一個橫幅可以在「Free shipping over $50」和「Sale ends tonight」之間輪流顯示。

切換的速度,以及是淡入淡出還是滑動,請參閱動畫與群組。

這對您有幫助嗎?