[WordPress] 外掛分享： Image Hover Effects – Elementor Addon

WordPress 外掛 Image Hover Effects – Elementor Addon 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Image Hover Effects – Elementor Addon」是 2018-05-18 上架。
  • 目前有 50000 個安裝啟用數。
  • 上一次更新是 2024-07-12，距離現在已有 295 天。
  • 外掛最低要求 WordPress 4.7 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
  • 有 81 人給過評分。
  • 論壇上目前有 2 個提問，問題解答率 0%

外掛協作開發者

blocksera | crypto4ever |

外掛標籤

addons | elementor | css effects | elementor widget | image hover effects |

內容簡介

「Image Hover Effects Addon for Elementor Page Builder」是一款最佳的外掛程式，可讓您針對您的圖像設置自訂的懸停效果，並提供對細節的關注，可讓您對齊文字、更改背景、設置邊框以及提供許多其他功能。這個免費的插件有超過40種圖像懸停效果，包括淡化和推動、縮放和模糊等。還有預設的兩種或更多效果組合可供使用，可為用戶創建交互式空間。

從這個外掛程式，您可以為您的圖像添加標題和描述，設置標題標籤，添加圖標，連結到頁面或網站，並進行更多操作。當您在圖像上滾動游標時，懸停效果會顯示標題和描述。

這個小工具外掛程式是為初學者和高級用戶設計的。您可以輕鬆自定義效果的外觀，也可以選擇添加自定義HTML或CSS屬性。

特點

易於自定義的選項。
40多種圖像懸停效果。
圓形和方形邊框都包含在所有效果中。
水平對齊文本。
控制元素之間的空間。
支援 WPML 多語言網站設計

背景：為效果設置背景顏色。您也可以選擇設置透明背景。

水平對齊：使用水平對齊將標題和描述對齊到左邊、中間或右邊。

垂直對齊：使用垂直對齊將標題和描述對齊到頂部、中間或底部。

內填充：設置內容到效果之上的填充區域。

邊框半徑：您可以使用此功能削減圖像的銳利邊緣，使其更加平滑。

標題：設置與背景相配的標題顏色。使用『字型』選項，您可以選擇字體、字體大小、字重、大小寫、樣式（斜體、粗體等）、裝飾（上划線、下划線等）、行高和字母間距。

描述：同樣地，您可以在此選項下選擇描述的顏色和字體樣式。

圖標：設置圖標的顏色、大小和圖標與標題之間的間距。

自定義

「Image Hover Effects for Elementor」帶有 CSS3 樣式，可向您的圖像添加令人驚嘆、柔和而愉悅的懸停效果。讓您的圖像淡入或淡出、滑動、翻轉、快門、縮放、摺疊、搖滾等，只需要點擊一下就可以實現這些。這裡不需要編寫代碼。圖像懸停效果保持簡單優雅。如果您有多個圖像需要顯示，那麼您只需將樣式復制並粘貼到另一個圖像即可。您還可以選擇複製圖像。Image Hover Effects的懸停效果完全響應式，可以適應非常小和超大的設備。它們使用靈活而強大的CSS設計。

有助於 SEO

從 SEO 的角度來看，將標題標籤、標題和描述添加到您的圖像中是不可或缺的。標題標籤和描述幾乎總是可以吸引用戶點擊，而標題和標題中的關鍵字可以幫助您的網站在搜索結果中排名更高。

在「Image Hover Effects for Elementor」中，您只需在「標題」欄位中添加圖像的標題，然後設置標籤（H1-H6、段落、span）。然後，在「描述」欄位中添加描述。就是這樣。現在，您可以自定義文本的外觀，讓它給人一種整潔而清晰或狂野而藝術的感覺，或從眾多選擇中選擇。

另一個重要因素是連結到特定頁面或相互連結以驅動流量。 「Image Hover Effects for Elementor」提供一個選項，可將圖像連結到指定的URL。

原文外掛簡介

