如何絕對定位按鈕以在 Divi 中創建獨特的按鈕佈局

Divi 的內置位置選項是一種方便的設計工具，可用於精確定位任何 Divi 元素，包括按鈕。 大多數時候，我們依賴於與文檔（或頁面）流程保持一致的按鈕的默認靜態位置。 但是，如果我們知道如何絕對定位按鈕，我們就可以為我們的 Divi 內容創建一些獨特而實用的按鈕佈局。

在本教程中，我們將向您展示如何創建 4 種不同的按鈕佈局，以獨特地強調 Divi 的 Blurb 模塊。 在您的網站上使用簡介時，這會派上用場。

讓我們開始吧。

搶先看

查看我們將在本教程中構建的四個按鈕佈局的快速瀏覽。

免費下載 Divi 按鈕佈局

要了解本教程中的按鈕佈局設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並將 JSON 文件拖到 Divi Builder 中。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

創建按鈕佈局 #1：雙底按鈕

對於我們四個按鈕佈局中的第一個，我們將在一個模糊模塊下創建雙底按鈕。 對於需要兩個 CTA 的特色內容（如服務）來說，這是一個很好的選擇。 另外，這是將按鈕卡在具有相同高度的列底部的好方法。

首先，向該部分添加兩列（0ne half one half）行。

行設置

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 均衡柱高：是
• 寬度：100%
• 邊距：底部 50px
• 填充：0px 頂部，0px 底部

第 1 列設置

• 背景顏色：#2e3858
• 填充：底部 50px

當我們添加絕對定位的按鈕時，這個底部填充將為我們創造必要的空間。

模糊模塊設計

接下來，將一個模糊模塊添加到第 1 列。

然後將圖像上傳到模糊模塊，如下所示：

轉到設計設置並更新以下內容：

• 圖像/圖標對齊方式：左
• 標題字體：PT Sans
• 標題字體粗細：粗體
• 標題文字顏色：#ffffff
• 標題文字大小：38px
• 標題字母間距：2px
• 正文顏色：#ffffff
• 圖像寬度：40%
• 內容寬度：100%
• 寬度：100%
• 填充：50px，頂部，50px底部，30px左，30px右

添加雙底部按鈕

按鈕 #1 設計

在 blurb 模塊下添加一個新的按鈕模塊。

然後更新按鈕設置如下：

• 按鈕文字大小：16px
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#2dc3a3
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字母間距：2px
• 按鈕字體：PT Sans
• 按鈕字體粗細：粗體
• 按鈕字體樣式：TT
• 邊距：0px 底部
• 填充：頂部 1em，底部 1em，左側 1.5em，右側 2.5em

按鈕 #1 絕對定位

要將按鈕絕對定位在列的左下角，請更新以下內容：

• 位置：絕對
• 位置：左下角

Divi 通過內置的可點擊位置網格使這變得容易。 由於我們希望按鈕與列底部齊平，因此不需要偏移值。

按鈕 #2 設計和位置

要創建按鈕 #2，請複制上一個按鈕模塊。

副本將直接堆疊在上一個按鈕的頂部，因此如果您使用的是可視化構建器，則可能看起來什麼也沒發生。 點擊打開按鈕模塊的設置，更新如下：

• 背景顏色：#df4570

• 位置位置：右下

現在擦除當前為空的第 2 列並複制第 1 列，以在右列中獲得精確的重複設計。

按鈕佈局 #1 結果

檢查結果。 請注意，右列中的內容將列推到頁面下方，但由於我們的按鈕是絕對定位的，因此它們繼續緊貼底部以獲得漂亮的對稱設計。

創建按鈕佈局 #2：三個側邊按鈕

對於下一個按鈕佈局，我們將在單列中將三個按鈕放置在模糊模塊的右側。

要快速啟動下一個按鈕佈局設計，請複制上一行。

模糊設置

更新模糊設置如下：

• 背景顏色：#df4570
• 圖像寬度：60%
• 寬度：56%（桌面和平板電腦），100%（手機）

這將在簡介右側創建我們需要的房間，以添加我們的三按鈕佈局。

定位按鈕 #1

要定位按鈕 #1，請打開左下角綠色按鈕的按鈕設置並更新以下內容：

• 位置：絕對（桌面和平板電腦），相對（手機）
• 位置：右上角
• 垂直偏移：20%（桌面和平板電腦），0%（手機）
• 水平偏移：5%（桌面和平板電腦），0%（手機）

定位按鈕 #2

要定位按鈕 #2，複製您剛剛定位的按鈕。 您可以刪除右下角的紅色按鈕，因為我們不需要它。

然後打開復制按鈕的設置並更新以下內容：

• 背景顏色：#df4570

然後通過增加垂直偏移將按鈕向下移動一點。

• 垂直偏移：35%

定位按鈕 #3

最後，通過複製上一個按鈕並更新以下內容，再次重複該過程：

