Set the Divi Gutter Width with CSS

Elegant Themes 的 Divi 主题是一款广受欢迎且功能强大的 WordPress 主题，以其灵活性和简单的页面生成器而闻名。栏宽（或行内列之间的距离）是客户最常要求的自定义功能之一。

虽然 Divi 的生成器提供了一些内置的栏宽修改选项，但在某些情况下，可能需要通过 CSS 进行更精确的控制。本文将为您提供使用 CSS 设置 Divi 栏宽的指南。

理解 Divi 的栏宽

Divi 栏宽定义了行内列之间的水平间距。Divi 默认提供三种栏宽选项：

• 第一个栏宽是列之间狭窄的间距。
• 选项 2 的默认选项是中等间距。
• 第三种栏宽是宽间距。

您可以通过 Divi 生成器的行设置来修改这些参数。但是，对于寻求更精确自定义选项或细粒度控制的用户来说，CSS 提供了一个强大的替代方案。

为什么使用 CSS 设置栏宽？

• 通过使用 CSS 定义栏宽，您可以更精确、更灵活地调整列之间的间距。这在以下情况可能很有用：
• 当内置解决方案不满足设计要求时，存在独特布局需求。
• 将栏宽调整为适应不同屏幕尺寸，这是响应式设计的一部分。
• 全站统一性：确保多页面或区块的栏宽一致。

如何使用 CSS 调整栏宽

您需要为 Divi 主题应用自定义样式才能使用 CSS 更改栏宽。以下是详细操作步骤：

步骤 1：识别列和行

第一步是找到您要修改的行和列。Divi 为每个行和列提供了独特的类名，您可以使用 CSS 来定位它们。列通常具有 `.et_pb_column` 类的名称，而行通常具有 `.et_pb_row` 类的名称。

步骤 2：添加自定义 CSS

确定了要操作的元素后，您可以通过添加自定义 CSS 来设置栏宽。您有三种方法可以做到这一点：使用子主题样式表、直接将 CSS 添加到页面，或使用 Divi 主题选项。通过 Divi 主题选项，您可以按以下方式应用自定义 CSS：

• 访问 Divi 主题选项页面。在您的 WordPress 管理后台导航至 Divi 菜单，然后选择“主题选项”。
• 打开自定义 CSS 选项卡：向下滚动，找到“自定义 CSS”选项。
• 您可以在自定义 CSS 部分插入以下代码：

步骤 3：适应不同设备

您可能希望为不同的屏幕尺寸选择不同的栏宽，以确保您的设计是响应式的。为此，您可以使用媒体查询：

步骤 4：测试并保存

添加自定义 CSS 后，保存您的修改，然后检查您的网站以确保栏宽显示符合您的预期。您可能需要调整参数才能获得所需的精确间距。

通过 CSS 调整 Divi 的栏宽，您可以更精确地控制列的间距，并能够创建完全符合您设计理念的布局。无论您的目标是更紧凑的布局还是更大的列间距，自定义 CSS 都能为您提供所需的灵活性。

自定义栏宽的创新方法

除了基本方法外，您还可以使用一些更高级的方法来进一步增强对 Divi 栏宽的控制。这里有一些例子：

为特定行或区块设置栏宽

如果您只需要更改特定行或区块的栏宽，可以在 Divi 生成器中为单个元素应用自定义 CSS 类，然后通过 CSS 定位这些元素。例如：

为行添加自定义类

• 在 Divi 生成器中打开您要修改的行的设置。
• 您可以在“高级”选项卡下添加自定义类名，例如 `custom-gutter-row`。
• 为类添加自定义 CSS

与其他 CSS 属性结合使用：对于更复杂的布局，您可能希望将栏宽修改与其他 CSS 属性（如 padding、margin 甚至 flexbox 属性）结合使用。例如，您可以添加垂直间距调整或创建不对称的栏宽。

基于 JavaScript 的动态修改

您可以结合使用 JavaScript 和 CSS 来实现更动态的控制，特别是当您需要根据用户输入或其他实时事件修改栏宽时。

测试和故障排除

实施修改后，请在各种设备和浏览器组合上进行测试，以确保一致性。使用 Chrome 开发者工具等工具进行实时 CSS 调整和元素检查。这有助于您在完全应用样式之前了解其效果。

通过自定义 CSS 栏宽，您可以超越 Divi 生成器的默认选项，进一步优化您网站的布局。无论您是需要进行全局更新、针对特定行进行修改，还是使用复杂响应式设计技术，CSS 都能帮助您实现所需的网站外观和功能。

遵循本文中的说明和示例，您可以自信地修改 Divi 主题的栏宽，从而创建一个专业、用户友好且外观精美的网站。与任何修改一样，在进行任何重大更改之前，请务必备份您的网站，并确保全面测试以保证用户获得无缝体验。

使用子主题进行 Divi 定制

