Divi 設計展示:2019 年 4 月以來的新提交

已發表: 2019-04-29

又到了我們每月一次的 Divi 展示會的時候了,我們來看看社區成員製作的 10 個令人驚嘆的 Divi 網站。 每個月我們都會展示從我們社區提交的最佳 Divi 網站,今天我們想與您分享 4 月份的前十名網站。 在整篇文章中,我將指出一些我最喜歡的設計功能,這些功能吸引了我訪問每個網站。

我希望你喜歡他們!

Divi 設計展示:2019 年 4 月以來的新提交

1. 運動大學

本網站由安德魯·巴特利特提交。 該網站使用帶有黃色和橙色(嚴格來說是臟棕色)高光的白色文本的深色背景。 所有背景圖像都是黑色的。 英雄部分顯示了描述站點的背景圖片。 疊加層中的文本包括左側的標語和 CTA 以及右側的播放按鈕。 播放按鈕在懸停時更改,並在單擊時在彈出窗口中打開視頻。 其他部分以文本和圖像兩列顯示信息。 當您滾動時,佈局會交替變化。 在各個部分之間,有帶有用於推薦的語音氣球的小縮略圖。 全角 CTA 提供帶有訂閱表單的圖像。 更多的推薦性語音氣球會創建一個顯露的頁腳。

訪問網站

2. 京東設計

本網站由 James Dawson 提交。 它顯示一個帶有背景圖像和深色覆蓋的全屏滑塊。 疊加層使用大文本來描述站點並提供 CTA。 滾動顯示另一個部分,在描述公司的白色背景上帶有大文本。 服務以文本形式顯示,標題和描述之間有一個有趣的點分隔符。 投資組合部分顯示帶有疊加層的圖像。 此部分使用波浪形部分分隔線和灰色背景,從佈局的其餘部分中脫穎而出。 其他幾個部分使用這種設計,但有藍色背景。 我喜歡帶有超大客戶徽標的部分。 它們在四列中以深灰色顯示。

訪問網站

3. Swwwish

本網站由 Daniel Neumann 提交。 該網站顯示全屏背景,帶有深藍色覆蓋層和一側的白色文本 CTA。 服務顯示在帶有框陰影和動畫圖標的簡介中。 背景圖案是通過簡介看到的。 懸停會增強框陰影效果,因此它們會脫穎而出並使廣告語完全不透明。 幾個兩欄部分交替使用一側的文本和另一側的圖像佈局。 這些部分中的文本顯示動畫圖標和突出顯示的文本。 定價頁面很好地使用了帶有白色定價表的簡單藍白設計。 我喜歡定價表按鈕上的紅光。 紅色高光帶來了足夠的顏色並完美地脫穎而出。

訪問網站

4. HH 儀器

本網站由 Mathias Rue 提交。 該網站使用帶有圖標的橙色到紅色漸變背景來創建工程設計。 覆蓋層的一側顯示公司信息、按鈕和搜索功能,另一側顯示聯繫表。 下拉菜單包括聯繫頁面的全角按鈕。 合作夥伴徽標顯示在帶有供應商頁面鏈接的滑塊中。 Blurbs 用於鏈接到服務和信息。 它們包括 2 色圖像作為圖標,並且它們有一個有趣的邊框,使宣傳語脫穎而出。 參考部分使用了類似的設計,但它們要大得多,並且包含圖像的客戶徽標。 該設計也用於博客部分。 該佈局還包括來自 LinkedIn 的嵌入文章,背景與英雄部分相同。

訪問網站

5.智商動畫工作室

本網站由 Saurabh Patil 提交。 英雄部分在一側顯示標語、信息和 CTA,在另一側顯示動畫圖形,並通過深藍色背景漸變。 動畫圖形很有趣。 我想要一個這樣的咖啡機。 其餘的背景和按鈕使用更深的藍色。 四列簡介顯示帶有標題的動畫圖標。 它們使用深藍色背景和灰色邊框,該邊框足夠輕以彼此分開。 將鼠標懸停在任何簡介上都會將其背景變為橙色。 類似的設計用於其他提供信息的宣傳語。 一個有趣的 about 部分展示了在視差中的酷藝術品上的動畫。 這些頁面還顯示了很酷的加載動畫。

