Layout Controls

Many elements in Breakdance, 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 these elements with various options:

• 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. Breakdance includes a variety of controls for the slider. Learn more about Slider controls.

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.