• 背景顏色：#3599e5
• 垂直偏移：50%

按鈕佈局 #2 結果

查看三鍵佈局的最終結果。

創建按鈕佈局 #3：分散和縮放的按鈕

對於下一個佈局，我們將更加零星地定位按鈕，然後使用變換比例調整幾個按鈕的大小。

首先，複製包含三按鈕佈局的前一行。

模糊設置

然後打開第 1 列中的模糊模塊設置並更新以下內容：

• 寬度：60%

• 背景顏色：透明
• 寬度：60%
• 模塊對齊：居中

• 文本對齊：居中
• 模塊對齊：居中

• 邊框寬度：2px
• 邊框顏色：rgba(255,255,255,0.15)

• 文字文字大小：20px

• 邊距：50px 頂部

按鈕 #1 定位

• 垂直偏移：8%
• 水平偏移：-7%

按鈕 #2 定位

• 位置位置：右上角
• 垂直偏移：34%
• 水平偏移：-10%

• 變換比例：80%

按鈕 #3 定位

• 位置位置：右下角
• 垂直偏移：-3%
• 水平偏移：5%

• 變換比例：138%

行設置

• 天溝寬度：4
• 寬度：80%（桌面）

按鈕佈局 #3 結果

查看最終結果。

創建按鈕佈局 #4：拉片按鈕

對於最後一個按鈕佈局，我們將在簡介的右上角創建一些拉片。

要快速啟動設計，請複制按鈕佈局 #2 的行。

列設置

接下來，更新列 #1 的背景設置，如下所示：

• 背景顏色（桌面）：無（默認）
• 背景顏色（電話）：#2e3858

在高級選項卡下，更新可見性選項，以便在手機顯示屏上隱藏溢出。

• 水平溢出（電話）：隱藏
• 垂直溢出（電話）：隱藏

位置拉片按鈕 #1

現在我們可以使用當前列中的三個按鈕作為我們的拉片按鈕。 打開頂部按鈕的設置並更新以下內容：

• 垂直偏移：0px
• 水平偏移：0px

由於我們要將按鈕用於選項卡，我們需要為正確的圖標騰出空間，以便它在從模糊模塊後面伸出時看起來居中。 繼續更新按鈕填充，如下所示：

• 填充：左 2em，右 3em

然後將以下自定義 CSS 添加到 After 元素：

padding-left: 10px;

然後更新手機上的水平偏移如下：

• 水平偏移（手機）：-134px

這將隱藏電話顯示屏上列之外的按鈕的左側，以便在懸停/單擊時顯示完整的按鈕。

定位拉片按鈕 #2

要定位第二個拉出按鈕，請複制上一個按鈕並更新副本的背景顏色。

• 背景顏色：#df4570

然後，更新位置如下：

• 垂直偏移：63px

然後更新手機顯示的以下位置選項：

• 職位（電話）：相對
• 垂直偏移（手機）：0%

定位拉片按鈕 #3

最後，要定位第三個拉片按鈕，請複制上一個按鈕模塊。 然後打開復制按鈕模塊的設置並更新以下內容：

• 背景顏色：#3599e5
• 垂直偏移：126px

一旦第三個按鈕就位，通過按住 Cmd（或 Ctrl）並單擊每個按鈕模塊來使用 Divi 的多選功能。

然後打開按鈕模塊之一的設置並在懸停時添加以下轉換轉換。

• 變換平移 X 軸（懸停）：68%

這將通過將懸停時的拉片功能移動到右側 68% 來更新所有三個按鈕。

模糊模塊定位

這個按鈕佈局需要模糊模塊來部分隱藏三個按鈕。 因此，我們將提供 100% 的寬度，然後使用右邊距來顯示按鈕選項卡的必要部分。 然後我們需要做的就是給宣傳片一個高 Z 指數，以確保它位於按鈕上方。

打開模糊模塊設置並更新以下內容：

• 寬度：自動
• 邊距：右 50px
• 職位：相對
• Z指數：11

然後更新背景顏色。

• 背景顏色：#2e3858

行設置

完成模糊和拉片按鈕後，打開行設置並更新寬度，為這些標籤留出一些移動空間。

• 寬度：80%

刪除第 2 列，然後復制第 1 列，以便在每個列中都具有相同的設計。

然後打開第 1 列的設置並為其指定以下 Z 索引：

• Z指數：12

這將確保第一列中的按鈕不會在懸停時隱藏在第二列中的內容後面。

如果需要，您可以更新每個按鈕的圖標以滿足您的需要。

按鈕佈局 #4 結果

查看拉片按鈕佈局的最終結果。

最終結果

最後的想法

定位按鈕絕對為 Divi 中無盡的按鈕佈局打開了大門。 希望本教程可以幫助您了解如何最好地使用 Divi 中的絕對位置。 其他有用的內置功能，如變換選項和 Z 索引，使設計絕對定位按鈕。

我期待在評論中收到您的來信。

乾杯!