创造性的CTA

在这篇文章中,我们将讨论创意CTA元素-非常适合在您的网站上调用行动。

  1. 设置
  2. 设计设置
  3. 文本设置
  4. 图形的设置
  5. 互动内容设置
  6. 粒子的设置
  7. 定制
  8. 演示
  9. 总结

创造性CTA元素在页面上添加了一个行动号召。要添加创造性的CTA元素,只需搜索“创意CTA”并拖动“创意CTA”到画布。

创意CTA添加

CTA代表行动呼吁

创意CTA前端

设置

设置控制组包含初始设置创造性CTA元素的选项。

创意CTA设置
  • 基本字体大小-使用此选项设置元素的基本字体。
  • 宽度和高度-使用这些选项来设置元素的宽度和高度。
  • 最小宽度和高度-使用这些选项来设置元素的最小宽度和高度。
  • 背景-使用此选项将元素的背景设置为正常和悬停模式。

链接设置由在创意CTA元素上有锚的必要控件组成。有三种可以设置的锚链接:

  • URL:使用此锚类型链接到一个网站或当前网站的另一个页面。
  • 电子邮件:使用此锚类型打开用户的邮件客户端并设置正确的电子邮件和主题。
  • 电话:使用此锚类型可添加电话号码。如果访问者使用的设备具有呼叫功能,则会打开已添加电话号码的电话界面。

URL

创意CTA链接URL

使URL链接设置的模式是通过单击链接图标。你会收到URL输入你可以添加你想要链接到的网站的URL。的预览input将显示它将如何添加到实际的HTML代码中。检查新标签页如果您希望在新的浏览器选项卡中打开该链接,请选中复选框。检查nofollow如果您不希望搜索引擎嗅探该链接,请选中复选框。的nofollow通常当我们链接到外部网站时使用。

电子邮件

创意CTA链接电子邮件

使电子邮件链接设置的模式是通过单击信封图标。将电子邮件地址添加到电子邮件输入和主题的电子邮件进入主题输入。的预览input显示如何在HTML中添加链接。点击带有电子邮件设置的链接将打开访问者的电子邮件客户端软件,并将填写收件人电子邮件地址和电子邮件主题。

电话

创意CTA链接电子邮件

使电话链接设置的模式是通过单击电话图标。将电话号码添加到电话输入。的预览input显示如何在HTML中添加链接。如果用户拥有具有该功能的设备,则单击带有电话设置的链接将打开用户设备的电话拨号器屏幕。

Flexbox

Flexbox部分包含使用CSS Flexbox显示设置Creative CTA位置的控件。

创意CTA Flexbox
  • 孩子的位置:使用此选项来决定创意CTA元素的项目应该垂直(列)还是水平(行)布局。
  • 反向:启用此选项将导致创造性CTA元素以相反的方式铺设。
  • 包装:当较小的设备中没有足够的空间时,启用此选项来包装创造性CTA元素。
  • 水平对齐:使用此选项可以水平布局创造性CTA元素。
  • 垂直对齐:使用此选项可以垂直布局创意CTA元素。

点击在这里有关Flexbox显示器的更多信息。

设计设置

创意CTA元素中的设计设置由控制组组成,用于微调元素设计。

保证金

使用此选项可设置创意CTA的边距。您可以更改创意CTA的所有方面的设置或单独修改它们。

创造性的CTA元素边际

填充

使用此选项可设置创造性CTA的填充。您可以更改创意CTA的所有方面的设置或单独修改它们。

创造性的CTA元素填充

边境

使用此选项可设置创意CTA的边界。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

创造性的CTA元素设置边界

边界半径

使用此选项可为创意CTA设置边界半径。你可以在所有边都设置曲线,也可以单独设置。

创造性的CTA元素设置边界半径

盒阴影

您可以使用盒子阴影控制组在创意CTA上设置阴影。

  • x-使用此选项在创意CTA中设置阴影的X偏移量。
  • y-使用此选项在创意CTA中设置阴影的Y偏移量。
  • 模糊-使用此选项在创意CTA中设置模糊效果的强度。
  • 传播和定位-使用此选项设置项目部分阴影的扩散量,并决定您想要阴影位于创意CTA内部还是外部。
  • 颜色-使用此选项设置创意CTA阴影的颜色。
