Divi 插件亮點 – Owl Carousel Pro

已發表: 2017-09-03

您是否曾經想使用 Divi Builder 在輪播中顯示帖子、項目、自定義帖子類型和圖像？帖子和圖片通常顯示在一個滑塊中，一次顯示一個帖子或圖片，但是如果您想要一個真正的輪播同時顯示多個帖子怎麼辦？您可以使用名為 Owl Carousel Pro 的插件輕鬆完成此操作。

Owl Carousel Pro 是一個第三方插件，它為 Divi Builder 添加了兩個新模塊。第一個顯示帖子類型，例如項目、帖子和自定義帖子類型。第二個是圖像輪播與可視化編輯器競爭以添加您想要的任何類型的內容。

有一個免費版本的插件可用。我正在看專業版，它增加了幾個新功能，包括：

示例圖片來自 Unsplash.com。

安裝 Owl Carousel Pro

正常上傳並激活插件。然後，您將在 Divi Builder 中看到兩個新模塊：DP Owl Carousel 和 DP Owl Image Carousel。這些模塊的顏色與標準 Divi 模塊不同，以幫助它們脫穎而出。這是我對第三方模塊的偏好，因為它使它們更容易找到。

DP Owl Carousel 在輪播中顯示帖子、項目和自定義帖子類型。它將顯示您最近 10 個帖子或您選擇的類別或標籤。它的內容選項卡包括內容和元素的設置。設計選項卡包括文本、帖子標題文本、帖子元文本、帖子摘錄文本、自定義歸檔文本、間距、箭頭、控件和縮略圖。

高級選項卡包含預期的 CSS 設置，但還添加了單擊操作、動畫（確定滾動的時間）、背景和可見性。兩個模塊中的背景顏色僅為單色，因此沒有可用的漸變或圖像。除非我想使用 CSS，否則我通常不會查看高級選項卡，所以我會錯過這些設置，因為我希望它們在內容選項卡中。

您可以創建自定義查詢（網站上給出的示例），也可以使用模塊中的設置來控制顯示的內容。它包括幾個控制顯示的設置，例如帖子數量、偏移量、自定義帖子類型名稱、類別、要包含的標籤和要排除的標籤。它自動添加了我的自定義帖子類型。

自定義查詢會添加到 PHP 代碼中的子主題中（始終在子主題而不是父主題中進行 PHP 更改，以便在主題更新時不會丟失更改）。開發人員的網站包含一些示例。

注意 - 在將代碼添加到您的實時站點之前，請務必在測試站點上嘗試代碼。

這是標准設計（我添加了背景以幫助它脫穎而出）。它顯示我在所有類別中的最後 10 個帖子。我已經包含了 Divi 標題和帖子元來顯示它在頁面中的外觀。單擊任何圖像會將您帶到該帖子。

這個添加了標題、類別和日期。如果您設置了自定義字段，您還可以顯示它們。

這一個使用默認的 270 個字符顯示標題和帖子摘錄。

在這篇文章中，我將帖子摘錄設置為 70 個字符。

在這個中，我禁用了箭頭和控件。動畫仍然有效，但用戶無法在幻燈片中隨機播放。

在這一個中，我更改了字體大小和顏色，將箭頭設置為紅色，增加了控件的大小並將其設置為紫色，增加了縮略圖的大小，將邊距減少到 0，並將其設置為顯示 3 個圖像。控件的第二種顏色是我選擇的顏色的較暗版本。第二種顏色由插件提供。

在這個中，我在模塊本身中添加了一個背景並更改了項目邊距，以便背景顯示在帖子之間。我還更改了字體顏色，這次我調整了行高和間距。每個屏幕顯示 4 個帖子，我縮小了縮略圖大小。我將箭頭設置為大，控件設置為小。

當您更改縮略圖大小時，它只會根據您展示的帖子數量進行調整。因此，如果您希望圖像更大，則需要手動減少顯示的帖子數量。

DP 貓頭鷹圖像輪播在輪播中顯示圖像。它允許您添加圖像並顯示箭頭和控件。設計設置包括文本、圖像標題文本、圖像內容文本、間距、箭頭、控件和縮略圖。高級選項卡與 DP Owl Carousel 模塊相同。

您可以根據需要添加任意數量的圖像，讓它們在燈箱中打開，並讓它使用圖像或原始圖像的裁剪版本。我特意選擇了不同大小的圖像來看看它是如何工作的。

圖像顯示很好。我喜歡您可以鏈接到 URL 或在燈箱中打開它們。我希望看到添加到圖像中的疊加層，因為這會進一步增強體驗。

以下是模塊在使用默認設置的頁面上的外觀。我在該部分添加了背景以幫助它脫穎而出。

在本例中，我為圖像添加了標題和文本。我還將箭頭和控件設置為大的並為每個控件更改了顏色。

這一張顯示 4 張圖片。我增加了圖像大小並將項目邊距從 8 減少到 4。接下來我調整了字體、箭頭和控件的大小和顏色。標題字體增加了間距。

這個使用深色背景，字體、控件和箭頭都採用了新的顏色。

以下是您在燈箱中打開圖像時的外觀。滾動動畫仍然在後台工作。

在 Owl Carousel Pro 模塊中，確保禁用自定義查詢（這僅在您想要創建自己的自定義過濾器而不是從列表中選擇類別時使用）並在自定義帖子類型名稱下選擇您的帖子類型。我安裝了 WooCommerce，現在自動將產品作為選項。

我的每個產品類別都會自動添加到類別列表中。現在我可以向下滾動並選擇要在輪播中顯示的產品。

產品將顯示，但為了顯示價格，我需要啟用自定義字段，選擇要顯示的字段，並添加標籤以顯示我想要的貨幣符號。向下滾動並啟用顯示自定義字段。將 _price 添加到自定義字段名稱並將 $ 添加到自定義字段標籤。

我現在有一個產品輪播展示我選擇的 WooCommerce 類別。我選擇顯示 4 個帖子，增加圖像大小，更改標題、元和自定義字段的字體顏色，並增加標題和自定義字段的字體大小。在這個例子中，我只顯示元數據的日期，但就像常規帖子一樣，我可以顯示任何元信息和摘錄。

Owl Carousel Pro 也適用於 Extra。這是圖像輪播。

以下是在 27 個 WordPress 主題上安裝了 Divi Builder 插件的插件。這個展示了我的 WooCommerce 產品。

該插件可以在無限的網站上為您和您的客戶使用。它包括 1 年的更新和支持。

Owl Carousel Pro 為 Divi Builder 添加了兩個不錯的模塊，允許您在可自定義的輪播中顯示帖子、項目、自定義帖子類型和圖像。包括大多數預期的 Divi 模塊自定義以及一些控制顯示的新功能。

我發現幾乎所有功能和設置都很直觀。我確實發現自定義過濾器讓普通用戶感到困惑。我想看幾個創建過濾器的完整示例，因為這將展示該插件的強大功能。即使您不想處理代碼，專業版也會添加足夠的功能使其值得考慮。

我們想听聽您的意見。 您是否嘗試過自己的旋轉木馬 Pro？ 請在評論中告訴我們您的體驗。

精選圖片來自 gst/shutterstock.com