Site Layout Options

The site layout controls how your website content is displayed across the screen. BuddyX Pro offers flexible layout options to match your design preferences and content strategy.

The General panel in the WordPress Customizer showing site layout and container width options

Detailed site layout customization options including container width and spacing

What You Can Do

With BuddyX Pro’s layout settings, you can:

Choose between full-width or boxed layouts
Set custom container widths for your content
Control sidebar dimensions
Adjust border radius for design consistency
Optimize layouts for different screen sizes
Create unique layouts for blogs, shops, and community pages

Site Layout Types

Site layout settings showing wide and boxed layout options

Wide Layout (Default)

Content stretches to fill the browser window width:

┌───────────────────────────────────────────────────┐
│                  Header (full width)              │
├───────────────────────────────────────────────────┤
│                                                   │
│       Content stretches to window edges          │
│                                                   │
└───────────────────────────────────────────────────┘

Best for:

Modern, spacious designs
Image-heavy websites
Community platforms with activity feeds
E-commerce stores with product galleries

Boxed Layout

Boxed/container layout with content centered in a fixed-width box

Content is contained within a fixed-width box with visible margins:

┌─────────────────────────────────────────────────┐
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │          Header (boxed)                 │   │
│  ├─────────────────────────────────────────┤   │
│  │                                         │   │
│  │     Content within fixed container      │   │
│  │                                         │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
└─────────────────────────────────────────────────┘

Best for:

Traditional, focused designs
Text-heavy blogs
Corporate websites
Portfolio sites

Choosing Your Layout

Go to Appearance > Customize
Click on General > Site Layout
Select your preferred layout:
Click Publish

Container Width Settings

Max Content Layout Width

This controls the maximum width of your content area.

Location: Appearance > Customize > General > Site Layout

Setting	Default	Typical Range
Max Width	1300px	1140px – 1920px

How to Set:

Find Max Content Layout Width
Enter your desired width (in pixels)
Preview changes in real-time
Click Publish

Common Width Values:

Width	Use Case
1140px	Traditional blogs, narrow content focus
1200px	Balanced for most websites
1300px	BuddyX Pro default, great for communities
1400px	Wide layouts for e-commerce
1600px+	Portfolio sites, image galleries

Visual Comparison

1140px (Narrow):

┌─────────────────────────────────────────────┐
│    ┌───────────────────────────────┐       │
│    │      Content Area             │       │
│    │      (comfortable reading)    │       │
│    └───────────────────────────────┘       │
└─────────────────────────────────────────────┘

1300px (Default):

┌─────────────────────────────────────────────┐
│  ┌─────────────────────────────────────┐   │
│  │        Content Area                 │   │
│  │        (balanced layout)            │   │
│  └─────────────────────────────────────┘   │
└─────────────────────────────────────────────┘

1600px (Wide):

┌─────────────────────────────────────────────┐
│┌───────────────────────────────────────────┐│
││          Content Area                     ││
││          (spacious, modern)               ││
│└───────────────────────────────────────────┘│
└─────────────────────────────────────────────┘

Sidebar Width

Control the width of your sidebar areas.

Location: Appearance > Customize > General > Site Layout

Setting	Default	Range
Global Sidebar Width	260px	200px – 400px

Popular Configurations:

Width	Layout Effect
220px	Compact sidebar, more content space
260px	Balanced sidebar (default)
300px	Wide sidebar, featured widgets
350px	Very prominent sidebar

Example with Sidebar:

┌──────────────────────────────────────────┐
│  Main Content        │    Sidebar        │
│  (wider area)        │    (260px)        │
│                      │                   │
│  Blog posts,         │  - Widget 1       │
│  product listings,   │  - Widget 2       │
│  or page content     │  - Widget 3       │
└──────────────────────────────────────────┘

Border Radius Settings

Create consistent rounded corners throughout your site.

Location: Appearance > Customize > General > Site Layout

Global Border Radius

Controls roundness of content boxes, cards, and containers.

Setting	Default	Effect
Global Border Radius	8px	Subtle rounded corners

Visual Guide:

Value	Appearance	Best For
0px	Sharp corners	Modern, geometric designs
4px	Slightly rounded	Minimalist, clean look
8px	Noticeable rounds (default)	Friendly, approachable
12px	Very rounded	Playful, modern designs
20px+	Heavily rounded	Bold, distinctive style

Button Border Radius

Separate control for all button styles.

Setting	Default
Buttons Border Radius	6px

Examples:

0px:  [  Click Me  ]  ← Sharp edges
6px:  (  Click Me  )  ← Default, balanced
12px: (   Click Me   ) ← Very rounded
30px: (    Click Me    ) ← Pill-shaped

