Divi 插件亮點 – Tilt Blurb Divi 模塊

模糊在 Divi 佈局中很流行。 它們顯示文本、圖像、圖標等，非常適合展示產品和服務。 如果您希望它們更加突出並提供一些有趣的懸停動畫怎麼辦？ 常見的動畫可以通過 CSS 來完成，但是如果你想要不同的東西怎麼辦？ 一個名為 Tilt Blurb Divi Module 的插件可能正是您要找的。

什麼是傾斜模糊模塊？

Tilt Blurb Module 是 Hadworm 的第三方插件，它向 Divi Builder（適用於 Divi 和 Extra）添加了一個新的模糊模塊，該模塊添加了有趣的傾斜效果，創建了 3D 外觀。 在這個插件亮點中，我們將看看這個模塊，看看它可以做什麼。 我已經展示了一些 gif，但由於 gif 的文件大小，大多數都是圖像。 示例圖片來自 Unsplash.com 和 WordPress.org。

安裝 Tilt Blurb Divi 模塊

正常上傳並激活插件。 在儀表板菜單中的插件鏈接中，您將找到一個名為 Tile Blurb License 的新項目。 單擊此按鈕，輸入您的許可證密鑰，然後保存更改。 這將確保您獲得更新。

Divi Builder 中添加了一個名為 Tilt Blurb 的新模塊。 它在 Divi Builder 中呈紫色，因此很難錯過。 我喜歡開發人員為他們的模塊使用不同的顏色，以便它們從標準模塊中脫穎而出（就其價值而言）。

該模塊包括標準選項卡和一個新選項卡：

• 內容 – 文本、鏈接、圖像和圖標、背景、管理標籤
• 傾斜設置——傾斜設置、傾斜背景、傾斜層
• 設計 – 圖像和圖標、文本、標題文本、正文、邊框、大小、間距
• 高級 – CSS ID 和類、自定義 CSS、動畫、可見性

傾斜設置

對於這些示例，我添加了一個背景，然後將一個較小的圖像作為前景放置在它上面以創建 3D 效果。 然後煮了咖啡。 很多咖啡。

默認設置示例

這是調整前 3D 傾斜的外觀示例。 我添加了標題、文本、背景和圖標。 傾斜跟隨我的鼠標並將文本和圖標與圖像區分開來，使其具有 3D 外觀。 對我來說，視差效果擺脫了背景，所以我沒有使用它。

圖像大小

這會使用隱藏圖像來調整簡介的大小並使內容居中。

帶有 2 個帶有浮動內容的圖像的傾斜模糊大小

這一張包括兩張圖片——一張用於前景，一張用於背景。 前景圖像和文本使用浮動內容功能以 3D 形式呈現。

您可以調整像縮放一樣工作的浮動量，使前景內容更接近讀者。 此圖像使用 200 作為浮動量，已達到最大值。

傾斜量

傾斜量滑塊可讓您控製圖像傾斜的程度。 默認設置為 20。這個使用 100。

傾斜視角

傾斜透視加深了透視。 數字越小，視角越深。 默認值為 1000。此示例為 200。

傾斜秤

傾斜比例是一個縮放級別。 默認值為 1.1，這意味著在懸停時圖像乘以 1.1。 此示例為 2。它變為 0，但 0 級別創建了一個連續的前後縮放，該縮放不適用於此圖像。 可能需要進行一些試驗才能讓它按照您的意願行事。

傾斜速度

傾斜速度控制您懸停時圖像的移動速度。 數字越小，移動速度越快。 默認是 100。這個是 5000。我偏向於緩慢的效果。

傾斜反向

Tilt Reverse 改變傾斜的方向。 通常傾斜遠離鼠標。 反向使圖像朝向鼠標傾斜。

傾斜眩光

傾斜眩光添加跟隨鼠標的眩光效果。 眩光量可調。 上圖使用默認設置 0.8。 這非常適合創建燈光效果。

邊界半徑

邊框半徑更改邊框的形狀。 默認值為 40。這設置為 100，即最大數量。

傾斜背景

傾斜背景可讓您設置背景顏色和邊框效果。

傾斜背景

傾斜背景顏色的一個副作用是它會在圖像周圍產生漂亮的光暈。

調整傾斜背景顏色、邊框寬度、背景邊框樣式、邊框寬度以及邊框和框陰影顏色。

傾斜背景距離

傾斜背景距離調整陰影的距離。 默認設置為 -50。 本示例使用 -25。

此示例使用 0 的傾斜背景距離和 0.3 的不透明度，這會在背景上創建疊加層。

傾斜背景尺寸/比例

傾斜背景大小/比例改變傾斜背景的距離。 默認值為 1.04。 這是1.2。

傾斜圖層

Tilt Layers 將相同的圖像作為多個圖層一遍又一遍地應用，從而創建純 3D 效果。 它可以使用圖像或背景顏色，您可以調整圖層深度。 我已經應用了上面的圖像，層深度為 50。

我應用的圖像在這裡被視為邊框。 我已經調整了傾斜量以使其更容易看到。

正如預期的那樣，圖像的底部看起來不同。 這是為邊框添加一些紋理的好方法。 較小的層深度將使邊界更薄。

這個使用層深度為 10。

此示例同時使用傾斜背景和傾斜圖層。

這是一個 3D WordPress 徽標，看起來像是鑲嵌在水晶中。 我將logo上傳到Image & Icon圖片區域，設置傾斜量為100，使用默認傾斜眩光，在Tilt Layers下的圖層圖片中添加logo，設置圖層深度為50，圖層顏色設置為白色並且幾乎完全透明。

這是沒有圖層顏色的徽標。 側面更難看。

許可、支持和文檔

該插件可以在無限的網站上為您和您的客戶使用。 它包括 6 個月的支持。 開發人員的網站上提供了文檔。 它包括有關如何創建網站上顯示的一些示例的說明。 我想看到更多的例子，比如標誌是如何製作的。

最後的想法

Tilt Blurb Module 提供了許多有趣的傾斜效果，可為圖像、圖標和文本創建漂亮的 3D 外觀。 這是創建 CTA、3D 書籍封面和產品圖像的好方法。 傾斜模糊模塊既創新又直觀。 如果您想為您的簡介添加一些不錯的傾斜效果，Tilt Blurb Module 值得一看。

我們希望聽到您的意見。 您是否嘗試過 Tilt Blurb Divi 模塊？ 請在下面的評論中告訴我們您對此的看法。

精選圖片來自霍比特人/shutterstock.com