Image Hover Effects Addon for Elementor Page Builder is the best in class addon that lets you set customized hover effects for your image. It gives attention to detail by allowing you to align text, change background, set borders and offers a number of other features. This free plugin has over 40 image hover effects ranging from fade and push to zoom and blur. A pre-set combination of two or more effects is also available. It creates an interactive space for the users to your website.
Add title and description to your image, set the title tag, add icons, link to a page or a website and do a lot more. Whenever you scroll the cursor over the image, the hover effect is effectuated to display the title and description.
The widget add-on is designed for use by both beginners and advanced users. You can either change the appearance of the effect with the click of a few buttons or choose to add custom HTML or CSS attributes.
Features

Easy to customize options.
40+ Image Hover Effects.
Circle and Square border both comes with all effects.
Center the text horizontally.
Control the spaces between elements.
WPML Compatibility

Background: Set a background color to the effect. You can also choose set a transparent background.
Horizontal Alignment: Align the title and description to the left, center, right with horizontal alignment.
Vertical Alignment: Align the title and description to the top, middle or bottom with vertical alignment.
Padding: Set the padding to the content over the effect.
Border Radius: You can use this feature to trim off the sharp edges of the image to give it a smoother touch.
Title: Set a title color that compliments the background. Using the ‘Typography’ option, you can choose the font, font size, weight, case, style (italic, bold, etc.), decoration (overline, underline, etc.), line height and letter spacing of the title.
Description: Similarly, you can choose the color and the typography options for your description under this option.
Icon: Set the icon’s color, it’s size and the space between the icon and the title.
Customizations
Image Hover Effects for Elementor comes with CSS3 styles that add stunning yet mellow and pleasant hover effects to your images. Let your images fade in or fade out, slide, flip, shutter, zoom, fold, roll, etc with just a click. There’s no coding involved. Image hover effects keeps things simple and elegant. If you’ve got multiple images to be displayed, then you can simply copy the style and paste it onto another image. You also have the option to duplicate the image. The hover effects from Image Hover Effects are fully responsive, and can accommodate to very small and extra-large devices. They’re designed using flexible and robust CSS.
SEO Friendly
From an SEO perspective, adding title tags, headings and descriptions to your images is indispensable. Title tags and descriptions almost always garner a click from the user whereas keywords in titles and headings can help your website rank higher in search results.
Image Hover Effects for Elementor lets you do all that and more in just a span of few seconds. Just add the title of your image to the Title field and set the tag (H1-H6, paragraph, span). Then add the description to the Description field. That’s all there is to it. Now you can customize the look of your text to being neat and crisp or wild and artistic or choose from a multitude of other choices.
Another important factor is linking to specific pages or interlinking to drive traffic. Image Hover Effects provides an option to link your image to a specified URL. You can copy the link to which your users should be directed to (when they click the image) and paste it in the field under the ‘Link To’ section.
Where it can be used
On any WordPress website that supports Elementor! Be it a blogging site, a news website or even an e-commerce or e-learning website, Image Hover Effects works flawless. Since there are over 40 hover effects, you can use a combination of styles to work wonders with your images. But why should you stop there? Try our Pro version. The Pro version offers over 150+ hover effects and a number of other perks as well.
Emage Hover Effects for Elementor (Pro)

150+ hover effects
Basic to advanced image hover effects
Apply separate effects to image, overlay and content
9 alignment options
Virtually unlimited effect combinations
Customize content with links, buttons, colors and typography
Post Grid Hover effects
Dynamic fields (with Elementor Pro)

Useful Links
Hover effects demo | Emage Hover Effects (Pro) | Buy Emage Hover Effects

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Image Hover Effects – Elementor Addon」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0 | 1.1 | 1.2 | 1.4 | 1.2.1 | 1.2.2 | 1.2.3 | 1.2.4 | 1.2.5 | 1.2.6 | 1.2.7 | 1.2.8 | 1.3.0 | 1.3.1 | 1.3.2 | 1.3.3 | 1.3.4 | 1.3.5 | 1.3.6 | 1.3.7 | 1.3.8 | 1.4.1 | 1.4.2 | 1.4.3 | 1.4.4 | trunk |

延伸相關外掛（你可能也想知道）

文章
Filter
Apply Filters
Close
Mastodon