使用 Divi 創建最小網站的 8 種技術

在過去的幾年裡，最小的網站已經變得非常流行。 它們使您可以在導航時專注於為訪問者提供清新乾淨的感覺。 極簡的網頁設計風格受到斯堪的納維亞室內設計風格的影響。 您肯定已經在互聯網上看到了斯堪的納維亞客廳的圖片。 通過減少家具，主要使用白色或灰色，光線和寧靜可以自由地進入房間。 這正是最小網站所做的。 他們專注於給您的訪問者一種平靜的感覺，以便他們可以專注於您帶來的內容而不會不知所措。

這是帖子系列的第二篇文章，我們將在其中處理 4 種不同的網站樣式以及如何使用 Divi 實現它們：

1. 乾淨抽象
2. 最小
3. 平坦的
4. 大膽多彩

讓我們開始吧！

1. 少即是多

創建最小網站時，您需要記住的第一件事是嘗試減少您在網站上使用的設計元素。 與其使用更多，不如嘗試從您使用的少數元素中獲得最佳效果。

您會驚訝地發現，通過以互補的方式微調您的設計元素，您可以從設計中獲得多少收益。 在您的網站上使用較少的元素還可以讓您保持概覽並以更加一致和清晰的方式傳遞您的信息。

2. Margin 和 Padding 是你最好的朋友

最小的網站通常有很多空白。 您的頁面和帖子上的空白可以讓訪問者在訪問您的網站期間呼吸。 它們給人一種寧靜的感覺，讓您可以專注於想要分享的內容。

向您的網站添加空白的最佳方法是使用白色和/或淺灰色背景顏色以及額外的填充和/或邊距。 不要害怕嘗試不同的值，看看會產生什麼結果。

3. 使用一種強調色

如果您想讓您的網站盡可能小，那麼您還應該避免使用太多不同的顏色。 通過使用大量的白色和灰色，盡可能保持中性。 為您的書面內容使用較深的顏色。 為了讓您的設計更加前衛，請選擇一種強調色。 這種顏色通常與您在徽標中使用的顏色相同。

4. 圖像或插圖——不能兩者兼而有之

一般情況下，建議您在構建網站時在現實生活中的圖像或插圖之間進行選擇。 同時使用兩者確實會使您的網站複雜化並混淆不同的網站樣式，這是您絕對要避免的。

不過有一個例外。 例如，您可以隨意將圖像與 Blurb 模塊中的圖標插圖結合使用。 如果它們很小並且支持您頁面上的內容，那麼您就可以開始了。

5. 考慮在 CTA 中使用文本模塊而不是按鈕模塊

您是否嘗試過使用文本模塊而不是按鈕模塊？ 你絕對應該。 儘管按鈕模塊為您提供了您在 Visual Builder 中習慣使用的大多數選項，但它傾向於為按鈕的所有邊添加邊框。 使用文本模塊，您可以避免這種情況。 您可以簡單地使您的副本可點擊並添加底部邊框，如下面的打印屏幕所示。

6. 分隔線可以幫助平衡空白

如果您想為您的網站添加現代風格，您絕對應該嘗試在您的網站上使用多個分隔線並將它們設置為與您的其餘佈局相匹配。

他們傾向於將不同的設計元素相互連接並創造出連貫的結果。

7.使用簡單而微妙的形狀

這是我最喜歡的之一。 有時，我們往往會忽略我們最習慣的功能，例如漸變背景。 當然，使用背景圖像有其魅力，但您是否嘗試過以微妙的方式使用徑向漸變背景？ 它可以讓您的訪問者專注於您的頭條新聞，並幫助您觸發行動。

8. 使用微妙的動畫（如果需要的話）

最後但並非最不重要的是，使用微妙的動畫時，最小的網站通常會變得更好。 當我們說微妙時，我們的意思是非常微妙。 您會驚訝地發現，僅僅通過大幅降低動畫強度，效果會變得多麼平滑。 只要動畫是微妙的，您可以將其添加到任何元素，並且不會影響您網站的可讀性和用戶體驗。

預覽

現在我們已經了解了所有技術，讓我們開始將它們付諸實踐。 我們將逐步重新創建以下示例：

讓我們開始創建：添加新的標準截面

部分設置

間距

要創建上面的示例，我們總共需要兩個部分。 讓我們首先將第一個添加到新頁面或現有頁面並添加以下間距：

• 頂部和底部填充：50px

添加新行

列結構

繼續添加包含一列的新行。

列漸變背景

打開這一行的設置並向其添加以下列漸變背景：

• 顏色 #1：#ffffff
• 顏色 #2：#efefef
• 列漸變類型：徑向
• 柱徑向：中心
• 列起始位置：40%
• 柱端位置：40%

漿紗

然後，通過對大小設置進行以下更改來增加行的寬度：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：2

間距

最後，還將以下間距添加到您的行中：

• 頂部和底部填充：0px
• 列頂部和底部填充：250px
• 列左填充：150 像素（桌面）、20 像素（平板電腦）、0 像素（手機）

第一個文本模塊

文字設置

修改行設置後，您可以開始添加所需的模塊。 我們將從使用以下文本設置的簡短描述文本模塊開始：

• 文字字體粗細：半粗體
• 文本字體樣式：大寫
• 文字字母間距：8px

動畫片

我們也在這個佈局中添加了非常微妙的動畫，從這個文本模塊開始。 打開動畫設置並添加以下動畫：

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫強度：5%

第二個文本模塊

H1 文本設置

在上一個文本模塊的正下方，繼續添加一個包含以下 H2 文本設置的 H1 文本模塊：

• 標題字體：Georgia
• 標題文字顏色：#666666
• 標題文字大小：78 像素（桌面）、50 像素（平板電腦）、40 像素（手機）
• 標題字母間距：3px

