Divi 帖子標題模塊的 4 個令人驚嘆的例子以及如何實現它們

已發表: 2019-01-13

對於所有 Divi 博主來說，他們正在尋找讓人們與您的博客文章互動的新方式，Divi 帖子標題模塊是一個很好的起點。帖子標題模塊允許您以多種方式設置帖子標題（和特色圖片）的樣式，以實現無數令人驚嘆的設計。這使您可以創建一些精美的文章，從第一眼就吸引您的潛在讀者。今天，我將向您展示四種令人驚嘆的方式，您可以通過這些方式來設置 Divi 帖子標題模塊的樣式，以幫助吸引讀者。

讓我們開始吧！

搶先看

這是本教程中介紹的帖子標題模塊設計的快速瀏覽。

#1 抽象框架

開始建造#1

#2 重疊文本和特色圖片

開始建造#2

#3 獨特的內容背景以提高可讀性

開始建造#3

#4 具有雙重特色圖像的堆疊效果

開始建造#4

入門

訂閱我們的 YouTube 頻道

對於本教程，您真正需要的只是 Divi。我們將創建新帖子並使用 Divi Builder 創建帖子標題設計。您還需要一些圖像作為特色圖像。

新帖子的設置

在本教程中，我將使用 Divi Builder 在新帖子上構建示例帖子標題設計。為了設置本教程中的構建，您需要執行以下操作：

創建一個新帖子。
為您的帖子添加標題。
在您的帖子中添加特色圖片。
部署 Divi Builder。
選擇從頭開始構建
在 Divi 頁面設置下，選擇無側邊欄頁面佈局並選擇隱藏帖子標題。
然後在前端點擊Build或者在後端部署Desktop view模式，可以直觀的設計頁面。

divi 帖子標題模塊

您是要為每個設計創建一個新帖子還是簡單地將多個帖子標題設計添加到一個帖子，這取決於您。請記住，如果您在一個帖子中添加多個帖子標題，它們將繼承相同的頁面標題和特色圖片。

#1 抽象框架

這種干淨的帖子標題設計具有微妙的抽象框架元素，可以很好地配合您的特色圖片和帖子標題。框架效果是使用一些自定義邊框和框陰影樣式創建的。

這是如何做到的。

確保按照本文開頭所述設置新帖子（添加標題、特色圖片、無側邊欄頁面佈局、隱藏默認帖子標題）。在您的帖子中添加一個包含一列行的新部分。然後將帖子標題模塊添加到該行。

在帖子標題設置中，設置特色圖片放置如下：

特色圖片放置：標題上方

然後更新添加背景漸變，在模塊的右下角添加一個小的抽象設計元素。

背景漸變左顏色：rgba(0,0,0,0.06)
背景漸變右顏色：rgba(0,0,0,0)
漸變類型：徑向
徑向：右下
起始位置：10%
結束位置：0%

divi 帖子標題模塊

繼續更新設計的其餘部分，如下所示：

標題字體： Josefin Sans
標題文字對齊：右
標題文字大小：36px
標題行高度：1.7em（桌面），1.3em（平板電腦和智能手機）
元字體： Josefin Sans
元字體樣式：TT
元文本對齊方式：左
元字母間距：2px
元線高度：2em
自定義保證金：-5vw 頂部
自定義填充：5vw 頂部，5vw 底部，5vw 左，5vw 右
右邊框寬度：4px

divi 帖子標題模塊

-5vw 邊距將模塊拉到行外，以使右邊框位於我們將添加到行中的左邊框上方。

現在讓我們使用框陰影添加一個抽象的設計元素：

盒子陰影：見截圖
框陰影水平位置：112px
框陰影垂直位置：85px
框陰影傳播強度：-80px
陰影顏色：rgba(224,43,32,0.3)

divi 帖子標題模塊

保存設置。

現在打開行設置以調整其大小並使用邊框和框陰影創建框架設計的左側。

自定義寬度：700px
右邊框寬度：4px

divi 帖子標題模塊

盒子陰影：見截圖
框陰影水平位置：112px
框陰影垂直位置：85px
框陰影傳播強度：-80px
陰影顏色：rgba(224,43,32,0.3)

divi 帖子標題模塊

現在讓我們看看最終的設計。

divi 帖子標題模塊

#2 重疊文本和特色圖片

創建一個有兩列行的新部分。然後在左欄中添加一個圖像模塊。

divi 帖子標題模塊

這將用作我們使用動態內容的特色圖片。打開圖片設置，刪除模擬圖片，點擊圖片預覽框右上角的動態內容圖標。然後從列表中選擇特色圖片以將特色圖片添加到頁面。

divi 帖子標題模塊

