Create Powerful Page Sections

Sections are the foundation of your YaleSites page structure, providing the framework for organizing your content blocks. With the YaleSites 2.0 release, we’ve expanded our section options to give you more flexibility and creative control over your page layouts.

Why Use Sections?

Using sections effectively allows you to:

  • Create visually distinct content areas on your page
  • Organize related information cohesively
  • Guide your users through your content in a logical flow
  • Establish visual hierarchy to emphasize important information
  • Create responsive layouts that work well on all devices

Available Section Types

Single Column (100%)

The classic full-width section spans the entire content area, perfect for:

  • Hero elements and major page announcements
  • Featured content that deserves full attention
  • Blocks that benefit from maximum width like galleries or videos

Two Column (70%/30%)

Our original two-column layout divides content into a dominant side (70%) and a secondary side (30%), ideal for:

  • Main content with supporting sidebar information
  • Primary text content with supplementary images or callouts
  • Featured content alongside secondary navigation or quick links

New Sections 

Two Column (50%/50%)

The new balanced two-column layout divides content evenly, perfect for:

  • Comparing two equally important pieces of content
  • Creating side-by-side image and text combinations
  • Balancing related information that deserves equal emphasis

4. Three Column (33%/33%/33%)

Our newest addition splits content into three equal columns, excellent for:

  • Presenting multiple related items in a compact format
  • Creating feature comparisons
  • Displaying brief statistics or key points in a visually balanced way

Best Practices for Using Sections

Planning Your Layout

  • Before building, sketch your page layout and content organization
  • Consider your content’s hierarchy and how sections can reinforce it
  • Think about the user’s journey through your page and how sections can guide it

Content Organization

  • Group related content within the same section
  • Use different section layouts to create visual variety and rhythm
  • Consider content balance, especially in multi-column layouts

Responsive Behavior

  • Remember that multi-column sections will stack vertically on mobile devices
  • Preview your layout on different screen sizes to ensure it remains effective
  • Consider content priority when using multi-column layouts (left-to-right, top-to-bottom ordering)

Step-by-Step: Adding and Configuring Sections

  1. Navigate to the page where you want to add a section
  2. Click “Edit Layout and Content” in the admin menu to enter Layout Builder
  3. Click “Add Section” at your desired position
    1. The default section on Page content types will be the original 1-column section
  4. Select your preferred section layout (1-column, 70/30, 50/50, or 33/33/33)
  5. Configure section settings:
    1. For 50/50 and 33/33/33 sections, choose a background color if desired
    2. For 50/50 and 33/33/33 sections, toggle the divider option on/off if desired
    3. Select a padding option:
      1. Default: Standard spacing above and below content
      2. No top padding: Removes space above this section
      3. No bottom padding: Removes space below this section
      4. No padding: Removes all space above and below
    4. Tip: Create “Connected Sections” by setting “No bottom padding” on one section and “No top padding” on the section below it (great for attaching a 1-column heading to multi-column content)
  6. Begin adding blocks to your section by clicking “Add Block” within each column

Block Compatibility with Section Layouts

When building your YaleSite pages with different section layouts, it’s important to understand that not all blocks are compatible with every section type. Some blocks are restricted in certain layouts due to design considerations and content modeling requirements.

Text and Content Supported Blocks

Block 1-Column 70% 
2-Column 70/30		 30% and 33%
2-Column 70/30
3-Column 33/33/33		 50% 
2-Column 50/50
Accordion Yes ✅ Yes ✅ No ❌ Yes ✅
Divider Yes ✅ Yes ✅ Yes ✅ Yes ✅
In-Line Message Yes ✅ No ❌ No ❌ No ❌
Quote Yes ✅ Yes ✅ Yes ✅ Yes ✅
Tabs Yes ✅ Yes ✅ No ❌ Yes ✅
Text Yes ✅ Yes ✅ Yes ✅ Yes ✅
Wrapped Text Callout Yes ✅ Yes ✅ No ❌ No ❌

Featured Content Supported Blocks

Block 1-Column 70% 
2-Column 70/30		 30% and 33%
2-Column 70/30
3-Column 33/33/33		 50% 
2-Column 50/50
Facts and Figures Yes ✅ No ❌ No ❌ No ❌
Grand Hero Yes ✅ No ❌ No ❌ No ❌
Image Banner Yes ✅ No ❌ No ❌ No ❌
Quote Callout Yes ✅ No ❌ No ❌ No ❌
Reference Card Yes ✅ Yes ✅ No ❌ No ❌
Spotlight - Landscape Yes ✅ No ❌ No ❌ No ❌
Spotlight - Portrait Yes ✅ No ❌ No ❌ No ❌
Video Banner Yes ✅ No ❌ No ❌ No ❌

Dynamic Content Supported Blocks

Block 1-Column 70% 
2-Column 70/30		 30% and 33%
2-Column 70/30
3-Column 33/33/33		 50% 
2-Column 50/50
Calendar List Yes ✅ Yes ✅ No ❌ No ❌
Post Feed Yes ✅ Yes ✅ No ❌ No ❌
Profile Directory Yes ✅ Yes ✅ No ❌ No ❌
Taxonomy Display Yes ✅ No ❌ No ❌ No ❌
View Yes ✅ No ❌ No ❌ No ❌

Media Supported Blocks

Block 1-Column 70% 
2-Column 70/30		 30% and 33%
2-Column 70/30
3-Column 33/33/33		 50% 
2-Column 50/50
Embed Yes ✅ Yes ✅ No ❌ Yes ✅
Gallery Yes ✅ Yes ✅ No ❌ No ❌
Image Yes ✅ Yes ✅ Yes ✅ Yes ✅
Media Grid Yes ✅ Yes ✅ No ❌ No ❌
Pre-Built Form Yes ✅ No ❌ Yes ✅ Yes ✅
Video Yes ✅ Yes ✅ Yes ✅ Yes ✅
Wrapped Image Yes ✅ No ❌ No ❌ No ❌

Calls to Action Supported Blocks

Block 1-Column 70% 
2-Column 70/30		 30% and 33%
2-Column 70/30
3-Column 33/33/33		 50% 
2-Column 50/50
Action Banner Yes ✅ No ❌ No ❌ No ❌
Button Link Yes ✅ Yes ✅ Yes ✅ Yes ✅
Callout Yes ✅ No ❌ No ❌ No ❌
Custom Cards Yes ✅ No ❌ No ❌ No ❌
Link Grid Yes ✅ Yes ✅ Yes ✅ Yes ✅
Quick Links Yes ✅ No ❌ No ❌ No ❌
Tiles Yes ✅ No ❌ No ❌ No ❌

Building With Blocks

This resource will help you understand the Blocks available and how to use them to make your content shine.

View This Resource