7 個最佳 WordPress 圖示框外掛(免費和付費)

已發表: 2024-01-25

圖標盒設計是展示您的產品或服務的簡潔簡介的最佳方式。 在盒形設計上展示您的訊息可能是展示內容的一種有吸引力的方式。 但是,如果您想在 WordPress 網站上建立此設計,則需要圖示框外掛程式的協助。

但是,當涉及到插件時,可以有很多選擇。 這正是這篇文章的主題:繼續閱讀以了解最好的 WordPress 圖示框外掛!

內容隱藏
1什麼是圖示框?
2前 7 個 WordPress 圖示框插件
3如何選擇最好的 WordPress 圖示框插件
4最後的話

什麼是圖示框?

圖示框就像功能框。 從本質上講,它使您能夠在盒形卡片上展示關鍵訊息。

通常,網站使用者不會喜歡對您的服務或產品進行詳細描述。 但是,您可以使用圖示框外掛程式輕鬆簡化 WordPress 網站上這種乏味的體驗。

它可以讓您顯示一個內容框,在其中,您通常會看到一個按住的圖示和其他元素,例如標題、描述和按鈕。 而且,一個好的外掛程式可以讓您自訂圖示框元素,以直觀地突出您的基本USP (獨特賣點)。

那麼,讓我們了解最好的圖標框插件...

7 個最佳 WordPress 圖示框插件

這是我們精心挑選的圖示框插件集合。 我們已經測試了這些插件並嘗試使用所有功能。 請注意,我們將提供的插件是免費和付費選項的混合。

1.ElementsKit圖示框小工具

插件統計:

  • 活躍安裝量: 1+00萬(免費版)
  • 評分: 5.0或更高
  • 最適合:多用途圖示框。

ElementsKit 是一個完整的多用途圖示框外掛選項,您可以使用它在 WordPress 網站上的任何位置提供視覺吸引力的資訊或功能框。 您會發現此功能是 ElementsKit 插件下的一個小部件。

ElementsKit 圖示框小工具可簡化圖示、標題、描述、按鈕等所有內容以及徽章和浮水印​​等其他獨特功能。 該插件在圖標框功能方面的一大優勢是其大量的圖標集合。 您將可以存取 Font Awesome- Regular、Font Awesome- Solid、Font Awesome- Brands 和 ElementsKit 圖標包。

另外,ElementsKit 也提供了幾種懸停效果的動畫效果。 您可以將其單獨應用於圖示或整個圖示框。 這樣,您在展示您的產品或服務的重點部分的同時,將擁有更強大的功能。

優點:

  • 從您的裝置上傳 SVG 圖示。
  • 輕鬆地將它們放置在頁面佈局中。
  • 廣泛的圖標集合。
  • 為圖示框啟用浮水印。
  • 新增和自訂徽章和邊框。
  • 啟用僅用於懸停的按鈕。
  • 使用背景疊加層設定圖示框的樣式。
  • 作為 ElementsKit 插件的免費小部件提供。

缺點:

  • 作為第三方插件提供。

2.Elementor圖示框小工具

插件統計:

  • 活躍安裝量: 5+百萬(免費版)
  • 評分: 4.6或更高
  • 最適合:多用途圖示框。

您可以在 WordPress 網站上使用的另一個免費外掛是 Elementor Icon Widget。 我喜歡這個插件的地方在於,您不需要像使用 ElementsKit 那樣安裝任何其他插件。 您需要同時安裝 Elementor 和 ElementsKIt。 而且,使用者介面對初學者友善。

但是,Elementor 中缺少 ElementsKit 的一些強大功能,例如按鈕、徽章或浮水印。 它非常適合顯示最小的圖示框。 就像您無法將訪客導航到任何地方一樣,因為它沒有按鈕功能。

當涉及到使用 Elementor Builder 在圖示框上添加懸停效果時,您將獲得一些支援。 而且,懸停效果不會像我們的首選 ElementsKit 那樣有任何打開動畫效果。 不過,Elementor 圖示框使用起來很方便,並且具有足夠的自訂功能。

優點:

  • 自訂圖示並定義其位置。
  • 在懸停時套用動畫效果。
  • 取得排版的樣式選項。
  • 移動響應圖示框。

缺點:

  • 無法新增任何徽章、浮水印或按鈕。

3. 彩盒面板與資訊框

插件統計:

  • 活躍安裝: 1,000+
  • 評分: 4.6或更高
  • 最適合:多用途圖示框。

當我們測試這個基於引導程式的插件時,它與所有類型的裝置相容。 我發現最大的缺點是它的使用者介面非常複雜。 雖然它提供了所見即所得的功能,但是能夠滿足直覺的體驗。

不過,您可以使用此外掛程式建立圖示框,例如團隊框、資訊框或功能框。

優點:

  • 具有廣泛的顏色選擇。
  • 促進五種盒子佈局。
  • 支援 Font Awesome 圖示並與圖示選擇器整合。
  • 與拖放建構器整合。
  • 具有磚石和同位素效果。
  • 圖示顯示的兩種不同選項。

缺點:

  • 不附帶任何版式和圖示自訂。
  • 無法上傳您自己的圖示。
  • 大多數功能都在專業版中提供。

4. Betheme圖示盒

插件統計:

  • 最適合:多用途圖示框。

此圖示框元素由 Betheme 建構器插件提供支援。 如果您想將圖示放置在框框中的不同位置,這個插件可以為您做到。 而且,您還可以在圖示框上套用直覺的懸停效果。 一種特殊的動畫效果是當您將滑鼠遊標懸停在整個框上時,整個框都會移動。

