使用 Divi 的滾動效果創建可滾動的投資組合導航列表

作品集頁面是讓您的網頁設計發揮創意的完美藉口。 在本教程中，我們將向您展示如何組合一個引人注目的可滾動投資組合導航列表來為任何投資組合頁面增添趣味。 使用 Divi 的滾動效果，菜單項在到達屏幕中間時變得生動起來。 帶有錨鏈接的按鈕可幫助用戶導航到相應的部分。

繼續閱讀以重新創建設計或免費下載 JSON 文件。

預覽

在開始本教程之前，讓我們先來看看不同屏幕尺寸的設計。

桌面

移動的

線框

這個響應式可滾動投資組合導航列表由一系列重複和交替的行創建。 出於這個原因，我們包含了線框視圖的屏幕截圖。 這將幫助您遵循行及其各自模塊的順序。 我們建議您相應地標記每一行以進行跟踪。 我們也在教程步驟中添加了這些說明。

免費下載英雄章節

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

下載文件

免費下載

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

下載

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

1. 創建新版塊

添加部分

背景

從新頁面或現有頁面中的常規部分開始。 在添加任何行或模塊之前，為該部分添加背景顏色。

• 背景顏色：#222831

間距

為滾動效果的部分添加足夠的間距以發揮其魔力。

• 頂部和底部填充：660px

2. 創建可滾動的投資組合導航列表

添加第 1 行

列結構

添加第一行並選擇以下列結構：

漿紗

調整下一行的寬度。

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

間距

然後，調整間距設置。

• 左填充
  • 桌面：130px
  • 平板電腦和手機：50px

管理員標籤

並標記該行。

• 管理員標籤：第 1 行

將文本模塊添加到列

內容

為標題添加一個文本模塊。 插入一些您選擇的 H1 內容。

標題文字

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

• 標題級別：H1
• 字體：阿拉塔
• 重量：粗體
• 顏色：#a3f7bf
• 尺寸
  • 桌面：190px
  • 平板電腦：120px
  • 電話：50px
• 字母間距
  • 台式機和平板電腦：7px
  • 電話：8px

滾動效果

最後但並非最不重要的一點是，向高級選項卡添加淡入淡出滾動效果。

• 啟用效果：淡入淡出
• 視口底部
  • 位置：100%
  • 起始不透明度：100%
• 中等不透明度
  • 位置：50%
  • 中：100%
• 視口頂部
  • 位置：80%
  • 結束不透明度：20%

添加第 2 行

列結構

現在是添加導航項的時候了。 添加具有兩個相同大小的列的新行。

管理員標籤

標記行。

• 管理員標籤：第 2 行

漿紗

調整大小設置。

• 天溝寬度：1
• 寬度：80%
• 最大寬度：1920px

第 1 列設置

自定義 CSS

在添加模塊之前，向列的主要元素添加一行 CSS 代碼，以確保在較小的屏幕尺寸上比例保持不變。 從第 1 列開始：

• 主要元素：寬度：20%！重要

width: 20% !important }

第 2 列設置

自定義 CSS

對第二列執行相同操作。

• 主要元素：寬度：80%！重要

width: 80% !important }

將按鈕模塊添加到第 1 列

內容

現在，使用您選擇的一些副本將按鈕模塊添加到第 1 列。

• 按鈕文本：查看

關聯

為接下來的模塊添加一個錨鏈接。 我們將在本教程後面為這個錨鏈接添加一個匹配的 CSS ID。

• 按鈕鏈接網址：#VB

結盟

移至設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕

然後，相應地設置按鈕樣式：

• 按鈕的自定義樣式：是
• 字體大小
  • 桌面：30px
  • 平板電腦：25px
  • 電話：20px
• 顏色：白色#ffffff
• 背景：深灰色 #222831
• 邊框寬度：0px
• 邊框半徑：0px
• 字母間距：1px
• 字體：阿拉塔
• 顯示按鈕圖標：否

間距

也要更改間距設置。

• 頂部填充
  • 桌面：25px
  • 平板電腦：15px
  • 電話：5px

滾動效果

並添加淡入淡出滾動效果。

• 啟用效果：淡入淡出
• 視口底部
  • 位置：40%
  • 起始不透明度：0%
• 中等不透明度
  • 底部：45%
  • 中：100%
  • 最高：55%
• 視口頂部
  • 位置：60%
  • 結束不透明度：0%

盒子陰影

在繼續下一個模塊之前，為按鈕的懸停設置添加一個框陰影。