間距

我們將使用以下間距設置在此模塊周圍創建空間：

• 上下邊距：100px
• 左邊距：100px（桌面和平板電腦），20px（手機）
• 左填充：40px

邊界

我們還需要一個左邊框，所以繼續添加一個具有以下設置的左邊框：

• 左邊框寬度：6px
• 左邊框顏色：#d67787

按鈕文本模塊

添加鏈接

我們不使用按鈕模塊，而是使用我們將添加鏈接的文本模塊。 在“內容”框中添加您的 CTA 和鏈接。

鏈接文字設置

然後，將以下鏈接文本設置應用於您的文本模塊：

• 鏈接字體粗細：半粗體
• 鏈接字體樣式：斜體和大寫
• 鏈接文本對齊方式：左
• 鏈接文字顏色：#666666
• 鏈接字母間距：8px

漿紗

由於我們將使用底部邊框，稍後我們還將減少此文本模塊的寬度：

• 寬度：46%
• 模塊對齊：左

間距

為了確保底部邊框不會太靠近我們的文本，我們還將添加“10px”底部填充。

• 底部填充：10px

邊界

現在我們可以使用以下設置繼續添加底部邊框：

• 底部邊框寬度：1px
• 底部邊框顏色：#666666

動畫片

我們還添加了一個微妙的動畫：

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫延遲：100ms
• 動畫強度：5%

添加分頻器模塊

能見度

我們在這一行中需要的最後一個模塊是分頻器模塊。 確保啟用“顯示分隔符”選項。

顏色

我們為這個分隔線使用了與標題文本模塊左邊框相同的顏色：'#d67787'。

漿紗

接下來打開大小設置並將分隔線權重更改為“2px”。

間距

我們將使用以下間距設置將分隔器模塊推到右側：

• 左邊距：200px
• 右邊距：-100px

動畫片

最後但並非最不重要的一點是，我們將包含以下動畫：

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：150ms
• 動畫強度：5%

添加第二個標準截面

部分設置

間距

我們已經完成了第一部分，所以我們現在可以繼續在上一個部分的正下方添加一個新部分。 打開部分設置並向其添加以下邊距：

• 上下邊距：80px

添加新行

列結構

繼續添加具有以下列結構的行：

漿紗

然後，打開行設置並使用以下設置增加行的寬度：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：2

間距

我們還需要添加一些第 2 列填充：

• 第 2 列左填充：100 像素（桌面）、0 像素（平板電腦和手機）

將圖像模塊添加到第 1 列

上傳圖片

我們現在可以開始向我們的兩列添加模塊。 首先將圖像模塊添加到您的第一列並上傳選擇的圖像。

間距

我們將通過添加負右邊距來增加圖像模塊的寬度：

• 右邊距：-100px

盒子陰影

我們還將使用以下框陰影在頁面上創建一個額外的設計元素：

• 框陰影水平位置：100px
• 框陰影垂直位置：100px
• 框陰影擴散強度：-14px
• 陰影顏色：#efefef

克隆按鈕文本模塊和放置在圖像模塊下方

定位和克隆按鈕文本模塊

我們將重用第一部分的所有三個文本模塊，從按鈕文本模塊開始。 繼續克隆它。

放置在圖像下方

然後，將它放在第一列中圖像模塊的正下方。

克隆第一部分中的第一個文本模塊並放置在第 2 列中

定位和克隆文本模塊

我們需要的下一個文本模塊是我們部分中的第一個。 繼續並克隆這個。

放置在第 2 列

與其將其放在第一列中，不如將其放在第二列中。

克隆標題文本模塊並放置在第 2 列

定位和克隆文本模塊

最後，我們還將重用標題文本模塊。

放置在第 2 列

克隆後，將其放在新行的第二列中。

將內容更改為 H2

將內容框中的內容更改為 H2。

H2 文本設置

然後，將以下設置添加到您的 H2 文本設置中：

• 標題 2 字體：Georgia
• 標題 2 文本顏色：#666666
• 標題 2 文字大小：58px
• 標題 2 字母間距：3px

添加描述文本模塊

文字設置

在標題文本模塊下方，我們將添加具有以下文本設置的描述文本模塊：

• 文字字體粗細：輕
• 文字字母間距：1px

漿紗

繼續並更改此文本模塊的大小：

• 寬度：70%
• 模塊對齊：右

添加分頻器模塊 #1

能見度

我們需要的下一個模塊是分頻器模塊。 確保啟用了顯示分隔線選項。

顏色

將分隔線的顏色更改為“#666666”。

間距

接下來添加一些間距：

• 上邊距：100px
• 左邊距：400px（桌面）、300px（平板）、200px（手機）
• 右邊距：-100px

動畫片

當然，我們還將使用一個微妙的動畫：

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫強度：5%

添加分頻器模塊 #2

能見度

最後但並非最不重要的一點是，我們將添加另一個分頻器模塊。 再次確保已啟用“顯示分隔線”選項。

顏色

將分隔線的顏色更改為“#d67787”。

漿紗

使用“2px”作為分隔線權重。

間距

並添加以下間距設置：

• 左邊距：200 像素（桌面和平板電腦），150 像素（手機）
• 右邊距：-100px

動畫片

最後，為您的分隔線添加一個微妙的動畫：

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：100ms
• 動畫強度：5%

預覽

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

最後的想法

在這篇文章中，我們向您展示了一些關於如何創建最小網站的偉大 Divi 技術。 這是關於如何利用您的創造力和 Divi 的一些最好的內置選項製作精美設計風格的系列文章的第二篇文章。 在接下來的帖子中，我們將分享有關如何實現更令人驚嘆的設計風格的技巧。 如果您有任何問題或建議，請務必在下面留下評論部分！