如何使用Elementor的Flip Box功能

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

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

如上圖所示，我們?cè)谧髠?cè)的Elementor編輯器中找到箭頭1所指的“Price Table”功能元素，然后按住鼠標(biāo)左鍵不松開(kāi)，慢慢的拖到上圖箭頭2所指的地方，也就是內(nèi)容編輯版塊中。注意在沒(méi)有將Price Table添加到內(nèi)容編輯版塊區(qū)域之前，內(nèi)容編輯版塊外面是一個(gè)灰色的虛線框，只有當(dāng)出現(xiàn)了一個(gè)藍(lán)色的虛線外邊框之后才代表著我們已經(jīng)成功的將Price Table功能元素添加到了內(nèi)容編輯版塊中！

第二步：對(duì)Elementor編輯器的Flip Box功能元素進(jìn)行主體功能設(shè)置

Flip Box的主體功能分為三大版塊，分別是Front、Back和Setting。我們先從Front這個(gè)版塊說(shuō)起，F(xiàn)ront板塊有兩個(gè)子內(nèi)容版塊，分別是Content和Background，對(duì)應(yīng)的就是Flip Box的前后內(nèi)容。

2.1、“Content Graphic Element”：指的是內(nèi)容圖形元素，有兩種選擇，一種是Elementor的內(nèi)置圖標(biāo)庫(kù)也就是icon，就是上圖中的五角星，如果不喜歡五角星圖案那就點(diǎn)擊它進(jìn)行圖標(biāo)替換。還有一種就是選擇圖片進(jìn)行上傳，點(diǎn)擊Graphic Element選項(xiàng)中間的圖片按鈕（右邊第二個(gè)），然后在wordpress的媒體庫(kù)或者自己本地電腦上傳對(duì)應(yīng)圖片進(jìn)行替換

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

上圖的三種顯示效果分別對(duì)應(yīng)的是：default、stacked、framed

2.3、“Shape”：指的是圖標(biāo)外面的外邊框樣式，有circle和square兩種方式，分別對(duì)應(yīng)的是圓形外框和方形外框兩種效果

2.4、“Title”：指的是圖標(biāo)下面的顯示標(biāo)題文字

2.5、“Description”：指的是圖標(biāo)下面的描述部分文字

講完了front的content，外面再來(lái)回頭說(shuō)說(shuō)front的background，也就是前部?jī)?nèi)容的背景，注意這里的背景不要和后面的back版塊內(nèi)容混淆！

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

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

2.7、“附件”：這個(gè)是翻譯的問(wèn)題，大意是說(shuō)這個(gè)圖片的位置是否隨頁(yè)面上下滾動(dòng)而發(fā)生移動(dòng)，所以它有兩種方式，一種是固定不動(dòng)，還有一種是滾動(dòng)狀態(tài)

2.8、“重復(fù)”：有時(shí)候我們會(huì)遇到這樣一個(gè)問(wèn)題，圖片的尺寸小于Flip Box的預(yù)設(shè)尺寸，那么咋辦？在重復(fù)選項(xiàng)中，我們可以選擇重復(fù)功能，這樣就可以完全填充完整Flip Box的預(yù)設(shè)內(nèi)容顯示區(qū)塊。

2.9、“尺寸”：指的是圖片的顯示大小形式，最關(guān)鍵的是覆蓋和包含兩個(gè)選項(xiàng)，這種情況一般是上傳的圖片大小超過(guò)了Flip Box預(yù)設(shè)內(nèi)容顯示大小的時(shí)候才會(huì)進(jìn)行操作

注意：以上四點(diǎn)如果在你最開(kāi)始選擇了以純色色塊作為background的背景填充的話是不會(huì)出現(xiàn)的，只有當(dāng)你選擇了圖片為背景的時(shí)候才會(huì)出現(xiàn)

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

2.11、“Css過(guò)濾器”：是對(duì)背景內(nèi)容的調(diào)整，包括對(duì)比度、色調(diào)、模糊等多個(gè)選項(xiàng)

2.12、“Blend Mode”：指的是背景圖片和覆蓋圖層之間的混合模式，同學(xué)們?nèi)绻衟s基礎(chǔ)的話就比較好理解這里的相關(guān)設(shè)定

講完了Flip Box功能元素的Front這個(gè)主體第一版塊，我們?cè)賮?lái)說(shuō)說(shuō)Flip Box的第二個(gè)主體功能版塊—Back

Back的功能設(shè)置基本和Front差不多，因?yàn)镕lip Box本質(zhì)上就是一個(gè)版塊的前后兩個(gè)版面嘛。所以為了節(jié)省篇幅，在Back版塊中很多功能如果和上面的Front版塊有重復(fù)的我就不再一一講解了，見(jiàn)諒！

我們看back和front的兩個(gè)界面的content對(duì)比，front多了一個(gè)icon而back多了一個(gè)button，這也就充分說(shuō)明了，Elementor編輯器的開(kāi)發(fā)團(tuán)隊(duì)設(shè)置Flip Box這個(gè)功能元素的目的就是想在前端展示的時(shí)候用icon或者圖像吸引客戶的眼光，然后等訪客的鼠標(biāo)懸停在Flip Box上的時(shí)候，因?yàn)榉D(zhuǎn)到了后面的back內(nèi)容，用click按鈕的形式引導(dǎo)該客戶進(jìn)行轉(zhuǎn)換。

