Layout & Regions

Every page in Scorecenter has a layout that determines how content is arranged horizontally, and regions that act as drop zones for modules. Understanding these is essential for building pages that work well on all screen sizes.

The 4 layout modes

Choosing a layout

• No sidebars gives your content the full viewport width. Best when the main content is self-sufficient and does not need supporting context.
• Right sidebar is the most popular pattern in sports sites. Main content (scores, articles, fixtures) on the left, supporting content (standings, ads, quick links) on the right.
• Left sidebar is less common but useful for pages with navigation-heavy structures like league directories or category filters.
• Both sidebars is the densest layout. Use it sparingly -- it works on desktop but stacks into a very tall page on mobile.

Content regions

Regions are the containers where you place modules. Each region is an ordered list -- modules render top to bottom in the order you arrange them.

main

Always present regardless of layout mode. This is the primary content area and typically holds your most important modules. On mobile, this region appears first.

sidebarLeft

Available when the layout is set to Left sidebar or Both sidebars. On mobile, this region stacks above the main content.

sidebarRight

Available when the layout is set to Right sidebar or Both sidebars. On mobile, this region stacks below the main content.

Adding modules to a region

Each region has its own Add module button at the bottom. Click it to open the module library, then select a module to insert. You can drag modules to reorder them within a region or move them between regions.

Sidebar width control

Sidebar widths are configured in Settings > Styles and apply globally across all pages.

The main region takes whatever space remains. For example, with a right sidebar at 25%, the main region gets 75% of the content width.

On screens narrower than the responsive breakpoint (typically 768px), sidebars collapse and stack vertically regardless of the width setting.

Layout presets

Layout presets are quick-apply configurations that set the layout mode, sidebar widths, and recommended module placement patterns in one click.

Shell modules

Shell modules are special region slots that sit outside the page content area. They belong to the site's persistent frame -- the parts that appear on every page regardless of which page the visitor is viewing.

They are managed in Settings -> Global regions. Pages and templates are managed separately in Pages.

Shell vs page modules

The key difference:

• Page modules change from page to page. Your homepage has different modules than your contact page.
• Shell modules persist across all pages. A banner in belowHeader appears on the homepage, on match pages, on article pages -- everywhere.

Per-page overrides

Global shell regions apply by default, but pages can override them individually from the page editor.

For each shell region, a page can:

• keep the global version
• hide it on that page
• replace it with a page-specific set of modules

This gives you global consistency by default, while still allowing exceptions where needed.

Responsive behavior

On smaller screens, Scorecenter follows a predictable stacking order:

1. topbar (shell)
2. Header and navigation
3. belowHeader (shell)
4. sidebarLeft (if present, stacks above main)
5. main
6. sidebarRight (if present, stacks below main)
7. aboveFooter (shell)
8. Footer
9. bottombar (shell)

This means visitors on mobile always see the main content before the right sidebar, and the left sidebar before the main content. Plan your module order with this stacking in mind.