号召性用语小部件是一种用于创建结合了图像、一些文本和按钮的漂亮框的工具。该小部件使用动画和 CSS 效果来创建用户交互,当用户将鼠标悬停在框上时会出现这些交互。https://www.youtube.com/embed/HySVfkbRvGo?feature=oembed
内容 #
图片 #
- 皮肤:选择经典皮肤或封面皮肤
- 布局:( 仅针对经典皮肤显示)将图像向左、向右或在图像顶部对齐
如果选择经典皮肤,则以下选项可用:
内容 #
- 图形元素:在无、图像或图标之间选择以在号召性用语标题上方显示图形元素
- 如果选择图像作为图形元素:
选择图像:选择或上传图像
图像大小:设置图像的大小,从缩略图到完整,或设置自定义大小。 - 如果选择 Icon 作为图形元素:
Icon : 从 FontAwesome 库中选择一个图标
View : 选择默认图标视图,或选择 Stacked 或 Framed。 - 标题和说明:选择出现在翻盖盒前面的标题和说明
- 标题 HTML 标记:将标题的 HTML 标记设置为 H1-H6、Div 或 Span
- 按钮文本:输入要在按钮上显示的文本
- 链接:输入按钮链接的 URL。单击链接选项 cog以将 rel=nofollow 添加到链接或在新窗口中打开链接。
丝带 #
标题:输入要在功能区上显示的文本。
风格 #
盒子 #
- 分钟。高度– 设置整个盒子的最小高度
- 对齐 –将内容与框的左侧、中心或右侧对齐
- 垂直位置– 将内容与框的顶部、中心或底部对齐
- 填充 –设置内容的填充
图片
- 分钟。宽度:设置图像的最小宽度
- 分钟。高度:设置图像的最小高度
内容 #
标题
- 排版:设置标题的排版选项
- 间距:设置标题和描述之间的间距
描述
- 排版:设置标题的排版选项
- Spacing:设置描述和按钮之间的空间量
颜色
- 背景颜色:选择背景颜色
- 标题颜色:选择标题颜色
- 描述颜色:选择描述颜色
- 按钮颜色:选择按钮颜色
按钮 #
- 尺寸:选择按钮尺寸,从超小到超大
- 文本颜色:选择按钮文本的颜色
- 背景 颜色:选择按钮背景的颜色
- 边框颜色:选择按钮边框的颜色
- 边框宽度:设置边框宽度
- Border Radius : 设置边框半径来控制圆角圆度
丝带 #
- 背景颜色:选择功能区背景的颜色
- 文本颜色:选择功能区文本的颜色
- 距离:在 0-50 之间移动滑块以设置功能区的距离。
- 排版:设置功能区标题的排版选项
- 盒子阴影:设置功能区的盒子阴影设置
悬停效果 #
- 顺序动画:选择文本元素的动画是顺序显示还是同时显示
- 悬停动画:选择图像的悬停动画:放大或缩小,或向左、向右、向上或向下移动
以下项目可以独立设置为正常和悬停状态
- 叠加颜色:选择图像的叠加颜色
- CSS Filters : 设置图像的模糊、亮度、对比度和饱和度
- 混合模式:(对于正常状态)设置混合模式
- Transition Duration (ms) : (For Hover state) 设置悬停效果的持续时间
如果选择了Cover Skin,则可以使用以下选项:
内容 #
- 图形元素:在无、图像或图标之间选择以在号召性用语标题上方显示图形元素
- 如果选择图像作为图形元素:
选择图像:选择或上传图像
图像大小:设置图像的大小,从缩略图到完整,或设置自定义大小。 - 如果选择 Icon 作为图形元素:
Icon : 从 FontAwesome 库中选择一个图标
View : 选择默认图标视图,或选择 Stacked 或 Framed。 - 标题和说明:选择出现在翻盖盒前面的标题和说明
- 标题 HTML 标记:将标题的 HTML 标记设置为 H1-H6、Div 或 Span
- 按钮文本:输入要在按钮上显示的文本
- 链接:输入按钮链接的 URL。单击链接选项 cog 以将 rel=nofollow 添加到链接或在新窗口中打开链接。
丝带 #
标题:输入要在功能区上显示的文本。
风格 #
盒子 #
- 分钟。height:设置整个盒子的最小高度
- Alignment : 将内容与框的左、中或右对齐
- 垂直位置:将内容与框的顶部、中心或底部对齐
- 填充:设置内容的填充
内容 #
标题
- 排版:设置标题的排版选项
- 间距:设置标题和描述之间的间距
颜色
- 标题颜色:选择标题颜色
- 按钮颜色:选择按钮颜色
按钮 #
- 尺寸:选择按钮尺寸,从超小到超大
- 排版:设置按钮文本的排版选项
- 文本 颜色:选择按钮文本的颜色
- 背景 颜色:选择按钮背景的颜色
- 边框颜色:选择按钮边框的颜色
- 边框宽度:设置边框宽度
- Border Radius : 设置边框半径来控制圆角圆度
丝带 #
- 背景颜色:选择功能区背景的颜色
- 文本颜色:选择功能区文本的颜色
- 距离:在 0-50 之间移动滑块以设置功能区的距离。
- 排版:设置功能区标题的排版选项
- 盒子阴影:设置 功能区的框阴影
设置
悬停效果 #
内容
- 悬停动画:选择图像的悬停动画:放大或缩小,或向左、向右、向上或向下移动
- 动画持续时间:设置动画完成所需的时间
- 顺序动画:选择文本元素的动画是顺序显示还是同时显示
背景
- 悬停动画:选择图像的悬停动画:放大或缩小,或向左、向右、向上或向下移动
- 叠加颜色:选择正常和悬停的叠加颜色
- CSS Filters : 设置图像的模糊、亮度、对比度和饱和度
- 混合模式:(对于正常状态)设置图像的混合模式
- Transition Duration (ms) : (For Hover state) 设置悬停效果的持续时间
先进的 #
设置适用于此小部件的高级选项