• 框陰影：第四個選項
• 水平位置：0px
• 垂直位置
  • 懸停：5px
• 模糊強度：0px
• 傳播強度：0px
• 陰影顏色：水綠色#a3f7bf

將文本模塊添加到第 2 列

內容

繼續向第 2 列添加一個文本模塊，其中包含您選擇的一些 H3 內容。

標題文字

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

• 標題級別：H3
• 字體：阿拉塔
• 顏色
  • 桌面：白色#ffffff
  • 懸停：水綠色#a3f7bf
• 字體大小
  • 桌面：80px
  • 平板電腦：65px
  • 電話：38px

滾動效果

並通過在高級選項卡中添加淡入淡出滾動效果來完成模塊設置。

• 啟用效果：淡入淡出
• 視口底部
  • 位置：40%
  • 起始不透明度：15%
• 中等不透明度
  • 底部：45%
  • 中：100%
  • 最高：55%
• 視口頂部
  • 位置：60%
  • 結束不透明度：15%

重複第 2 行

要完成導航列表，請將此行複制三遍。 新行將被重新編號； 2、3 和 4。

調整第 3 行

行管理標籤

將行的管理標籤從 2 更改為 3。

• 管理員標籤：第 3 行

按鈕模塊

將錨鏈接從#VB 更改為#WEB。

• 按鈕鏈接網址：#WEB

文本模塊

也更改文本模塊中的 H3 內容。

• 正文：網站

調整第 4 行

行管理標籤

將行的管理標籤從 2 更改為 4。

• 管理員標籤：第 4 行

按鈕模塊

將錨鏈接從#VB 更改為#MA。

• 按鈕鏈接網址：#MA

文本模塊

也更改 H3 內容。

• 正文：移動應用

調整第 5 行

行管理標籤

將行的管理標籤從 2 更改為 5。

• 管理員標籤：第 5 行

行間距

添加一些底部邊距。

• 底部邊距
  • 桌面 230 像素
  • 平板電腦：100px
  • 電話：60px

按鈕模塊

將錨鏈接從#VB 更改為#UX。

• 按鈕鏈接網址：#UX

文本模塊

並在這裡更改 H3 內容。

• 正文：用戶體驗設計

3. 創建投資組合項目

添加第 6 行

列結構

可滾動的投資組合導航列錶鍊接到投資組合項目。 每個項目由兩行組成。 一排帶有隱形分隔線，另一排帶有號召性用語模塊。 CSS ID 將添加到帶有分隔符的行中。 這樣，錨導航不會停在投資組合項目的頂部，而是停在中間。

現在讓我們創建項目。 添加一列的行。

管理員標籤

不要忘記標記新行。

• 管理員標籤：第 6 行

CSS ID 和類

在高級選項卡中插入匹配的 CSS ID。

• CSS ID：VB

將分隔模塊添加到第 6 行

能見度

向行的列添加一個不可見的分隔線。

• 顯示分隔線：否

重複第 6 行

將此行複制三遍。 新行將被重新編號； 8、10 和 12。

調整第 8 行

管理員標籤

將管理員標籤從 6 更改為 8。

• 管理員標籤：第 8 行

CSS ID 和類

將 CSS ID 從 VB 更改為 WEB。

• CSS ID：網絡

調整第 10 行

管理員標籤

將管理員標籤從 6 更改為 10。

• 管理員標籤：第 10 行

CSS ID 和類

將 CSS ID 從 VB 更改為 MA。

• CSS ID：MA

調整第 12 行

管理員標籤

將管理員標籤從 6 更改為 12。

• 管理員標籤：第 12 行

CSS ID 和類

管理員標籤

將 CSS ID 從 VB 更改為 UX。

• CSS ID：用戶體驗

添加第 7 行

列結構

暫時將帶有分隔線的四行留在原處。 添加一個包含一列的新行。

背景

還沒有添加模塊，打開行設置並設置背景樣式如下：

• 背景圖片：照片
  • 圖像混合：相乘
• 背景漸變
  • 顏色 1：深灰色 #222831
  • 顏色 2：透明
  • 類型：線性
  • 方向：90度
  • 起始位置：50%
  • 結束位置：100%
  • 將漸變放在背景圖像上方：是

管理員標籤

標記行。

• 管理員標籤：第 7 行

漿紗

調整下一行的大小設置。

• 寬度：80%
• 最大寬度：2560px
• 對齊方式：居中

邊界

也添加一些圓角。

• 圓角：25px

滾動效果

並啟用淡入淡出滾動效果。

