Question

如何删除wordpress Divi主题部分之间的空间？

Answer 1

Vasili有一个很好的答案，但是，当您在Divi构建器中查看行/列的属性时 - 您将看到自定义边距和自定义填充<的两行设置/ strong>即可。这些将在某些元素的常规选项下，在其他元素的高级设计设置下。

默认情况下，这些是空白的，但 NOT 意味着它们被设置为0. 如果您将顶部/底部的填充和顶部/底部的边距更改为0应该能够删除空间而不必使用代码和大量的CSS！重要标签。

作为一般经验法则，尽可能避免使用！important标签。在DIVI中覆盖某些行并不总是有效 - 你可能有一行需要在一个页面上填充，而另外一行则不需要填充。我建议尝试通过构建器尽可能多地执行，如果这是您用来构建页面的内容。

Answer 2

使这对初学者更有用。

如果不使用代码，只需在同一部分中添加另一行就足够了。

如果不能，我们可以做poostchi所做的事情，我们可以改变该部分的CSS。现在，如果您访问您的网站并右键单击某个部分并选择检查元素（假设您的浏览器是chrome），您将看到您的部分编码如此。

<div class="et_pb_section et_section_regular" style="background-color:#2388e0;">
  <div class="et_pb_row">
    <div class="et_pb_column et_pb_column_4_4">
      <div class="et_pb_text et_pb_bg_layout_dark et_pb_text_align_left">
        This is row 1 section 1
      </div> <!-- .et_pb_text --><div class="et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
        this is row 2 of section 1
      </div> <!-- .et_pb_text -->
    </div> <!-- .et_pb_column -->
  </div> <!-- .et_pb_row -->

</div>

我们在这里看到他们正在使用类et_pb_section

单击类名将显示具有50像素填充值的类css代码：

.et_pb_section {
  padding: 50px 0;
  position: relative;
}

所以我们所要做的就是将填充值覆盖为0，这是pootschi所做的。

.et_pb_section{
    padding-top: 0px !important;
}

！important 告诉css用此覆盖。

但通过执行此操作，所有部分DIVI定义的填充值都将被覆盖。

那么如果你只想减少特定部分的差距呢？

Divi已将css ID和css CLASS包含在内，以便更好地定制模块的各个部分。您可以通过单击我们部分的编辑按钮找到它。

CLASS方法
为您的部分指定一个CSS CLASS名称： reduce_top_padding_here

那么你可以这样做。

.reduce_top_padding_here {
    padding-top: 0px !important
}

现在我们把这个css代码放在哪里？
Divi允许轻松进行CSS编辑外观＆gt; Divi主题选项＆gt;常规设置＆gt;
向下滚动以找到＆＃34;自定义css＆＃34; （将代码粘贴到此处。）

<强>解释
在这里，您已经创建了自己的css类。因此，只有您为此类名提供的部分或模块，才会继承此css显示指令，以使顶部填充为0像素。而不是写DIVI的主要.et_pb_section类。

请注意，类名前面的点表示在css中名称是一个类。

所以编辑特定部分的摘要

1-给你的部分一个CSS CLASS
2-然后在divi主题选项中定义CSS类值＆gt; ＆＃34;自定义css＆＃34;

Answer 3

我刚发现它！

.et_pb_section{
    padding-top: 0px !important;
}

Answer 4

我想扩展Vasili所分享的内容，以便提供更完整的答案（特别是关于排除全宽度部分）。

我怀疑Alex Seidler的答案错过了这一点。我怀疑提问者想要删除这个填充网站。正如他所建议的，通过Divi构建器执行此操作将非常繁琐，并且实际上会为网站引入更多（Divi生成的）其他CSS，包括所有!important标记（关于此，请参阅本回答结尾处的最后一点。）

正如Vasili和提出问题的人所指出的那样，以下代码将覆盖所有部分的填充。

.et_pb_section{
    padding-top: 50px !important;
}

注意，54px top和bottom当前是1350px以上屏幕上的默认值。 4%是981p及更低屏幕上的默认值。我说“目前”，因为我记得曾经是50px。它可能仍然是50%。无论如何，根据您的需要减少这种情况。提问者希望删除所有间距，在这种情况下将其设置为padding-top: 0 !important。

不包括全宽度部分

如果使用任何全宽度部分，上述更改可能会产生一些不良影响。如果发生这种情况，您可能希望使用以下内容排除这些部分：

:not(.et_pb_fullwidth_section).et_pb_section { 
   padding-top: 50px !important; 
   padding-bottom: 50px !important;
}

请记住，这会影响所有部分中的所有行。

仅限特定部分

如果您只想覆盖特定部分的填充，请使用Vasili在其答案中提出的建议。

减少行填充

任何想要减少默认部分垂直填充的人都可能会发现自己想要减少行垂直填充。

为此，将此CSS添加到您的子主题styles.css文件：

.et_pb_row { padding-top: 30px !important; }

30px是默认值。减少这个以满足您的需求。

仅限特定行

要仅减少特定行，您可以在相关行的Divi Builder“设计”选项卡中逐行进行，也可以为行提供唯一的类（在行设置的“高级”选项卡），然后将设置应用于您的子主题styles.css文件中的该类。这与更改特定部分的过程相同。例如，为行提供“row-reduced-top-padding”类，然后为styles.css文件：

.row-reduced-top-padding { padding-top: 10px !important; }

这种方法的优点是稍后调整设置要快得多，特别是如果你将它应用到很多行。

避免重要，不可能

关于Alex Seidler关于避免使用!important标签的评论：虽然这是真的，但最好避免这种情况，在这种情况下它是不可避免的。上次我检查时，当您通过Divi Builder更改边距和填充剖面和行时，甚至Divi本身也会使用!important标记。这是因为它还必须覆盖已经由Divi声明的站点范围的默认值。

Answer 5

我不确定Divi主题当时是否有这个，但如果你去Divi 主题定制器＆gt;一般设置＆gt;布局设置有截面高度和行高。

对于移动设备，请转到Divi 主题定制工具＆gt;移动设备，手机和平板电脑都具有分段和行高。

你仍然可能需要一些CSS。

如何删除wordpress divi主题部分之间的空格

5 个答案:

不包括全宽度部分

仅限特定部分

减少行填充

仅限特定行

避免重要，不可能