如何使用Elementor的Flip Box功能

如何使用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