如何在 Elementor 網站中添加工具提示

已發表: 2022-10-11

您是否正在尋找一種向 Elementor 網站添加工具提示的方法? 如果是這種情況,那麼您已經登陸了正確的頁面。

工具提示也稱為屏幕提示或信息提示,它顯示在將鼠標懸停在任何圖像或特定文本上時出現的文本片段。 這些工具提示在 Internet 或您的桌面上隨處可見,作為替代文本、標籤或標題文本。

每當您打開互聯網時,您可能會看到任何圖像、圖標或標題; 如果您將鼠標指針懸停在這些字段上,您將看到一個作為工具提示的文本標籤。

同樣,使用工具提示功能,您可以在您的網站上執行相同的操作。

在本文中,我們將指導您使用 Elementor 和 PowerPack Addons 添加工具提示並自定義其外觀。

所以事不宜遲,讓我們繼續吧。

什麼是工具提示?

工具提示基本上是用戶在使用互聯網瀏覽器、應用程序、桌面屏幕等時遇到的一個微小的 UI 元素。

讓我們嘗試通過名稱本身來理解工具提示。

看,顧名思義,它是一個工具給出提示每當有觸發器時,向用戶提供有關元素或字段的信息。 此觸發器可以是懸停或單擊,在編碼時是結構化的。

這些工具提示是包含簡短描述或標題的小文本框,指示特定元素、字段或工具。 例如,參考您的桌面屏幕並查看工具欄或 Windows 開始菜單上的圖標。

如您所見,“ windows 開始菜單”上的應用程序會顯示一個小文本框,指示有關該應用程序的信息。 現在,這就是工具提示的樣子,您可以在系統或網站的任何位置找到它。

因此,如果您希望這些工具提示顯示在您的網站上,您需要添加它們。

工具提示如何改善您網站上的用戶體驗

讓我們看看這些工具提示如何幫助您改善網站上的用戶體驗。

工具提示可以添加到您網站上的此類區域,例如:

  • 可點擊的元素,例如圖像、圖標等。
  • 標題懸停文本或可點擊鏈接。
  • 圖像熱點。
  • 電子商務產品(如果您運行 WooCommerce 網站。)

好的,想想看,如果您在網站的所有這些區域中使用這些工具提示,對於所有瀏覽您網站的用戶來說,這將是多麼容易和有用。

是的,消費者會覺得它很方便,這是因為這些工具提示通過在您網站上的任何位置提供相關文本的指示來幫助用戶,這將改善他們的用戶體驗。

如何使用 PowerPack 在 Elementor 中添加工具提示?

在工具提示的幫助下,您可以通過文本向用戶展示重要消息,以獲得更好的用戶體驗。

為了向您的網站添加工具提示,您需要安裝並激活 Elementor 和 PowerPack 插件。

PowerPack Addons for Elementor 有 80 多個方便且富有創意的小部件、300 多個預先設計的模板和有用的擴展,以增強您網站的整體外觀和感覺。 其中一個擴展是工具提示,您可以使用它在您的網站上顯示工具提示文本。

因此,讓我們看看如何使用 Elementor 和 PowerPack 向您的網站添加工具提示。

啟用工具提示擴展

要將工具提示添加到您的網站,請首先啟用工具提示擴展。

接下來,轉到您的 WordPress 儀表板,導航到 Elementor,然後單擊PowerPack。

Elementor 頁面構建器的 PowerPack 插件

接下來,導航到擴展部分並啟用工具提示功能。

WordPress 儀表板中的 PowerPack 設置

完成後,點擊保存更改按鈕。

在 Elementor 中啟用工具提示功能

要將工具提示添加到 Elementor 網站上的任何特定小部件/部分,請在 Elementor 編輯器中打開您的頁面。 選擇要顯示工具提示的元素,然後轉到Advanced Tab > PowerPack ; 現在啟用工具提示功能。

在 Elementor 的編輯器頁面中啟用 PowerPack 的 Tooltip 功能

最後,工具提示功能已成功啟用,可以顯示在您的網站頁面上。

自定義工具提示功能

現在您已經啟用了工具提示功能,讓我們看看您可以自定義以顯示有吸引力的工具提示文本的功能。

啟用工具提示功能後,將顯示所有自定義選項,您可以使用它們來增強其整體外觀。

在 Elementor 頁面構建器中設置 PowerPack 的工具提示擴展選項

讓我們看看您將使用此功能獲得的所有工具提示設置:

  • 工具提示內容:添加要在工具提示上顯示的內容。
  • 目標:使用此選項,您可以選擇目標作為當前元素或自定義選擇器。
  • 觸發器:從可用選項中選擇您想要的觸發器,例如懸停單擊
  • 工具提示位置:選擇工具提示位置為topbottomleftright
  • 顯示箭頭:選擇是否顯示箭頭的選項。
  • 動畫:使用此功能,您可以將動畫從可用選項(例如淡出下降增長滑動擺動)應用到工具提示。
  • 距離:此選項可以調整熱點和工具提示之間的距離。
  • Z-Index:使用此選項,您可以調整工具提示的 Z-index 值。

現在您已經自定義了所有工具提示設置,讓我們進入下一步。

讓我們看看工具提示功能可用的所有樣式選項:

在 Elementor 頁面構建器中設置 PowerPack 的工具提示擴展選項
  • 背景顏色:使用此選項自定義工具提示的背景顏色。
  • 文本顏色:此功能可用於自定義工具提示文本顏色。
  • 版式可以使用此選項自定義工具提示版式文本。
  • 盒子陰影:您可以使用此選項啟用盒子陰影功能以增強其外觀。
  • 邊框類型:如果要為工具提示添加邊框,可以使用此選項。 從可用選項中選擇一種邊框類型,例如線、線、虛線雙線凹槽
  • 邊框半徑:如果您已將邊框應用於工具提示,則可以使用此選項調整其半徑。
  • 填充:您可以調整工具提示的填充; 這將允許工具提示文本和邊框之間的間距。
  • 寬度:您還可以使用此選項調整工具提示寬度。

自定義所有這些功能後,我們剛剛創建的工具提示將如下所示。

elementor的powerpack工具提示功能

包起來!

正如我們所討論的,使用 PowerPack Addons 在 Elementor 網站中添加工具提示的整個過程。 但是,這也可以通過編碼來完成; 如果你是專業的編碼員。

我們希望本教程能幫助您向 Elementor 網站添加工具提示。 單擊此處獲取 PowerPack Elementor 插件,以在您的 Elementor 網站上創建令人驚嘆的工具提示和許多其他部分。

如果您正在設計 Elementor 頁面並尋找添加自定義字體的方法,如何向 Elementor 網站添加自定義字體文章將指導您。

如果您遇到任何問題,請隨時在評論部分提出您的疑問。

在 Twitter、Facebook 和 YouTube 上加入我們。