创意CTA元素设置框阴影

文本设置

通过启用文本设置选项,您可以在创意CTA元素中的图标旁边设置文本。

创造性的CTA文本设置
  • 启用-使用此选项启用或禁用创造性CTA元素的文本部分。
  • 主要的文本-使用此选项添加创造性CTA元素的主要文本,显示为较大的字体。
  • 二级文本-使用此选项添加创造性CTA元素的次要文本,显示较小的字体。
  • 间隔和顺序—使用此选项设置主要文本和次要文本之间的间距。在标准模式下,主要文本在次要文本之上,但如果您检查反向选中复选框,则顺序将颠倒,次要文本将位于主要文本之上。
  • 交互-使用此选项可在悬停在创意CTA元素上时设置动画。动画选项是:
  • 没有一个
  • 幻灯片上
  • 幻灯片左
  • 张对吧
  • 幻灯片底部
  • 按比例增加
  • 按比例减少
  • 翻转X
  • 翻转Y
  • 溢出-检查隐藏的如果您想隐藏超出创造性CTA元素限制的文本,请选中复选框。

文本保证金

使用此选项可设置“创意CTA元素”文本区域的边距。您可以更改创造性CTA元素的所有方面的设置或单独修改它们。

创造性的CTA文本边缘

主要文本格式

您可以使用此控制组在“创意CTA元素”中设置主文本的格式。

创意CTA主要文本格式
  • 字体-使用此选项设置创造性CTA元素主文本的字体。
  • 字体粗细-使用此选项设置字体的粗细。这些值可能会根据所选字体以及所选字体是否支持权重而有所不同。
  • 字体大小—设置字体大小。
  • 字符间距—设置字母间距。
  • 行高-使用此选项设置每行之间的间距。
  • 字体样式-使用此选项决定是否要有一个正常的斜体风格。
  • 文本对齐-使用此选项设置文本的对齐方式。可能的值为中心正确的,证明
  • 文本装饰—强制下划线linethrough风格。
  • 文本转换—使用该选项设置文本的大小写。可用的选项有大写字母驼峰式大小写,小写字母
  • 文本颜色-使用此选项设置文本的颜色。
创意CTA主要文本格式

主文本阴影

主文本阴影控制组包含为Creative CTA Element主文本设置文本阴影的设置。

创意CTA主要文本阴影
  • x-使用此选项设置文本阴影的X偏移量。
  • y—使用此选项设置文本阴影的Y偏移量。
  • 模糊-使用此选项设置文本阴影中的模糊效果的强度。
  • 颜色-使用此选项设置文本阴影的颜色。

辅助文本格式

您可以使用此控制组在Creative CTA元素中设置辅助文本的格式。

  • 字体-使用此选项设置创造性CTA元素次要文本的字体。
  • 字体粗细-使用此选项设置字体的粗细。这些值可能会根据所选字体以及所选字体是否支持权重而有所不同。
  • 字体大小—设置字体大小。
  • 字符间距—设置字母间距。
  • 行高-使用此选项设置每行之间的间距。
  • 字体样式-使用此选项决定是否要有一个正常的斜体风格。
  • 文本对齐-使用此选项设置文本的对齐方式。可能的值为中心正确的,证明
  • 文本装饰—强制下划线linethrough风格。
  • 文本转换—使用该选项设置文本的大小写。可用的选项有大写字母驼峰式大小写,小写字母
  • 文本颜色-使用此选项设置文本的颜色。

辅助文本阴影

辅助文本阴影控制组包含为创造性CTA元素辅助文本设置文本阴影的设置。

  • x-使用此选项设置文本阴影的X偏移量。
  • y—使用此选项设置文本阴影的Y偏移量。
  • 模糊-使用此选项设置文本阴影中的模糊效果的强度。
  • 颜色-使用此选项设置文本阴影的颜色。

