使用 Divi 以令人驚嘆的移動設計展示您的最新博客文章

您在網站上展示博客文章的方式對訪問者在您的網站上導航時遇到它們時的行為有很大影響。 為了幫助您發揮創意和效率，我們將向您展示如何以令人驚嘆的方式展示您的最新博客文章。

我們將重新創建的示例在較小的屏幕尺寸上看起來特別好，同時在台式機和平板電腦上也保持良好的外觀和感覺。 我們希望本教程能激發您創建自己的自定義最新博客文章設計。

讓我們開始吧！

預覽

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

讓我們開始重建吧！

添加新部分

漸變背景

創建一個新頁面或打開一個現有頁面並向其中添加一個常規部分。 打開設置，然後添加漸變背景。

• 顏色 1：#2e1b8f
• 顏色 2：#ffffff
• 梯度方向：90度
• 起始位置：53.3%
• 結束位置：53.3%

間距

然後，轉到間距設置。 在這裡，我們將縮小桌面上部分內容的大小，並在較小的屏幕尺寸上逐漸消除該空間。

• 上邊距：100px
• 下邊距：100px
• 左填充：26vw（桌面）、13vw（平板電腦）、0vw（手機）
• 右填充：22.8vw（桌面）、11.4vw（平板電腦）、0vw（手機）

添加新行

列結構

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

第 2 列背景顏色

尚未添加任何模塊，打開行設置並向第二列添加背景顏色。

• 第 2 列背景顏色：#f7f7f7

第 3 列背景顏色

也將相同的顏色添加到第 3 列的背景中。 我們對這兩列使用相同的顏色來連接它們並使它們看起來像一個整體。 在這篇文章的後面，我們將使用它來操縱較小屏幕尺寸上的列寬。

• 第 3 列背景顏色：#f7f7f7

漿紗

接下來轉到設計選項卡並打開大小設置。 在這裡，我們將刪除列之間的所有默認空間。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

展示

現在，為了確保所有三列在較小的屏幕尺寸上彼此相鄰，我們需要向行的主要元素添加一行 CSS 代碼。

display: flex;

將 Blurb 模塊添加到第 1 列

選擇圖標

是時候開始添加模塊了！ 從第 1 列中的 Blurb 模塊開始，然後選擇您選擇的圖標。

漸變背景

轉到模塊的背景設置並添加徑向漸變背景。

• 顏色 1：#5000ff
• 顏色 2：rgba(41,196,169,0)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：28%
• 結束位置：28%

圖標設置

繼續轉到設計選項卡並修改圖標設置。

• 圖標顏色：#ffffff
• 圖像/圖標放置：頂部
• 使用圖標字體：是
• 圖標字體大小：22px

間距

接下來添加一些自定義的頂部和底部填充。

• 頂部填充：20px
• 底部填充：10px

邊界

並添加一個微妙的底部邊框來完成 Blurb 模塊設計。

• 底部邊框寬度：1px
• 底部邊框顏色：#ffffff
• 底部邊框樣式：虛線

將文本模塊添加到第 1 列

添加內容

第一列中我們需要的下一個也是最後一個模塊是文本模塊。 添加一些您選擇的內容。

文字設置

然後，轉到設計選項卡並相應地修改文本設置：

• 文字字體：Didact Gothic
• 文字字體粗細：粗體
• 文字顏色：#ffffff

將文本模塊添加到第 2 列

添加內容

進入第二列！ 在這裡，我們唯一需要的模塊是文本模塊。 輸入您選擇的一些內容。

背景顏色

轉到背景設置並添加完全白色的背景色。

• 背景顏色：#ffffff

文字設置

我們還通過修改設計選項卡中的文本設置來更改內容的外觀。

• 文本字體：Source Serif Pro
• 文字字體粗細：粗體
• 文字顏色：#000000
• 文字大小：13px
• 文字方向：居中

漿紗

如前所述，我們正在操縱列結構以在較小的屏幕尺寸上創建自定義設計。 為此，您需要減小文本模塊的寬度並確保它與列的左側對齊。

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

間距

接下來我們將添加一些自定義填充值。

• 頂部填充：57px
• 底部填充：57px
• 左填充：20px
• 右填充：20px

盒子陰影

伴隨著微妙的盒子陰影。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.23)

將文本模塊添加到第 3 列

添加內容

轉到下一列和最後一列。 添加帶有博客文章 H3 標題和鏈接的文本模塊。 在標題正下方的段落文本樣式中添加帖子詳細信息。

文字設置

轉到文本模塊的設計選項卡並修改文本設置。

• 文本字體：Source Serif Pro
• 文字顏色：#a8a8a8
• 文字大小：12px

H3 文本設置

繼續更改 H3 文本設置。

• 標題 3 字體：Didact Gothic
• 標題 2 字體粗細：粗體
• 標題 3 文字大小：17px

間距

最後，我們需要添加一些自定義間距值。 您會注意到我們還在模塊中添加了一些負的左邊距。 這是在較小的屏幕尺寸上創建不同類型的列結構的最後一步。 因此，儘管列結構在技術上仍然相同，但我們結合了列背景、模塊寬度和負左邊距來創建不同外觀的結果。

• 上邊距：35px
• 左邊距：-80px（桌面），-50px（平板和手機）
• 右填充：20px

克隆行兩次

完成對行及其所有模塊的修改後，您可以繼續克隆整行，最多可複制多次，具體取決於您想要展示的最新博客文章的數量。

更改圖標

更改每個副本的圖標。

修改內容和鏈接

連同所涉及的內容和鏈接，您就完成了！

預覽

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

最後的想法

在這篇文章中，我們向您展示瞭如何創建令人驚嘆的移動設計來展示您的最新博客文章。 我們逐步重新創建的設計主要適用於較小的屏幕尺寸，但在平板電腦和台式機上看起來也很棒。 如果您有任何問題或建議，請務必在下方評論區留言！