Divi 插件亮點:內容密集
已發表: 2017-10-08Divi Builder 包含一個博客模塊,可根據全寬或網格佈局中的類別顯示帖子。 您是否曾經想要更多地控制您的博客佈局? 您可能對名為 Content Intense 的第三方插件感興趣。
Content Intense 是 BeSuperfly 的一個插件,它添加了新的佈局和样式功能,讓您的博客模塊煥然一新。 它基於標準博客模塊,因此包含所有熟悉的功能。
(該插件可從開發人員的網站獲得。)
在這個插件亮點中,我們將看看這些功能,看看它在頁面上的外觀。 我也會在 Extra 中加載它(當然它也與 Divi 兼容)。
安裝 Content Intense

就像任何插件一樣上傳和激活 Content Intense。 插件激活後,您將在儀表板的“設置”中看到一個名為“內容密集插件激活”的新菜單項。 單擊此按鈕並輸入您的 API 密鑰和電子郵件,然後保存更改。
內容密集模塊

Divi Builder 中添加了一個名為 Content Intense 的新模塊。

“內容”選項卡允許您顯示僅帖子、僅頁面或頁面和帖子、要顯示的數量、類別和偏移量。 顯示特色圖片、元數據(允許您選擇分隔符)、摘錄、導航和背景。 正如您將看到的,我嚴重過度簡化了設置中的選項數量。

最獨特的功能之一是將 WordPress 類別添加到頁面中。 如果您選擇顯示頁面,則在您選擇其類別時會選擇它們。

“設計”選項卡可讓您選擇 5 種佈局之一、啟用覆蓋、調整標題文本、正文文本和元文本。 還可以調整邊框、按鈕、間距和動畫。

Advanced 包含按鈕關係功能,因此您可以指定鏈接的 rel 屬性值。 這對於創建書籤、設置指向 nofollow 的鏈接等非常有用。
內容密集默認設置

默認設置顯示特色圖像,作者的 Gravatar 與圖像底部重疊。 接下來是帶有懸停動畫的帖子元、標題、一行、帖子摘錄和閱讀更多按鈕。 我在該部分添加了背景以幫助它脫穎而出。

在本例中,我為元分隔符添加了一個星號,將摘錄計數從 270 更改為 100,並將閱讀更多按鈕替換為居中文本。 它不是日期,而是顯示帖子發布的時間。 我禁用了評論計數。

這個為文本後面的背景添加了一些顏色。 我還將按鈕移到右側並將摘錄設置為 150。

有五種不同的佈局。 到目前為止,我們看到的示例都使用了 Atlas – 3 列、垂直佈局和頭像。 讓我們看看每個佈局。 我正在使用默認設置。

這是阿爾卑斯山。 這是一個單列的水平交替佈局。 文本背景與我在該部分中選擇的背景顏色相匹配。 這些是帶有按鈕懸停效果的平面卡片。

這是喜馬拉雅山,一個 3 列的垂直佈局,使用帖子的特色圖片作為背景。 它還使用按鈕動畫。 如果不進行調整,則更難看到此文本。 我們稍後會通過疊加來解決這個問題。

這是落基山脈——具有懸停效果的 3 列垂直佈局。 它還將特色圖像作為背景。 懸停效果顯示完整摘錄和閱讀更多按鈕。 我們將進行一些調整以使文本更具可讀性。

這是安第斯山脈——一個帶有頭像的 1 列垂直佈局。 它使用特色圖像的裁剪版本,並使用小線分隔元數據和較大的線來分隔帖子。


在頁面底部,您會看到導航按鈕。 您可以禁用它們或添加您自己的文本。 它們採用了其他按鈕的樣式,因此當您為 read more 按鈕設置樣式時,您也為這些按鈕設置了樣式。 您還可以使用文本代替按鈕。
示例 – 阿爾卑斯山與阿特拉斯

