如何在 divi 代码模块中应用样式？答案

【问题标题】：How to apply styling in divi code module ?如何在 divi 代码模块中应用样式？
【发布时间】：2019-12-09 21:26:56
【问题描述】：

我有一个 HTML，我在 DIVI 代码模块的内容部分使用了它（如下所示）：

HTML（出现在内容中）：

<blockquote><span>BPRO helped me realize the importance of cus- tomer organization and tracking, service track- ing and just being on the top of things behind the scene. The more you grow – the more difficult this becomes – but having the right tools to keep your business organized is just as impor- tant as having the right tools to do job itself.</span> <p>Some Person - Some Day 2018</p></blockquote>

CSS：

我也有一个 CSS，我想申请内容中的 HTML 代码。我想知道我应该把我的css代码放在哪里。我拥有的 CSS 代码是：

blockquote {
  padding: 20px 60px;
  background: #eee;
  border-radius: 10px;
  font-family: arial;
  line-height: 1.625;
  position: relative;
}

blockquote p {
  text-align: center;
}

blockquote span {
  position: relative;
  display: inline-block;
}

blockquote span:before {
  content: "“";
  font-size: 72px;
  color: #79b83a;
  position: absolute;
  left: -40px;
  top: 40px;
  line-height: 0;
}

blockquote span:after {
  content: "”";
  font-size: 72px;
  color: #79b83a;
  position: absolute;
  right: -40px;
  bottom: -10px;
  line-height: 0;
}

问题陈述：

我想知道我应该把上面的 CSS 代码放在哪里。 我尝试将代码放在代码模块设置高级部分的主要元素中，但没有成功。

【问题讨论】：

标签： html css wordpress wordpress-theming

【解决方案1】：

我看到你昨天正在使用 code I wrote。

您可以将 HTML 保留在 Divi 模块中，并将 CSS 放在外观 > 定制器 > 附加 CSS 部分

编辑：看起来 Divi 有一个 custom CSS 部分以及一个 Per Module, Row, and Section CSS option，但我建议将自定义 CSS 保留在尽可能少的位置。

【讨论】：

是的，我昨天正在使用您的代码。我在 divi 代码模块 Appearance > Customizer > Additional CSS section 中找不到这个。
它不是 Divi 模块，它内置于 Wordpress 中。转到您的 /wp-admin 并单击外观菜单项，其下方是 Customizer，左下方是 Additional CSS ，尽管我也确实在答案中添加了 Divi 也有一个自定义 CSS 区域，如果您想使用它。
在每个模块、行和部分 CSS 上也有这个文档：elegantthemes.com/documentation/divi/advanced-design-settings
DIVI 确实有自定义 CSS，我想知道如何使用自定义 CSS？我已将 HTML 放入 content 部分，但不知道如何使用 custom CSS。
你试过把它放在外观 > 定制器 > 附加 CSS 中了吗？我会先试试。但是回头看看你的截图，你似乎根本没有<blockquote> 标签（这可以解释为什么 CSS 定位块引用不起作用）

【解决方案2】：

您也可以将您的 css 放在 Divi 代码模块内容区域中，只需使用“样式”标签：

<style> 

your css code goes here:

blockquote {
  padding: 20px 60px;
  background: #eee;
  border-radius: 10px;
  font-family: arial;
  line-height: 1.625;
  position: relative;
}
... etc



</style>

【讨论】：