Get Oxygen
Learn Reference Visual Editing Layout & Spacing

Layout & Spacing

Oxygen's flexbox-powered layout engine makes it easy to create any layout you can imagine.

You define the structure of your page using Sections, Columns, and Divs.

Then, you place your content like headings, text, videos, and more inside of these elements, and control their layout and alignment using Oxygen's layout controls.

Sections

In general, your pages will be constructed from multiple Section elements. All other elements on your pages will be placed inside these sections.

The Section element automatically constrains the content inside of it to be no wider than the Page Width. You can specify a custom width for the section at Advanced > Size & Spacing > Container Width.

Columns

The Columns element is for column-based content. You can choose from preset column layouts, or specify the widths of the individual columns manually.

The Columns element has responsive controls, so that below a specified screen width, you can:

  • stack the columns vertically
  • reverse the order of the columns
  • force the column widths to 50%

Divs

The Div element is most commonly used for grouping elements inside of a Section or Column to control the layout of only those elements, without affecting the layout of other elements inside the Section or Column.

For example, you may place a horizontally stacked Div inside a vertically stacked Section to create a horizontal layout inside a vertical layout.

Layout & Alignment Controls

Sections, Columns, and Divs have settings to control the layout and alignment of the elements placed inside of them.

Child Element Layout

The child elements of a section, column, or div can be stacked horizontally or vertically.

You can change the Child Element Layout setting based on screen width to make your layout responsive.

Item Alignment

Once you choose how to stack your child elements within a container, you will see additional settings for aligning your elements within this container. These settings enable you to align your elements to one side or the other, center them in the middle, or place them near the top or bottom of the container.

Spacing

Mouse over the edge of the element to reveal the spacing drag bar. Click and drag this bar to adjust the element spacing.

There are two types of spacing:

  • Padding - space inside an element
  • Margin - space outside an element

Instead of using the drag bar, you can manually specify these values at Advanced > Size & Spacing.

Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2018
Designed with Oxygen.
Legal
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram