Skip to main content
The collection editor is where you build visual layouts for your portfolio or topic page. Think of it like a design tool — drag blocks onto a canvas, arrange them into columns, and publish a polished page without writing any code.

​
Opening the Editor

There are two ways to get started:
  • New collection — Go to sportsindex.io/collections/new to start from scratch or pick a template.
  • Edit existing — Open any collection you own and click Edit to jump back into the editor.

​
The Editor Interface

The editor is split into a few key areas:

​
Canvas

The canvas is the main working area in the center of the screen. It uses a 3-column grid (1336px wide) where you place and arrange blocks. Blocks snap to columns automatically, so everything stays aligned without fiddling with pixel positions.
  • Blocks can span 1, 2, or 3 columns depending on the type.
  • Drag blocks to reposition them on the canvas.
  • Resize blocks vertically by dragging the bottom edge.
The sidebar on the left lists all available block types, organized into categories:
  • General — Headings, text boxes, dividers, and spacers
  • Athlete — Athlete headers and bios
  • Content — News blocks
  • Article — Article headers, rich text, and pull quotes
  • Media — Images, embedded posts, post galleries, and generic embeds
  • Stats & Data — Charts, tables, head-to-head comparisons, and more
  • Team — Roster blocks
Click or drag any block from the sidebar to add it to your canvas.

​
Toolbar

The toolbar along the top gives you access to the main menus:
MenuWhat it does
FileSave, publish, preview, and manage your collection
EditUndo, redo, duplicate, and delete blocks
InsertQuick access to add any block type without scrolling the sidebar
FormatChange block styles — container, transparent, outline, or card

​
Working with Blocks

1

Add a block

Click a block type in the sidebar or use Insert from the toolbar. The block appears on your canvas, snapped to the grid.
2

Position the block

Click and drag the block to move it to a new position. The grid will guide it into place.
3

Edit the content

Double-click any block to edit its content inline. Depending on the block type, you will see a text editor, a form, or a media picker.
4

Resize if needed

Hover over the bottom edge of a block until you see the resize handle, then drag up or down to adjust the height.

​
Block Styles

Every block can be displayed in one of four visual styles:
  • Container (default) — Frosted glass background with subtle borders. Works well for most content.
  • Transparent — No background or border. The block content sits directly on the canvas. Great for headings and dividers.
  • Outline — A thin border with no background fill. Useful for lighter layouts.
  • Card — A solid card-style background with rounded corners and a slight shadow.
To change a block’s style, select the block and use the Format menu in the toolbar.

​
Saving and Publishing

Your work is not lost if you navigate away — the editor auto-saves a draft. But it is still a good habit to save manually with File > Save when you reach a good stopping point.
When you are ready to share your collection:
  1. Click File > Publish to make it live.
  2. Your collection will appear on your portfolio or topic page immediately.
  3. You can continue editing a published collection at any time — just save again when you are done.

​
What to Explore Next