Divi 插件亮點:輕鬆插入
已發表: 2019-03-03Easy Slide-Ins 是 Divi 和 Extra 的第三方插件,允許您使用 Divi 構建器創建幻燈片(和彈出窗口)。 幻燈片可以顯示可以使用 Divi Builder 構建的任何內容。 使用滾動百分比、退出意圖、具有多個位置的按鈕和 CSS 類觸發幻燈片。 它包括終身更新和演示。
在本文中,我們將介紹 Easy Slide-Ins 並了解它的功能和易用性。 我們還將看看插件中包含的一些演示。 該插件可從開發人員的網站獲得。
安裝簡易滑入式

首先,解壓文件。 在文件夾中,您會找到演示、帶有文檔鏈接的文件和 Easy Slide-Ins 插件。

正常上傳並激活插件。

儀表板中添加了一個名為 Easy Slide-Ins 的新菜單。 單擊此菜單並輸入您的許可證密鑰。

激活許可證會添加兩個菜單項(All Items 和 Add New),您可以在其中查看幻燈片並創建新的幻燈片。
創建一個新的滑入

單擊以在其中添加新幻燈片將打開一個編輯器,您可以在其中使用 Divi Builder 創建幻燈片。

它還包括很多設置。 它們位於 Divi Builder 下。 從左、右、左上、右上、左下、右下、頂欄、底欄、左側邊欄或右側邊欄中選擇位置。 將其設置為滾動時自動觸發並選擇滾動量。 您還可以將其設置為在退出意圖時打開。 設置背景顏色、框陰影和滑入寬度。
顯示標題並輸入要顯示的文本。 選擇標題的背景和文本顏色,以及字體系列、大小和粗細。 設置角圓度、標籤高度和標籤寬度。 顯示關閉圖標並選擇背景和圖標顏色以及圖標大小。
這些控件易於使用和理解。 有足夠的調整來設置標籤樣式以匹配您的網站並控制幻燈片的工作方式。

其他功能的添加或刪除取決於您選擇的選項。 我選擇了 Box Shadow,它現在提供了水平和垂直位置、模糊和擴散強度以及顏色的選項。

“高級”選項卡可讓您選擇可以在其中顯示幻燈片的頁面。 您可以選擇所有頁面、單個頁面和所有帖子。 您可以在某些設備上隱藏滑入。

自定義字段選項卡可讓您像添加任何頁面或帖子一樣添加自定義字段。
簡單的滑入示例

這是風險管理佈局中的聯繫頁面。 我正在使用它來構建滑入式,因此設計將適合佈局。 我已設置為不顯示側邊欄或點導航。 您可以像標準頁面一樣進行預覽。 設計好幻燈片後,就可以正常發布了。

我在設置中啟用了標籤,並將背景設置為黑色,將文本設置為白色。 我保留了默認文本(聯繫我們)。 我已將其設置為顯示在右上角。 這是使用默認高度,但可以輕鬆更改。

單擊標籤打開幻燈片,它顯示在屏幕上,顯示風險管理佈局包中的聯繫表格。 再次單擊“聯繫我們”按鈕將關閉幻燈片。 我將滑入寬度設置為 500 像素,標籤高度為 150,標籤寬度為 60。

該示例顯示了框陰影。 我已將位置更改為右側邊欄,其中顯示了關閉按鈕。 我更改了標籤和關閉按鈕的顏色並使標籤的角更圓潤。 我還將幻燈片寬度設置為 600 像素。

對於這個,我將標籤移到頂部欄位置。 我使用佈局中的顏色並將寬度更改為 122 像素,將高度更改為 40 像素。 正如您在此圖像中看到的,標籤在滾動時保持原位。

它以全屏方式打開並包含關閉按鈕。

對於這個,我在左側邊欄中添加了一個新的幻燈片。 我已將其樣式化以匹配該站點,並將標籤的角保留為方形。 我使用了 50% 的標籤上邊距,將標籤的頂部置於屏幕高度的中心。