• 啟用效果：淡入淡出
  • 起始不透明度：0%
  • 中等不透明度：100%
    • 位置：80%
  • 結束不透明度：20%

將號召性用語模塊添加到第 7 行

內容

現在向該行添加一個號召性用語模塊。

• 標題：視覺品牌
• 按鈕：了解更多
• 正文：描述性文本

背景

刪除默認背景色。

• 背景：無

關聯

添加指向相應頁面的鏈接。 我們現在插入一個#。

• 關聯： ＃

標題文字

接下來為標題文本設置樣式。

• 標題級別：H2
• 字體：阿拉塔
• 顏色：白色#ffffff
• 尺寸
  • 桌面：70px
  • 平板電腦：60px
  • 電話：48px
• 字母間距：1px

文章主體

也為正文設置樣式。

• 字體：拉托
• 顏色：白色#ffffff
• 尺寸
  • 桌面：19px
  • 平板電腦：20px
  • 電話：18px
• 線高：1.8em

按鈕

轉到按鈕設置並應用以下更改：

• 自定義樣式：是
• 文字大小：20px
• 文字顏色：深灰色 #222831
• 背景：水綠色#a3f7bf
• 邊框半徑：9px
• 字母間距：1px
• 按鈕字體：Alata
• 上邊距：35px

漿紗

也調整模塊的大小。

• 寬度：50%
• 最大寬度
  • 台式機：50%
  • 平板電腦和手機：100%
• 對齊方式：左

間距

也向模塊添加一些填充。

• 左填充：
  • 桌面：90px
• 左右填充：
  • 平板電腦：50px
  • 電話：40px

自定義 CSS

最後但並非最不重要的一點是，在高級選項卡的促銷標題中添加一行 CSS 代碼。

• 促銷標題：padding-bottom：30px；

padding-bottom: 30px; }

重複第 7 行

將第 7 行複制 3 次。 新行將被重新編號； 9、11 和 13。

調整第 9 行

背景

更改背景圖像並切換漸變方向。

• 背景圖片：新照片
• 背景漸變
  • 顏色 1：透明
  • 顏色 2：深灰色 #222831
  • 起始位置：0%
  • 結束位置：50%

管理員標籤

將行的管理標籤從 7 更新為 9。

• 管理員標籤：第 9 行

調整第 9 行中的號召性用語模塊

內容

更新模塊的內容。

• 標題：網站
• 正文：新的描述性文本

關聯

也更新鏈接。

• 鏈接：新鏈接

漿紗

從左到右更改模塊的對齊方式。

• 模塊對齊：右

間距

從左到右更改桌面填充。 平板電腦和手機設置需要保持不變。

• 右填充
  • 桌面：90px

調整第 11 行

背景

更改新行中的背景圖像。

• 背景圖片：另一張照片

管理員標籤

將行的管理標籤從 7 更新為 11。

• 管理員標籤：第 11 行。

調整第 11 行中的號召性用語模塊

內容

更改號召性用語模塊內的內容。

關聯

鏈接也修改一下。

• 鏈接：新鏈接

調整第 13 行

背景

更改背景圖像並切換漸變方向。

• 背景圖片：新照片
• 背景漸變
  • 顏色 1：透明
  • 顏色 2：深灰色 #222831
  • 起始位置：0%
  • 結束位置：50%

管理員標籤

打開管理標籤選項卡並將行號更新為 13。

調整第 13 行中的號召性用語模塊

內容

更新模塊的內容。

• 標題：用戶體驗設計
• 正文：新的描述性文本

關聯

也更新鏈接。

• 鏈接：新鏈接

漿紗

從左到右更改模塊的對齊方式。

• 模塊對齊：右

間距

從左到右更改桌面填充。 平板電腦和手機設置需要保持不變。

• 右填充
  • 桌面：90px

重新排列行

移動第 7、9 和 11 行。

根據他們的管理標籤按正確的順序放置行。

比較您的線框

仔細檢查可滾動投資組合導航列表和項目的線框。 行必須是為了使錨鏈接正常工作。 這是我們的線框視圖的另一個視圖：

預覽

我們完成了重新創建可滾動投資組合導航列表的所有步驟。 讓我們再看看設計在不同屏幕尺寸上的外觀。

桌面

移動的

最後的想法

在這個循序漸進的教程中，我們使用 Divi 的滾動效果重新創建了一個可滾動的投資組合導航列表。 此外，我們添加了投資組合項目。 導航由錨鏈接和 CSS ID 控制。 這是交互式顯示投資組合項目的好方法。 如果您喜歡或有任何問題，請給我們留言！