如何对齐 Elementor 部分和列

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

为什么我们需要对齐?

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

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

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

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

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

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

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

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

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

如何对齐 Elementor 部分和列?

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

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

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

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

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

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

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

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

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

照顾定位

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

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

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

相对单位

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

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

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

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

关于重复功能的技巧

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

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

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

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

偏移量

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

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

黄金法则

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

结论

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

艾哈迈德

查看评论

  • 您在哪里可以找到这些选项? 它们不存在。 这是高级 Elementor 的吗? 如果是这样,您应该在文章中提及它,这样人们就不会浪费时间阅读它。

  • 你好,

    使用 Elementor Pro 表演 maquetando。
    Quiero poner dos 横幅,uno pegado a la izquierda y otro pegado a la derecha de la pantalla。 Para ello he creado: - una secion para cada 横幅。
    - Un encabezado con un frase,a la cual he puesto de fando una imagen。

    Una de ella deberia ir pegada a la derecha de la pantalla(页边距 izquierda 0 imagino)。 阿尔贡·康塞乔? 非常感谢!

  • Buongiorno,tutto chiaro,谢谢!
    Ma mi stavo domandando se è possibile inserire tre righe (con tre pulsanti uno sotto l'altro) nella stessa colonna。 Cerco di spiegarmi meglio: vorrei splitre un sezione in due colonne.
    如果照片带有封面,sinistra 的柱子具有连续脉冲(unsopra l'altro),sinistra 柱子的等距和中心位置,根据质量,带有智能手机型号的 rimandano以及照片中智能手机外壳的可用性。 Sto cercando ovunque, ma non trovo nulla che indichi che si possa fare.
    所以没有 aperta a tutti 我建议
    Grazie

  • Scusate, ho appena capito come fare (l'ho capito per errore)。 斯库萨特·伊尔·干扰与感恩·洛·斯特索

  • 没有标识溶剂的段落有问题。 内容包括拉多、图像、标题和文本。 No logro centarlo (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) No me había pasado nunca y no se que más probar。 它已由 tamaño móvil 编辑,因此它既是 quedado,又是 lado todo cuando cambio a escritorio! Alguien sabe que puede ser? 他试图做好他的工作,并且没有任何功能 🤗

    • 您好,我认为您必须首先检查部分中的所有对齐情况,然后是列,然后是内容块。 您的主题的 CSS 也有可能在这种对齐中发挥作用。

  • 你好!
    您将车辆对准 3 个水平线到达。
    围绕结构的整个表面,您可以看到修改、带有改装浮雕的柱子以及 côté gauge de l'écran 上的不同腰线(较大和较高)。 您的选择是身体的形状和矫正器的形状。 评论公平吗?

  • 你好,请安装新的元素,而不是水平和垂直段落的选项。
    您是如何安装补充附加功能的? 格拉西亚斯

  • 你好,

    我的页脚中有几个小部件。 这始终是一个标题,一个更大胆的观点。 这样我就不必在一个框中(h4 和 p)写下未写的文本,除非我将其写在 2 个部分中。 我现在如何找到下一个 WordPress 部分? 标题和正文仍有显示空间。

    感谢您的帮助

    • 您好,有多种选项可以调节文本之间的间距:可以是部分、列或小部件边距或填充,也可以是行高等字体选项。

最近的帖子

如何在 Elementor 中使用页眉和页脚

网站的页眉和页脚是必不可少的元素。 在大多数情况下,标题提供导航...

2022 年 1 月 6 日

WordPress 主题比较:Astra 与 OceanWP

市场上最受欢迎的两个 WordPress 主题是 Astra 和 OceanWP。 专业的…

2022 年 1 月 2 日

WordPress 新闻主题比较:报纸与报纸 阿斯特拉

创建一个优秀的新闻网站并不需要您成为一名网页设计师。 我们…

2021 年 10 月 25 日

创建一个以报纸为主题的新闻相关网站

报纸主题是由 tagDiv 设计的最重要的 WordPress 主题之一,...

2021 年 10 月 18 日

如何使用 Avada WooCommerce 构建器构建电子商务

在建立在线商店时,WooCommerce 是首选plugin。 它…

2021 年 10 月 4 日

如何通过 Elementor 使用粘性标题和滚动效果

标题通常是人们访问您的网站时首先看到的东西,...

2021 年 9 月 21 日