Oxygen Builder页面构建器布局间距概览

Oxygen Builder页面构建器布局间距概览

Oxygen Builder页面构建器布局间距概览

  Oxygen Builder的flexbox驱动的布局引擎可以轻松创建您可以想象的任何布局。可以使用Sections、Columns和Divs定义页面的结构。然后,您将标题、文本、视频等内容放置在这些元素中,并使用Oxygen的布局控件控制它们的布局和对齐方式。

  本文,晓得博客为你介绍Oxygen Builder页面构建器布局间距概览功能。

  推荐:如何查找网站使用的WordPress主题

Section元素

Oxygen-Builder页面构建器Section元素
Oxygen Builder页面构建器布局间距概览

  通常,您的页面将由多个Section元素构成。您页面上的所有其他元素都将放置在这些部分中。Section元素自动将其内部的内容限制为不超过页面宽度。您可以在“ Advanced ”->“ Size&Spacing ”->“ Container Width ”中为该部分指定自定义宽度。

Columns元素

Oxygen-Builder页面构建器Columns元素
Oxygen Builder页面构建器布局间距概览

  Columns元素用于基于列的内容。您可以从预设的列布局中进行选择,或手动指定各个列的宽度。Columns元素具有响应式控件,因此在指定的屏幕宽度下。

Div元素

Oxygen-Builder页面构建器Div元素
Oxygen Builder页面构建器布局间距概览

  Div元素最常用于对Section或Column内的元素进行分组,以仅控制这些元素的布局,而不影响Section或Column内其他元素的布局。例如,您可以将水平堆叠的Div放置在垂直堆叠的Section内,以在垂直布局内创建水平布局。

布局和对齐控件

  Sections、Columns和Divs具有控制放置在其中的元素的布局和对齐方式的设置。

  1、Child Element Layout子元素布局

  Sections、Columns列或div的子元素可以水平或垂直堆叠。您可以根据屏幕宽度更改子元素布局设置,以使您的布局响应。

Child Element Layout子元素布局
Oxygen Builder页面构建器布局间距概览

  2、Item Alignment项目对齐

  一旦选择了如何在容器中堆叠子元素,您将看到用于在该容器中对齐元素的其他设置。这些设置使您可以将元素与一侧或另一侧对齐,将它们置于中间,或将它们放置在容器的顶部或底部附近。

Item-Alignment项目对齐
Oxygen Builder页面构建器布局间距概览

Spacing间距

  将鼠标悬停在元素的边缘以显示间距拖动条。单击并拖动此栏以调整元素间距。间距有两种:

  • Padding填充——定义元素边框与元素内容之间的空间,即上下左右的内边距与元素内的间距
  • Margin边距——从元素边框到另一个容器边框之间的距离,就是容器外距离

  可以在“Advanced”->“Size&Spacing”手动指定这些值,而不是使用拖动条。

GRID LAYOUT网格布局

  注意:CSS GRID可用作SECTION、DIV、GALLERY、EASY POSTS和REPEATER元素中的布局选项。

  Columns列

  • Column Count:列数:选择您想要在网格中有多少列。
  • Auto-Fit Columns:这会覆盖列数,并根据“最小宽度”值将尽可能多的子项放在一行上。
  • Min Width最小宽度:设置每个元素的最小宽度。如果在使网格响应时遇到问题,如果一行中有多个子项,则可能需要减小此宽度。
  • Max Width最大宽度:设置每个元素的最大宽度。默认的“1fr”单位意味着每列将占用基于列数的可用空间的一个相等部分。如果您指定了4列,则1fr等于25%..
  • Gap:间隙:设置网格列之间的间隙。
  • Horizontal Item Alignment水平项对齐(左、中、右、拉伸):如果Grid子项未占用可用空间的全部宽度,则此设置将根据“水平项对齐”选择在其Grid单元格内对齐子项。

  Rows行

  Row Behaviour

  • Auto自动:将根据网格中子项的数量使用正确的行数。
  • Explicit显式:设置行数、最小和最大高度。
  • Row Count行数:设置您想要在网格中的行数。这在使用Child Span Override时很有用(见下文)。
  • Min Height最小高度:设置最小行高。
  • Max Height最大高度:设置最大行高。
  • Match Height of Tallest Child checkbox匹配最高子项的高度复选框:此选项使所有行的高度相同,基于网格中最高的子项。.
  • Gap间隙:设置网格行之间的间隙。
  • Vertical Item Alignment(Start,Center,End,Stretch):如果Grid子项没有占据可用空间的全部高度,则此设置将根据Vertical Item Alignment选择在其网格单元格内对齐子项。

Default Child Span默认子跨度

  • Column Span列跨度:设置您希望每个子项默认跨越的列数。
  • Row Span行跨度:设置您希望每个子项默认跨越的行数。

Child Span Override子跨度覆盖

GRID-LAYOUT网格布局
Oxygen Builder页面构建器布局间距概览

  此控件将反映Grid中的项目数。单击其中一个以明确设置它们将跨越的行数或列数。

  • Column Span列跨度:所选子项将跨越的列数。
  • Row Span行跨度:所选子项将跨越的行数。
  • Reset Grid Children:重置在Child Span Override部分中设置的所有内容。

  推荐:Oxygen Builder页面构建器教程

5/5 - (1 vote)

ThemeForest 模板套件
可视化创建WordPress网站
siteground主机
namesilo最便宜的域名购买

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top