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.
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.
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%
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.
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.
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.