如何对齐Elementor部分和列

当您使用Elementor时，您会注意到自定义部分和列的位置有点棘手。 您需要垂直和水平对齐列和部分，以实现响应式“拉伸填充”布局。 如果没有这种对齐方式，具有不同高度的列元素将无法在屏幕上进行调整。

• 为什么我们需要保持一致？
• 列或节如何用于响应式设计？
• 如何对齐Elementor的节和列？
• 要解决响应宽度问题，请使用隐藏的溢出
• 照顾位置
• 相对单位
• 使用Z-Index控制每个元素的深度
• 关于重复功能的窍门
• 偏移量
• 黄金法则
• 结论

为什么我们需要保持一致？

在每个列或节中，内容可以属于不同的类别。 它可以采用图片，文字和等级的形式。 为了使外观看起来一致，建议在内容外观上保持一致。 它不应该只是为了它而扔掉，而是扔掉。

通过良好的对齐，您可以使网站看起来更整洁，更优雅-这样看起来就不会显得杂乱无章。 使用对齐选项，您可以在同一列中并排调整多个大小不同的窗口小部件。

列或节如何用于响应式设计？

Elementor 2.5使您能够自定义定位您的设计和内容。 使用新的自定义定位功能，您可以将小部件移动到任何位置。 但是，你不能真正做到超出某个部分。 这些小部件与它们所在的列相关。 这可能会导致设计的响应性出现问题。

假设您有一个三列布局。 在自定义定位的帮助下，您可以将窗口小部件从右列拖放到中心列，也可以随意放置。

但是这样做只会使桌面访问者受益，因为对他们来说看起来不错。 但是，如果从移动设备访问网站，则会引起问题，因为Elementor将列垂直堆叠在移动设备上。

因此，您可能不会遇到并排放置三列的情况，而是会经历所有三列的堆叠。 该元素将不再像在台式机上那样出现在中间列中。

虽然您可以使用隐藏设置巧妙地调整移动视图，但是并不能保证大多数人都能找到它。 那么，为什么要让用户感到沮丧呢？ 使设计具有响应能力和适应性是正确的解决方案。 这样它就不会在任何地方崩溃。

为此，您需要注意小部件与其内部列的关系。

如何对齐Elementor的节和列？

对于每个节/列，着陆在布局节上，并根据需要设置以下对齐选项：

• 垂直对齐：您可以从下面选择小部件的设置。 但是您必须记住的一件事是，列中的内容不能与前三个列的垂直选项（即顶部，中间和底部）对齐。
• 最佳
• 中间
• 底部

为此， ^*提供了三个新选项，这些选项使根据您的喜好对齐内容非常方便。

• ^*间隔–在列边缘的开始和结尾处设置小部件之间的间隔。 小部件是等距的，即它们之间有相等的空间。
• ^*周围的空间–小部件之间的空间相等，并且边缘的大小是小部件之间的空间的一半。
• ^*均匀间隔–小部件之间的空间是均匀的–在小部件之间，之前和之后均相等。

• 水平对齐：使用此选项，您可以执行内联定位并水平对齐同一行中的内嵌窗口小部件。 您可以使用以下选项在水平方向上对齐列的内容：
• 将所有图标开始向左对齐
• 居中：将图标放置在列的中间
• 将所有图标设置在右侧
• 之间的空间–列边缘的开始和结束处的小部件之间的空间。 小部件等距，即它们之间有相等的空间
• 周围的空间–小部件之间的空间相等，并且边缘是小部件之间的空间大小的一半
• 均匀空间–小部件之间的空间是均匀的–在小部件之间，之前和之后均相等

要解决响应宽度问题，请使用隐藏的溢出

当网站在移动设备上出现时，很可能会遇到一个问题，即具有自定义位置的小部件会超出列的宽度。  

这给移动访客带来了令人沮丧的局面，使他们可以水平滚动。 这不是您想要的网站内容。 可以通过以下方法解决此问题：

布局设置 > 将溢出选项设置为隐藏

这样，超出的区域将被切除，并且不需要水平滚动

照顾位置

您还需要注意列的位置。 您可以使用 Elementor 2.5 设置自定义定位——绝对和固定。

绝对位置是元素相对于您位于其中的部分或列的位置。 因此，如果您对元素或部分使用绝对定位，则该部分将不会沿着访问者的窗口移动。

固定位置与绝对位置不同，因为它使剖面/元素保持固定在访问者视点上。 因此，如果用户滚动页面，则该元素将停留在该页面上。

相对单位

在设计网页时，您会发现可以使用多种方式放置元素。 对于绝对定位，使用相对单位是一个好主意，因为当涉及到不同的屏幕尺寸时，它将使响应式设计更具功能性。

相对单元根据屏幕的相对宽度和高度进行自我调整，从而使元素或部分可以自行调整大小并具有更好的响应设计。 如果选择使用像素，则需要为不同的屏幕尺寸创建多个响应部分。

使用Z-Index控制每个元素的深度

如果要对小部件使用“绝对”或“固定”定位，则在很多情况下，两个或多个小部件可能会重叠，即它们“彼此叠放”。 您可以通过使用常规的Z-index设置来避免这种情况。 这将使您能够控制深度并允许您选择哪些小部件出现在前景中。

关于重复功能的窍门

如果您使用右键单击来复制具有自定义位置的元素，则右键单击似乎无效。

但是，看哪。 这不是真的。 复制功能运行良好，并且复制了元素。 只是因为每个元素都具有完全相同的自定义位置，所以重复的元素完全堆叠在另一个元素的顶部（给人的印象是尚未创建任何重复的对象。）。

简单来说，如果成功创建了一个列，则可以在需要时复制该列。 另外，请确保您创建的列不使用自定义定位。 如果是这样，则右键单击选项将无法进行复制。 但是，您可以使用重复功能克服限制并复制列。

稍微拖动顶部的元素，它将显示另一个元素。 这两个元素都在那里。 另外，当您复制一列时，它将叠加在旧列上。 您可能会感到困惑。 但是不用担心，您只需将其拖动然后在网页设计中使用它即可。

偏移量

在某些情况下，您需要为网页内容设置偏移量。 使用Elementor，您可以轻松设置偏移量。 因此，如果您将左侧的偏移量设置为500px，则根据您的输入内容周围将保留空格。 同样，您也可以在右侧设置偏移量。 最好将左右偏移设置为相似的值，因为内容将在屏幕上正确对齐。

在某些情况下，您需要为网页内容设置偏移量。 使用Elementor，您可以轻松设置偏移量。 因此，如果您将左侧的偏移量设置为500px，则根据您的输入内容周围将保留空格。 同样，您也可以在右侧设置偏移量。 最好将左右偏移设置为相似的值，因为内容将在屏幕上正确对齐。

黄金法则

“相对”是指变化的单位（例如百分比或视图宽度（VW）），而不是固定的单位（例如像素）。

结论

Elementor是一个超级用户友好的网站生成器。