翻转框组件可以吸引您的网站访问者的注意力，从而为您的网站内容添加一个有趣的交互式鼠标悬停效果。有趣的与访客互动交互，将使您的用户在您的站点上停留更长时间并进行互动。

点击查看”示例和视频操作” >>

1，如何插入设计组件

只需从左侧的组件控制面板【基础组件】中 ，选中组件后点击鼠标左键拽住并拖放到编辑面板处即可，如下图所示

为了易于理解及操作，下面的操作我们只说明常用的内容和样式设置，因为并不是每一个选项都是我们设计的时候需要用到的。

2，内容选项卡

2.1，正面-模块设置如下图 ，可看到有两个选项卡“内容” 与“背景”， 你可以在这两个选项卡中去设置 翻转框“正面” 的内容与背景。

(1)如下图黑色块的“内容”选项卡中，您可以参照下图提示，填写相应的标题与描述。

(2) 如下图黑色块的“背景”选项卡中 ,给翻转框“正面”设置背景，操作如下图，你可以设置背景颜色，渐变色，背景。

2.2，背面-模块设置如下图 ，可看到有两个选项卡“内容” 与“背景” ，它的设置其实和正面模块的设置一样。就是设置鼠标悬停时翻转框背面显示的内容。

2.3，设置-模块设置如下图，可设置 ”高度”,”边框圆角”，“翻转动画”及“动画方向”。具体您可查看视频操作或组件示例

3，样式选项卡

3.1，正面-模块设置, 样式设置翻转框“正面”内间距，对齐方向，垂直位置，标题字体，描述字体等。   请参考下图或观看视频操作。

3.1，反面-模块设置, 样式设置翻转框“反向”内间距，对齐方向，垂直位置，标题字体，描述字体等。   请参考下图或观看视频操作。

恭喜你已完成当前组件的学习，感谢阅读。