如何使用 Divi 創建自定義粘性“返回頂部”設計

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 和綠色能源佈局包創建自定義粘性返回頂部設計。 這種技術將幫助您改善頁面上的用戶體驗，同時利用 Divi 在設計方面的內置選項。 我們希望本教程能激勵您創建自己的替代設計，並在您的下一個網站上使用它們！

讓我們開始吧。

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下本教程的結果。

動圖

示例#1

示例#2

示例 #3

1. 添加平滑滾動到頁面 HTML

將綠色能源登陸頁面上傳到新頁面

您需要做的第一件事是創建一個新頁面並上傳綠色能源佈局包的登錄頁面。

打開頁面設置

單擊下面打印屏幕中標記的圖標打開頁面設置：

將平滑滾動添加到自定義 CSS 框

轉到高級選項卡，通過將以下 CSS 代碼添加到自定義 CSS 框，為整個頁面添加平滑滾動行為：

html {
scroll-behavior: smooth;
}

2.在英雄部分添加CSS ID

打開英雄部分

返回頂部設計會將訪問者重定向到英雄部分。 要完成它，您需要先打開英雄部分設置。

添加 CSS ID

然後，轉到高級選項卡並向該部分添加 CSS ID。 在這篇文章的後面，我們將添加一個錨鏈接，將訪問者引導到此部分。

• CSS ID：第 1 部分

3.使用“返回頂部”設計在頁面底部添加新部分

一般步驟

將新的常規部分添加到頁面底部

正如您在這篇文章的預覽中所注意到的，我們將重新創建三個不同的設計示例。 為了簡化流程，我們將首先從一些一般步驟開始，然後在帖子中單獨關注每個設計示例。 在頁面底部添加一個新的常規部分。

間距

打開部分設置並刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加新行

列結構

繼續使用以下列結構添加新行：

添加錨鏈接

一旦有人點擊整行，我們希望他們被重定向到頁面頂部。 為此，我們將添加一個重定向到頁面英雄部分的鏈接。

• 行鏈接 URL：yourwebsite.com/page/#section-1

行對齊

我們還將行放置在節容器的右側。

• 行對齊：右

固定位置

接下來，我們通過轉到行的高級選項卡並更新以下位置選項來修復整行：

• 位置：固定
• 垂直偏移：30px
• 水平偏移：30px
• Z指數：99

除了固定行之外，我們還通過增加 z 索引來確保該行與所有頁面內容重疊。

重新創建設計示例 #1

行設置

更改列結構

現在我們已經完成了所有一般步驟，我們將重新創建您在本文開頭看到的三個不同示例。 讓我們從第一個開始！ 更改行列結構：

背景顏色

繼續打開行設置並添加白色背景色。

• 背景顏色：#ffffff

漿紗

轉到設計選項卡並更改大小設置。

• 使用自定義裝訂線寬度：1
• 寬度：9vw（桌面）、23vw（平板電腦）、35vw（手機）

間距

添加一些自定義填充值。

• 頂部填充：2.5vw（台式機）、6vw（平板電腦）、10vw（手機）
• 底部填充：2.5vw（台式機）、6vw（平板電腦）、10vw（手機）
• 左填充：1vw（桌面）、2vw（平板電腦）、4vw（手機）
• 右填充：1vw（桌面）、2vw（平板電腦）、4vw（手機）

邊界

繼續向邊框設置中的每個角添加“10px”。

盒子陰影

並使用以下設置添加框陰影：

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

展示

為了確保列在所有屏幕尺寸上都保持相鄰，我們將向行的主要元素添加一行額外的 CSS 代碼。

display: flex;

將文本模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 將文本模塊添加到具有您選擇的一些內容的第一列。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：Arial
• 文字字體粗細：粗體
• 文本對齊：右
• 文字顏色：#000000
• 文字大小：1.1vw（桌面）、3vw（平板電腦）、4.4vw（手機）
• 文字字母間距：-1px
• 文本行高：1em

將文本模塊添加到第 2 列

添加符號

移到第二列並在那裡添加一個文本模塊。 將“▲”符號添加到內容框中。

文字設置

最後但並非最不重要的是，轉到設計選項卡並更改文本設置。

• 文字字體：Open Sans
• 文本對齊：居中
• 文字顏色：#000000
• 文字大小：3vw（桌面）、8vw（平板電腦）、12vw（手機）
• 文本行高：0.6em

重新創建設計示例 #2

行設置

漿紗

進入第二個例子！ 打開行設置並更改行的寬度。

• 寬度：7%

間距

轉到間距設置並刪除所有默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

將文本模塊添加到列

添加符號

繼續向該行添加文本模塊並輸入“↑”符號。

文字設置

轉到設計選項卡並更改文本設置。

• 文字字體：Open Sans
• 文本對齊：居中
• 文字顏色：#000000
• 文字大小：56px
• 文本行高：1em

間距

接下來，我們將添加一些自定義的頂部和底部填充。

• 頂部填充：30px
• 底部填充：50px

邊界

轉到設計選項卡，並在每個角上添加“50vw”。 使用以下設置添加邊框：

• 邊框寬度：3px
• 邊框顏色：#000000

重新創建設計示例 #3

行設置

漿紗

繼續下一個也是最後一個例子！ 打開行設置並修改寬度。

• 寬度：4%（桌面）、10%（平板）、15%（手機）

間距

接下來刪除默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

盒子陰影

使用以下設置向行添加自定義框陰影：

• 框陰影傳播強度：4px
• 陰影顏色：rgba(0,0,0,0.3)

將文本模塊添加到列

添加符號

本設計示例所需的唯一模塊是文本模塊。 將“^”添加到內容框中。

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：Open Sans
• 文字字體粗細：超粗
• 文本對齊：居中
• 文字顏色：#4359e9
• 文字大小：56px
• 文本行高：1em

• 文字陰影顏色：#35d764

間距

繼續轉到間距設置並添加一些自定義頂部和底部填充。

• 頂部填充：30px
• 底部填充：20px

邊界

最後但並非最不重要的一點是，向文本模塊添加邊框，就大功告成了！

• 邊框寬度：3px
• 邊框顏色：#4359e9

預覽

現在我們已經完成了所有步驟，讓我們最後看看結果。

動圖

示例#1

示例#2

示例 #3

最後的想法

在本用例教程中，我們向您展示瞭如何使用 Divi 創建自定義返回頂部設計。 我們為頁面添加了平滑滾動，為英雄部分分配了一個部分 ID，並將固定行鏈接到英雄部分。 本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。