Creating & Managing Pages

Build the content that powers your Xsyte site

Pages are the heart of your site. They hold your words, your images, and even your live data — and they can appear in your navigation, inside layouts, or as standalone content.

Whether you’re creating a basic “About Us” page or a dynamic “League Showcase” with live team data, this guide walks you through it all.

---

🧭 Where to Find Pages

Go to
Admin → Customize → Pages

Here you’ll see a list of all your site’s pages — including their titles, slugs, and whether they’re active or hidden.

From here, you can:

• 🟢 Create a new page

• ✏️ Edit existing pages

• ❌ Delete old pages

• 🌍 Control which pages show up in your navigation

---

🧱 Creating a New Page

Click “Add Page” to get started.
You’ll see a simple form like this:

Field	Description
Page Title	The name of your page — shown in the navigation and title bar.
Slug	The URL path (e.g., /about or /league-showcase).
Menu	Toggle ON if you want it in your site navigation.
Parent Page	Optional — used for nested pages or dropdown menus.
Active	Controls if the page is live or hidden.
Private	Restrict the page to logged-in user groups only.
Type	Usually page, but can be used for special templates or modules.

Then there’s your main content area:

✍️ Content

Use the built-in WYSIWYG editor to write and format your page content.
It’s simple but powerful — you can style text, add images, create tables, and more.

You’ll see formatting tools similar to Word or Google Docs — bold, italic, alignment, lists, etc.

🧰 Advanced: Source Code Mode

For full control, open Tools → Source Code.
This allows you to edit the raw HTML of your page.

You can use this mode to:

• Paste or write your own HTML structure

• Add inline CSS or JavaScript (for custom interactions or embeds)

• Insert iframes, YouTube embeds, or special widgets

• Include template code or data loops (for pages with data sources)

Example:

<div class="highlight-grid">
  <h3>Top Players</h3>
  <ul>
    {% for player in top_players %}
      <li>{{ player.name }} – {{ player.goals }} goals</li>
    {% endfor %}
  </ul>
</div>

<style>
  .highlight-grid { background: #111; color: white; padding: 1em; }
</style>

<script>
  console.log("Custom inline JS works too!");
</script>

---

⚙️ Advanced: Adding Data Sources

Pages aren’t just static text — they can also pull live data from your Xsyte system.
You can attach data sources directly to a page via the “Data Sources” field (in JSON format).

Example:

[
  {"source": "teams", "filters": {"status": "active"}},
  {"source": "games", "filters": {"status": "upcoming", "limit": 5}}
]

Now you can use that data right inside your content using simple loops (like Twig or Handlebars syntax).

Example HTML in your page:

<h2>Upcoming Games</h2>
<ul>
  {% for g in games %}
    <li>{{ g.home_team }} vs {{ g.away_team }} — {{ g.date }}</li>
  {% endfor %}
</ul>

💡 Use Case:
A “League Showcase” page that automatically lists your current teams without needing to edit the page every week.

---

🔗 Making Pages Appear in Navigation

If you want a page to show in your main menu:

1. Toggle “Menu = On”

2. Give it a clear title (“About”, “Contact”, “Teams”)

3. Save and refresh your site

For dropdown menus:

• Assign a Parent Page (e.g., “About” as the parent, “History” as the child)

• They’ll appear nested under the parent in your navigation bar

---

🧩 Using a Page in a Layout

Once your Page exists, you can drop it into a layout anytime using a Page Block.

In your Layout Builder:

1. Drag a “Page Block” into a column

2. Select which page to display

3. Adjust block settings if needed ({"show_title": false})

4. Save and publish

Now that Page is displayed live wherever you placed it — and any time you edit the page, your layout updates automatically.

💡 Perfect for:
Reusable sections like “About the League”, “Venue Info”, or “Player Code of Conduct.”

---

🧠 Pro Tips

• Keep one page per topic — reuse it across layouts if needed.

• Use Private Pages for internal communications or staff-only info.

• Add tags or metadata (in advanced mode) for future features like search indexing.

• Try naming convention hints for organization (e.g. About – History, About – Mission).

---

⚡ Example Workflow

Here’s how a typical setup might go:

1. Create a Page → “League Showcase”

   • Add datasource: teams.active

   • Include HTML loop for teams

2. Create another Page → “Venue Info”

   • Add photos, maps, and schedule

3. Go to Layout Builder → Homepage Layout

   • Row 1: Hero Video

   • Row 2: “League Showcase” Page Block

   • Row 3: “Venue Info” Page Block

   • Row 4: Sponsors Block

Now your homepage auto-updates as new teams or games are added — no extra editing needed. 🔥

---

✅ Next Steps

Continue to:

• 🎨 Build Layouts with the Layout Builder →

• 🧠 Explore Data Sources →

• 🍳 Try Out Page Recipes →