Site

Site

Pala makes it easy to define content and design at the site level that cascades down to blocks across your site without duplication. This guide covers how to create and manage site properties effectively.

Defining Site Content

Site Content defines content available across your entire site. This is useful for content that needs to be consistent across multiple blocks, such as:

  • Navigation menus

  • Contact information

  • Social media links

  • Footer content

  • Company information

  • Global CTAs

Creating a Site Content item

  1. Select the "Site" icon in the toolbar to open the Site editor

  2. Click 'Create Field'

  3. Choose a field type appropriate for your content.

Integrating Site Content in Head

Site Content can be integrated into your page head for site-wide elements like favicons, meta tags, analytics, and social media profiles.

Note: Everything in your site head will be statically generated on every page you publish, so making any content changes there will cause your entire site to regenerate.

Accessing Site Content in Blocks

Site Content is available in all blocks using the 'Site Content' field type. When using a Site Content item in a block, any changes to the entry will update across all instances.

To use Site Content in a block:

  1. From within the content view of the Block editor, create a new field

  2. Select the 'Site Content' field type

  3. Select the site field to retrieve

Note: Site Properties used in blocks will be indicated with a 'Site Content' label in the block editor.

Example: Setting Up Site Navigation

Let's walk through creating and using site content:

1. Creating Navigation Properties

First, from the site editor create a 'Repeater' field containing a 'Link' child field for site navigation:

Navigation Links
- Home
- About
- Services
- Contact

2. Using Properties in Blocks

Create a 'Site Content' field within a block and select the 'Navigation Links' site property, then integrate it into your HTML.

<nav>
  {#each site.navigation_links as {link}}
    <a href={link.url}>{link.label}</a>
  {/each}
</nav>

Site Design

While site-wide content is managed through Site Content, visual design elements like colors, typography, and shadows are controlled through the Design panel:

  1. Select the Design icon in the toolbar

  2. Customize:

  • Primary Color '--theme-primary-color'

  • Heading Font '--theme-heading-font'

  • Body Font '--theme-body-font'

  • Border radius '--theme-radius'

  • Box shadows '--theme-shadow'

These design settings are automatically applied to components using the Weave CSS Library and can be integrated in your own components using the listed CSS variables.

Overwriting Site Design Variables

Design variables can be customized at the site, page, or block level to override the default styles set in the design panel. This allows for fine-grained control when you need to break out of the design panel’s constraints.

For example, to overwrite the heading font:

<link href="https://api.fontshare.com/v2/css?f[]=stardom@400&display=swap" rel="stylesheet">
<style>
  :root {
    --theme-heading-font: 'Stardom', sans-serif;
  }
</style>

Connecting Variables to Fields

For more dynamic control, you can connect CSS variables to block fields. This allows content editors to modify particular styles through the visual interface rather than directly in code:

<section style:background-color={background_color}>
  <div class="section-container">
    <div class="teasers">

Best Practices

  1. Keep it Focused: Only create Site Content for truly site-wide content that needs to be accessed across multiple blocks.

  2. Plan for Scale: Consider how Site Content might need to evolve as your site grows. For example, navigation structures might need to support multiple levels in the future.

  3. Document Dependencies: Keep track of which blocks are using which Site Content to understand the impact of changes.

FAQ

When should I use Site Content vs Page Content?

Site Content is best for content that needs to be shared across multiple pages or blocks, like navigation menus or contact information. Page Content is better for content specific to a certain type of page, like blog post metadata or product details.

Can I update Site Content from within a block?

Yes, when you edit a Site Content field within a block, you're editing the source entry itself. Any changes will automatically update everywhere that property is used across your site. It's generally easier to make these edits directly from blocks rather than going through the Site Editor.

What's the difference between Site Content and Design tokens?

Site Content is for managing content that needs to be reused across blocks (like navigation menus), while Design tokens in the Design panel are for managing visual styles (like colors and fonts). Design tokens are automatically applied to Pala components and can be accessed via CSS variables.

Can I have different values for Site Content on different pages?

No, Site Content is meant for content that's consistent across your entire site. If you need page-specific variations, you should use Page Content instead.