How your Xsyte fits together
Your Xsyte is made up of two main building blocks — Pages and Layouts.
Pages hold your content. Layouts decide how that content is displayed.
Once you understand how they work together, you’ll see just how flexible your Syte can be — from a simple “About Us” page to a live-scoring homepage pulling real-time stats.
🧱 What’s a Page?
A Page is your basic piece of content. Think of it like a document — it has a title, a slug (URL), and some content.
You can use Pages to:
- Create static pages like “About Us”, “League Rules”, or “Contact”
- Manage your navigation menu (decide what appears in your site header)
- Store reusable content that you can display later inside a Layout Block
- Pull in live data (Teams, Players, Sponsors, etc.) using Data Sources
💡 Example: You might create a Page called “League Showcase” that shows all your upcoming seasons. Then, you can drop that page into your Homepage Layout using a “Page Block.”
🧩 What’s a Layout?
A Layout controls where content appears and how it looks. It’s the visual designer for your homepage and other dynamic areas.
Layouts are made up of:
- Sections (rows) – each can have 1–4 columns
- Columns – define spacing and width (spans)
- Blocks – the actual pieces of content (like News, Calendar, Standings, or Page blocks)
You can think of it like stacking Lego bricks — each section gives you a place to put your blocks.
Example Layout
[ Section 1 ] → 1 Column (full-width): Hero Video
[ Section 2 ] → 3 Columns: (News | Calendar | Sponsors)
[ Section 3 ] → 1 Column (full-width): League Showcase (from a Page)⚙️ How They Work Together
Here’s the magic: You create Pages → then use them inside Layouts.
Example Flow:
- You create a Page called “About Our League”
- You build a Layout for your homepage
- You drag a Page Block into the Layout
- You select “About Our League” as the content source
- When you publish, that content is displayed live on your homepage
So you can mix:
- Static pages (written content)
- Dynamic blocks (live data like standings, schedules, news)
- And embedded videos, ads, or sponsor grids — all in one layout.
🎯 Why We Designed It This Way
Most sports websites fall into two camps:
- 🧱 Rigid templates – easy to start, hard to customize
- ⚙️ Developer systems – powerful but confusing
Xsyte bridges both:
- Pages give you full control over content
- Layouts give you total flexibility over structure
- Data Sources make your pages dynamic — pulling live data automatically
Together, they let you design your Syte your way — without needing code.
🧠 Quick Visual Overview
┌────────────────────────────────────────────┐
│ Your Syte │
│────────────────────────────────────────────│
│ LAYOUTS: control structure & design │
│ ├── Homepage │
│ │ ├── Hero (Video Block) │
│ │ ├── News + Calendar + Sponsors │
│ │ └── League Showcase (Page Block) │
│ │ │
│ PAGES: hold your content │
│ ├── About Us │
│ ├── League Showcase (used in layout) │
│ ├── Rules & Forms │
│ └── Contact Us │
└────────────────────────────────────────────┘🪄 Behind the Scenes
When you save or publish a layout:
- Xsyte builds a fast, cached version of your homepage.
- Each block is fetched from its data source.
- If you update content (like a Page or News post), the cache updates automatically.
So even complex pages stay lightning-fast ⚡️.
Revision History: Every time you save a layout, a snapshot is stored automatically. You can view the full history and revert to any previous version at any time — so you never have to worry about breaking things.
Preview Mode: Before publishing, you can preview your draft layout in a new tab. Only admins can see the preview — your live site stays unchanged until you hit Publish.
🔗 What’s Next?
Now that you know how the pieces fit:
- 👉 Learn how to Create and Manage Pages
- 🎨 Dive into the Layout Builder Interface
- 🧠 Explore Data Sources to make your pages dynamic
- 🍳 Explore Page Recipes to make your site shine fast
Comments
0 comments
Please sign in to leave a comment.