所以我們?cè)谏蠄D中的“Button Text”中需要設(shè)置按鈕文字，在“Link”中添加需要跳轉(zhuǎn)的頁(yè)面URL，甚至是詢盤(pán)表單彈窗。至于back版塊的background部分和上面front的background基本是沒(méi)有區(qū)別的，所以這里省略500字。我們接著來(lái)看Flip Box主體功能設(shè)置的最后一個(gè)項(xiàng)目—Setting

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

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

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

2.16、“Flip Direction”：指的是Flip Box的旋轉(zhuǎn)方向，注意這個(gè)只針對(duì)上述特效中的幾個(gè)項(xiàng)目，并不是所有的特效效果都會(huì)有這個(gè)選項(xiàng)的

2.17、“3D Depth”：指的是Flip Box的3D特效，讓不同的圖層內(nèi)容以3D的效果進(jìn)行翻轉(zhuǎn)。（設(shè)置這個(gè)要有比較好的美工功底，不然設(shè)置出來(lái)的東西會(huì)很難看）

至此為止，F(xiàn)lip Box的主體功能部分已經(jīng)全部講解完畢了，我們?cè)賹?duì)Flip Box功能元素的樣式部分進(jìn)行設(shè)置和講解

第三步：對(duì)Elementor編輯器的Flip Box功能元素進(jìn)行樣式功能設(shè)置

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

3.2、“Alignment”：指的是上面說(shuō)的這三個(gè)主體內(nèi)容的水平對(duì)齊方式

3.3、“Vertical Position”：指的是上面說(shuō)的這是哪個(gè)主體內(nèi)容的垂直對(duì)齊方式

3.4、“邊框類型”：指的是整個(gè)Flip Box的邊框線類型。假設(shè)我們選擇了實(shí)線，那么我們還可以對(duì)邊框線顏色和粗細(xì)進(jìn)行相關(guān)的設(shè)置

3.5、“Icon Spacing”：指的是圖標(biāo)的空間距離

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

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

3.8、“Icon Size”：指的就是圖標(biāo)的整體大小尺寸

3.9、“Icon Padding”：指的是圖標(biāo)的內(nèi)間距大小，設(shè)置這項(xiàng)數(shù)值的時(shí)候，直觀的感受就是五角星距離外面的圓圈變大，也就是五角星尺寸沒(méi)變，外面的圓半徑變大了

3.10、“Icon Rotate”：指的就是圖標(biāo)的旋轉(zhuǎn)角度大小

3.11、“Border Radius”：指的是圖標(biāo)外邊框或者外背景的4個(gè)角圓潤(rùn)程度

3.12、“Title Spacing”：指的就是標(biāo)題文字和圖標(biāo)之間的相對(duì)距離

3.13、“Text Color”：指的就是標(biāo)題的文字顏色，后面的描述文字顏色和排版就不講了，太簡(jiǎn)單

講完了Flip Box樣式設(shè)置中的front設(shè)置部分，接下來(lái)我們對(duì)最后一個(gè)環(huán)節(jié)，F(xiàn)lip Box樣式的back部分進(jìn)行講解

3.14、“Padding”：指的是背部的標(biāo)題、文字描述和按鈕的內(nèi)部間距距離

3.15、“Alignment”：指的是背部主體內(nèi)容的水平對(duì)齊方式

3.16、“Vertical Position”：指的是背部主體內(nèi)容的垂直對(duì)齊方式

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

3.18、“Title”和“Description”兩個(gè)項(xiàng)目的功能設(shè)置是一樣的所有合并在一起講解，spacing指的就是標(biāo)題、文字描述和按鈕之間的相互間隔距離。排版就不說(shuō)了，實(shí)在是說(shuō)的次數(shù)太多了

3.19、“Button Size”：指的是按鈕尺寸的大小，系統(tǒng)有預(yù)設(shè)5個(gè)不同的尺寸

3.20、“排版”：這里的排版只作用于按鈕本身，對(duì)之前的標(biāo)題和文字描述并不會(huì)產(chǎn)生影響

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

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

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

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

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

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

好了，到此為止本章關(guān)于?如何使用Elementor的Flip Box功能?的全部?jī)?nèi)容就講解完畢了。Flip Box作為一款功能類似翻蓋盒子的網(wǎng)站編輯元素，以其獨(dú)特的展示效果和頁(yè)面體驗(yàn)?zāi)軌蜃屧L客對(duì)預(yù)設(shè)定的內(nèi)容更加的關(guān)注，從而提升頁(yè)面的點(diǎn)擊轉(zhuǎn)化率！

如果還有不理解的地方，請(qǐng)使用百度或者谷歌瀏覽器搜索關(guān)鍵詞--“Jack外貿(mào)建站”，排名首頁(yè)首位的就是我的網(wǎng)站，網(wǎng)站上有更多外貿(mào)建站、谷歌SEO優(yōu)化、外貿(mào)客戶開(kāi)發(fā)等實(shí)操干貨內(nèi)容在等著你哦!