如何对齐 Elementor 部分和列

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

• 为什么我们需要对齐？
• 响应式设计的列或部分如何工作？
• 如何对齐 Elementor 部分和列？
• 要解决响应宽度问题，请使用溢出隐藏
• 照顾定位
• 相对单位
• 使用 Z 索引控制每个元素的深度
• 关于重复功能的技巧
• 偏移量
• 黄金法则
• 结论

为什么我们需要对齐？

在每个列或部分中，内容可以属于不同的类别。 它可以是图片、文字和评级的形式。 对于整体外观，建议内容外观保持一致。 它不应该只是为了好玩而被扔在那里——倾倒——。

通过良好的对齐，您可以使网站显得更加整洁和优雅 - 这样它就不会看起来混乱。 使用对齐选项，您可以调整同一列中彼此相邻的多个不同大小的小部件。

响应式设计的列或部分如何工作？

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

假设您有一个三列布局。 借助自定义定位，您可以将小部件从右列拖放到中心列，或者按照您喜欢的方式放置。

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

因此，您可能会遇到所有三列彼此堆叠的情况，而不是并排的三列。 该元素将不再像在桌面上那样出现在中间列中。

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

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

如何对齐 Elementor 部分和列？

对于每个部分/列，进入布局部分并根据您的要求设置以下对齐选项：

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

就此而言，有^*三个新选项，可以非常方便地根据您的喜好调整内容。

• ^*间距 – 设置列边缘开始处和末尾处小部件之间的间距。 小部件是等距的，即它们之间的空间相等。
• ^*周围空间 – 小部件之间的空间相等，边缘大小是小部件之间空间大小的一半。
• ^*空间均匀 - 小部件之间的空间是均匀的 - 它们之间、之前和之后都是相等的。

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

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

当涉及网站在移动设备上的外观时，您很可能会遇到具有自定义定位的小部件溢出列宽度的问题。  

这会给移动访问者带来非常令人沮丧的情况，因为他们可以水平滚动。 这不是您想要的网站内容。 这可以通过以下方式解决：

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

这样超出的区域就会被切掉，就不需要水平滚动了

照顾定位

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

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

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

相对单位

当您设计网页时，您会发现可以通过多种方式定位元素。 对于绝对定位，最好使用相对单位，因为当涉及到不同的屏幕尺寸时，它将使响应式设计更加实用。

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

使用 Z 索引控制每个元素的深度

如果您打算对小部件使用“绝对”或“固定”定位，那么在很多情况下，两个或多个小部件可能会重叠，即它们彼此堆叠在“顶部”。 您可以通过使用正常的 Z 索引设置来避免这种情况。 这将使您能够控制深度并允许您选择哪些小部件出现在前台。

关于重复功能的技巧

如果您使用右键单击来复制具有自定义定位的元素，则右键单击可能看起来不起作用。

但是，坚持住。 这不是真的。 复制功能运行得非常好并且复制了元素。 只是由于每个元素都具有完全相同的自定义定位，因此重复的元素完全堆叠在另一个元素的顶部（给人一种没有创建重复元素的印象。）。

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

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

偏移量

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

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

黄金法则

为了获得更好的响应式设计，请使用相对单位。 这是因为当从不同平台访问网站时，绝对定位可能会很棘手。 使用相对单位来设计您的部分将导致更具响应性的设计。 借助相关单位可以完美处理宽度的变化。 我们所说的“相对”是指百分比或视图宽度 (VW) 等不同的单位，而不是像素等固定单位。

结论

Elementor是一个超级用户友好的网站构建器。 有时，如果通过手机或平板电脑访问网站，可能会给网站显示带来挑战。 借助部分和列对齐，您可以轻松地使您的网站变得完美。