Page Styling in Global Styling

In Web Studio → Global Styling → Page Styling, you can set styles that apply only to the page you’re currently editing. Unlike other global settings, Page Styling is designed for unique, one-off page designs—perfect for landing pages, campaigns, or special events.

Available Settings

1. Background Image

Upload an image that fills the page background. Ideal for:

• Hero-style pages
• Landing pages with full-image backdrops
• Subtle textures or patterns

2. Background Image Repeat

Once you upload an image, choose how it behaves:

• Fixed → The image stays locked in place while content scrolls. Creates a parallax-style effect.

  💡 Tip: Great for storytelling sections or immersive hero pages.

• Repeat → The image tiles both horizontally and vertically.

  💡 Tip: Works best with seamless patterns or subtle textures (grids, dots, lines).

• Repeat Horizontally → Tiles only side-to-side.

  💡 Tip: Use for wide banner-style graphics or horizon lines.

• Repeat Vertically → Tiles only top-to-bottom.

  💡 Tip: Great for vertical gradients, stripes, or background motifs.

• No Repeat → Displays the image once at its original size.

  💡 Tip: Use for large background graphics or logos that don’t need scaling.

• Cover whole area → Scales the image to cover the viewport, cropping if needed.

  💡 Tip: Perfect for full-page photographic backgrounds. Add a dark overlay to keep text readable.

3. Background Color

Apply a solid color as the page background.

• Often used for campaigns, product launches, or thematic content.
• Works especially well when combined with transparent or floating blocks.

Floating Blocks Over a Background

One of the most powerful uses of Page Styling is to create layouts where blocks “float” over a background image or color.

Examples:

• Hero section with headline + button on top of a cover image.
• Transparent blocks over a subtle repeating pattern.
• Scrolling blocks over a fixed background image for a modern parallax effect.

Practical Use Cases

• Landing pages: Differentiate promotional pages with distinct backgrounds.
• Event campaigns: Align the page design with a theme or event brand.
• Product launches: Highlight a new product with a custom visual backdrop.
• Special editions/blogs: Create variety in design while still using the global framework.

Best Practices

• Use optimized images: 2000–2560px wide, compressed JPG/WEBP for fast load times.
• Contrast is king: Always check that text is readable over your chosen background.
• Patterns for repeat, photos for cover: Repeating only works with seamless textures—use Cover whole area for photography.
• Less is more: Reserve Page Styling for pages that really need it; too many variations weaken brand consistency.

Confirming Page Styling

1. Open Global Styling → Page Styling while editing your page.
2. Upload a background image (optional) and select repeat behavior.
3. Set a background color if desired.
4. Click Confirm to save your changes.

Troubleshooting

• Image looks stretched: Use “Cover whole area” or upload a higher-resolution image.
• Text is hard to read: Add overlays or semi-transparent block backgrounds.