如何使用Elementor的Flip Box功能

Flip Box翻譯過來的意思就是翻轉的盒子，這是一個比較有趣的前端頁面設計特效，它的表現形式是當鼠標移動到Flip Box內容上的時候，該內容塊會翻轉，將后面的文字或者其他內容展示到前端來顯示。這樣的特效好處就在于讓網頁內容不再顯得那么呆板，有更多的新鮮感讓訪客體驗，而這體驗感的好壞取決于我們對Flip Box功能的自定義個性化設置。所以還是那句老話，工具不是萬能的，如何利用好Flip Box來吸引訪客的眼光是一門學問。接下來，Jack老師就和同學們一起學習?如何使用Elementor的Flip Box功能 。

第一步：將Elementor編輯器的Flip Box功能元素添加到內容編輯版塊

如上圖所示，我們在左側的Elementor編輯器中找到箭頭1所指的“Price Table”功能元素，然后按住鼠標左鍵不松開，慢慢的拖到上圖箭頭2所指的地方，也就是內容編輯版塊中。注意在沒有將Price Table添加到內容編輯版塊區域之前，內容編輯版塊外面是一個灰色的虛線框，只有當出現了一個藍色的虛線外邊框之后才代表著我們已經成功的將Price Table功能元素添加到了內容編輯版塊中！

第二步：對Elementor編輯器的Flip Box功能元素進行主體功能設置

Flip Box的主體功能分為三大版塊，分別是Front、Back和Setting。我們先從Front這個版塊說起，Front板塊有兩個子內容版塊，分別是Content和Background，對應的就是Flip Box的前后內容。

2.1、“Content Graphic Element”：指的是內容圖形元素，有兩種選擇，一種是Elementor的內置圖標庫也就是icon，就是上圖中的五角星，如果不喜歡五角星圖案那就點擊它進行圖標替換。還有一種就是選擇圖片進行上傳，點擊Graphic Element選項中間的圖片按鈕（右邊第二個），然后在wordpress的媒體庫或者自己本地電腦上傳對應圖片進行替換

2.2“View”：指的是圖標的附屬顯示效果，有三種顯示方式，下面是這三種不同顯示方式的截圖

上圖的三種顯示效果分別對應的是：default、stacked、framed

2.3、“Shape”：指的是圖標外面的外邊框樣式，有circle和square兩種方式，分別對應的是圓形外框和方形外框兩種效果

2.4、“Title”：指的是圖標下面的顯示標題文字

2.5、“Description”：指的是圖標下面的描述部分文字

講完了front的content，外面再來回頭說說front的background，也就是前部內容的背景，注意這里的背景不要和后面的back版塊內容混淆！

注意background和content不一樣，它只能添加背景圖片而不能添加icon圖標，或者你也可以選擇只用純色色塊作為背景，點擊“顏色”選項，然后選擇你需要的顏色即可！

2.6、“位置”：指的是圖片的對齊位置，有中心居中，底部居中，頂部居左等等多種對齊方式可供我們進行選擇

2.7、“附件”：這個是翻譯的問題，大意是說這個圖片的位置是否隨頁面上下滾動而發生移動，所以它有兩種方式，一種是固定不動，還有一種是滾動狀態

2.8、“重復”：有時候我們會遇到這樣一個問題，圖片的尺寸小于Flip Box的預設尺寸，那么咋辦？在重復選項中，我們可以選擇重復功能，這樣就可以完全填充完整Flip Box的預設內容顯示區塊。

2.9、“尺寸”：指的是圖片的顯示大小形式，最關鍵的是覆蓋和包含兩個選項，這種情況一般是上傳的圖片大小超過了Flip Box預設內容顯示大小的時候才會進行操作

注意：以上四點如果在你最開始選擇了以純色色塊作為background的背景填充的話是不會出現的，只有當你選擇了圖片為背景的時候才會出現

2.10、“Background Overlay”：指的是背景圖片的覆蓋圖層，這個覆蓋圖層也是純色的，你可以選擇自己需要的覆蓋圖層顏色，但是你必須去調整覆蓋圖層的透明度，否則就會直接覆蓋掉背景圖片。

2.11、“Css過濾器”：是對背景內容的調整，包括對比度、色調、模糊等多個選項

2.12、“Blend Mode”：指的是背景圖片和覆蓋圖層之間的混合模式，同學們如果有ps基礎的話就比較好理解這里的相關設定

講完了Flip Box功能元素的Front這個主體第一版塊，我們再來說說Flip Box的第二個主體功能版塊—Back

Back的功能設置基本和Front差不多，因為Flip Box本質上就是一個版塊的前后兩個版面嘛。所以為了節省篇幅，在Back版塊中很多功能如果和上面的Front版塊有重復的我就不再一一講解了，見諒！

我們看back和front的兩個界面的content對比，front多了一個icon而back多了一個button，這也就充分說明了，Elementor編輯器的開發團隊設置Flip Box這個功能元素的目的就是想在前端展示的時候用icon或者圖像吸引客戶的眼光，然后等訪客的鼠標懸停在Flip Box上的時候，因為翻轉到了后面的back內容，用click按鈕的形式引導該客戶進行轉換。