現在將帖子標題模塊添加到右列。通過將“顯示特色圖片”選項設置為“否”，打開設置並隱藏特色圖片。

divi 帖子標題模塊

然後為帖子標題模塊添加背景漸變。

背景漸變左顏色：#ffffff
背景漸變右側顏色：rgba(255,255,255,0)

一旦我們添加一些負邊距以重疊圖像，這將變得可見。

divi 帖子標題模塊

更新設計的其餘部分如下：

標題字體：Fira Sans Condensed
標題字體粗細：超輕
標題文字大小：80 像素（桌面）、70 像素（平板電腦）、45 像素（智能手機）
元字體：Fira Sans Condensed
元字體樣式：TT
元文本對齊：右
元文本顏色：#cccccc
元字母間距：2px
自定義邊距：剩餘 -20%（桌面），0%（平板電腦和智能手機）
自定義填充：頂部 5vw，底部 5vw，左側 30px

divi 帖子標題模塊

現在讓我們給它一個框陰影以在標題下創建一條線。

盒子陰影：見截圖
框陰影水平位置：80px
框陰影垂直位置：82px
框陰影傳播強度：-80px

divi 帖子標題模塊

保存設置並打開行設置以調整裝訂線寬度。

天溝寬度：1
均衡柱高：是

divi 帖子標題模塊

現在看看最終的設計。

divi 帖子標題模塊

替代圓形圖像設計

只需進行一些小的調整，您就可以使特色圖像呈圓形，並將貼圖調整為垂直居中。為此，請打開圖像設置並更新以下內容：

圓角：50%

divi 帖子標題模塊

然後打開行設置並在 Main Element 下添加以下自定義 CSS：

align-items: center;

這僅在您將 Equalize Column Heights 設置為 YES 時才有效，這會激活 flex 屬性，允許我們垂直對齊項目。
divi 帖子標題模塊

這是最終的設計。

divi 帖子標題模塊

#3 獨特的內容背景以提高可讀性

這個帖子標題設計結合了背景漸變，使標題和元文本在特色圖像背景下更具可讀性。

這是如何做到的。

創建一個具有一列行的新部分。然後將帖子標題模塊添加到該行。

然後更新帖子標題模塊設置以隱藏特色圖片。

divi 帖子標題模塊

標題字體：Abril Fatface
標題文字顏色：#121212
標題文字大小：75 像素（桌面）、50 像素（平板電腦）、30 像素（智能手機）
標題字母間距：2px
標題行高度：1.1em
元字體：Roboto Condensed
元文本顏色：#ffffff
元文本大小：16px
元字母間距：2px
元線高度：2em
寬度：60%（桌面）、90%（平板電腦）、100%（智能手機）
自定義填充：3vw 左

divi 帖子標題模塊

現在讓我們添加一個框陰影作為元文本的背景並使其可讀。

盒子陰影：見截圖
框陰影水平位置：0px
框陰影垂直位置：-32px
框陰影顏色：#121212

divi 帖子標題模塊

現在我們將使用動態內容將我們的特色圖片添加到部分背景中。打開版塊設置，點擊背景圖片預覽框右上角的動態內容圖標。然後從列表中選擇特色圖片以將特色圖片添加到該部分。

divi 帖子標題模塊

現在讓我們添加漸變背景元素，使帖子標題文本更具可讀性。只需單擊漸變選項卡並更新以下內容：

背景漸變左顏色：rgba(255,255,255,0.76)
背景漸變右側顏色：rgba(255,255,255,0)
漸變類型：徑向
徑向：左上角
起始位置：40%
結束位置：0%
將漸變放在背景圖像上方：是

divi 帖子標題模塊

現在讓我們看看最終的設計。

divi 帖子標題模塊

#4 具有雙重特色圖像的堆疊效果

這種設計結合了一些框陰影，以提供堆疊構成帖子標題模塊和部分背景的元素的效果。它還使用兩個版本的特色圖像（動態）作為獨特的設計元素。

這是如何做到的。

創建一個具有一列行的新部分。然後將帖子模塊添加到行中，並將特色圖片位置更新為標題/元背景圖片。

divi 帖子標題模塊

然後更新設計設置如下：

文字顏色：淺
文本背景顏色：rgba(1,59,104,0.79)
文字方向：居中
標題字體：Roboto Condensed
標題字體粗細：輕
標題文字大小 70 像素（桌面）、50 像素（平板電腦）、30 像素（智能手機）
標題行高度：1.3em
元字體重量：輕
元字體樣式：TT
元文本顏色：#cccccc
元字母間距：1px
自定義填充：10vw 頂部，0px 底部

divi 帖子標題模塊