我使用 2 個 Content Intense 模塊創建了這個博客佈局。 第一個使用沒有導航的 Alps 佈局。 第二個模塊使用 Atlas。 我已將其偏移量設置為 1,因此它不會顯示與第一個模塊相同的圖像。 我已將字體顏色調整為 Arimo(我的最愛)。 按鈕使用漸變。 在懸停時,它們變為純色並增加字母間距。 導航按鈕匹配。
示例 – 阿爾卑斯山

我是交替佈局的傻瓜。 我喜歡沒有任何改變的阿爾卑斯山的外觀,所以我只是做了一些小的調整。 我添加了紅色邊框、紅色覆蓋層,並更改了按鈕和標題顏色。 我還將字體更改為 Dosis 並使其加粗。 這顯示了懸停時的疊加。

我實際上更喜歡它沒有邊界。 這顯示了懸停按鈕。
示例 – 安第斯山脈

這個例子使用了 6 個不同的 Content Intense 模塊——所有這些模塊都使用 Andes,並且每個模塊都比前一個模塊多偏移 1。 我已經為帶有覆蓋層的部分添加了背景。 標題字體是 Comfortaa。 最後一個模塊使用導航。 我已將按鈕更改為文本。

下面來看看普通的單列設計。 我還添加了一個懸停覆蓋。 其他一切都是默認的。
示例 – 喜馬拉雅山

這個使用喜馬拉雅山,在文本後面有一個覆蓋層。 我禁用了元數據,將文本更改為淺色,將按鈕樣式更改為白色並將按鈕字體減少到 12 磅。 標題文字是苦澀的。 我包含的唯一動畫是按鈕懸停。 這將是一個很好的 CTA 或鏈接到描述您的服務的頁面。
示例 – 落基山脈

我喜歡落基山的樣子。 它有一個很好的陰影效果,帶有懸停動畫,可以顯示文本和閱讀更多按鈕。 我可以放置一個文本覆蓋,但我不想覆蓋圖像。 相反,我將文本更改為淺色。 我還更改了元和按鈕的顏色,並將分隔符更改為破折號。

當然,疊加確實看起來不錯。 我添加了一個黑色覆蓋層並更改了不透明度,以便顯示出一點點圖像。 左上角的日期也使用了疊加層。 我將按鈕更改為文本並將其移至右側。 我喜歡卡片底部的那三個點和線。 這是一個小細節,增添了一絲視覺衝擊。
示例 – 額外

Content Intense 與 Extra 配合得很好。 我只需要在使用 Andes 的地方做一些小的調整。 在我的示例中,我為文本區域放置了一個白色背景。 由於我使用了白色文本,我只是將其更改為深色。 上面的例子是落基山脈。 唯一的區別是閱讀更多鏈接的文本顏色。
可下載的樣式

動畫可以通過 CSS 添加。 開發人員的網站顯示了他們創建的幾個動畫,例如上面那個在懸停時移動文本的動畫。 可以在 JSON 文件中從它們下載此樣式和其他樣式。
許可證和文件
從兩個許可證中選擇(均不允許轉售):
- 標准許可:用於單個網站。 它包括 1 個用於開發項目和 1 個用於實時項目。
- 無限許可:可在無限網站中使用,供個人和客戶使用。
更新是自動的。 Content Intense 可從開發人員的網站獲得。
文檔在開發人員的網站上得到證明。 它會引導您完成調整併在此過程中提供演示。
最後的想法
Content Intense 有一些不錯的佈局功能,將來會添加更多佈局,所以這只是一個開始。 每個佈局都可以通過模塊的調整來設置樣式,甚至可以使用 CSS 進一步自定義。 使用起來很直觀。 如果您有興趣給您的博客一個不同的外觀,Content Intense 可能是您正在尋找的插件。
我們希望聽到您的意見。 您是否嘗試過 Content Intense? 在下面的評論中告訴我們您的體驗。
精選圖片來自 LanKoga/shutterstock.com
