Elementor 专业教程 19 – Countdown小工具的设置和使用方法

2023-11-26
Elementor 专业教程
喜欢(0)
Elementor pro Countdown widget .webp

Elementor Countdown小工具允许您在页面中轻松创建倒计时场景,如在特别促销期间向用户展示倒计时,或用于即将发生的事件,产品发布倒计时等。

使用Countdown小工具,您不仅可以设置倒计时的时间或日期,还可以自定义倒计时小工具的外观样式,倒计时结束后显示特定的文本、图像或发出特殊指令。

总的来说,Countdown小工具不仅可以为页面添加动态效果,也可以提高用户的参与度。

本教程将说明Countdown小工具的功能设置和使用方法。

Elementor Countdown小工具

首先,将Countdown小工具拖到编辑栏中,如下图所示。

将小工具拖入编辑栏后,您将看到如下的画面。

您可以看到拖入的小工具已经开始倒计时。

1. Countdown 小工具的内容标签

Countdown小工具的内容标签包括以下设置选项:

  1. Type
  2. Due Date
  3. Evergreen Timer
  4. View
  5. Days/Hours/Minutes/Seconds
  6. Show Label
  7. Custom Label
  8. Actions After Expire

1-1 Type

Type是选择倒计时类型的设置选项。您可以在以下两个预设中选择:

  • Due Date:显示距离指定日期的剩余时间。
  • Evergreen Timer:显示指定的时间长度。

Due Date是指定了结束时间,所以所有用户访问站点时,最终时间节点距离是一样的,通常用于产品发布,新闻发布等特定日期举行的活动倒计时。

而Evergreen Timer是用户访问页面后才开始倒计时。所以每位用户看到的倒计时时长是不一样的,通常用于产品促销。

-选择Type为Due Date时

1-2 Due Date

Due Date是指定倒计时到期时间或日期的设置选项。你可以自由设置结束时间。

在上图中,结束时间被设置为“2023年5月1日 PM8:00”。

选择Type为Evergreen Timer时

1-3 Evergreen Timer

选择Evergreen Timer后,您可以自定义设置倒计时的时长。

在“Hours”中输入倒计时时间,“Minutes”中输入分钟。设置好后,会以《 Days / Hours / Minutes / Seconds》的形式开始倒计时。

1-4 View

View是选择倒计时显示方式的设置选项。您可以在以下两种显示方式中选择:

  • Block:日期单位显示在时间数字下方
  • Inline:日期单位显示在时间数字的右侧

1-5 Days/Hours/Minutes/Seconds

  • 天数(Days):选择是否显示倒计时天数。
  • 小时数(Hours):选择是否显示倒计时小时数。
  • 分钟数(Minutes):选择是否显示倒计时的分钟数。
  • 秒数(Seconds):选择是否显示倒计时的秒数。

关于是否显示,可以根据实际场景进行选择。

1-6 显示标签(Show Label)

显示标签是选择是否显示倒计时时间单位的设置选项。默认设置为“是”,也可以选择不显示。

关闭显示标签后,所有的时间单位就不显示了。 如下图

1-7 自定义标签(Custom Label)

自定义标签是自定义倒计时时间单位文本内容的设置选项。默认设置为“否”,也可以选择“是”来自定义时间单位文本内容。 如下图。

可以将默认英文的时间单位文本更改为中文时间单位文本。

1-8 倒计时结束后的操作(Actions After Expire)

倒计时结束后的操作是指定倒计时结束后要执行的操作设置。可在以下3种预设中选择。

  • 跳转(Redirect)
  • 隐藏(Hide)
  • 显示消息(Show Message)
●选择Redirect时

选择跳转时,可以在下方输入框中输入特定的链接地址。等到倒计时结束后就会跳转到指定的链接页面。

●选择Hide时

选择隐藏时,倒计时结束后将自动隐藏倒计时画面。

●Show Message

选择Show Message时,可以自定义输入提示信息文本内容。 倒计时结束后就可以看到输入的文本内容。 如下图

2.Countdown 小工具的样式设置

Countdown 小工具的样式设置包含以下设置项。

  1. 盒子(Boxes)
  2. 内容(Content)
  3. 消息(Message)

2-1 盒子

盒子是自定义倒计时外观样式设置项。包含以下设置选项。

  1. 容器宽度(Container Width):指定倒计时盒子宽度的设置。
  2. 背景颜色(BackgroundColor):选择和替换倒计时盒子背景颜色。
  3. 边框类型:指定倒计时盒子边框类型的选项。可在预设的5种边框中选择
  4. 宽度:指定倒计时盒子边框宽度
  5. 颜色:选择和替换倒计时盒子边框颜色。
  6. 边框半径(Border Radius):指定倒计时盒子边框四角半径大小。
  7. 间距(Space Between):指定倒计时内容要素之间的间距。可设置0到100的数值。
  8. 内边距(Padding):指定倒计时盒子内容要素内的间距。

2-2 Content

内容是自定义倒计时时间文本样式的设置项。包含以下设置选项。

数字(Digits)

  • 颜色(Color):选择和替换时间数字颜色
  • 排版:自定义时间数字样式。如字体,大小,粗细,行高等设置

标签(Label)

  • 颜色(Color):选择和替换时间单位文本颜色
  • 排版:自定义时间单位文本样式。如字体,大小,粗细,行高等设置
  • 文本描边(Text Stroke):给时间单位文本添加轮廓线。

2-3 Message

消息是自定义倒计时结束后显示提示信息文本的样式设置项。包含以下设置选项。

  • 对齐方式(Alignment):指定提示信息文本的对齐方式。可选择“左对齐”,“居中对齐”,“右对齐”
  • 文本颜色(Text Color):选择和替换提示信息文本颜色
  • 排版:自定义提示信息文本样式。如字体,大小,粗细,行高等
  • 内边距(Padding):指定提示信息文本和周边要素之间的间距。

※由于提示信息是倒计时结束后才显示的内容,所以效果需要在预览画面中确认。

3.Countdown小工具的高级设置

高级设置是所有小工具通用的设置项,具体功能设置和使用方法请阅读《Elementor通用教程 – 高级标签的设置和使用方法》。

以上就是Countdown小工具的功能设置和使用说明。

希望本篇内容能为您在使用Elementor时提供帮助。

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
fuyeshidai

做点副业,为生活加点料

Elementor pro call to action widget
Elementor 专业教程 14 – Call To Action小工具的设置和使用方法
elementor pro megamenu widget tumnail
Elementor Pro教程 - 制作MegaMenu的步骤以及使用方法
Elementor basic 28 caidanmaodian.webp
Elementor 基础教程 28 – 菜单锚点小工具的设置和使用方法
Elementor pro Portfolio widget
Elementor 专业教程 3 – Portfolio小工具的设置和使用方法
Elementor basic Flip Box widget
Elementor 专业教程 13 – Flip Box小工具的设置和使用方法
Elementor pro carousel widget tumnail
Elementor 专业教程 – Carousel小工具的设置和使用方法
Jetengine jiaocheng 2 Custom taxonomies tumnail
JetEngine 使用教程 2 - Custom Taxonomies的制作和设置以及使用方法
elementor jishuqi
Elementor 基础教程 17 - 计数器小工具的设置和使用方法
Elementor basic 18 jindutiao.webp
Elementor 基础教程 18 - 进度条小工具的设置和使用方法
wenbenbianjiqi
Elementor 基础教程 1 - 文本编辑器 小工具的设置和使用方法