如何为Klaviyo自定义模板单个模块添加CSS样式

1. 给目标文本块添加自定义类 #

• 选中要设置阴影的白色文本框模块
• 切换到右侧面板的「高级」选项卡，在「CSS类」输入框里填写专属类名，比如 white-shadow-box
• 保存当前模块的设置

2. 编写针对性CSS样式 #

• 打开模板的全局代码视图，找到<style>区块（没有的话就插入到<head>标签内），添加如下代码：

.white-shadow-box {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12); /* 阴影的大小、透明度可根据需求调整 */
}

• 若只想让样式在单个文本块内生效，直接在该文本块的代码视图中这样写：

<div class="white-shadow-box">
  <!-- 此处放置你的文本内容 -->
</div>

<style>
.white-shadow-box {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
</style>

3. 找不到自定义类入口？用属性选择器兜底 #

如果编辑器内没找到添加CSS类的入口，可以通过背景色精准定位（前提是该白色文本框的背景色和其他文本框不同）：

/* 假设白色文本框的背景色为#ffffff */
[style*="background-color:#ffffff"] {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

• 注意：如果有其他模块也使用了相同的背景色，会被一并添加阴影，因此优先推荐使用自定义类的方法

内容的提问来源于stack exchange，提问作者Santi