图形的设置

图形设置控制组为您提供了启用和设置创造性CTA元素的图形图标的选项。

创意CTA图形设置
  • 启用—使用此选项启用或禁用创意CTA元素的图标。
  • 类型-使用此选项决定是否创意CTA元素图形类型图标图像,或汉堡.根据图形类型的选择,将有不同的控制组。
  • Icon & Img互动-使用此选项在鼠标悬停时为创意CTA元素图形设置动画。可用的选项有:
  • 没有一个
  • 按比例增加
  • 按比例减少
  • 翻转X
  • 翻转Y

图形边缘

使用此选项可设置“创意CTA元素”图形的边距。您可以更改创造性CTA元素图形的所有侧面的设置或单独修改它们。

创意CTA图形边际

图形图标

使用此选项可微调创意CTA元素的图形图标。如果您将创意CTA元素的图形类型设置为图标,则此选项将显示。

创意CTA图形图标
  • 字体大小和次要-使用此选项设置创意CTA元素图形图标的基本字体,并检查二次如果你想将鼠标悬停在创造性CTA元素上时将图标更改为另一个图标,请选中复选框。
  • 宽度和高度-使用这些选项设置创意CTA元素图形图标的宽度和高度。
  • 小学和中学—使用此选项选择Creative CTA Element图形的主图标和辅助图标。选项将提供辅助选项二次中的复选框字体大小和次要选择。
  • 颜色-使用此选项设置创意CTA元素图标在正常和悬停模式的颜色。
  • 背景-使用此选项设置创意CTA元素图标的背景为正常和悬停模式。

图形图标边框

使用此选项可设置创意CTA元素图形图标的边框。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

创意CTA图形图标边界

图形图标边框半径

使用此选项可为创意CTA元素图形图标设置边框半径。你可以在所有边都设置曲线,也可以单独设置。

创意CTA图形图标边界半径

图形图标框阴影

您可以使用盒子阴影控制组在创意CTA元素图形图标上设置阴影。

创意CTA图形图标框阴影
  • x-使用此选项在创意CTA元素中设置阴影的X偏移量。
  • y-使用此选项在创意CTA元素中设置阴影的Y偏移量。
  • 模糊-使用此选项在创意CTA元素中设置模糊效果的强度。
  • 传播和定位-使用此选项设置项目部分阴影的扩散量,并决定您想要阴影位于创意CTA元素内部还是外部。
  • 颜色-使用此选项设置创意CTA元素阴影的颜色。

图形图标文本阴影

主文本阴影控制组包含为“创意CTA元素”图形图标设置文本阴影的设置。

创意CTA图形图标文本阴影
  • x-使用此选项设置文本阴影的X偏移量。
  • y—使用此选项设置文本阴影的Y偏移量。
  • 模糊-使用此选项设置文本阴影中的模糊效果的强度。
  • 颜色-使用此选项设置文本阴影的颜色。

图形图像

如果您选择图像作为图形类型,则会出现此选项。

  • 最大宽度-使用此选项设置“创意CTA元素”图形图像的最大宽度。

主图形图像

主图形图像控制组用于为创造性CTA元素图形设置图像。

  • 视网膜视网膜支持开箱即用。单击Eye以禁用Retina支持。还支持设置图像宽度和高度的选项。
  • —待使用的镜像。点击从WordPress媒体库中选择图片或上传新图片。
  • Alt文本-图像的替代文本。确保为屏幕阅读器设置这个!

辅助图形图像

次要图形图像控制组用于在悬停时为创造性CTA元素图形设置图像。除启用/禁用复选框外,控制组具有与主图形图像相同的选项。

互动内容设置

创意CTA元素改变它的内容和图形,而使用悬停在元素上。以下选项用于微调悬浮模式中的元素。

