在Weebly中使用Spacer元素进行列布局

在Weebly中使用Spacer元素进行列布局

Weebly 建站用“ Spacer ”元素替换了“ Columns ”元素,以在在线编辑期间提供更多灵活性。 这既有优点也有缺点,特别是从用户的角度来看,布局元素的概念已经完全改变了新的间隔元素。 在这里,我们将讨论间隔元素的功能以及有效对齐元素以创建紧凑内容的技巧。

推荐:如何在非响应主题中添加Weebly Pro标题幻灯片

并行拖放元素

Weebly 建站通过引入间隔元素改变了其所见即所得编辑器中拖放的整个概念。 与以前元素只能在其他元素下对齐的方式不同,现在您可以将任何元素与其他元素相邻放置在内容区域中。 这为用户提供了很大的灵活性,可以围绕元素进行操作,从而轻松地进行多列布局。

间隔元件可用于在元件之间、元件上方、元件下方或元件旁边提供空间。 例如,您可以通过在上方和下方添加间隔来调整图像的位置。

如何使用它?

假设您要在所有三列之间使用分隔符进行三列布局。 在这种情况下,您只需将 3 个文本或图像元素拖放到彼此旁边,就会自动形成三列布局。 然后在列之间添加间隔元素并调整宽度以在三列之间提供足够的空间。

可以通过在列内容下方添加间隔元素来再次调整列中的内容高度。

优点缺点

优点

  • 元素可以添加到下一个。
  • 易于制作列。
  • 易于在元素之间添加所需的空间。

缺点

  • 很难在单个页面上使间隔的高度和宽度保持一致。
  • 在拥有数百个页面的站点上也很难保持一致的两列或三列布局。
  • 调整元素以填充一列并使用垫片调整高度和宽度是一项繁琐的任务。

推荐:如何编辑 Weebly 源代码 HTML 和 CSS?


发表评论