返回到支持 内容和媒体 区块 Calendly 区块

Calendly 区块

Calendly 是一款热门工具,可以轻松高效地进行计划。如果您希望站点访客能直接在您站点的日历中为线上和线下会议预订具体的时间段,那么这款工具非常有用。它与您的个人日历集成,帮助您避免错过预约或重复预约。

Calendly 有免费和付费两种版本,您可以根据需要选择您想要在站点上使用的版本。

采用我们 WordPress.com Explorer、Creator 和 Entrepreneur 套餐以及旧版专业版套餐的站点可使用此功能。对于使用免费套餐和 Starter 套餐的站点,请升级您的套餐以使用此功能。

在您开始之前

如要使用 Calendly 区块,您将需要 Calendly 账户。如果您还没有账户,请在此处注册

添加 Calendly 区块

您可以在您的 WordPress.com 站点上的任意页面或文章中添加 Calendly 区块。点击 + 区块插入器图标并搜索 Calendly。

您也可以在新行中输入 /calendly,然后按 Enter 键。

嵌入 Calendly 链接

添加区块后,您会看到 Calendly 链接的框。下面是获取链接的方法:

  1. 登录到您的 Calendly 账户
  2. 点击右上角的蓝色按钮,转至我的账户
  3. 在打开的活动页面中,点击您希望在站点中嵌入的事件左下方的复制链接按钮:
  1. 返回到您的站点,在 Calendly 区块中粘贴该链接,如上图所示。

定制 Calendly 区块

您可以在以下两个不同的位置对 Calendly 区块的不同方面进行定制:

这一点一定要注意,因为根据您想定制的内容,您需要在 Calendly 账户或您站点中的区块设置中进行更改。

更改 Calendly 嵌入的类型

Calendly 可在您的文章或页面中显示为完整日历、按钮或弹出窗口。

  1. 作为内嵌日历或作为按钮

您可以在内嵌日历按钮两个模式之间切换,方法是通过顶部区块上下文菜单中的样式选项:

或通过右侧面板:

2. 作为浮动按钮

本指南的此部分适用于使用 WordPress.com Creator 和 Entrepreneur 套餐以及旧版专业版套餐的站点。对于使用免费套餐、Starter 套餐和 Explorer 套餐的站点,请升级您的套餐以使用此功能。

  1. 转到您的 Calendly 账户
  2. 点击蓝色的共享按钮
  3. 点击添加到网站选项卡
  4. 选择小工具弹出窗口,然后点击继续
  5. 点击复制代码按钮
  6. 转到外观 → 小工具,然后选择任意小工具区
  7. 插入自定义 HTML 区块
  8. 将代码粘贴到区块中,然后点击右上角的更新

这样做将在您所有页面上显示浮动按钮。如果您希望仅在特定页面上显示浮动按钮,则可以按照以下步骤操作,将其添加到页面或文章的底部:

  1. 点击文章或页面右上方的三个点
  2. 选择代码编辑器
  3. 在文章区,一直向下滚动
  4. 将您从 Calendly 选取的代码段添加到文章或页面的末尾,具体位置是添加到现有代码的最后一行后面。
  5. 返回三个点,然后再次选择可视化编辑器
  6. 发布更新您的页面。

您的浮动按钮应显示在屏幕的左下角,并在您滚动浏览时一起滚动。

调整页面上 Calendly 区块的位置

如要在您的文章或页面中向上或向下移动 Calendly 区块,您可以使用区块顶部上下文菜单中的箭头:

要对齐您的 Calendly 区块:添加实际已嵌入页面中的内嵌 Calendly 区块时,无论是作为完整日历还是作为按钮嵌入,您都可以在页面中或已添加它们的地方对齐它们。

注意:浮动小工具的位置无法通过设置更改。

更改 Calendly 嵌入的外观

如要更改作为内嵌、按钮或弹出窗口的嵌入 Calendly 的外观(样式、颜色、形状、大小),请执行以下操作:

  1. 转到您的 Calendly 账户,选择您希望编辑的日历
  2. 点击共享,然后选择添加到网站 嵌入内嵌 继续
  3. 您可以在左侧编辑背景颜色、文本颜色、按钮和链接颜色
  4. 重新复制代码,然后按上面所述嵌入

您也可以仅在右侧面板更改 Calendly 按钮的颜色。您可以使用这些内容来执行以下操作:

  • 样式:选择您希望按钮显示为填充,还是显示为轮廓:

  • 颜色:选择您希望用于按钮的背景颜色以及文本颜色。
  • 您还可以使用区块顶部的上下文菜单进一步定制字体(设置为粗体或斜体)。
  • 如果您希望为按钮混合使用两种颜色,则可以使用“渐变色”选项,如下所示:
渐变色按钮 Calendly 区块 WordPress.com
  • 形状:您可以使用“边框半径”控件来更改按钮形状:
  • 尺寸:您可以选择按钮宽度设置中的选项之一,更改按钮的大小。
Copied to clipboard!