Divi 插件亮點 - 圖像強烈

Image Intense 是 Superfly 人員的第三方高級插件，它為 Divi 和 Extra 為 Divi Builder 添加了一個新模塊。 新模塊結合了三個 Divi 模塊（圖像、文本和按鈕模塊）的功能，然後添加了新功能以向圖像添加疊加和懸停效果。 功能包括 22 個圖像懸停過渡、按鈕、不透明度設置、混合模式、文本鏈接等等。

Image Intense 是添加微交互的好方法，可以為您的讀者提供反饋並引起對您的號召性用語 (CTA) 的關注。 動畫包括放大或縮小圖像、拉伸圖像、壓縮圖像、添加覆蓋、滑動、顯示文本等。

在這個插件亮點中，我們將看看插件可以做什麼。 圖片來自 Unsplash.com。

安裝和設置

該插件向 Divi Builder 添加了一個模塊。 要安裝模塊，只需上傳並激活插件。 像往常一樣使用 Divi Builder 並將 Image Intense 模塊放置在您的佈局中。 它可以用來代替圖像模塊。

常規設置包括圖像 URL、媒體大小、懸停樣式、標題、標題、標題方向、按鈕、動畫方向等。這些是熟悉的設置，包括簡短的描述。 新設置包括指向文檔的鏈接以獲取更多信息。

覆蓋標題可以使用標記。 您可以在此處添加鏈接、加粗文本等。

高級設計設置包括圖像寬度、混合混合模式、不透明度、懸停不透明度、自定義疊加漸變等。它包括預期的字體、背景、邊框、顏色和填充選項，以及自定義 CSS 。

示例 - 將圖像強度用於工作

為了看看它能做什麼，我創建了幾個佈局並添加了幾個 Image Intense 模塊。 下面是一些動畫和功能的介紹。

動畫和圖像尺寸

在此示例中，您可以看到帶有兩個疊加標題的圖像的裁剪尺寸。 左側的圖像使用 400 x 516 裁剪設置作為媒體大小，使用奧克蘭作為動畫。

圖像略微縮小並顯示帶有消息的疊加層。 如果需要，可以調整字體顏色和大小。

右側的圖像被放大並在疊加層中包含消息。 這個區別就比較明顯了。 它使用耶路撒冷懸停風格。

中間的圖像使用Douala懸停樣式。

您可以在此圖像中看到框架移動到圖像底部，現在顯示消息。

中間的圖像使用麥迪遜疊加樣式。

您可以在這裡看到它如何在圖像上放置一個疊加層，以降低不透明度，同時將焦點保持在包含消息的圓圈區域。

混合混合模式

混合混合模式是一種將 CSS 屬性應用到圖像的簡單方法。 它將模塊的顏色與其背景混合在一起。 它可以創建一些狂野的效果，並且某些設置在某些顏色下效果更好，因此這需要進行一些試驗。 某些功能可能不適用於所有瀏覽器，因此您需要謹慎使用此功能。

中間的圖像使用稱為Hard Light的混合混合模式。

這個使用Luminosity 。 我還在底部中心添加了一個按鈕並設置了自定義樣式。

不透明度

不透明度是圖像的透明度。 圖像越不透明，它的透明度就越低。 不透明度還受您選擇的動畫樣式和混合模式的影響。 您可以以各種組合使用它們，以查看您可以創建哪些類型的效果。 您可以對普通圖像和懸停圖像應用不同的不透明度級別。

這是沒有不透明度的正常圖像。 我正在使用完整的原始尺寸進行介質尺寸設置。

這裡是懸停的圖像。 我已將不透明度等級設置為 0.6。 這個使用Cali懸停樣式。

這個使用了一張 1024×1024 的大圖像，沒有裁剪，圖像不透明度為 0.4。 兩個覆蓋標題都使用 HTML 標籤。 我使用標籤來表示強、強調和中斷。 它使用波特蘭懸停樣式。

