Design the structure and flow of your Syte pages
Layouts control the look and structure of your pages.
They decide what goes where, how many columns you have, and what blocks appear on the page.
Think of Layouts as your drag-and-drop design tool — they’re how you turn your Pages, Videos, and Data Sources into a living, breathing site.
🧭 Where to Find the Layout Builder
Head to
Admin → Customize → Layouts
You’ll see a list of your layouts, usually including:
- Homepage Layout (your site’s front page)
- Default Layout (used by most static pages)
- Any custom layouts you’ve created for tournaments, news, or landing pages.
From the list you can:
- Edit — open the visual builder
- Revisions — view the full history of changes
- Revert — restore to the last saved version
- Duplicate — clone a layout as a starting point
- Delete — remove layouts you no longer need
Click Edit on any layout to open the Layout Builder.
🧩 The Layout Builder Interface
When you open the builder, you’ll see three main areas:
| Area | Description |
|---|---|
| Canvas (center) | Where you build your layout — sections, columns, and blocks. |
| Block Library (left) | All available content blocks you can drag or click to place. |
| Inspector / Modal | Appears when you click a block — edit its title, settings, and visibility using structured forms or raw JSON. |
Toolbar at the top gives you quick access to:
- Back — return to the layouts list
- Save Draft — save your work without publishing
- Preview — open a live preview of your draft in a new tab
- Publish — push your layout live
- Revisions — view and revert to previous versions
🧱 Sections (Rows)
A Layout is made of Sections, also known as “Rows.”
Each section defines how many columns it has — from 1 to 4.
You can add new sections using the buttons at the top:
[ Add 1 Column ] [ Add 2 Columns ] [ Add 3 Columns ] [ Add 4 Columns ]
Each section can have:
- A Title (optional, for your reference)
- A Layout Type (cols-1, cols-2, cols-3, cols-4)
- Its own ranking (order on the page)
You can delete or reorder sections at any time.
📏 Columns & Spans
Columns sit inside sections. Each column can hold one or more Blocks.
When you add a multi-column section (like 2 or 3 columns), you can choose each column’s span (width).
| Example Layout | Column Widths |
|---|---|
| 2 columns | 6 / 6 (even split) |
| 2 columns (custom) | 8 / 4 (main + sidebar) |
| 3 columns | 4 / 4 / 4 (equal thirds) |
To adjust spans:
- Click the “Span” dropdown in the column header.
- Choose a value from 1–12 (just like a grid system).
- Your layout updates immediately.
👉 All columns go full width on small screens automatically (mobile-first design).
🧱 Blocks (Content Elements)
Blocks are the content modules of your layout. You can drag them from the Block Library into any column, or use the “+ Add Block” button at the bottom of any column to click-to-place.
Available Block Types:
| Block | What It Does |
|---|---|
| 📄 Page | Display a custom Page you’ve created (with Data Sources!) |
| 📰 News Feed | Recent posts or articles |
| 📅 Calendar | Upcoming games and events |
| 🏆 Standings | Live league standings for any season |
| 🎥 Video | YouTube video highlights |
| 🧍 Seasons | Active/upcoming season list |
| 💬 Posts | Forum posts |
| 🧾 Sponsors | Rotating sponsor logos |
| 🛒 Products | Featured shop products |
| Facebook page embed | |
| Twitter timeline embed | |
| 📢 Ad | Ad placement |
🪄 Editing Block Settings
Click on any block to open its settings. You’ll see both a structured form and an advanced JSON editor.
Structured Forms make editing easy — no JSON required for common settings:
- Page Block: Select which page to display from a dropdown, toggle Hero Mode on/off.
- Standings Block: Pick a season from a dropdown, choose stat type (Regular Season, Playoff, Exhibition, or All).
Every block also has:
- Title — internal label for your reference
- Enabled — toggle to hide/show the block
- Advanced / Raw JSON — for fine-tuned control when you need it
💡 Page Block Settings
-
hero: true/false— Hero mode shows your page content as-is without a title or bounding box -
page_id— tells the block which page to include. Select from the dropdown or enter a number. You can find page IDs in Admin → Customize → Pages.
💡 Standings Block Settings
-
season_id— which season to show standings for (select from dropdown) -
stat_type— R (Regular Season), P (Playoff), E (Exhibition), or A (All)
👁 Preview Mode
Before publishing, you can preview your draft layout:
- Click Preview in the builder toolbar
- A new tab opens showing your homepage with the draft layout applied
- Only admins can see the preview — regular visitors still see the published version
This lets you check everything looks right before going live.
📜 Revision History
Every time you save, Xsyte creates a snapshot of your entire layout. This means you can always go back.
To view revisions:
- Click Revisions in the builder toolbar (or from the layouts list)
- You’ll see a table showing every save — with the date, time, and who made the change
- Click Revert on any revision to restore your layout to that exact state
Quick Revert: From the layouts list page, click Revert on any layout to restore it to the last saved version — useful if something went wrong with a recent change.
✅ Publish Safety Net
When you click Publish, Xsyte runs a safety check before your layout goes live:
- Test Render — your layout is rendered behind the scenes to make sure it produces valid HTML
- Error Isolation — if a single block has a problem, it’s silently skipped rather than breaking your whole page
- Homepage Fallback — if anything goes catastrophically wrong, your site automatically falls back to the default homepage
This means you can experiment confidently — your live site is protected.
🔄 Drag & Drop Everything
You can freely drag and drop:
- Blocks between columns
- Columns between sections
- Entire sections up or down
Your layout updates instantly. You can rearrange as much as you like — the structure will always remain clean and grid-aligned.
💾 Saving & Caching
When you hit Save, your layout is serialized to JSON and a revision snapshot is created.
When you Publish, your layout is cached through CloudFront for ultra-fast delivery.
If your site uses dynamic content (like live games or standings):
- Blocks automatically refresh when new data is available.
- You can manually trigger a cache refresh from Admin → Tools → Refresh Cache.
🎨 Example Layout Flow
Here’s what a great homepage layout might look like:
| Section | Columns | Blocks |
|---|---|---|
| Hero | 1 | 🎥 Video Hero |
| Info | 3 | 📰 News / 🛒 Products / 🧾 Sponsors |
| Showcase | 1 | 🏆 Standings (Page Block with Data Source) |
| Social | 2 | 📅 Calendar / 📘 Facebook Feed |
| Footer | 1 | 📞 Custom Footer & Socials (Page Block) |
🧠 Pro Tips
- Reuse common rows by duplicating layouts as starting templates.
- Use Page Blocks for anything written in your WYSIWYG editor — pages with Data Sources are incredibly powerful.
- Preview before publishing — always check your layout in Preview mode first.
- Check revisions if something looks off — you can revert in seconds.
- Use Hero Mode on Page Blocks for full-width, borderless content sections.
- Keep JSON settings clean —
{}is your friend if you’re not using advanced options.
✅ Next Steps
Continue to:
Comments
0 comments
Please sign in to leave a comment.