翻转框小部件可帮助您创建动画框,一旦访客将鼠标悬停在它们上方,它们就会翻转到另一侧。 https://www.youtube.com/embed/gFYLYcwO3vs?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Felementor.com
内容 #
正面 #
内容
此选项卡控制翻盖盒正面的内容。
- 图形元素:在“无”、“图像”或“图标”之间进行选择,以在翻转框的前面显示图形元素
- 如果选择图像作为图形元素:
选择图像:选择或上传图像
图像大小:设置图像的大小,从缩略图到完整,或设置自定义大小 - 如果选择图标作为图形元素:
图标:从 FontAwesome 库中选择一个图标
视图:选择默认图标视图,或选择堆叠或框架
形状:如果选择堆叠或框架,请选择圆形或方形 - 标题和说明:选择出现在翻盖盒前面的标题和说明
背景
此选项卡控制翻盖盒正面的背景。
背景类型:选择颜色、图像或渐变作为翻转框正面的背景。
如果您选择Image Background,则以下选项可用:
- Position:选择图片的位置,如Top Center、Top Right、Center Center等。
- 附件:从默认、滚动或固定中选择
- 重复:从默认、不重复、重复、重复-x 或重复-y 中选择
- 尺寸:从默认、自动、封面或包含中选择
- 背景叠加:选择叠加的颜色
如果您选择渐变背景,则以下选项可用:
- 颜色:选择渐变的原色
- Location : 选择原色的位置
- 第二种 颜色:选择渐变的第二种颜色
- Location : 选择第二种颜色的位置
- 类型:选择线性或径向
- Angle:设置渐变的角度
后退 #
翻盖盒的背面与上面列出的正面具有相同的元素,除了只出现在正面的图形元素。背面还包括一个按钮。
- 按钮文本:选择按钮内显示的文本
- 链接:选择按钮指向的位置。链接需要包含整个URL(包括http/https)
- 将链接应用到: 选择将可点击链接应用到仅按钮或整个框
设置 #
- 高度:控制翻转框的高度
- Border Radius:设置翻转框的边框半径,使其边角变圆
- 翻转效果:在翻转效果之间进行选择,包括翻转、滑动、推动、放大、缩小或淡入淡出
- 翻转方向:如果您选择翻转或滑动效果,您可以让翻转框向右、向左、向上或向下翻转
- 3D Depth: 滑动到 On 为翻转框提供 3D 动画效果
注意:Safari 浏览器与移动设备上的 3D 深度效果部分不兼容。如果使用 3D 深度,部分翻转框可能会通过导航菜单下拉菜单显示。由于 Safari 无法支持此选项,因此无法在 IOS 中使用 3D 翻转框小部件和导航菜单小部件。在这种情况下,我们建议使用“响应”>“可见性”部分的“高级”选项卡中的“隐藏部分”选项修改移动设备的内容。
风格 #
前面 #
- Padding : 给翻盖盒正面的内容区域添加内边距
- Alignment:选择将翻转框内容对齐到翻转框的左侧、右侧或中心
- Vertical Position : 将翻转框的内容与翻转框的顶部、中心或底部对齐
- 边框类型:为整个翻转框设置边框
- Width:如果选择了边框类型,则设置边框的宽度
- 颜色:如果选择了边框类型,请选择边框颜色
图标
- Spacing:控制图标和标题之间的间距
- Primary Color : 选择图标的原色
- 次要颜色:选择图标的次要颜色
- 图标大小:选择图标的大小
- 图标填充:设置图标周围的填充量
- 图标旋转:将图标旋转到任意角度
- Border Width:设置图标边框的宽度
- Border Radius:设置图标边框的半径来控制圆角的圆度
图片
- Spacing:控制图片和标题之间的间距
- 不透明度:选择图像的不透明度
- 边框类型:选择图像的边框:无、纯色、双色、虚线、虚线或凹槽
- Border Radius : 控制图片边框的边框半径
标题
- 间距:控制标题和描述之间的间距
- 文字颜色:选择标题的颜色
- 排版:设置标题的排版设置
描述
- 文字颜色: 选择描述的颜色
- 排版: 设置描述的排版设置
背面 #
对于翻盖盒的背面,您可以获得前面列出的所有正面选项,减去图形元素设置。您还可以控制按钮设置。
按钮 #
- 尺寸:选择按钮的尺寸(特小、小、中大和特大)
- 排版:自定义按钮文本的排版
- 文字 颜色:选择按钮的文字颜色
- 背景颜色:选择按钮背景的颜色
- 边框颜色:控制按钮边框的颜色
- Border Width : 控制按钮边框的宽度
- Border Radius : 控制按钮的边框半径