我已將懸停不透明度設置為 1，以便在懸停時完全顯示圖像。

添加自定義漸變

在高級設計設置中，我選擇了Use Custom Overlay Gradient 。 這將打開一組新選項，我可以在其中選擇常規圖像和懸停圖像的開始和結束漸變顏色、漸變方向以及開始和結束停止位置。

下面是使用麥迪遜疊加樣式的漸變。

左側的圖像在懸停之前顯示疊加層。

在懸停時，覆蓋層被移除以顯示圖像。 這是使用河內懸停風格。

圖像交換

在這個例子中，我想把一張圖片換成另一張。 這是通過在高級設計設置中添加一個圖像作為模塊的背景圖像來完成的。

接下來設置不透明度級別，以便一個圖像在沒有懸停的情況下顯示，而另一個圖像在懸停時顯示。 懸停時顯示的也將顯示一條消息。

我選擇了這張圖片作為背景圖片，並將模塊的圖片設置為不透明度為 0。

懸停時，蜂鳥會變成鷹並顯示一條消息。 這是使用基輔懸停風格。

混合圖像

您還可以通過調整不透明度來混合兩個圖像，以便背景圖像通過前景圖像顯示。 這可以創建一些有趣的效果和消息。

這個使用倫敦懸停風格。 我安排了消息以利用它們的位置。 在此示例中，標題字體大小設置為 24，標題字體大小設置為 50。

這是懸停時的圖像。 也可以調整不透明度以顯示兩者，但可以更突出。

添加文本鏈接

鏈接可以添加到標題文本。 這是通過放置一個帶有文本後跟 URL 的偽短代碼來完成的。 字段描述中提供了短代碼，因此您可以復制和粘貼。 它將使用 href、target 和 class 屬性。

這個添加了一個帶有鏈接的標題，可以將讀者帶到一個頁面或發布更多信息。

這對於創建 CTA、鏈接到帖子或頁面等非常有用，可以將讀者引導到您的內容。 圖像本身也可以被點擊。 這可能會將他們帶到投資組合或關於或聯繫頁面。

鈕扣

您可以向圖像添加按鈕以創建號召性用語。

左側的圖像使用帶有文本標記的徑向漸變。 右側的圖像顯示具有懸停效果的按鈕。 兩個圖像都使用黑色邊框。 我為按鈕的背景添加了一個疊加層，並將邊框半徑設置為 15。此示例使用Rochester懸停樣式。

左邊的圖像在兩種黑色陰影之間使用垂直漸變：第一個具有 65% 的不透明度，第二個具有 19% 的不透明度（19%！我知道……不客氣！）。

疊加層、按鈕和漸變非常適合創建 CTA。

價格、許可證和文檔

這是一個高級插件。 單個站點加上一個開發站點的費用為 25 美元，這使您可以在開發站點上使用它，同時在您的實時站點上使用它。 無限站點45 美元。

網站上提供了文檔，包括示例和演示區，您可以在其中實時查看效果。 支持由支持票系統提供。

最後的想法

Image Intense 是一個優秀的模塊，用於添加帶有懸停過渡的圖像。 疊加可以包括漸變、文本、鏈接、各種級別的不透明度，甚至可以從一個圖像切換到另一個圖像。 文本、按鈕、鏈接等，有多個位置選項，並且有很多過渡選項可供選擇。 您可以通過添加自己的 CSS 來做更多事情。

我發現該模塊使用起來很直觀。 如果您可以使用 Divi 模塊，那麼您會感到賓至如歸。 所有的造型功能都在這裡。 懸停疊加過渡是為您的 Divi 網站添加一些活力的好方法。 如果您有興趣為圖像添加懸停過渡，那麼我認為您會發現 Image Intense 值得一看。

我們希望聽到您的意見！ 你用過 Image Intense 嗎？ 在下面的評論中讓我們知道您的體驗！

精選圖片來自 wowomnom/shutterstock.com