但是,您必須付費才能獲得所有這些功能,因為該插件沒有免費版本。 而且這種投資並不值得,因為有相同價格的免費替代品。

優點:

  • 從庫中選擇一個圖示或新增您的自訂圖示。
  • 設定圖示的不同位置。
  • 為所有裝置建立響應式圖示框。
  • 套用多種懸停動畫效果。
  • 懸停時移動整個圖示框。

缺點:

  • 需要支付完整的計劃費用。

5. 服務箱展示

插件統計:

  • 活躍安裝: 5,000+
  • 評分: 4.8或更高
  • 最適合:基於服務的圖示框。

Service Box Showcase 外掛程式提供了一種使用預先建置模板輕鬆設計圖示框的方法。 您可以使用它來以有吸引力的方式顯示已定義的服務。

該插件儀表板包含各種有用的設置,但免費版本中只有少數可用。 您最終可以設計一個也與所有瀏覽器相容的響應式圖示框。

Service Box Showcase 外掛程式的另一個好處是,它可以讓您添加一個「閱讀更多」按鈕,該按鈕僅在先前的插件的專業版中可用。

優點:

  • 支援 Font Awesome 圖示和圖示選擇器。
  • 與拖放 API 整合。
  • 促進可拖曳的常見問題解答項目以方便排序。
  • 選擇顯示圖示和閱讀更多按鈕。
  • 提供圖示框的輪播樣式。
  • 提供標題和按鈕文字的自訂選項。

缺點:

  • 為單一目的而開發。
  • 大多數功能都在專業版中提供。

6. 服務箱

活躍安裝:500+

評分:5.0

最適合:基於服務的圖示框。

Service Box 是一個簡單的圖示框插件。 它非常適合顯示您的服務資訊。 除了顯示多種服務風格外,它還可以在網格和滑桿視圖中顯示您的服務。 此外,您也可以將服務框分組。

優點:

  • 在網格和滑桿視圖中展示您的服務。
  • 適用於 16 種不同風格。
  • 將您的服務箱分組。
  • 新增背景顏色和影像。
  • 新增帶有圖示框的按鈕。
  • 設定您的圖示框排版風格。

缺點:

  • 主要用於建立基於服務的圖示框。
  • 無法添加徽章和浮水印​​。

7. 資訊框(古騰堡塊)

活躍安裝:1000+

評分:5.0

最適合:多用途圖示框。

我們要添加到此列表中的最後一個外掛程式是 Info Box,這個 WordPress 外掛程式是為古騰堡編輯器開發的。 它可以讓您為您的古騰堡網站建立完全自訂的圖示框。

您可以開始建立具有不同預設佈局的動畫圖示框。 它提供了一個用於單獨設定每個內容元素的位置的控制項。 而且,它還促進了圖示框中每個元素的所有自訂功能。 總的來說,這是一個完整的圖標框解決方案。

優點:

  • 基於古騰堡的直覺式介面。
  • 可以顯示圖像而不是圖示。
  • 取得自訂功能來設定圖示樣式。
  • 取得用於設定所有元素(如標題、副標題和按鈕)樣式的控制項。

缺點:

  • 沒有任何徽章或浮水印功能。

如何選擇最好的 WordPress 圖示框插件

您還在為選擇最好的 WordPress 外掛程式來設計圖示框而感到困惑嗎? 通常,我們會為任何 WordPress 要求提供多個外掛選項。 但是,並非所有插件都提供特定的要求和首選項。

因此,下面我們概述了選擇正確的插件來顯示資訊框時的一些基本最低要求。

設定您的要求

我們已經知道,圖示框由多個元素組成。 然而,將所有這些都歸為一類是非常具有挑戰性的。 此外,您的設計可能有特定的需求,例如顯示徽章或浮水印。 而且,最重要的是插件圖標庫應該包含您喜歡的圖標和支援上傳圖像而不是圖標的選項。

自訂選項

使用圖示框插件的主要目的之一是使某條特定資訊更具吸引力。 而且,您可能已經有了一些造型想法。 因此,定制起著重要的作用。 例如,您可能希望僅將懸停效果套用至圖示而不是整個框。 因此,在安裝此圖示之前必須檢查自訂功能的可用性。

使用者介面

擁有複雜的儀表板會使您的圖示框設計變得更加困難。 為此,您需要一個可以更輕鬆地控制設定的使用者介面。 您應該擁有一個具有所見即所得構建經驗的插件。 Elementor 或 ElementsKit 外掛程式促進了這樣的功能。

預製佈局

預製佈局幫助我們輕鬆獲得設計靈感並在幾分鐘內開始工作。 一些插件提供專業設計的佈局,讓您的工作更輕鬆。 因此必須檢查該圖示框插件的佈局套件的可用性。

響應式設計

圖示框的回應能力很重要,因為它需要在所有裝置上都完全可見。 為了更好地理解響應式設置,您可以閱讀文件或教學課程。

插件衝突

當我們需要像圖示框這樣的設計時,我們通常會安裝單一用途的插件。 這樣做會增加插件的數量,並可能導致插件之間發生衝突。 那麼,有什麼辦法可以解決呢? 最佳實踐是擁有一個具有各種功能的插件。 例如,使用ElementsKit可以滿足您網站設計的不同需求,包括圖示框。

最後的話

此列表中的所有插件都以各自的方式受益。 它們都有助於為您的 WordPress 網站創建令人驚嘆的圖標框。 然後,涉及您對功能和使用者介面的個人喜好。

現在,此列表中的大多數插件都是免費的,因此您應該嘗試一下並找到一個您在實際使用中感到舒適的插件。 而且,這將是找到最好的 WordPress 圖示框外掛的合適方法。