如何在 Divi 中使用引人入勝的工具提示標記背景圖像

添加工具提示來標記背景圖像是一種創造性的方式，可以讓訪問者了解有關您的產品或服務的寶貴信息。 基本思想是在圖像上定位圖標（或文本）特定位置（如帶有精確定位的谷歌地圖）。 如果您利用 Divi 的懸停效果，您可以在將鼠標懸停在圖標上時顯示其他文本以創建引人入勝的工具提示。

在本教程中，我將向您展示如何使用簡介標記背景圖像，這些簡介將用作有關您產品的信息工具提示。 為此，我將使用 Fitness Gym Landing 頁面來標記帶有有關優質健身信息的背景圖像。

讓我們開始吧。

先睹為快

這是我們將在本教程中構建的設計的先睹為快。

你需要什麼

對於本教程，您將需要以下內容：

• 迪維主題
• 健身館佈局包中的健身館登陸頁面（可從 Divi Builder 獲得）
• 用於背景圖片的圖片，正好是 320 像素 x 507 像素。 隨意將它拖到您的桌面上並將其用於本教程。
  

準備預製佈局

首先，創建一個新頁面，添加標題，然後部署 Visual Builder。 然後選擇“選擇預製佈局”。 從加載庫彈出窗口中，選擇 Fitness Gym Landing Page 佈局並單擊“使用此佈局”。

將佈局加載到頁面後，向下滾動到第四部分，兩列行的右列標題為“特色節目”。 我們將在此行的左列中添加帶有工具提示的背景圖像。

使用內嵌編輯器將右欄中的標題文本更改為“Smart Fitness”。

添加背景圖像並自定義行設置

對於這種設計，尺寸和間距至關重要，並且需要精確。 而且，這一切都始於我們背景圖片的大小。 如前所述，我們用於背景的圖像應該是 320 像素 x 507 像素。 由於 320px 寬度是移動設備的良好起點，這將使我們能夠使設計對移動設備友好，而無需更改圖像的大小。

打開行設置並將背景圖像添加到第 1 列。然後更新以下內容：

第 1 列背景圖像大小：實際大小
第 1 列背景圖像位置：左中
第 1 列背景圖像重複：無重複

接下來我們需要為行添加自定義寬度並取出頂部和底部間距。

自定義寬度：700px
自定義填充：0px 頂部，0px 底部

將寬度設置為 700px 將確保行在平板電腦斷點之前不會在較小的屏幕尺寸上變小。

在這一點上，我認為繼續將第 1 列的特定高度設置為與背景圖像的高度相等是個好主意。 這樣我們就知道如果列的內容沒有暴露整個圖像，圖像將保持可見。 為此，請轉到高級選項卡並在第 1 列主要元素中添加以下自定義 CSS：

height: 507px;

現在列的高度等於圖像的高度，並且不取決於我們添加到行中的內容（或模塊）。

使用 Blurbs 在背景圖像上添加工具提示標籤

背景圖像到位後，我們可以開始添加我們的簡介，這些簡介將被定位和設置為工具提示。 繼續向第 1 列添加一個簡介模塊並更新以下簡介設置：

書名：《焦點》
內容：“成功的關鍵！”
使用圖標：是
圖標：見截圖

將標題和內容保持在幾個單詞中很重要，因為我們希望能夠將整個簡介放在背景圖像中。

接下來，您將更新設計設置。 這是一種更高級的宣傳語設計，因此有很多選項可以更改，還有一些懸停效果可以在懸停時顯示宣傳語的內容。 更新以下簡介設計設置：

圖標顏色：#edf000
圓圈圖標：是
圓圈顏色：rgba(0,0,0,0)
顯示圓形邊框：是
圓形邊框顏色（默認）：rgba(0,0,0,0)
圓形邊框顏色（懸停）：#edf000
圖像/圖標放置：左
使用圖標字體大小：是
圖標字體大小：40px

繼續調整設計設置如下：

標題字體粗細：粗體
標題文本顏色（默認）：rgba(0,0,0,0)
標題文本顏色（默認）：#edf000
正文文本顏色（默認）：rgba(0,0,0,0)
正文顏色（默認）：#ffffff

（請注意，默認文本顏色是完全透明的，以便在您將鼠標懸停在簡介上之前隱藏它們。）

自定義邊距：頂部 15px，底部 0px，左側 90px
自定義填充：頂部 5px，底部 5px，右側 5px

（自定義邊距是您將模糊圖標放置在圖像上特定位置的方式。）

盒子陰影：見截圖
框陰影水平位置：-154px
框陰影垂直位置：0px
陰影顏色（默認）：rgba(0,0,0,0)
陰影顏色（懸停）：#1e2441

（框陰影是一種在簡介內容後面添加背景顏色的創造性方法。默認情況下，框陰影是完全透明的，但在懸停時會顯示漂亮的藍色。）

現在去檢查你的第一個廣告的最終結果，以確保懸停效果和設計是正確的。

接下來，我們可以復制 blurb 模塊來創建我們的第二個工具提示標籤。 複製簡介後，您可以將內容更新為您想要的任何文本（保持簡短）。 然後您需要做的就是使用不同的自定義邊距定位工具提示，如下所示：

自定義邊距：頂部 0px，底部 0px，左側 15px

要創建第三個簡介，您可以復制第二個簡介。

對於第三個簡介，我們將用完圖像右側的空間，因此我們真的沒有太多空間來放置內容。 我們可以使用負邊距將模糊擴展到圖像之外，但這也會超出移動設備上 320 像素的屏幕尺寸。 因此，我們將引入一些小代碼片段來翻轉我們的簡介內容，以便圖標在右側，文本在左側。 為此，請打開模糊設置，然後在“高級”選項卡下添加以下自定義 CSS。

主要元素 CSS：

direction: rtl;

模糊圖像 CSS：

padding-left: 15px;

如果您沒有註意到，該圖標現在位於右側。 現在您需要做的就是使用以下自定義邊距定位簡介：

自定義邊距：頂部 35px，底部 0px，左側 0px

我們還需要調整框陰影，使其來自左側而不是右側，如下所示：

框陰影水平位置：150px

現在查看實時站點上的反向工具提示。

對於最後一個簡介，複製列頂部的第一個簡介並將其粘貼到第三個簡介下方。

然後按如下方式更新保證金：

自定義邊距：頂部 0px，左側 100px

現在來看看設計的最終結果吧！

並查看那些工具提示懸停效果！

它是響應式的嗎？

這種設計從一開始就考慮到了移動性。 圖像的寬度為 320 像素，這是大多數小型智能手機的寬度。 因為我們使用像素長度單位來調整和定位所有內容，所以當我們調整瀏覽器大小時，設計（包括工具提示）不會四處移動。

但是，為了確保並最大化小手機屏幕上的圖像寬度，您可能還需要做一件事。 默認情況下，您的行在移動設備上將具有 80% 的寬度，因此為了使其成為 100%，您可以將其作為自定義 CSS 添加到您的行的主要元素中，如下所示：

width: 100%;

您的自定義寬度 700 像素仍將作為桌面上的最大寬度，但現在在移動設備上將是 100%。

最後的想法

使用工具提示和懸停效果標記背景圖像可以添加專業設計元素，讓您的觀眾獲得有用的信息。 而且我確信有多種方法可以將此概念用於其他用例。 但是，如果您計劃將設計也保留在移動設備上，它確實會帶來挑戰。 訣竅是先考慮移動並提前計劃。 我希望這可以為未來的項目提供靈感。 如果有的話，至少您知道如何創建帶有圖標或右側的簡介:)。

我期待在下面的評論中收到您的來信。

乾杯!