Elementskit ImageBox:快速建立圖片盒子並調整hover效果

Elementskit是WordPress搭配Elementor編輯器使用的外掛,提供許多輔助網頁設計小工具。本文介紹其中的ImageBox圖片盒子,可快速建立以圖片為主的網頁區塊,重點說明Hover放大效果。

一、新增Image Box

WordPress Elementor編輯器有許多不同類別的小工具,有些是Elementor本身既有的,有些是其他外掛所提供的,例如這篇文章所介紹的是ElementsKit外掛工具,在它的Elementor編輯器工具箱中有個「ImageBox」圖片盒子,將它拖到右側的網頁畫布上。

Elementskit ImageBox:快速建立圖片盒子並調整hover效果 1

二、選取圖片媒體

既然叫做ImageBox圖片盒子,它最重要的內容素想必是圖片,所以這個元素屬性的第一項便是「Image」圖片,在此點選「選取圖片」。

Elementskit ImageBox:快速建立圖片盒子並調整hover效果 3

三、圖片替代文字

在插入媒體的視窗中,可以直接選擇先前已經有上傳到WordPress媒體庫的圖片,也可以在此另外上傳。注意到在圖片屬性有個「替代文字」,其原本作用是在瀏覽器尚未完全呈現圖片的時候,先顯示這個文字幫助瀏覽者更快瞭解圖片內容,或者甚至是在圖片因為種種原因無法在網頁顯示的情況下,,以這裡的文字作為替代。

在實務上剛好搜索引擎只能閱讀文字無法辨識圖片,一般在SEO搜索引擎優化會認為圖片加上替代文字說明是蠻好的做法:一方面,增加搜索引擎對於網頁內容的理解,另一方面在真的是要搜索圖片的場合,圖片替代文字剛好作為關鍵字的對象。

Elementskit ImageBox:快速建立圖片盒子並調整hover效果 5

四、標題與文字說明

插入圖片之後,接下來是「Body」內容文字的部分,在此輸入標題和敘述。

Elementskit ImageBox:快速建立圖片盒子並調整hover效果 7

五、下載連結按鈕

第三個部分是「Button」按鈕,在此可選擇是否要呈現按鈕,接著是維護名稱、超連結、按鈕圖示。

Elementskit ImageBox:快速建立圖片盒子並調整hover效果 9

六、游標Hover效果

先前步驟都是屬於小工具「內容」的操作,設定好了之後,在最上方的功能頁籤切換到「樣式」。依照贊贊小屋經驗,這裡有一個也許會想要調整的地方,圖片盒子它預設圖片在游標停留的時候會有圖片放大的效果。在一般情況也許會希望圖片維持不動,此時可以在圖片項下有個「Normal」正常和「Hover」停留的設定區塊。正常是指在游標沒有停留在圖片時的顯示方式,而停留當然就是當滑鼠游標停留在圖片上的效果。注意到預設值是「1.1」,也就是當滑鼠游標移動到圖片的時候,圖片會有放大1.1倍的動畫效果。如果不需要的話將它調整成「1」,如此圖片不會有放大的動畫效果。

Elementskit ImageBox:快速建立圖片盒子並調整hover效果 11

七、網頁設計成果

最後看一下網頁呈現的成果,所謂的圖片盒子是有個大幅圖片,下面是關於這個圖片的標題跟描述,最下方還有一個超連結或者是動作按鈕,贊贊小屋是用來作為Excel檔案下載的網頁內容,讀者可依照自己需求應用在不同場合。

Elementskit ImageBox:快速建立圖片盒子並調整hover效果 13

ElementsKit ImageBox工具

所謂的圖片盒子就是把幾個基本的小工具組合起來,預設適當的版面配置和動作效果,熟悉Elementor編輯器的讀者其實也可以自己新建容器,然後添加小工具達到相同效果。ElementsKit ImageBox主要是達到了簡單和整合的作用。所以如果熟悉Elementor基本的各項操作,有些時候不需要其他的輔助外掛也能夠實現複雜效果,以上贊贊小屋個人心得供讀者參考。

最新文章: