Layouts

Certain elements in Oxygen, such as Loop Elements, have built-in layouts that you can use.

In the List section of the Design Tab, you can change the Layout of the Post Loop Builder with various settings:

• List: Display the loop items in a one-column list
• Grid: Display the loop items in a grid with 1 or more posts per row
• Slider: Use a slider to display the loop items.
• Accordion: Use an Accordion layout to display loop items.
• Tabs: Use a Tabs layout to display loop items.
• Masonry: Use a Masonry layout to display the loop items

List Layout

With list layouts, loop items will be displayed vertically. This is the most basic layout and only have one control:

• Space Between Item: Set the space, or gap, between each loop item.

Grid Layout

grid layouts allow you to display loop items in a grid with the option to display one or more posts per row. grid layouts have three controls:

• Items Per Row: Define the number of items per row in the list.
• One Item At: Set breakpoints for displaying only one item per row.
• Space Between Items: Set the space, or gap, between each loop item.

Slider Layout

Slider layouts let you display your loop items in a slider using SwiperJS. Oxygen includes a variety of controls for the slider.

Settings

• Effect – Choose the transition effect between slides (e.g., fade, slide).
• Coverflow – Fine-tune the coverflow effect (only available when ‘Effect’ is set to ‘coverflow’).
  • Shadow – Enable or disable the shadow for depth.
  • Depth – Adjust the depth effect for coverflow slides.
  • Rotate – Set the rotation angle for coverflow.
  • Stretch – Control how much the coverflow slides stretch.
• Speed – Define the speed of the transition between slides.
• Infinite – Set whether slides loop infinitely.
• Center Slides – Center the visible slides in the slider view (only available when ‘Infinite’ is enabled).
• Autoplay – Automatically transition between slides.
  • Autoplay Settings – Configure autoplay options (available when ‘Autoplay’ is enabled).
    • Speed – Set the transition speed for autoplay.
    • Stop On Interaction – Pause autoplay when a user interacts with the slider.
    • Pause On Hover – Pause autoplay when the mouse hovers over the slider.

Advanced

• Swipe On Scroll – Enable slide scrolling with swipe gestures.
• Auto Height – Automatically adjust the slider height based on content.
• Between Slides – Set the space between individual slides.
• Slides Per View – Specify how many slides are visible at once (only available when ‘Effect’ is not set to ‘flip’ or ‘fade’).
• One Per View At – Set breakpoints where only one slide is visible.

Arrows

• Disable – Toggle to disable the navigation arrows.
• Color – Adjust the color of the navigation arrows (available when ‘Disable’ is not active).
• Size – Set the size of the navigation arrows (available when ‘Disable’ is not active).
• Overlay – Enable arrow overlay on the slides (available when ‘Disable’ is not active).
• Space To Slides – Set the space between arrows and the slides (available when ‘Disable’ is not active).
• Space To Edge – Define the space between arrows and the slider edge (available when ‘Disable’ is not active).
• Custom Icons – Use custom icons for navigation arrows.
  • Next – Choose a custom icon for the ‘Next’ arrow.
  • Previous – Choose a custom icon for the ‘Previous’ arrow.

Pagination

• Type – Choose the type of pagination (e.g., bullets, progress bar).
• Bullets – Customize bullet pagination (available when ‘Type’ is not set to ‘progressbar’ or ‘fraction’).
  • Color – Set the bullet color.
  • Size – Define bullet size.
  • Space Between – Adjust the spacing between bullets.
  • Radius – Set the bullet radius for rounded corners.
• Fraction – Configure fraction pagination settings.
• Progress Bar – Customize the progress bar (available when ‘Type’ is set to ‘progressbar’).
  • Background – Set the progress bar background color.
  • Progress – Select a color for progress indication.
  • Height – Define the height of the progress bar.
  • Position – Set the position of the progress bar.
• Overlay – Enable pagination overlay on slides (available when ‘Type’ is not set to ‘none’).
• Margin – Set the margin around pagination (available when ‘Type’ is not set to ‘none’).

Accordion Layout

The accordion layout will display all of your loop items as an accordion. By default, the Text for each accordion before opening it will be the same as the title of the item.

• Accordion: When enabled, only one accordion item will be opened at a time. When disabled, you may have more than one accordion item open.
• First Item Opened: Have the first accordion item open when the page loads
• Item:
  • Style: Pick a style for the accordion items, like default, bordered, or pill-shaped.
  • Icon: Customize the icons representing open and closed states:
    • Position: Determine where the icon appears relative to the accordion item’s text.
    • Icon: Select an icon that indicates a collapsed accordion item.
    • Active Icon: Choose an icon for an expanded accordion item.
    • Size: Adjust the size of the icons.
    • Color: Define the color of the icons.
    • Active Color: Set the color of the icon when the accordion item is active or expanded.
  • Background: Choose a background color for individual accordion items.
  • Padding: Manage the internal spacing within each accordion item:
  • Typography: Customize the font properties of the accordion item’s text.
  • Active: Style the accordion items when they’re expanded:
    • Text Color: Set the text color for active items.
    • Background: Choose a background color for active accordion items.
  • Transition Duration: Set the time it takes for an accordion item to open or close.

Tabs Layout

The tabs layout will display all of your content in vertical or horizontal tabs.

• Active Tab: Set the default active tab.
• Open on Hover: Open the tabs on hover instead of click.
• Styles
  • Vertical – Toggle between vertical and horizontal layouts for your tabs.
    • Horizontal At – Define the breakpoint at which tabs switch from vertical to horizontal layout.
  • Style – Choose the overall style of your tabs, such as bar, pills, or separators.
  • Position – Set the position of your tabs, either at the top, bottom, left, or right, depending on the layout.
  • Space Between – Adjust the space between individual tabs.
  • Space After – Control the space after the tabs, before the content area begins.
  • Bar – Customize the bar style tabs with options for separators, radius, and shadow.
  • Pill Radius – Set the radius for pill-style tabs.
  • Separator – Style the separators in tab-style layout.
  • Text – Customize the typography, hover, and active state colors of the tab titles.
  • Background – Style the background for inactive, hover, and active tab states.
  • Underline – Customize the underline feature for your tabs.
  • Padding – Adjust the padding inside the tabs for better layout and spacing.
  • Icon – Customize the icons used in your tabs, including size, position, and spacing.
  • Responsive – Manage how your tabs behave on different devices, including dropdown styles and visibility options.
  • Transition Effect – Set the transition effect speed when switching between tabs.

Masonry Layout

The masonry layout is similar to the grid layout, but the height of each item may be different instead of all items being the same height.

• Items Per Row: Define the number of items per row in the list.
• One Item At: Set breakpoints for displaying only one item per row.
• Space Between Items: Set the space, or gap, between each loop item.