下載使用 Divi 滾動效果製作的免費自滾動團隊成員旋轉木馬

在設置您的關於頁面時，您很可能也希望在那裡展示您的團隊成員。 通過這樣做，您可以讓訪問者與您公司背後的人員建立聯繫。 如果您正在尋找一種在滾動時為團隊成員部分設置動畫的方法，您會喜歡本教程。 我們將重新創建一個漂亮的自滾動團隊成員輪播，它會隨著您的訪問者向下滾動頁面而移動。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載團隊成員輪播佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加新部分

間距

首先向您正在處理的頁面添加一個新的常規部分。 打開部分設置並在不同的屏幕尺寸中添加一些自定義填充。

• 頂部填充：200 像素（桌面）、100 像素（平板電腦和手機）
• 底部填充：200 像素（桌面）、100 像素（平板電腦和手機）

溢出

為了確保我們的設計中沒有出現水平滾動條，我們將隱藏高級選項卡中的部分溢出。

• 水平溢出：隱藏
• 垂直溢出：隱藏

添加第 1 行

列結構

繼續使用以下列結構向該部分添加新行：

漿紗

尚未添加任何模塊，打開行設置，移至設計選項卡並修改大小設置中的寬度和最大寬度。

• 寬度：90%
• 最大寬度：1580px

間距

我們也添加了一些自定義的頂部和底部填充。

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

將文本模塊添加到列

添加 H2 內容

是時候添加模塊了，從第一個文本模塊開始。 輸入您選擇的一些 H2 含量。

H2 文本設置

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

• 標題 2 字體：流沙
• 標題 2 字體粗細：半粗體
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：70 像素（桌面）、50 像素（平板電腦）、40 像素（手機）

將分隔模塊添加到列

能見度

然後，添加一個分隔模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

接下來對線路設置進行一些更改。

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

漿紗

並通過相應地更改大小設置來完成模塊設置：

• 分隔線重量：20px
• 寬度：11%
• 模塊對齊：左
• 高度：20px

添加第 2 行

列結構

進入下一行！ 使用以下列結構：

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置如下：

• 使用自定義裝訂線寬度：是
• 天溝寬度：2
• 寬度：100%
• 最大寬度：100%

間距

然後，僅在較小的屏幕尺寸上添加一些左右填充。

• 左填充：5%（僅限平板電腦和手機）
• 右填充：5%（僅限平板電腦和手機）

列設置 (5x)

現在，在本教程的接下來的三個步驟中，我們將對列進行一些更改。 將所有三個步驟應用於您行中的每一列。

漸變背景

首先，為每一列添加漸變背景。

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：RGBA(0,0,0,0.84)
• 漸變類型：線性
• 起始位置：25%
• 結束位置：86%
• 將漸變放在背景圖像上方：是

背景圖片

然後，上傳您選擇的背景圖片。 此背景圖像代表每個團隊成員，因此對每一列使用不同的圖像。

• 背景圖片尺寸：封面
• 背景圖片位置：中心

主要元素

通過向平板電腦每列的主要元素添加一些自定義 CSS 來完成列設置。 這幾行 CSS 代碼將幫助我們在平板電腦上將列放在彼此下方，而不是讓兩列並排放置。

width: 100% !important;
margin: 50px 0px 50px 0px !important;

將人員模塊添加到列

添加內容

為了共享團隊成員信息，我們將使用人員模塊。 將第一個人員模塊添加到第 1 列並使用您選擇的一些內容。

刪除圖像

然後，刪除圖像。 我們改為使用列背景圖像。

背景圖片

然後我們將添加一個圖像覆蓋作為模塊的背景圖像。 您可以通過下載本教程開頭的文件夾來找到我們正在使用的那個。

• 背景圖片尺寸：封面
• 背景圖片位置：中心

標題文字設置

轉到模塊的設計選項卡並按如下方式更改標題文本設置：

• 標題標題級別：H3
• 標題字體：流沙
• 標題字體粗細：粗體
• 標題文字顏色：#ffffff
• 標題文字大小：230%

正文設置

也修改正文設置。

• 正文字體：Open Sans
• 正文顏色：#ffffff
• 車身線高：2.2em

位置文本設置

然後，對位置文本設置進行一些更改。

• 位置字體：Open Sans
• 位置文本顏色：#edf000

間距

並通過在間距設置中添加一些自定義填充值來完成模塊設置。

• 頂部填充：70%
• 底部填充：10%
• 左填充：10%
• 右填充：10%

克隆人模塊 4x

完成人員模塊後，您可以將整個模塊克隆四次。

在剩餘的列中放置重複項

將重複的模塊放在該行剩餘的四列中。 確保您也更改了內容。

將行變成自滾動的輪播

修改第 2 行大小

現在，要將這一行變成自滾動的團隊成員輪播，我們需要重新打開行設置並在大小設置中更改寬度和最大寬度。

• 寬度：180%
• 最大寬度：220%（桌面），100%（平板和手機）

添加第 2 行水平運動

通過向高級選項卡中的滾動效果設置添加一些水平運動來完成行設置，您就完成了！

• 啟用水平運動：是
• 起始偏移：
  • 桌面：2.5
  • 平板和手機：0
• 中間偏移：0（40%）
• 結束偏移：
  • 桌面：-25（62%）
  • 平板和手機：0
• 運動效果觸發器：元素中間

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何利用 Divi 的內置滾動效果發揮創意。 更具體地說，我們重新創建了一個漂亮的自滾動團隊成員輪播。 當訪問者向下滾動頁面時，會出現輪播圖的不同部分。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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