Collection Editor

Build custom layouts with our drag-and-drop editor

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.

Sidebar

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:

Menu	What it does
File	Save, publish, preview, and manage your collection
Edit	Undo, redo, duplicate, and delete blocks
Insert	Quick access to add any block type without scrolling the sidebar
Format	Change 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