訪問網站

6.幼兒園小姐

本網站由 Chris Cadalzo 提交。 該站點在菜單下方的中央顯示一個超大徽標。 下一部分在頂部和底部使用波浪形部分分隔符——每個分隔符都有不同的設計和多種深淺的背景顏色。 此部分還將主題顯示為方形圖像,在懸停時縮小並更改其邊框。 資源部分和博客部分(但具有更高的圖像)使用相同的設計。 關於部分以圓圈圖像和與徽標相同的腳本字體樣式顯示站點所有者。 註冊表單顯示免費贈品和標題的腳本字體。 博客和側邊欄的樣式也與網站的品牌設計相匹配。

訪問網站

7. 德曼

本網站由 Jake Braught 提交。 視頻背景在帶有標語的疊加層後面播放。 滾動向特定類型的客戶端顯示服務的多色圖標。 類似的服務部分顯示在頁面底部。 推薦信以全寬顯示在帶有傾斜部分分隔線的綠色背景上。 這部分非常突出。 更大的推薦部分出現在佈局底部的多列中,具有交替的顏色和样式圖像。 幾個部分通過嵌入視頻和大文本統計數據以及更多信息的鏈接顯示客戶的故事。 視頻圖像顯示了多個設備上的網站。 靠近頁腳的開頭是山形切口後面的一座視差山,一個帶有傾斜部分分隔線的聯繫表格,以及一個顯示帶有統計計數器的評論網站徽標的部分。

訪問網站

8. 蘇帕國際

本網站由 Ben Dale 提交。 這是一個 2 頁的設計。 產品標籤以視差顯示在背景中,覆蓋層中帶有標語和 CTA。 下一部分以較小的字體在一側顯示詳細信息,在另一側以較大的文本顯示縮短的語句。 接下來的幾個部分顯示了帶有標題和文本的產品圖像。 圖像彼此垂直偏移,使設計具有有趣的視覺風格。 服務顯示的圖像包括帶有標題和編號文本的疊加層。 更多產品展示在大型 4 列畫廊中。 該站點充分利用了大標題文本和圖像。

訪問網站

9. 英雄為你

本網站由 Bram Chauvin 提交。 這個網站有趣地使用了圖形。 英雄部分使用頂部部分分隔符,實際設置標題樣式。 標題文本很大,並顯示一個標語和幾個按鈕。 背景以真實視差顯示,包括被下一部分的雲部分分隔器重疊的雲。 Blurbs 使用帶圓圈的圖形顯示服務。 宣傳語中的按鈕與宣傳語重疊。 我喜歡 CTA,它顯示了超級英雄智能手機的大圖。 頁腳也很有趣。 它顯示了具有真實視差的圖形背景,在疊加層中帶有傾斜的部分分隔線和接觸式 CTA。 該博客遵循相同的設計並使用頁眉和頁腳元素。

訪問網站

10. VS & 組裝

本網站由 MJ Swart 提交。 該站點有趣地使用了圖形元素和大塊來創建佈局。 英雄部分使用帶有不同顏色塊、點和垂直文本的深色背景來創建視覺圖案。 這些模式貫穿佈局的其餘部分。 接下來的部分使用多欄佈局,背景色塊、樣式標題、超大標題和滑塊顯示他們的服務、公司信息、體驗、文化、辦公室等。 單擊菜單中的聯繫人鏈接會在菜單中打開一個聯繫人表單。 我喜歡在這個網站上使用顏色、文字和滑塊。

訪問網站

在結束

這是我們四月份提交的 10 個最佳社區 Divi 網站。 這些網站看起來很棒,我們一如既往地感謝大家的提交!

如果您想考慮您自己的設計,請隨時通過電子郵件發送給我們在 nathan 的編輯,地址是優雅的主題 dot com。 請務必將電子郵件的主題設為“DIVI SITE SUBMISSION”。

我們也希望在評論中收到您的來信! 告訴我們您喜歡這些網站的哪些方面,如果他們做了什麼,您希望我們在博客上教給我們。

精選圖片來自 MSSA/shutterstock.com