Form Border Radius

Controls input fields, dropdowns, and textboxes.

Setting	Default
Form Border Radius	6px

Note: Textareas are excluded to maintain distinction between single-line and multi-line inputs.

Recommended Setups by Site Type

Blog / Magazine

Layout: Wide
Container Width: 1200px
Sidebar Width: 280px
Global Border Radius: 8px
Buttons Border Radius: 6px
Form Border Radius: 6px

Why: Comfortable reading width with prominent sidebar for featured content and ads.

E-Commerce Store

Layout: Wide
Container Width: 1400px
Sidebar Width: 260px
Global Border Radius: 8px
Buttons Border Radius: 4px
Form Border Radius: 4px

Why: Wider layout showcases more products; subtle borders keep focus on products.

Community Platform

Layout: Wide
Container Width: 1300px
Sidebar Width: 240px
Global Border Radius: 10px
Buttons Border Radius: 6px
Form Border Radius: 6px

Why: Default BuddyX Pro setup optimized for social interaction and activity feeds.

Corporate Website

Layout: Boxed
Container Width: 1140px
Sidebar Width: 300px
Global Border Radius: 4px
Buttons Border Radius: 3px
Form Border Radius: 3px

Why: Traditional, professional appearance with strong content focus.

Portfolio / Creative

Layout: Wide
Container Width: 1600px
Sidebar Width: 220px (minimal)
Global Border Radius: 12px
Buttons Border Radius: 20px
Form Border Radius: 8px

Why: Maximum space for showcasing creative work; bold, modern styling.

Educational / LMS

Layout: Wide
Container Width: 1300px
Sidebar Width: 280px
Global Border Radius: 8px
Buttons Border Radius: 6px
Form Border Radius: 6px

Why: Balanced layout for course listings and lesson content with sidebar for progress tracking.

Responsive Behavior

Your layout automatically adapts to different screen sizes:

Screen Size	Behavior
Desktop (1200px+)	Full settings applied
Tablet (768px – 1199px)	Content width adjusts proportionally
Mobile (< 768px)	Single column, no sidebar

Mobile Layout:

┌─────────────────┐
│     Header      │
├─────────────────┤
│                 │
│  Main Content   │
│  (full width)   │
│                 │
├─────────────────┤
│                 │
│  Sidebar Below  │
│                 │
└─────────────────┘

Advanced Customization

Custom Width for Specific Pages

You can override the global width for individual pages using WordPress page settings or custom CSS.

Using Custom CSS:

/* Make specific page wider */
.page-id-123 .container {
    max-width: 1600px;
}

/* Make blog archive narrower */
.blog .container {
    max-width: 1000px;
}

Different Widths by Plugin

Some plugins automatically adjust container width:

Plugin	Behavior
WooCommerce	Shop pages follow WooCommerce settings
LearnDash	Course pages can have custom widths
BuddyPress	Profile pages use optimized widths

Performance Tips

Tip	Benefit
Use standard widths	Easier for browsers to render consistently
Avoid extreme values	Very wide layouts (2000px+) can look broken on some screens
Test on real devices	Check layout on actual phones and tablets
Consider reading comfort	Text lines shouldn’t exceed 80-90 characters for readability

Common Questions

What’s the difference between Wide and Boxed layouts? Wide layouts stretch content edge-to-edge within the container width. Boxed layouts add visible spacing around the entire site, creating a “card” effect.

Can I use different layouts on different pages? Yes! You can set individual page layouts through page meta boxes or use child theme code to customize specific pages.

Does container width affect mobile view? On mobile devices, content automatically adjusts to fit the screen width regardless of your desktop container setting.

What if my content looks too narrow or too wide? Adjust the Max Content Layout Width. Most sites work well between 1200px – 1400px. Test with your actual content.

Can I have a wide header but boxed content? Yes! The header can span full-width while content remains boxed. This is controlled in Header settings.

Why do my images look smaller after changing width? Images display relative to container width. You may need to regenerate thumbnails or adjust image sizes after major width changes.

Should I match border radius everywhere? Not necessarily! Using 8px for content boxes, 6px for buttons, and 6px for forms creates subtle visual hierarchy while maintaining consistency.

Related Settings

Site Loader – Loading animation settings
Sidebar Layouts – Sidebar positioning options
Header Layouts – Header width and style
Blog Layout – Blog-specific layouts
Border Radius & Styling – Advanced border styling

Need Help?

Visit our Documentation Portal
Contact Support at support@wbcomdesigns.com