如何使用 Divi 的内置自定义 CSS 输入进行高级响应式编辑

Divi 具有内置的响应式设计编辑功能，可以非常轻松地在台式机、平板电脑或手机显示屏上调整网站样式（无需了解 CSS）。 Divi 的部分内置响应式编辑包括一种使用自定义 CSS 进行更高级响应式设计更改的简化方法。 这比依赖带有媒体查询的外部样式表要方便得多。 您甚至可以为每个设备显示实时可视化地调整 CSS，从而消除响应式设计中的大部分猜测。

在本教程中，我将向您展示如何使用自定义 CSS 进行方便的响应式设计更改，以便您可以进行 Divi 的内置设计选项中可能不可用的高级设计修饰。

让我们开始吧。

Divi 用于响应式编辑的内置断点

Divi 具有三个通用响应断点（设计根据浏览器宽度更改的点），它们内置于 Divi Builder 中任何元素的设置中。 这三个断点主要用于促进台式机、平板电脑和手机显示器的特定设计设置。

Divi 针对桌面、平板和手机显示器的三个主要响应断点如下：

• 桌面：981px 及以上
• 平板电脑：介于 980 像素和 768 像素之间
• 手机：767px及以下

这三个断点在整个 Divi 构建器中的所有响应式设计选项卡中都是相同的，而不仅仅是高级自定义 CSS。 因此，每次部署响应式设计选项卡时，在这些选项卡下完成的任何样式都将显示在这三个主要响应断点的范围内。

此外，值得一提的是，这些用于设备显示的通用断点并不是 Divi 主题结构中唯一内置的断点。 您可以在我们关于识别 Divi 响应断点的文章中了解这些内容。

了解 Divi 的自定义 CSS 输入框

当您在 Divi 构建器中自定义元素（部分、行或模块）时，每个设计选项对应（或针对）该元素的特定部分。 例如，在编辑文本模块时，您可以使用内置设置（即标题 2 字体、左填充等）定位该模块的任何部分。

同样，当您使用高级自定义 CSS 输入框自定义 Divi 元素（部分、行或模块）时，每个输入框都将对应（或定位）该 Divi 元素的整个或某些部分。 可用的自定义 CSS 框的数量将根据您要设置样式的元素而有所不同。 一个文本模块可能只有三个自定义的 CSS 元素输入框（之前、主要和之后），但是一个号召性用语模块将有额外的标题、描述和按钮框。 这是因为该模块具有更多可以在该模块元素中定位的部分。

以下是可用于“号召性用语”模块的不同自定义 CSS 输入框的说明。

每个自定义 CSS 输入框都针对元素中的特定 CSS 类。 要查看针对特定元素的类，只需将鼠标悬停在该元素上并单击问号图标即可。 在那里，您将看到所针对的 CSS 类。

因此，您无需在输入框中的 CSS 片段中添加 CSS 类。 如果这样做，代码将不起作用。

相反，只需将 CSS 属性直接添加到要应用于已定位的类的框中。

如何将自定义 CSS 添加到响应式设计断点

要访问任何 css 输入框的三个主要响应式设计断点，只需将鼠标悬停在元素上并单击平板电脑图标即可。 然后您将看到三个响应式设计选项卡。

现在您需要做的就是使用选项卡将 CSS 添加到三个设备显示器（桌面、平板电脑和手机）中的任何一个。

例如，假设您想让号召性用语的促销按钮跨越平板电脑和手机上的模块的整个宽度，但不在桌面上。 您可以选择 Promo Button 输入框下的平板电脑选项卡并添加“display: block;”。

请注意，当您选择平板电脑选项卡时，Divi Builder 视图模式会切换到平板电脑视图模式（宽度为 768 像素），以便更好地实时了解您的设计外观。

较小的设备默认继承较大设备的 CSS

默认情况下，应用于平板电脑选项卡的代码也将被手机显示屏继承。 为了帮助提醒我们这一点，Divi 将灰色占位符代码添加到输入框中，其代码与添加到平板显示器的代码相同。

手机显示屏之所以继承平板显示屏，是因为后台平板显示屏的实际断点（媒体查询）设置为“max-width:980px;” 这意味着添加到平板电脑的代码也将应用于手机，因为手机显示屏的宽度小于 980 像素。 因此，如果您想对手机应用不同的样式，则需要在手机选项卡输入框中添加额外的代码。

注意：如果您还将自定义 CSS 添加到手机显示屏，Divi 会巧妙地将后端平板电脑的媒体查询更改为 768px 和 980px 之间的更精确范围（或 max-width: 980px 和 min-width: 768px）。

自定义 CSS 在后端应用了什么

假设我们将自定义 CSS 添加到所有三个响应选项卡（桌面、平板电脑和手机）。

在桌面上，我们将按钮放置在模块的右下角。

在平板电脑上，我们覆盖桌面代码并简单地将按钮跨越到模块的整个宽度。

在手机上，我们覆盖了平板电脑的 CSS 并使显示恢复正常。

如果我们检查后端的 CSS，您可以看到 Divi 使用以下媒体查询组织代码，因此您不必：

桌面：

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

药片：

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

电话

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

CSS是如何存储在Divi中的？

作为 Divi 内置速度优化的一部分，Divi Builder 中的所有样式（包括自定义 CSS）将被组合、缩小并存储为静态 CSS 文件，以加快页面加载速度。 因此，如果您想绕过通过子主题添加自定义 CSS 的需要，您可以利用内置的响应式 CSS 输入，而不必担心会减慢您的网站速度。

有关更多信息，请查看我们关于如何加快 Divi 网站速度的帖子。

最后的想法

希望这篇文章能帮助您更好地了解如何利用 Divi 的内置自定义 CSS 输入框对您的网站进行方便的响应式设计更改。

对于大多数人来说，无需冒险进入高级选项卡将自定义 CSS 添加到您的设计中。 Divi 有很多内置选项，即使是高级用户也很少会发现需要使用自定义 CSS。 但是，如果您需要高级样式的时候到了，那么了解在 Divi 中实现它是多么容易会有所帮助。

您对 Divi 的自定义 CSS 输入有何体验？