返回支援 內容和媒體 區塊 按鈕區塊

按鈕區塊

使用按鈕區塊可以提示訪客按一下按鈕樣式的連結採取行動。按鈕可以連結到網站的其他頁面或外部頁面,也能夠引起訪客的注意,讓訪客執行最重要的操作。

教學課程影片

新增按鈕區塊

若要新增按鈕區塊,請按一下 + 區塊插入工具圖示,然後搜尋「按鈕」。按一下即可將區塊加入文章或頁面。新增第一個按鈕後,可以輸入按鈕名稱。

新增按鈕區塊
新增按鈕區塊 (點圖放大)

💡

你也可以用鍵盤在新的一行輸入 /buttons,然後按 Enter 快速新增按鈕區塊

輸入斜線插入器,新增段落區塊
輸入斜線插入器,新增段落區塊

此處有新增區塊的詳細說明。 

區塊工具列

按鈕區塊分為兩個層級:

按一下上層按鈕區塊會出現選項工具列:

上層按鈕區塊工具列
上層按鈕區塊工具列

各個按鈕區塊的工具列提供以下功能:

獨立按鈕區塊工具列
獨立按鈕區塊工具列
按鈕區塊工具列
獨立按鈕區塊的工具列
為按鈕建立連結

若要為按鈕建立連結,請按一下區塊打開浮動工具列,然後按一下「連結」圖示。該圖示看起來像金屬鏈條的環節。你可以貼上連結,或搜尋網站現有的頁面和文章。

連結會依預設在同一個分頁中開啟,除非你將連結設為在新分頁開啟。

為按鈕建立連結
為按鈕建立連結 (點圖放大)
將按鈕對齊

你可以將按鈕靠左、靠右,或置中對齊。首先,請選取上層按鈕區塊,如下圖所示:

選取上層區塊的選項,以箭頭標記。

然後從工具列中選取對齊選項:

你可以將按鈕靠左、置中,或靠右對齊。

你也可以選擇「在項目之間加上空間」,讓區塊的多個按鈕之間自動保持等距。

區塊設定

按一下區塊,右側邊欄會出現其他區塊設定。如果沒有出現側邊欄,可能需要按一下右上角的 ⚙️ (齒輪) 圖示叫出設定。

區塊設定位於右側邊欄中。
區塊設定
樣式

「樣式」選項可將按鈕填色 (填滿),或讓按鈕有個實線邊框 (外框)。

按鈕區塊樣式
文字設計

文字設計設定包含按鈕上文字大小的控制選項。

邊框圓角半徑

邊框半徑選項可讓你設計更圓潤的按鈕外觀。將數值設為 0 會產生有稜角的按鈕邊框。

按鈕區塊邊框半徑設定
色彩設定
按鈕區塊顏色設定

你可以選擇按鈕文字及背景的顏色。

請選擇可突顯按鈕的顏色,並確認搭配適合的對比色,方便讀者辨識。如果視障人士可能難以閱讀按鈕文字,新版編輯器內建的協助工具參數會提出警告。

邊框間距設定

邊框間距是區塊邊框內的空白空間,能讓內容更清楚,也能調整頁面版面配置,好達到平衡的效果。邊框間距設定選項位於區塊側邊欄設定的「尺寸」下。你可以統一上下左右的邊框值,也可以將上下邊框和左右邊框設成不同值。

在邊框間距設定中輸入一個值,按鈕的四個邊框距離都會一樣。

按一下取消連結圖示,即可為上下邊框和左右邊框設定不同值。

寬度設定
按鈕區塊寬度百分比

寬度設定可讓你設定每個按鈕的寬度 (以百分比為單位)。

變更按鈕寬度
變更按鈕寬度 (點圖放大)
水平和垂直按鈕

第一次在上層按鈕區塊新增好幾個按鈕時,按鈕會水平顯示。 使用按鈕區塊上的「轉換樣式」設定,就能垂直顯示按鈕 (即堆疊成一欄)。

圖片:按鈕區塊設定上的「轉換樣式」下拉式方塊,用於將按鈕水平排列成一列或垂直堆疊成一欄。
轉換按鈕
GIF 動畫顯示對齊按鈕區塊的過程 。
將按鈕對齊 (點圖放大)
進階

Link rel 用於控制按鈕連結的 rel 屬性,可以新增 nofollow 等其他屬性。

HTML 錨點欄位用於建立按下按鈕後跳轉的頁面

使用其他 CSS 類別編寫自訂 CSS,並依你認為適合的樣式設定區塊。深入瞭解。

Copied to clipboard!