如何为倒计时器添加背景颜色

本文将向您展示如何在 GemPages 中为倒计时计时器元素添加背景颜色。

根据您的设置和自定义需求，您可以使用以下两种方法：

• 方案一：在 Row 元素内添加倒计时器，并使用 Row 背景设置
• 选项 2：直接向倒计时器添加自定义 CSS 代码

选项 1：使用行元素添加背景颜色

如果您想在不使用代码的情况下对整个倒计时部分进行视觉样式设置，这是最简单且最推荐的方法。

步骤 1：将倒计时器放置在一行内

• 打开 GemPages 编辑器。
• 拖一个 行 element 到您的布局中。
• 拖动 倒数计时器 在排内。

这样，行容器就可以控制背景样式。

步骤 2：设置行的背景颜色

• 点击 行 元件。
• 打开 个人设置 面板。
• 前往：设置 → 后台
• 选择您喜欢的背景颜色。

您还可以添加：

• 纯色
• 渐变背景
• 背景图片

更多详情请查看本指南： 如何在 GemPages 中设置图片或背景颜色

方案二：使用自定义 CSS 添加背景颜色

如果要将背景直接应用到倒计时计时器元素本身，可以使用自定义 CSS。

步骤 1：打开倒计时器自定义代码区域

• 点击倒计时计时器元素。
• 右键单击该元素。
• 选择 自定义代码.

这将打开该元素的自定义代码编辑器。

步骤 2：添加 CSS 代码

将以下代码粘贴到“自定义代码”区域：

.ElementClass {

背景：#DFC4C4 ！重要；

}

然后替换：

• .元素类 使用您的实际元素类
• #DFC4C4 使用您喜欢的颜色代码

提示：如何获取颜色代码

GemPages支持标准HEX颜色代码。

计费示例：

#000000 → 黑色

#FFFFFF → 白色

#FF0000 → 红色

#DFC4C4 → 柔粉色

您可以使用以下网站选择和生成颜色代码：

• HTML 颜色代码
• Coolors 调色板生成器
• Adobe Color
• 寻色

这些工具可以帮助您：

• 视觉选择颜色
• 生成匹配的调色板
• 轻松复制十六进制颜色代码

第 3 步：保存并发布

• 点击 已保存.
• 发布或更新您的页面。
• 预览页面以检查背景样式。

您的倒计时器现在应该会以选定的背景颜色显示。