号召性用语小部件(专业版)

号召性用语小部件是一种用于创建结合了图像、一些文本和按钮的漂亮框的工具。该小部件使用动画和 CSS 效果来创建用户交互,当用户将鼠标悬停在框上时会出现这些交互。https://www.youtube.com/embed/HySVfkbRvGo?feature=oembed


内容 #

图片 #

  1. 皮肤:选择经典皮肤或封面皮肤
  2. 布局:( 仅针对经典皮肤显示)将图像向左、向右或在图像顶部对齐

如果选择经典皮肤,则以下选项可用:

内容 #

  1. 图形元素:在无、图像或图标之间选择以在号召性用语标题上方显示图形元素
  2. 如果选择图像作为图形元素:
    选择图像:选择或上传图像
    图像大小:设置图像的大小,从缩略图到完整,或设置自定义大小。
  3. 如果选择 Icon 作为图形元素:
    Icon : 从 FontAwesome 库中选择一个图标
    View : 选择默认图标视图,或选择 Stacked 或 Framed。
  4. 标题和说明:选择出现在翻盖盒前面的标题和说明
  5. 标题 HTML 标记:将标题的 HTML 标记设置为 H1-H6、Div 或 Span
  6. 按钮文本:输入要在按钮上显示的文本
  7. 链接:输入按钮链接的 URL。单击链接选项 cog以将 rel=nofollow 添加到链接或在新窗口中打开链接。

丝带 #

标题:输入要在功能区上显示的文本。


风格 #

盒子 #

  1. 分钟。高度– 设置整个盒子的最小高度
  2. 对齐 –将内容与框的左侧、中心或右侧对齐
  3. 垂直位置– 将内容与框的顶部、中心或底部对齐
  4. 填充 –设置内容的填充

图片

  1. 分钟。宽度:设置图像的最小宽度
  2. 分钟。高度:设置图像的最小高度

内容 #

标题

  1. 排版:设置标题的排版选项
  2. 间距:设置标题和描述之间的间距

描述

  1. 排版:设置标题的排版选项
  2. Spacing:设置描述和按钮之间的空间量

颜色

  1. 背景颜色:选择背景颜色
  2. 标题颜色:选择标题颜色
  3. 描述颜色:选择描述颜色
  4. 按钮颜色:选择按钮颜色

按钮 #

  1. 尺寸:选择按钮尺寸,从超小到超大
  2. 文本颜色:选择按钮文本的颜色
  3. 背景 颜色:选择按钮背景的颜色
  4. 边框颜色:选择按钮边框的颜色
  5. 边框宽度:设置边框宽度
  6. Border Radius : 设置边框半径来控制圆角圆度

丝带 #

  1. 背景颜色:选择功能区背景的颜色
  2. 文本颜色:选择功能区文本的颜色
  3. 距离:在 0-50 之间移动滑块以设置功能区的距离。
  4. 排版:设置功能区标题的排版选项
  5. 盒子阴影:设置功能区的盒子阴影设置

悬停效果 #

  1. 顺序动画:选择文本元素的动画是顺序显示还是同时显示
  2. 悬停动画:选择图像的悬停动画:放大或缩小,或向左、向右、向上或向下移动

以下项目可以独立设置为正常悬停状态

  1. 叠加颜色:选择图像的叠加颜色
  2. CSS Filters : 设置图像的模糊、亮度、对比度和饱和度
  3. 混合模式:(对于正常状态)设置混合模式
  4. Transition Duration (ms) : (For Hover state) 设置悬停效果的持续时间

如果选择了Cover Skin,则可以使用以下选项:

内容 #

  1. 图形元素:在无、图像或图标之间选择以在号召性用语标题上方显示图形元素
  2. 如果选择图像作为图形元素:
    选择图像:选择或上传图像
    图像大小:设置图像的大小,从缩略图到完整,或设置自定义大小。
  3. 如果选择 Icon 作为图形元素:
    Icon : 从 FontAwesome 库中选择一个图标
    View : 选择默认图标视图,或选择 Stacked 或 Framed。
  4. 标题和说明:选择出现在翻盖盒前面的标题和说明
  5. 标题 HTML 标记:将标题的 HTML 标记设置为 H1-H6、Div 或 Span
  6. 按钮文本:输入要在按钮上显示的文本
  7. 链接:输入按钮链接的 URL。单击链接选项 cog 以将 rel=nofollow 添加到链接或在新窗口中打开链接。

丝带 #

标题:输入要在功能区上显示的文本。

风格 #

盒子 #

  1. 分钟。height:设置整个盒子的最小高度
  2. Alignment : 将内容与框的左、中或右对齐
  3. 垂直位置:将内容与框的顶部、中心或底部对齐
  4. 填充:设置内容的填充

内容 #

标题

  1. 排版:设置标题的排版选项
  2. 间距:设置标题和描述之间的间距

颜色

  1. 标题颜色:选择标题颜色
  2. 按钮颜色:选择按钮颜色

按钮 #

  1. 尺寸:选择按钮尺寸,从超小到超大
  2. 排版:设置按钮文本的排版选项
  3. 文本 颜色:选择按钮文本的颜色
  4. 背景 颜色:选择按钮背景的颜色
  5. 边框颜色:选择按钮边框的颜色
  6. 边框宽度:设置边框宽度
  7. Border Radius : 设置边框半径来控制圆角圆度

丝带 #

  1. 背景颜色:选择功能区背景的颜色
  2. 文本颜色:选择功能区文本的颜色
  3. 距离:在 0-50 之间移动滑块以设置功能区的距离。
  4. 排版:设置功能区标题的排版选项
  5. 盒子阴影:设置 功能区的框阴影
     设置

悬停效果 #

内容

  1. 悬停动画:选择图像的悬停动画:放大或缩小,或向左、向右、向上或向下移动
  2. 动画持续时间:设置动画完成所需的时间
  3. 顺序动画:选择文本元素的动画是顺序显示还是同时显示

背景

  1. 悬停动画:选择图像的悬停动画:放大或缩小,或向左、向右、向上或向下移动
  2. 叠加颜色:选择正常和悬停的叠加颜色
  3. CSS Filters : 设置图像的模糊、亮度、对比度和饱和度
  4. 混合模式:(对于正常状态)设置图像的混合模式
  5. Transition Duration (ms) : (For Hover state) 设置悬停效果的持续时间 

先进的 #

设置适用于此小部件的高级选项

Powered by BetterDocs

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top