結論
從「+」按鈕插入 Button Basic 並套用預設,只需點擊幾下即可建立一個漂亮的按鈕。只需設定文字和連結並發布即可開始。
第 1 步:插入區塊
- 開啟貼文或頁面編輯螢幕
- 按一下要新增區塊的位置處的 ++ 按鈕。
- 在搜尋欄位中輸入“Button Basic”
- 點選顯示的Button Basic區塊即可插入
重點: 您也可以透過搜尋「zen」或「button」來找到它。
第 2 步:應用設計預設
- 選擇插入的區塊
- 點擊區塊頂部工具列中的 預設圖示
- 從顯示的預設清單中選擇您喜歡的設計
調整提示: 使用預設作為基礎,稍後可以隨意調整顏色和尺寸。我們建議先選擇一個接近您總體方向的預設。
第 3 步:編輯文本
- 直接點擊區塊內的文字
- 輸入您要顯示的按鈕文字(例如「聯絡我們」、「免費開始」)
重點: 文字可以直接在編輯器中編輯。可以從側邊欄中的“文字設定”面板調整字體大小和粗細。
第 4 步:設定鏈接
- 選擇區塊後,點擊工具列上的 連結圖示
- 輸入連結目標 URL
- 如有必要,請啟用“在新選項卡中開啟”
- 按 Enter 鍵確認
注意: 您可以透過選擇工具列上的標籤在
a(連結)/button(按鈕元素)/div(區塊元素)之間切換。普通連結按鈕沒有問題,因為它們帶有a標籤。
第5步:調整顏色
- 打開側邊欄中的每個設定面板
- 變更背景顏色 開啟 背景設定 面板
- 變更文字顏色 開啟 文字設定 面板
- 使用顏色選擇器或顏色代碼指定顏色
調整提示: 確保按鈕背景顏色和文字顏色之間良好的對比度可以提高可見性和可訪問性。
第 6 步:檢查預覽
- 點選編輯器頂部的 預覽 按鈕
- 選擇“在新分頁中預覽”
- 檢查前端按鈕的可見性
- 也要檢查懸停時的變化以及到連結目標的轉換。
要点:编辑器上的显示和前端的显示基本匹配,但CSS主题可能会影响。請在前端進行最終確認。
第 7 步:發佈您的頁面
- 一旦您对按钮的外观和链接感到满意,请单击编辑器顶部的“发布”或“更新”。
- 造訪前端頁面進行最終確認
如果您想進行更詳細的設置
Button Basic有18種設定面板。详细设置方法请参考【按钮基础设置指南】(../../buttonbasic/)。
主要設定面板:
| 面板 | 你能做什麼 |
|---|---|
| 文字設定 | 调整字体大小、粗细、行距和字符间距 |
| 佈局設定 | 调整宽度、高度和边距(边距和填充) |
| 背景設定 | 顏色/漸層/圖像/圖案設置 |
| 邊框設定 | 調整線寬、樣式、顏色和圓角 |
| 圖示設定 | 添加圖標,設定大小和顏色 |
| 動畫設定 | 懸停或顯示時的動畫(Pro函數) |
下一步
如果您對Pro版本感興趣,可以在【Pro版本啟動】(../pro-activation/)查看啟動方法。