如何使您的 Divi 推薦模塊具有粘性

使用 Divi 構建佈局的有趣之處之一是我們可以採用多種方式進行設計。 包含內容的模塊就是一個很好的例子。 我們可以使用它們的內容選項，或者我們可以將它們與其他模塊一起使用來創建一些獨特的設計。 例如，模塊組合允許我們創建粘性元素。 在本文中，我們將了解如何讓您的 Divi 推薦模塊變得有粘性，同時讓推薦內容正常滾動。

預覽

下面來看看我們會做什麼。 這個設計的移動版不會粘，所以我只展示桌面版進行預覽。

我的 Divi 推薦粘性模塊示例

在我的示例中，我使用的是 Divi 中提供的免費電氣服務佈局包中的登錄頁面。 此頁面在佈局底部附近已經有一個推薦部分，但它的設計完全不同。 我將替換該部分中的推薦並反映新設計的樣式。 我會保留標題，但我會重新創建它以顯示設置。

對於本教程，我將使用兩個模塊構建推薦。 我將使用推薦模塊來顯示圖像、姓名、職位和公司。 對於推薦內容，我將使用文本模塊。 文本模塊將正常滾動。 當用戶滾動時，推薦模塊將保持原位，直到他們到達推薦的末尾。 然後，推薦模塊將與文本模塊一起滾動。

創建粘性推薦部分標題

首先，創建一個新部分並添加一個單列 row 。 該行將包含標題，該標題將居中。

標題文本模塊

接下來，為標題添加一個文本模塊。

接下來，打開文本模塊的設置。 將文本更改為 Heading 3 並在正文內容編輯器中添加標題。

• 文本：標題 3
• 內容：快樂的客戶

設計設置

接下來，轉到設計選項卡。 將文本對齊設置為居中。

• 文本對齊方式：居中

為標題文本選擇 H3。 選擇 Chakra Petch 作為字體。 將粗體設置為粗體，將顏色設置為黑色。

• 字體：Chakra Petch
• 重量：粗體
• 顏色：#000000

最後，為文本大小選擇平板電腦圖標，並將桌面大小設置為 50 像素，平板電腦大小設置為 28 像素，手機大小設置為 20 像素。 關閉模塊的設置。

• 尺寸：桌面50px，平板28px，手機20px

為第一個推薦添加一行

接下來，在標題下添加 2/3、1/3 行。 這一行將舉行第一個推薦。

行設置

打開設計選項卡並啟用Equalize Column Heights 。

• 均衡柱高：是

列設置

使用行的設置打開第一列的設置。

向下滾動到邊框樣式並選擇頂部邊框樣式。 將寬度更改為 2px，顏色更改為#ffd600。 關閉行設置。 這將在推薦上方添加一條黃線，就像我們替換的原始推荐一樣。

• 邊框樣式：頂部
• 頂部邊框顏色：#ffd600
• 寬度：2px

推薦文本模塊

接下來，我們將為推薦內容添加文本模塊。 在黃線下方的左列中添加一個文本模塊。

在內容編輯器中輸入您的推薦內容。

接下來，轉到設計選項卡。 選擇 Chakra Petch 作為字體。 將粗體設置為粗體，將顏色設置為黑色。 對於文本大小，為桌面選擇 30 像素，為平板電腦選擇 14 像素。 電話設置將自動跟隨平板電腦，因此我們不需要更改它。 將文本行高設置為 2em。 這將創建一個巨大的印刷證明，將引起人們的注意。

• 字體：Chakra Petch
• 重量：粗體
• 顏色：黑色
• 尺寸：桌面30px，平板14px
• 行高：2em

向下滾動到文本對齊並選擇居中。 關閉文本模塊的設置。

• 對齊方式：居中

推薦模塊設置

接下來，在右欄中添加一個Testimonial 模塊。 這將是粘性的，並顯示此人的姓名、公司名稱、職位和圖像。

內容設置

打開模塊的設置並添加推薦內容。 將正文內容留空。 我們為此使用了文本模塊。

• 作者
• 職稱
• 公司
• 圖片

向下滾動到背景並將其設置為白色。

• 背景：#ffffff

接下來，選擇Pin 圖標。 這是背景的粘性版本，當模塊變得粘性時，它將允許背景改變顏色。 選擇黑色作為背景顏色。

• 粘性背景顏色：#000000

報價圖標

接下來，轉到設計選項卡。 為報價圖標顏色選擇#ffd600。

• #ffd600

圖片

向下滾動到圖像並將寬度和高度設置為 150 像素。 將圓角更改為 0px。

• 圖片寬度：150px
• 圓角：0px

文本

向下滾動到文本對齊並選擇居中選項。 這將作者的姓名、職位和公司名稱文本居中。

• 文本對齊方式：居中

作者文本

在Author Text下，選擇 Chakra Petch 作為字體並將粗體設置為粗體並居中對齊。 選擇黑色作為常規顏色。 選擇 Pin 圖標並將粘性顏色設置為#ffd600。 將桌面大小設置為 20 像素，將平板電腦大小設置為 14 像素。

• 字體：Chakra Petch
• 常規文字顏色：黑色
• 固定文本顏色：#ffd600
• 尺寸：20px 桌面，14px 平板

位置文本

接下來，滾動到Position Text 。 選擇 Exo 作為字體。 為常規文本顏色選擇黑色。 單擊固定圖標並將固定顏色設置為白色。

• 字體：Exo
• 常規文本顏色：#000000
• 固定文本顏色：#ffffff

公司文本

向下滾動到公司文本。 選擇 Exo 作為字體。 為常規文本顏色選擇黑色。 單擊固定圖標並將固定顏色設置為白色。

• 字體：Exo
• 常規文本顏色：#000000
• 固定文本顏色：#ffffff

盒子陰影

滾動到Box Shadow並選擇第一個選項。

• Box Shadow：第一個陰影選項

滾動效果

最後，轉到高級選項卡並向下滾動到Scroll Effects 。 選擇桌面並為粘滯位置選擇粘在頂部。 將置頂偏移設置為 50px。 將底部粘性元素設置為列。 這告訴模塊如何以及在哪裡粘貼。

• 粘性位置：堅持頂部
• 粘性頂部偏移：50px
• 底部粘性元素：列

為粘滯位置選擇平板電腦圖標，然後選擇不粘。 這可以防止模塊粘在平板電腦和手機設備上。 關閉模塊的設置。

• 粘性位置：不粘

現在，當您滾動時，推薦模塊會粘在屏幕頂部並改變顏色。

一旦模塊與列的底部對齊，它就會隨列滾動。

複製第一行推薦信

接下來，我們將通過複製第一行並進行更改來創建第二行。 將鼠標懸停在該行上並單擊重複圖標。

最後，一次打開一個文本和推薦模塊，並用新的推薦內容替換以前的內容。 完成更改後，關閉模塊並保存頁面。 通過重複複製過程添加更多推薦。 您現在有一個有趣的粘性推薦部分，其中包含兩個突出且看起來很棒的推薦。

結果

結束的想法

這就是我們如何使您的 Divi 推薦模塊具有粘性的看法。 Divi 的設置可以使任何元素具有粘性。 當一起使用模塊時，例如用於內容的文本模塊和用於支持信息的推薦模塊，您可以創建一些有趣的設計。 我們在這裡創建的推薦只是如何一起使用 Divi 的模塊和粘性設置的一個示例。

我們希望收到你的來信。 您是否使用 Divi 推薦模塊粘性選項？ 請在評論中告訴我們您的體驗。