10 個擁有酷炫作品集頁面的 Divi 網站

對於提供服務的任何人來說，投資組合頁面是最重要的頁面之一。 它不僅展示了您所做的工作類型，還向訪問者展示了您的專業水平和您合作過的客戶。 投資組合頁面可以有多種不同的設計方式。 在本文中，我們將介紹 11 個 Divi 網站，其中包含很酷的作品集頁面，以幫助激發您進行下一個 Divi 設計的靈感。

投資組合頁面通常包括標準投資組合、過濾投資組合或全寬投資組合模塊。 但是，還有其他方法可以顯示您的投資組合。 有些人使用圖像、簡介或畫廊等元素構建作品集。 當然，這必須在頁面佈局中很好地工作。 我們將看到每個示例。

我將展示我喜歡的部分的圖像並討論我喜歡它的地方。 這些網站沒有特定的順序。 留到最後一些鏈接可以幫助您使用 Divi 升級自己的投資組合頁面。

1. 文創

該站點顯示了一個服務列表，這些服務在英雄部分的切換中打開，然後是全角部分以顯示報價。 投資組合部分在左側顯示服務類別、客戶名稱和客戶描述，在右側顯示項目圖像。 每個投資組合項目都由細分隔線分隔。 網站的示例包括查看實時網站的鏈接。

見網站

2.圓釘

此站點以三列顯示投資組合項目，並在單列中包含一個部分。 三列部分在每個項目的圖像上放置一個覆蓋層，客戶的標誌為白色。 底角的白線圖標顯示項目的類別。 單列部分顯示項目的圖像，帶有文本和圖案背景上的按鈕。 在第三部分下，它提供了在每個類別中查看更多信息的鏈接。

見網站

3. 里奧和騰

此頁面將投資組合項目置於多列佈局中，圖像之間沒有空格。 將鼠標懸停在其中任何一個上方會顯示圖像上的藍色疊加層和底部的框，顯示項目的名稱和類別。 投資組合包括兩列和三列並交替佈局。 圖像使用不同的背景，並在不同類型的設備上顯示項目的圖像。 這個網站很好地利用了顏色。

見網站

4.Studinger媒體圖形

該網站在優雅的背景圖像上介紹了帶有公司徽標、名稱和頁面標題的投資組合頁面，該背景圖像幾乎不以單色覆蓋層顯示。 投資組合部分使用樣式按鈕作為過濾器，並在三列網格中顯示項目。 懸停會旋轉圖像並提供鏈接。 該頁面還包括號召性用語、聯繫表格和帶有 QR 碼的揭示頁腳和與網站品牌相匹配的社交關注按鈕。

見網站

5.凱瑟琳克里夫

此投資組合頁面在視差疊加層中顯示帶有標題和描述的全屏圖像。 滾動顯示帶有項目名稱和位置以及相關人員姓名的文本部分。 接下來是一個畫廊，其中包括全屏圖像和三列網格。 其他項目遵循類似的模式，圖像顯示在兩列或三列網格中。

見網站

6. 超神網頁設計

這對每個項目進行編號並顯示一個圖像，其中包括公司的徽標和所提供的服務、帶有手寫字體的項目標題、項目的簡短描述以及一個用於查看項目實況的按鈕。 標題文本、邊框和按鈕顏色與網站的品牌相匹配。 接下來是在線預訂應用程序的 CTA。

見網站

7. 獲取網頁設計

此投資組合頁面加載類似於 Pinterest 的項目圖像。 它們顯示在 4 或 5 列網格中（取決於您的屏幕尺寸和縮放級別）。 將鼠標懸停在任何項目上都會顯示放大鏡。 單擊此按鈕會在燈箱中打開圖像。 許多圖像是網站的完整佈局，而其他圖像是英雄區域。

見網站

8. Caporal Marketing Digital

此作品集頁面顯示帶有標題、標語和按鈕的全角圖像，該按鈕具有與網站的品牌顏色相匹配的有趣邊框。 滾動以三列網格顯示過濾後的投資組合。 該投資組合以單色顯示客戶的徽標，懸停時以彩色顯示。 它們還包括客戶的姓名和提供的服務。 左側的行以橫向的文本顯示社交網絡的名稱。 它們在滾動時保留在屏幕上。

見網站

9. 強大的狐狸

此頁面採用全角背景，帶有深色覆蓋層和優雅的字體來顯示頁面的標題。 過濾後的投資組合以單色顯示客戶的徽標。 將鼠標懸停在任何項目上會從鼠標所在的方向顯示一個疊加層。 疊加層顯示公司名稱和所提供的服務以及用於查看實時項目的鏈接。 接下來是 CTA，一個兩列部分，帶有視差背景圖像和推薦滑塊，社交關注按鈕和 Instagram 提要。

見網站

10.和歌

這個首先是為移動開發的。 該頁麵包含一個包含標題和描述的超大文本的大部分。 滾動和自動收報機出現在頁面底部並保留在屏幕上的此位置。 當您將鼠標懸停在圖像上時，光標會變為一個大箭頭並變為一隻大手。 項目顯示在兩列中。 該頁面還包括服務列表、聯繫表和新聞通訊選擇。 頁腳在滾動時顯示，並顯示通過文本剪切部分顯示的視頻。

見網站

結束的想法

這就是我們對 11 個 Divi 網站的看法，這些網站具有很酷的投資組合頁面，可幫助您激發下一個 Divi 網站的靈感。 ET 博客中有很多文章專門針對作品集或元素，例如簡介、圖像或畫廊。

這裡僅僅是少數：

• 如何使用可過濾的投資組合和帖子導航來組織 Divi 的案例研究
• 3 個免費漂亮的項目頁面佈局（以及如何使用 Divi Builder 構建更多）
• 如何使用 Divi Leads 來衡量您的投資組合網站的有效性
• 如何使用 Divi 創建最小的投資組合主頁
• 使用過濾器、英雄部分和 CTA 來擴展最小投資組合主頁
• 免費 Divi 下載：主頁投資組合佈局包
• 免費 Divi 下載：創意單頁作品集佈局包
• 使用 Divi 的折疊動畫使 Blurbs 綻放
• 如何使用 Hover.css 向 Divi 的 Blurb 模塊添加高級懸停效果
• 5 種有趣的方式來設計 Divi 的 Blurb 模塊
• 使用 Divi Gallery 模塊創建灰度到彩色畫廊
• 如何使用背景圖像創建獨特的重疊效果
• 如何使用 Divi 的新濾鏡選項美化您的圖像

我們希望聽到您的意見。 您最喜歡哪些具有酷炫投資組合頁面的網站？ 讓我們在評論中知道。

特色圖片來自圖形農場/shutterstock.com