对于经常修改 Divi 主题的用户，建议创建子主题。您可以在不影响父主题更新的情况下对子主题进行大量修改。这可以确保您的自定义 CSS 不会被覆盖，并保留其原始的栏宽修改。

• 创建 Divi 子主题
• 创建子主题文件夹
• 在您的 WordPress 目录中导航到 `wp-content/themes`。
• 为您的子主题创建一个名为 `divi-child` 的新文件夹。
• 创建 `style.css` 文件
• 在 `divi-child` 文件夹中创建一个名为 `style.css` 的文件。
• 将以下标头添加到文件中：

• 创建 `functions.php` 文件
• 在同一文件夹中创建一个名为 `functions.php` 的文件。
• 添加以下 PHP 代码以启用父主题样式：

• 激活子主题。
• 访问您的 WordPress 管理后台。
• 在“外观”下导航到“主题”。
• 将 Divi Child 主题设置为激活状态。
• 使用 CSS 自定义子主题
• 激活子主题后，您可以轻松地将自定义 CSS 用于栏宽修改，将其添加到子主题的 `style.css` 文件中。

利用 Divi 的内置设计功能

尽管 CSS 提供了更多的自定义选项，但 Divi 包含的内置设计选项可以与您的自定义 CSS 工作协同工作。这些包括：

1. 行和列设置

在 Divi 生成器中，每个行和列都有设计设置，允许您调整间距，包括：

• 栏宽：在行设置中，您可以直接选择预定义的栏宽：1-4。
• 自定义内边距和外边距：如果需要更精确地控制间距，可以指定内边距和外边距值。
• 间距模块：还有一个额外的间距模块，可以添加到布局中，以精确控制元素之间的间距，而无需涉及 CSS。

本教程将结合使用 Divi 主题的视觉生成器和自定义 CSS 界面。

实时设计 - Divi 的视觉生成器可用于实时进行更改。将其与自定义 CSS 结合使用可以简化设计过程。

• 使用视觉生成器布局您的设计。
• 首先，视觉生成器界面提供了一个易于使用的拖放页面布局，以创建所需的页面。
• 通过点击内置设置菜单中的加/减号按钮来调整栏宽，以获得粗略的设计。

2. 使用自定义 CSS 进行细化

• 在建立好大致结构后，可以使用自定义 CSS 进一步优化您的网站。
• 这种混合方法可确保您获得两全其美的效果，并能够对安装进行非常细粒度的控制。
• 保存设置 - Divi CSS 中“未被充分利用”的最佳功能。全局调整、部分更改、区块绕过以及各种其他 CSS 自定义技术可以对设计元素的外观进行精细调整。如果您将所有这些 CSS 技巧与 Divi 的功能以及可能的子主题结合起来进行长期维护，那么您就可以放心地知道您的网站外观出色并且易于运行。

使用 CSS 调整 Divi 栏宽的技巧

通过 CSS 自定义栏宽在 Divi 主题设计中对于 Web 项目非常有用，但一些应避免的实践可以增强 Web 项目的可维护性、性能和可访问性。

1. 保持 CSS 组织有序
   始终保持 CSS 文件整洁，根据各自的功能对类进行排序，并在各部分使用描述性的标签。这种做法可以更轻松地找到特定样式并在需要时进行更改。
2. 明智地使用特异性
   请注意，使用高特异性的 CSS 来优先于 Divi 的预定义样式。如果您有多个具有相同类或 ID 的元素，请使用附加的属性选择器来仅自定义您需要的元素。
3. 充分利用浏览器开发者工具
   集成使用浏览器开发者工具的功能，例如 Google Chrome 扩展程序。例如，使用 Chrome DevTools 等专为此功能设计的工具来查看页面上的元素，在应用 CSS 样式之前实时测试它们，或者解决错误。这有助于在完全应用特定样式之前了解如何使用它。
4. 跨多种设备和浏览器进行测试
   确保您的网站外观在各种计算机、显示器以及不同浏览器中都能正常显示。在模拟设备和实际设备的工具集上检查您的网站将有助于您发现任何差异。
5. 最小化 CSS 膨胀
   仔细考虑使用 CSS，避免包含不必要的 CSS 规则，以防止 CSS 文件过大而可能减慢页面加载速度。确保仅包含有助于您进行自定义的样式。
6. 编辑文档前进行备份
   在更改任何 CSS 条目之前，请压缩整个网站。这是为了确保在发生故障时您始终能够恢复您的网站。
7. 其他材料和工具
   为了提高您使用 CSS 进行 Divi 定制的熟练程度，请考虑阅读以下材料和工具。
8. Divi 社区和文档
   Elegant Themes 提供了丰富的文档，涵盖了 Divi 主题的广泛主题，包括最佳实践和定制建议。
   加入 Facebook 群组、论坛和其他在线社区，可以提问、分享经验并获得其他 Divi 用户提供的帮助。

示例

输出