下載 Divi 的免費運動推薦版面

推薦信是許多企業及其網站的重要組成部分，這已不是什麼秘密。 它們為您提供的服務或產品增添了可信度。 特別注意您展示推薦的方式通常會帶來回報。 使用 Divi，您可以通過多種方式設置推薦部分的樣式，甚至還有專門用於此的推薦模塊。 但是，如果您正在尋找一種獨特的方式來為您的推薦添加互動，那麼您會喜歡這篇文章。 我們正在分享使用 Divi 的新滾動效果構建的漂亮的自定義運動推薦佈局。 我們還將逐步重新創建設計！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載 Motion 推薦版式

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新部分。 打開部分設置並將背景顏色更改為黑色。

• 背景顏色：#000000

間距

轉到該部分的設計選項卡，並在不同的屏幕尺寸上添加一些自定義的頂部和底部填充。

• 頂部填充：10%（桌面）、20%（平板電腦）、30%（手機）
• 底部填充：10%（桌面）、20%（平板電腦）、30%（手機）

添加第 1 行

列結構

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

將文本模塊添加到列

添加 H2 內容

在這一行的列中，我們需要的第一個模塊是帶有一些 H2 內容的文本模塊。

H2 文本設置

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

• 標題 2 字體：Questal
• 標題 2 文本對齊：居中
• 標題 2 文字大小：85 像素（桌面）、45 像素（平板電腦）、35 像素（手機）
• 標題 2 字母間距：2px
• 標題 2 行高：1.1em

將分隔模塊添加到列

能見度

然後，在文本模塊正下方添加一個分隔線模塊，並確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線路設置

轉到模塊的設計選項卡並按如下方式更改線路設置：

• 線條顏色：#161616
• 線型：實心
• 線路位置：頂部

漿紗

也修改大小設置。

• 分隔線重量：14px
• 寬度：13%（桌面）、20%（平板）、30%（手機）
• 模塊對齊：居中

添加第 2 行

列結構

進入下一行！ 這一行將專門用於我們的第一個推薦。 使用以下列結構：

桌面背景圖片

然後，上傳您可以在本文開頭下載的下載文件夾中找到的藍色桌面背景圖像。

• 背景圖片尺寸：適合
• 背景圖片位置：中心

平板電腦和手機背景圖片

我們在較小的屏幕尺寸上使用藍色背景圖像的旋轉版本。 您也可以在下載文件夾中找到此背景圖像。

• 背景圖片尺寸：適合
• 背景圖片位置：中心

漿紗

移至行的設計選項卡並更改大小設置中的最大寬度。

• 最大寬度：2000px

間距

也對間距設置進行一些更改。

• 上邊距：100px
• 頂部填充：15%
• 底部填充：15%

水平運動滾動效果

然後，轉到高級選項卡並在滾動效果中啟用一些水平運動。

• 啟用水平運動：是
• 起始偏移：-4
• 中間偏移：0（50%）
• 結束偏移：0
• 運動效果觸發器：元素頂部

淡入淡出滾動效果

我們還將添加自定義淡入淡出滾動效果。

• 啟用淡入淡出：是
• 起始不透明度：0%（19%）
• 中等不透明度：100%（從 25% 到 88%）
• 結束不透明度：0%（93%）
• 運動觸發效果：元素頂部

將文本模塊添加到列

添加內容

我們在這一行中需要的第一個模塊是文本模塊。 將推薦內容放在內容框中。

文字設置

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

• 文字字體：Questal
• 文字字體粗細：粗體
• 文字顏色：#ffffff
• 文字大小：50 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 文本行高：1.5em
• 文本對齊：居中

漿紗

然後，在設計選項卡中修改不同屏幕尺寸的寬度。

• 寬度：63%（桌面），100%（平板電腦和手機）
• 模塊對齊：居中

將人員模塊添加到列

添加內容

進入下一個模塊，即人員模塊。 添加姓名、職位和社交媒體鏈接。

上傳圖片

接下來上傳您選擇的方形圖像。

圖標設置

移至設計選項卡並在圖標設置中更改圖標顏色。

• 圖標顏色：#2b302e

圖片

通過添加一些圓角將圖像變成圓形。

• 所有角落：100px

標題文字設置

然後，修改標題文本設置如下：

• 標題字體：Questal
• 標題字體粗細：粗體
• 標題文字顏色：#ffffff
• 標題文字大小：24px

正文設置

也對正文文本設置進行一些更改。

• 正文字體：Questal
• 正文顏色：#ffffff
• 正文文字大小：15px

位置文本設置

我們也在修改位置文本設置。

• 位置字體：Questal
• 位置文本顏色：#1b66ff
• 位置文字大小：17px

漿紗

隨著不同屏幕尺寸的寬度。

• 寬度：25%（桌面），100%（平板電腦和手機）
• 模塊對齊：居中

間距

接下來導航到間距設置並添加一些上邊距。

• 上邊距：100px

主要元素

為了確保我們的人員模塊中的所有內容都對齊，我們將轉到高級選項卡並向模塊的主要元素添加兩行 CSS 代碼。

display: flex;
align-items: center;

會員圖片

我們也會在較小的屏幕尺寸上為成員圖像元素使用一些自定義寬度。

藥片：

width: 20% !important;

電話：

width: 30% !important;
margin-right: 5%;

克隆行 #2

完成包含推薦信的行後，您可以克隆整行一次。

更改行背景圖像

我們需要對這個重複的行進行一些更改，從桌面上的背景圖像和較小的屏幕尺寸開始。 您可以在下載文件夾中找到紅色版本的背景圖片。

更改行間距

向下一行添加一些負上邊距。

• 最高利潤率：-15%

更改人員模塊位置文本顏色

並通過更改人員模塊設置中的位置文本顏色來完成重複行設置。

• 位置文本顏色：#ff233e

克隆最後一行

完成重複的推薦行後，您可以克隆它。

更改行背景圖像

使用您可以在下載文件夾中找到的黃色版本更改行的背景圖像。

更改人員模塊位置文本顏色

在人員模塊設置中修改位置文本顏色，你就完成了！

• 位置文本顏色：#ffbc1b

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們分享了一個漂亮的動作推薦版式，您可以免費下載！ 我們使用了自定義背景，並能夠用 Divi 的滾動效果突出顯示每一個推薦。 我們也一步一步地重新創建了設計！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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