How to create advanced layouts in Oxygen Builder

Break the design into large regions before adding details: header, hero, content area, sidebar, cards and footer. Use Sections for page regions, then place Divs or other container elements inside them. Keep the nesting shallow where possible, because deeply nested containers make spacing and responsive fixes harder to trace.

Choose Flexbox for one-dimensional layouts such as navigation bars, button groups and horizontally aligned content. Choose CSS Grid when you need rows and columns, card galleries or deliberate placement in two dimensions. Oxygen exposes both systems through its layout controls.

Add the required Sections and Divs in the Structure panel, then set each parent container's display and sizing before styling its children. For a Flexbox container, set the direction, alignment, justification, wrapping and gap so the children follow a predictable flow.

For a grid-based area, enable the grid controls on a supported container and set the column structure, row behaviour and gap. Give the outer section a sensible maximum width and use padding for internal breathing room rather than adding random margins to every child.

Assign classes to repeated patterns such as cards, buttons, section wrappers and content columns. Edit the class rather than styling every element separately, so one change updates every matching component. Oxygen's class controls map closely to CSS properties and also support states such as hover and focus.

Use a naming system you can understand later, such as section--dark, card and card__title. If two components only look slightly different, keep the shared class and add a second modifier class instead of duplicating the entire design.

Use Oxygen's visual controls for ordinary layout work, then add custom CSS for properties the interface does not expose or for precise effects such as grid placement, aspect ratios, clipping and complex selectors. You can add CSS to an element or class, and Oxygen also provides stylesheet and Code Block options.

Do not use absolute positioning for the whole page just because it matches one desktop screenshot. It often breaks when text becomes longer or when the viewport narrows. Reserve it for overlays and genuinely positioned elements, and let Flexbox or Grid handle the main document flow.

Preview the design at each Oxygen breakpoint and change the layout where the content needs it, not only where a device name suggests it. Oxygen includes Desktop, Tablet Landscape at 1119px and below, Tablet Portrait at 1023px and below, Phone Landscape at 767px and below, and Phone Portrait at 479px and below. Select a breakpoint in the builder before changing a property so the override is stored at the intended width.

Typical changes include switching a row to a column, reducing gaps and padding, changing a grid from four columns to two or one, moving a sidebar below the content, and hiding decorative elements. Test real content, long headings and zoomed text; a layout that only works with placeholder copy is not finished.

Save the page, clear any site or browser cache, and check the front end at several widths. If a change appears in the builder but not on the front end, check that the design was saved and that cached CSS is not being served. If spacing behaves strangely, inspect the parent container first: a child margin, inherited class or Flexbox alignment setting is usually responsible.

The fast route is to use OxyExtras Premium Oxygen Addon when you need ready-made design components and workflow features rather than building every pattern manually. It adds 38 components and features for Oxygen, including extra layout-oriented elements, responsive controls and reusable design options. Use it after you understand the native structure, because an addon will not fix a poorly organised container hierarchy or incorrect responsive rules.