WordPress divi主题

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

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

让我们开始吧。

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

Divi 具有三个通用响应断点(设计根据浏览器宽度更改的点),这些断点内置于 Divi Builder 中任何元素的设置中。 这三个断点主要是为了方便桌面、平板电脑和手机显示器的特定设计设置。

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

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

高级响应式编辑

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

高级响应式编辑

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

了解 Divi 的自定义 CSS 输入框

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

WordPress divi主题

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

下面是可用于“行动号召”模块的不同自定义 CSS 输入框的图示。

高级响应式编辑

每个自定义 CSS 输入框都以元素内的特定 CSS 类为目标。 要查看针对特定元素的类,只需将鼠标悬停在该元素上并单击问号图标。 在那里,您将看到 CSS 类被定位。

高级响应式编辑

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

高级响应式编辑

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

高级响应式编辑

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

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

fiverr建站WordPress程序员

高级响应式编辑

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

例如,假设您想让行动号召的促销按钮跨越平板电脑和手机上的模块的整个宽度,而不是桌面上。 您将选择 Promo Button 输入框下的平板电脑选项卡并添加“display: block;”。

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

高级响应式编辑

独立站选品工具

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

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

高级响应式编辑

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

注意:如果您还向手机显示添加自定义 CSS,Divi 会巧妙地将后端平板电脑的媒体查询更改为更精确的 768 像素和 980 像素之间的范围(或最大宽度:980 像素和最小宽度:768 像素)。

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

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

高质量外链购买

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

高级响应式编辑

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

高级响应式编辑

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

JasperAI 10000字免费额度试用

高级响应式编辑

如果我们检查后端的 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;
}

电话

WordPress备份工具updrafplus
@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 输入有何体验?

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题