它從左側打開。 我給它的像素寬度為 1000,所以它覆蓋了我的大部分屏幕。 即使通訊滑入覆蓋了菜單,聯繫人滑入仍然顯示在頂部。

幻燈片為您提供了一個按鈕觸發器類。 您可以將其與按鈕一起使用以打開滑入式。

複製類並將其粘貼到按鈕的 CSS 類字段中。

現在,單擊該按鈕會打開滑入式。 任何地方都不需要標籤,但它會從您放置滑入的方向滑入。 這個放在左邊,所以它來自左邊。 我已將寬度設置為 1000 像素。
簡單的幻燈片演示

下載文件包括 12 個演示。 這些是您可以上傳到 Divi 庫的預製佈局(JSON 文件)。 將它們像常規佈局一樣導入 Divi 庫。 它們包括樣式模塊,但您必須設置設計設置。 下面來看看其中的一些。

這是帶有退出意圖的收集電子郵件。 它包括幾個文本模塊、一個聯繫表單和一個圖像模塊。

這是它在屏幕上的外觀。 我在此處將所有內容保留為默認值,因此按鈕仍顯示原始文本、位置和样式。

這是具有滾動意圖的收集電子郵件。 它包括一個背景圖像、兩個文本模塊和一個電子郵件模塊。

下面是它在使用預製設置的頁面上的外觀。 這顯示了幻燈片的響應程度(這正是我們所期望的,因為它顯示的是 Divi 佈局)。 如果您想顯示更多圖像,只需將幻燈片拉寬即可。

這是指導您的訪客。 它包括一個代碼模塊(用於谷歌地圖)、幾個簡介、文本和一個聯繫表格。

下面是它在使用默認設置的頁面上的外觀。

這是帶有標籤的促銷。 它包括一個文本模塊、幾個定價表和一個按鈕。

這是它在屏幕上的外觀。 我已將其設置為 800 像素,以便在滑入時顯示全寬。我刪除了標籤並將其設置為在頁面滾動達到 60% 時顯示。

這是使用 Extra 查看時相同的佈局。 我很高興看到它在 Divi 和 Extra 上都能很好地工作。
Easy Slide-Ins 價格和文檔

Easy Slide-Ins 可從開發人員的網站獲得。 它有兩種購買方式:
- 單個站點 – 27 美元
- 無限站點 – 97 美元
兩個許可證都包括演示和終身更新。

文檔在開發人員的文檔和支持頁面上提供。 該頁麵包括每個要點的演練,並帶有圖像來演示它們。 該頁面還包含一個指向電子郵件支持的鏈接。
結束的想法
Easy Slide-Ins 可以輕鬆為 Divi 和 Extra 創建幻燈片和彈出窗口。 我發現它很容易使用。 我從不需要文檔,但如果需要,它就在那裡。 這是一種引入隱藏頁面元素的有趣方式。 由於幻燈片中可以使用任何內容,因此您可以顯示聯繫表格、時事通訊註冊、號召性用語、視頻、商店模塊等。它可以是單個模塊或整頁佈局。
我喜歡它有多個觸發選項。 退出意圖和自動觸發使其成為創建電子郵件和 CTA 彈出窗口的不錯選擇。 通過單擊標籤打開是將它們添加到頁面上多個位置的好方法。 我喜歡您可以在單個頁面上添加多個幻燈片,並且您可以確定它們顯示在哪些頁面上。 將 CSS 類添加到按鈕是在訪問者選擇查看信息時顯示信息的好方法。
您可以從前端構建幻燈片,但我沒有看到如何訪問設置。 沒有這些設置,我無法移動標籤並實時查看它們的位置。 我必須加載一個頁面才能看到它們。 它仍然不難使用,但涉及到一些猜測。 這太小了,我不會阻止我使用或推薦它。
如果您正在尋找一種使用 Divi Builder 創建幻燈片的簡單直觀的方法,那麼 Easy Slide-Ins 值得一看。
我們希望聽到您的意見。 您是否嘗試過 Divi 的 Easy Slide-Ins? 請在評論中告訴我們您對此的看法。
精選圖片來自 ByEmo/shutterstock.com