创意CTA互动内容设置
  • 启用-使用此选项可启用或禁用创意CTA元素的交互式文本部分。
  • 主要的文本-使用此选项添加创造性CTA元素的交互式主文本,该文本显示为较大的字体。
  • 二级文本-使用此选项添加创造性CTA元素的交互式次要文本,显示较小的字体。
  • 间隔和顺序-使用此选项设置交互式主文本和交互式辅助文本之间的间距。在标准模式下,交互式主要文本在交互式辅助文本之上,但如果您检查反向选中复选框,顺序将颠倒,交互式辅助文本将位于交互式主要文本之上。
  • 交互-使用此选项可在悬停在创意CTA元素上时设置动画。

交互式主图形图像

交互式主图形图像控制组用于在悬停时为创意CTA元素图形设置图像。

  • 视网膜视网膜支持开箱即用。单击Eye以禁用Retina支持。还支持设置图像宽度和高度的选项。
  • —待使用的镜像。点击从WordPress媒体库中选择图片或上传新图片。
  • Alt文本-图像的替代文本。确保为屏幕阅读器设置这个!

交互式辅助图形图像

次要图形图像控制组用于在悬停时为创造性CTA元素图形设置图像。除启用/禁用复选框外,控制组具有与主图形图像相同的选项。

粒子的设置

粒子设置组包含对初始交互效果设置的控件。以下是每个设置的详细信息:

创造性的CTA粒子设置
  • 启用-使用此选项启用交互粒子。
  • 位置-使用此选项设置粒子相对于它所应用的元素的位置。可用的选项有:
  • 中心
  • 正确的
  • 左上角
  • 右上方
  • 左下
  • 右下角
  • 放置-使用此选项决定是否要有粒子重叠与元素或有限内部元素。
  • 规模缩放选项将决定粒子在过渡过程中如何膨胀或收缩。可用的选项有:
  • 没有一个-如果你不想让粒子在过渡中缩放,使用这个选项。
  • 规模都-使用这个选项在过渡中垂直和水平缩放粒子。
  • 规模X-使用此选项在过渡中水平缩放粒子。
  • 规模Y-使用这个选项在过渡中垂直缩放粒子。
  • 延迟延迟选项将决定完成转换需要多长时间。此选项以秒或毫秒为单位的值取决于所选择的值单位。
  • 转变从哪里开始-使用此选项设置粒子的过渡应该从哪里开始。可用的选项有:
  • 中心
  • 正确的
  • 左上角
  • 右上方
  • 左下
  • 右下角

粒子的风格

粒子样式组包含微调交互效果的控件。以下是每个设置的详细信息:

创意CTA粒子风格
  • 宽度和高度-使用此选项设置粒子的宽度和高度。取值单位为CalcPX快速眼动新兴市场,
  • 半径-使用此选项设置粒子的半径。此选项值可以使用与宽度/高度选项相同的单位。
  • 颜色-使用此选项设置粒子的颜色。
  • 内联CSS-使用此选项添加自定义CSS,将应用于文章。这个选项是给高级用户的,他们想要一个额外的定制层,他们不能在粒子的样式选项中找到。

主要和次要粒子

我们所描述的设置和样式选项同样适用于初级粒子和次级粒子。你基本上有两组粒子选项来获得创新和创建时尚的交互。

定制

自定义窗格由各种功能组成,允许您进一步控制元素的样式和功能:

  • ID - - - - - -在元素上设置HTML ID。
  • - - - - - -在元素上设置HTML类。
  • 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制,特别是对嵌套标记的控制。点击在这里有关此特性的详细信息,如使用el美元来动态地定位基本标签,等等。
  • 在断点期间隐藏 - - - - - -当需要改变设计时,以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
  • 条件 - - - - - -当满足某些条件时,从页面中添加/删除元素。如果设置了特色图像…).点击在这里获取更多信息。
  • 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ").这在与各种脚本和库集成时尤其有用。

演示

要查看创意CTA元素的现场演示,请单击在这里

总结

总之,我们已经讨论了创造性CTA元素。我们已经讨论了创意CTA元素是在页面上添加行动呼吁的简单工具,我们已经学习了如何更改它的内容和设计,并深入研究了创意CTA元素设置的细节。

看到不准确的东西了吗?让我们知道

Baidu
map