如何在WordPress中創建Flipbox疊加和懸停


想要向您的WordPress網站添加翻轉盒疊加層和圖像懸停效果嗎?

即使您使用的是高質量WordPress主題,您也可能會受到自定義選項的限制。 翻轉盒和圖像懸停功能可為您的網站添加醒目的動畫效果。

在本文中,我們將向您展示如何向您的WordPress網站添加翻轉框覆蓋和圖像懸停。

如何在WordPress中創建翻轉框覆蓋和懸停

什麼是Flipbox?

翻轉框是將鼠標移到上方時翻轉的框。 您可以將此懸停動畫效果添加到網站的特定部分,包括文本框和圖像。

Flipbox演示動畫

該術語來自於鼠標懸停在圖像上方時發生的獨特“翻轉”功能。 您可以控製圖像的翻轉方式,以及圖像兩面的信息和設計。

如果您的網站是相對靜態的,則可以使用翻頁盒效果使其更具交互性。

例如,您可以將圖像懸停翻轉框添加到產品定價頁面。 這樣,當用戶將鼠標懸停在您的定價層上時,價格就會顯示出來。

或者,如果您是自由職業者,則可以添加與該翻轉一起使用過的公司的徽標,並鏈接到每個項目。

儘管這些動畫效果可以增強您網站的用戶體驗,但不要過分重要。

將翻轉盒效果想像成一餐調味料。 在那裡是為了增強現有的風味和食材,但是太多了會毀了這道菜。

話雖這麼說,讓我們看一下如何向您的WordPress博客或網站添加翻轉框覆蓋和圖像懸停效果。

如何在WordPress中創建Flipbox疊加和懸停效果

您可以使用許多方法(例如Elementor頁面構建器)或添加自定義CSS將翻轉框和懸停效果添加到WordPress網站。

但是,我們建議的方法是使用Flipbox – Awesomes Flip Boxes圖像疊加插件。 該插件靈活且易於使用。 這是最好的Flipbox和圖像懸停WordPress插件。

該插件的免費版本為您提供速度和簡便性。 安裝插件後,您可以快速將美觀的翻轉框添加到您的站點。

如果需要更多自定義選項,則可能需要升級到該插件的高級版本。 這使您可以控制翻蓋的顏色並添加自定義CSS。

您可能會發現現有模板在添加到您的站點時已經看起來不錯,在這種情況下,無需升級。

您需要做的第一件事是安裝並激活Flipbox – Awesomes Flip Boxes圖像疊加插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

安裝並激活插件後,您可以通過以下方法創建第一個翻轉框: 翻蓋盒»新建

創建一個新的翻頁盒

這將顯示整個模板選擇。

如果這些還不夠,那麼您可以單擊“導入模板”菜單選項,以獲得更多可以使用的模板。

導入翻轉盒模板

使用該插件的免費版本,有5種不同的模板可供選擇,另外還有10種您可以導入的模板。

要導入新的可定制模板,請單擊“樣式”編號旁邊的“導入”按鈕。

Flipbox單擊導入按鈕

現在,是時候選擇並開始自定義模板了。

您需要單擊“創建樣式”以加載第一個翻蓋設計。

這將彈出一個彈出菜單,您可以在其中命名您的翻轉框,並選擇要自定義的佈局。

選擇要自定義的翻轉框

第1,第2,第3個“佈局”選項與佈局中的各個翻轉框匹配。 做出選擇後,點擊“保存”。

值得一提的是,您的最終設計將與Flipbox模板緊密匹配,因此最好選擇一個與您希望它在網站上顯示的外觀類似的模板。

您將使用三個主要標籤來更改翻轉框的外觀:“常規”,“前”和“後端”。

Flipbox常規設置菜單

在這些選項卡的每個選項卡上,您都可以更改字體,填充和邊距。 但是,我們認為默認選項看起來不錯。

接下來,我們將在翻轉框的兩側更改文本。

將鼠標懸停在屏幕底部的翻轉框上,然後點擊“修改”。

Flipbox預覽編輯文本

這將彈出一個彈出窗口,讓您更改正面文本,背面文本和背景圖像。

要更改標題,如果要顯示其他圖標,請編輯“前標題”文本框和“字體圖標:”框。

更改翻轉框的前標題和圖標

如果要添加背景圖像,請單擊“前圖像”選項右側的“上傳圖像”。

接下來,上傳新圖像或從現有媒體庫中選擇圖像。

上載Flipbox的正面背景圖片

之後,您將在“後端設置”下的翻轉框的背面執行相同的一系列步驟。

您可以在此處更改卡片翻轉時顯示的標題和文本。

更改後端翻轉框文本

您還可以更改“後端按鈕文本”和“鏈接”字段。

這些更改按鈕文本以及單擊按鈕後用戶的位置。

添加後端翻轉框按鈕和鏈接

最後,點擊“立即上傳”以更改翻頁盒背面的背景圖片。

與上述相同,您可以上傳圖像,也可以從媒體庫中選擇一個。

上傳後端背景圖片

完成編輯後,請確保單擊“提交”按鈕以保存您的更改。

您會注意到您的新更改將立即顯示在“預覽”窗口中。

如果要創建整行的翻轉框,請單擊“添加新翻轉框”元框中的“ +”圖標。

添加一行翻轉框

這將彈出一個類似於上面的彈出框,您可以自定義第二個翻​​轉框。

到目前為止,您已經創建並自定義了翻轉框,是時候將其添加到WordPress站點了。

最簡單的方法是使用隨附的短代碼。 在屏幕的右側,有一個標記為“ Shortcode”的元框,複製類似於下圖的短代碼。

複製Flipbox簡碼

接下來,導航至您要添加翻頁框並粘貼您的簡碼的頁面或帖子。

然後,如果您的帖子已經發布,請單擊“發布”或“更新”。

粘貼flipbox簡碼

現在,您的新翻轉箱將在您的網站上生效。

請注意,在調整瀏覽器窗口的大小時,由於翻轉框具有100%的響應能力,因此它們也會隨之調整。

Flipbox實時WordPress顯示

該插件還包括一個翻轉盒窗口小部件,您可以將其添加到主題支持的任何窗口小部件區域。

為此,請轉到 外觀»小部件 並找到名為“ Flipbox – Awesomes Flip Boxes圖像疊加層”的小部件。

添加翻轉框小部件

然後,您可以將小部件拖放到您的首選位置。

最後,輸入樣式ID(可在Flipbox插件主菜單中找到),然後單擊“保存”。

Flipbox小部件ID

我們希望本文能幫助您學習如何向您的WordPress網站添加翻轉框覆蓋和懸停。 您可能還想查看我們的關於優化SEO圖像的指南,以及有關解決常見WordPress圖像問題的疑難解答指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。