How to Use the Layout Builder

• Set the Design Space:
  The layout uses a maximum design width of 1100px and automatically scales responsively across desktop, tablet and mobile devices. Adjust the design space height to suit your venue or layout.
• Upload a Background:
  Upload a background image that is 1100px wide. The design space uses this as its master coordinate system, allowing layouts to scale responsively while maintaining accurate object positions. Set the design space height to match the height of your background image before you begin placing objects.
• Choose an Object Type:
  Select the type of object you want to add:
  • Seat – a clickable seat or selectable position.
  • Text – a label such as a row name, section name, entrance or stage description.
  • Prop – a visual object such as a table, stage, bar, counter, booth or room feature.
• Choose the Style Before Adding:
  Select the object shape, colour and size before adding it to the design space.
  • Shape – choose Square, Rounded, Half-Rounded or Circle.
  • Colour – the selected HTML colour name is saved in the CSV as color_code.
  • Size – controls the object width and height, saved as products_w and products_h.
  • Rotation – rotate a selected object using the [ and ] keyboard keys. Rotation is saved as products_r.
• Add Objects:
  Click the appropriate Add button to place a new Seat, Text object or Prop using the currently selected style, colour and size.
• Move Objects:
  Drag any object to position it within the design space. Its coordinates are saved as products_x and products_y.
• Select Multiple Objects:
  Hold Ctrl on Windows or Cmd on Mac while clicking objects. Drag any selected object to move the entire group together.
• Snap to Grid:
  Enable Snap to Grid to align objects more precisely. Disable it when you need finer manual positioning.
• Delete Objects:
  Select one or more objects and press the Delete key.
• Export the Layout:
  Click Export CSV to download the complete layout, including object types, labels, coordinates, colours, sizes and rotation.
• Import into osConcert:
  The exported CSV can be imported directly into osConcert to create a responsive seating layout. Seats become selectable ticketing objects, while Text and Props are displayed as visual layout elements.
• Import an Existing CSV:
  Click Import CSV to reload or continue editing an existing layout. The CSV should retain the original column structure used by the Layout Builder.
• Save the Design Space Settings:
  Use Download Settings to save the design space dimensions and background configuration. Use Upload Settings to restore them later.
• Clear the Layout:
  Use Clear All to remove every object from the current design space. Export your CSV first if you may need the layout again.