跳转到内容
免费安装
简体中文
在 Claude 中打开 就此页面提问在 ChatGPT 中打开 就此页面提问

设计倒计时

更改颜色、字体、背景、边框和间距,使倒计时与您的商店风格一致。

模板为您提供起始外观。Design 标签页则是您打造专属风格的地方,由于每个部分都可编辑,您也可以在这里彻底重建。

倒计时器和预计送达日期拥有完整的 Design 标签页。库存倒计时和购物车倒计时的选项较少,设计控件放在 Settings 标签页内。

倒计时器的 Design 标签页,显示各个部分和旁边的实时预览

Design 标签页,预览会随着您更改设置而更新。

您不必一直使用最初选择的设计。在构建器中打开模板选择器并选择其他模板,各个季节以标签页形式排列在顶部:Default、New year、Valentine、Summer Sale、Moon Festival、Halloween、Black Friday、Christmas 和 Winter Sales。

切换模板会替换设计,您的文字、计时和条件会保留。

计时器的 Design 标签页包含四个部分,另加自定义 CSS。

倒计时的外层容器,即承载其他所有内容的面板。

分组 控件
Background 纯色或上传的图片。选择颜色时,会有 Main background color,并带有独立的 Left 和 Right 值:纯色填充时两侧使用同一种颜色,渐变则使用两种颜色
Overlay image 为上传的背景加深,使文字在其上保持清晰可读
Text 整个倒计时的字体。开启 Use custom font style 可选择字体系列和字重
Padding 面板内部的间距,按 Top / Right 和 Bottom / Left 设置
Border 边框大小、圆角、样式(Solid、Dotted 或 Dashed)和颜色
Shadow Yes 或 No

Title 和 Subtitle 各有自己的字体、字号、颜色和边距。您可以在这里让标题更突出、让副标题更低调,或让两者靠得更近。

数字本身。

分组 控件
Font Timer font size 用于数字,Label font size 用于下方的文字
Border 每个单位周围方框的大小和样式
Color Number color、用于标签的 Data text color、每个单位方框的 Background color、用于分隔符的 Dot color,以及 Border color
Padding 每个单位方框内部的间距

为各单位设置背景和边框,可得到方框式外观;两者都留空,则是面板上的纯数字。

如果您已开启 按钮,它会有自己的边框(圆角、大小、样式)、颜色(背景、文字、边框)和内边距。

为手机单独设置字号,应用将其描述为“Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.”

您可以为 Title、Subtitle、Timer number 和 Timer label 设置移动端专用的大小,以及移动端内边距。

每个倒计时都值得花一分钟设置这一部分。在桌面端以 25px 显示效果良好的标题,在手机上通常会太大,而四个桌面尺寸的计时单位往往会换行或溢出。

送达日期的 Design 标签页按其两个部分拆分:

  • Design Main Widget:提示信息,包括字体、颜色、大小、边框和间距。
  • Design Process Widget:Ordered → Dispatched → Delivered 进度条,包括图标、颜色和间距。

如果您的布局是 Message only 或 Progress bar only,则只有相关的那一半有效。

库存倒计时和购物车倒计时设计

Section titled “库存倒计时和购物车倒计时设计”

这两种类型的设计控件位于 Settings 标签页内。

Stock countdown 提供 Alignment,可分别设置提示信息、滑块、库存数字和背景的颜色,以及 Animation,包括 None、Flash 或 Pulse。

Cart countdown 提供位置、提示信息、计时器和背景的颜色、边框以及字体设置。

每种类型的末尾都有一个 Custom CSS (Developer Zone) 输入框,用于控件未涵盖的内容。请参阅 自定义 CSS。

借鉴您的模板。 采用品牌色的倒计时看起来像商店的一部分,而使用模板默认值的则显得生硬。模板的强调色通常是合适的背景色。

对比度比颜色更重要。 数字才是重点,请确保它们在背景上清晰可读,包括在字号范围的较小一端。

在真实页面上检查。 预览只显示倒计时本身及其独立背景,而您的产品页面上还有价格、按钮和图片与之争夺注意力。

在手机上检查。 请使用 Design Mobile Section,而不是直接接受桌面尺寸在小屏幕上的效果。

这对您有帮助吗?