Setting the Website Layout in Global Styling

In Web Studio → Global Styling → Website Layout, you define the grid width and layout style that determine how your site’s content is structured. These settings affect every page, ensuring your design looks clean and balanced.

Grid Width

The Grid Width sets the maximum content area (measured in pixels). Content such as text blocks, images, and sections align within this grid.

• Common values: 1140–1320px for modern websites.
• Narrower grids (1000–1140px): Great for editorial or text-heavy sites—more focus on reading.
• Wider grids (1280–1360px): Modern and visual, gives images and media more room.

Overriding Grid Width in the Web Studio

Even though the grid width applies globally, you can set individual blocks to Full Width in the Web Studio. This makes that block ignore the grid and stretch edge-to-edge across the screen.

This is especially useful for:

• Hero sections → Big background image or video spanning the entire screen.
• Full-width image galleries → Create immersive, visual sections.
• Colored bands → Use a full-width background color strip to divide sections.
• Call-to-action sections → Make a CTA stand out by breaking out of the grid.

Meanwhile, the content inside those blocks (e.g., text or buttons) can still respect the inner grid for readability. This gives you the best of both worlds: a consistent framework plus the freedom to design bold, standout sections.

Layout Style

You can choose between two main layout styles:

1. Full Width
   • Sections (like banners, background images, and color blocks) span the entire screen.
   • Inner content still respects your grid width.
   • Feels modern, bold, and immersive.
2. Boxed
   • The entire site is contained within a fixed-width “box” with visible margins around it.
   • You can choose from one of our built-in background patterns, or upload your own.
   • Creates a more traditional, structured feel.
   • Great for corporate or content-heavy sites where strong alignment is important.

Best Practices

• Decide early: Changing grid width or layout style later can shift wrapping and spacing. Set it before building.
• Match your brand style:
  • Full Width → creative, modern, visual brands.
  • Boxed → formal, classic, or editorial brands.
• Mind readability: If your paragraphs feel too wide, reduce the grid width until lines are comfortable to read.
• Consistency: Stick with one layout style site-wide to avoid jarring page transitions.

Confirming Layout

1. Go to Global Styling → Website Layout.
2. Adjust Grid Width and choose Full Width or Boxed.
3. If you choose Boxed, select one of our built-in background patterns or upload your own.
4. Click Confirm to apply globally.

Troubleshooting

• My site feels too wide or cramped: Adjust the grid width—small changes (20–40px) can make a big difference.
• Background colors don’t go full edge-to-edge: Switch to Full Width layout.
• Text blocks look unbalanced: Reduce grid width until line lengths fall within the 60–80 character range.