所以我們在上圖中的“Button Text”中需要設置按鈕文字，在“Link”中添加需要跳轉的頁面URL，甚至是詢盤表單彈窗。至于back版塊的background部分和上面front的background基本是沒有區別的，所以這里省略500字。我們接著來看Flip Box主體功能設置的最后一個項目—Setting

2.13、“Height”：指的是整個Flip Box的顯示高度

2.14、“Border Radius”：指的是整個Flip Box版塊4個直角邊的圓弧程度，數值越大越圓潤，甚至可以達到整個Flip Box變成圓形的效果

2.15、“Flip Effect”：指的是Flip Box的整體翻轉效果，有Flip、Fade、Push、Zoom In、Zoom Out和Fade6種特效，很有意思哦，同學們多去嘗試一下

2.16、“Flip Direction”：指的是Flip Box的旋轉方向，注意這個只針對上述特效中的幾個項目，并不是所有的特效效果都會有這個選項的

2.17、“3D Depth”：指的是Flip Box的3D特效，讓不同的圖層內容以3D的效果進行翻轉。（設置這個要有比較好的美工功底，不然設置出來的東西會很難看）

至此為止，Flip Box的主體功能部分已經全部講解完畢了，我們再對Flip Box功能元素的樣式部分進行設置和講解

第三步：對Elementor編輯器的Flip Box功能元素進行樣式功能設置

3.1、“padding”：指的是前端的圖標、標題和描述文字的內距，也就是與Flip Box這個版塊內容4個邊角線的距離

3.2、“Alignment”：指的是上面說的這三個主體內容的水平對齊方式

3.3、“Vertical Position”：指的是上面說的這是哪個主體內容的垂直對齊方式

3.4、“邊框類型”：指的是整個Flip Box的邊框線類型。假設我們選擇了實線，那么我們還可以對邊框線顏色和粗細進行相關的設置

3.5、“Icon Spacing”：指的是圖標的空間距離

3.6、“Primary Color”：指的是圖標的外邊框線或者外邊框圖形的顏色，就是前面看到的五角星外面的圓圈和背景圓形的顏色設置

3.7、“Secondary Color”：指的就是圖標本身的顏色，也就是五角星的顏色

3.8、“Icon Size”：指的就是圖標的整體大小尺寸

3.9、“Icon Padding”：指的是圖標的內間距大小，設置這項數值的時候，直觀的感受就是五角星距離外面的圓圈變大，也就是五角星尺寸沒變，外面的圓半徑變大了

3.10、“Icon Rotate”：指的就是圖標的旋轉角度大小

3.11、“Border Radius”：指的是圖標外邊框或者外背景的4個角圓潤程度

3.12、“Title Spacing”：指的就是標題文字和圖標之間的相對距離

3.13、“Text Color”：指的就是標題的文字顏色，后面的描述文字顏色和排版就不講了，太簡單

講完了Flip Box樣式設置中的front設置部分，接下來我們對最后一個環節，Flip Box樣式的back部分進行講解

3.14、“Padding”：指的是背部的標題、文字描述和按鈕的內部間距距離

3.15、“Alignment”：指的是背部主體內容的水平對齊方式

3.16、“Vertical Position”：指的是背部主體內容的垂直對齊方式

3.17、“邊框類型”：指的是Flip Box背部的整體內容外邊框線類型，選擇之后還可以對邊框線粗細和顏色進行設置

3.18、“Title”和“Description”兩個項目的功能設置是一樣的所有合并在一起講解，spacing指的就是標題、文字描述和按鈕之間的相互間隔距離。排版就不說了，實在是說的次數太多了

3.19、“Button Size”：指的是按鈕尺寸的大小，系統有預設5個不同的尺寸

3.20、“排版”：這里的排版只作用于按鈕本身，對之前的標題和文字描述并不會產生影響

3.21、“Normal”和“Hover”：指的是鼠標懸停在按鈕上的不同效果，這個功能設置在之前的文章中也多次提到，這里不再贅述

3.22、“Text Color”：指的是按鈕上的文字顏色

3.23、“Background Color”：指的是按鈕的背景顏色

3.24、“Border Color”：指的是按鈕的外邊框線顏色

3.25、“Border Width”：指的是按鈕的外邊框線粗細

3.26、“Border Radius”：指的是按鈕的外邊框4個直角的圓弧程度

好了，到此為止本章關于?如何使用Elementor的Flip Box功能?的全部內容就講解完畢了。Flip Box作為一款功能類似翻蓋盒子的網站編輯元素，以其獨特的展示效果和頁面體驗能夠讓訪客對預設定的內容更加的關注，從而提升頁面的點擊轉化率！

如果還有不理解的地方，請使用百度或者谷歌瀏覽器搜索關鍵詞--“Jack外貿建站”，排名首頁首位的就是我的網站，網站上有更多外貿建站、谷歌SEO優化、外貿客戶開發等實操干貨內容在等著你哦!

來源：Jack SEO

來源：喜運達

加入賣家交流群
快速對接各種平臺優質資源

標簽：便宜的國際快運國際 快遞泰國進口貨運孟加拉物流專線寄泰國用什么物流公司便宜寧波到菲律賓海運幾天中國到菲律賓的快遞了俄羅斯物流物流至泰國東莞市雙惠物流