Landing Page (Layout Builder)
The Landing Page (Layout Builder) content type is the foundation of your YMCA website. It’s the most flexible, powerful content type for creating program pages, campaign pages, storytelling pages, and any content that doesn’t fit other specialized content types. With drag-and-drop Layout Builder, you can create unique, conversion-focused pages without coding.
Machine name: landing_page_lb
When to Use Landing Page (Layout Builder)
Use Landing Page (LB) for:
- ✅ Program pages - Youth sports, aquatics, wellness programs, childcare
- ✅ Campaign pages - Annual campaigns, fundraising drives, capital campaigns
- ✅ About pages - Mission, history, leadership team, community impact
- ✅ Membership pages - Join the Y, membership benefits, pricing tiers
- ✅ Conversion pages - Registration, donation, volunteer sign-up
- ✅ Storytelling pages - Impact stories, testimonials, success stories
- ✅ Resource pages - Guides, toolkits, FAQs, support resources
- ✅ Static pages - Evergreen content that doesn’t change frequently
Do NOT Use Landing Page (LB) for:
- ❌ News/blogs - Use Article (Layout Builder) for dated, categorized content
- ❌ Events - Use Event (Layout Builder) for date/time-specific events
- ❌ Branch pages - Use Branch content type for location pages
- ❌ Camp microsites - Use Camp and Camp Subpage content types
Landing Page vs. Other Content Types
Criteria | Use Landing Page (LB) | Use Article (LB) | Use Event (LB) |
---|---|---|---|
Purpose | Evergreen pages, programs, campaigns | News, blogs, press releases | Date/time-specific events |
Date display | No date needed | Visible publish date | Event date/time prominent |
Organization | By topic/category in menu | By tags, date archives | By date, location, tags |
Lifespan | Permanent (updated as needed) | Temporary (archived after time) | Temporary (after event date) |
Examples | About Us, Programs, Membership | News article, blog post | Charity 5K, workshop |
Simple rule: If it’s evergreen and doesn’t have a date, use Landing Page. If it’s news/dated, use Article. If it’s an event with specific date/time, use Event.
Creating a Landing Page
Step 1: Add New Landing Page
- Navigate to Admin > Content > Add Content
- Select Landing Page (Layout Builder)
- You’ll see the Landing Page creation form
Step 2: Fill in Required Fields
Title (Required)
The page name used internally and for SEO (not automatically displayed on page).
Best practices:
- Descriptive and keyword-rich
- Match URL alias (e.g., “Youth Programs” →
/youth-programs
) - Keep under 60 characters for search display
- Manually add title to page using Banner block or heading
Examples:
- ✅ “Youth Programs at the YMCA”
- ✅ “Aquatics & Swimming Lessons”
- ✅ “Join the Y - Membership Information”
- ✅ “About Our YMCA”
- ❌ “Page 1” (not descriptive)
- ❌ “Youth” (too vague for SEO)
Important: Title field is NOT automatically displayed on the page. Add your visible title using:
- Banner block (hero image with title overlay)
- Simple Content block with H1 heading
- Heading block (if available in your theme)
Metadata (Recommended)
Meta Description (Recommended):
- 150-160 characters summarizing page content
- Include primary keyword and benefit
- Appears in search results below title
- Compelling preview that encourages clicks
Example:
“Discover youth sports, swim lessons, and after-school programs at [Your Y]. Safe, fun, and inclusive programs for ages 5-18. Learn more and register today!”
Meta Image (Recommended):
- Image used for social media sharing (Facebook, LinkedIn, etc.)
- 1200x630px recommended (Facebook/LinkedIn optimal)
- Should represent page content
- Alternative to generic site logo
Meta Tags (Advanced - Optional):
- Advanced SEO configuration
- Only edit if you understand structured data/Schema.org
- Can include Open Graph tags, Twitter cards, etc.
Step 3: Save and Configure Layout
Click Save to create the page
Click Layout tab to access Layout Builder
You’ll see pre-configured sections:
- Header - Site navigation and logo
- Banner - Hero section (edge-to-edge, no margins)
- Body - Main content area (with left/right margins)
- Footer - Site footer
Begin building your page with Layout Builder blocks
→ Complete Layout Builder guide
Landing Page Design Patterns
Hero Section (Above the Fold)
Purpose: Grab attention and communicate value proposition in 5 seconds or less
Essential elements:
- Compelling headline - Clear benefit, action-oriented
- Supporting subheading - Expand on headline, add context
- Hero image or video - Show people, action, impact
- Primary CTA - One clear action (Register, Join, Donate, Learn More)
Block pattern:
[Banner Section - edge-to-edge]
- Banner Block
- Background image: Hero image (1920x1080px)
- Headline: "Transform Your Life at the Y"
- Subheading: "Programs for every age, every goal, every family"
- CTA Button: "Find Your Program" → /programs
Best practices:
- Headline: 6-10 words, benefit-focused (not feature-focused)
- ✅ “Discover Your Potential at the Y” (benefit)
- ❌ “We Have Fitness Equipment” (feature)
- Image: Show real people from your YMCA, diverse representation
- CTA: Action verb + benefit (“Start Your Journey”, “Join Today”, “Give Hope”)
- Mobile: Ensure text readable on mobile (test on phone before publishing)
Body Content (Mid-Page)
Purpose: Provide details, build trust, address objections, guide toward conversion
Common body patterns:
Program Overview Pattern:
[Body Section - with margins]
[Simple Content Block]
H2: What We Offer
Paragraph: Brief overview of program categories (2-3 sentences)
[3-Column Cards Block]
- Card 1: Youth Programs (icon, title, description, "Learn More" link)
- Card 2: Aquatics (icon, title, description, "Learn More" link)
- Card 3: Wellness (icon, title, description, "Learn More" link)
[Simple Content Block]
H2: Why Choose Our Programs?
Paragraph: Benefits and differentiators
Impact Story Pattern:
[2-Column Section]
Left Column:
- Image Block: Photo of member/participant
Right Column:
- Simple Content Block
H2: "Meet Sarah: How the Y Changed My Life"
Quote: "The Y's swim program gave my daughter confidence..."
- Sarah, YMCA Member
Social Proof Pattern:
[Simple Content Block]
H2: What Our Members Say
[Testimonial Carousel Block] (if available)
- Testimonial 1
- Testimonial 2
- Testimonial 3
[Simple Content Block - Stats]
"Join 150,000+ members nationwide"
[Icons with numbers: 1,200 programs | 500 locations | 75 years serving]
Call-to-Action Strategy
CTA Placement Best Practices (2025):
1. Above-the-fold CTA - Primary action in hero section
- Best for: Pages with clear single action (Join, Donate, Register)
- Button or prominent link in banner
2. Mid-page CTA - After building value and trust
- Best for: Pages that need explanation first (programs, membership)
- After describing benefits, before testimonials
3. End-of-page CTA - Final conversion opportunity
- Best for: All landing pages (reinforce primary action)
- Can be same as hero CTA or complementary (e.g., “Questions? Contact Us”)
4. Sticky/Floating CTA - Always visible as user scrolls
- Best for: Mobile-first design, complex pages
- Sticky button block or sticky header CTA
Example CTA progression:
Hero: "Join the Y Today" [Primary CTA]
↓
Mid-page (after benefits): "Find Your Membership" [CTA with options]
↓
Mid-page (after testimonials): "Experience the Y - Free Guest Pass" [Alternative CTA]
↓
Footer: "Questions? We're Here to Help" [Support CTA]
CTA Design Tips:
- Color: High contrast with background (YMCA red #E31E24 pops on white/gray)
- Size: Minimum 44x44px tappable area (mobile-friendly)
- Text: Action verb + benefit (not “Click Here”)
- ✅ “Start My Free Trial”
- ✅ “Register My Child Today”
- ❌ “Submit” or “Click Here”
Landing Page Best Practices by Type
Program Landing Page
Purpose: Showcase program, drive registration/sign-up
Recommended structure:
- Hero Section - Program benefit and primary CTA
- What is [Program]? - Overview (2-3 paragraphs)
- Program Benefits - Cards or icons (3-5 benefits)
- Schedule & Pricing - Table or accordion (by age group)
- Who Should Join? - Target audience descriptions
- Instructor/Staff - Bios with photos (builds trust)
- FAQs - Accordion block (common questions)
- Testimonials - Member quotes with photos
- CTA - Register or learn more
Block layout example:
[Banner] Hero with "Transform Your Child Through Youth Sports"
[Body - Simple Content] Program overview
[Body - Cards] Benefits: Teamwork, Fitness, Fun, Character Building
[Body - Table] Schedule by age group (5-7, 8-10, 11-13)
[Body - Accordion] FAQs (What to bring, Cost, Skill level, etc.)
[Body - Cards] Testimonials with photos
[Body - Button] "Register Your Child Today"
Membership Landing Page
Purpose: Convert visitors to members, highlight benefits and value
Recommended structure:
- Hero - “Belong at the Y” with join CTA
- Membership Benefits - Why join? (health, community, impact)
- Membership Types - Cards with pricing tiers (Individual, Family, Senior)
- What’s Included - Checklist or icons (facilities, programs, discounts)
- Financial Assistance - Sliding scale, scholarships available
- Member Stories - Testimonials from real members
- Tour CTA - “Schedule a Free Tour” button
- Final CTA - “Join the Y Today”
Pricing display example:
[3-Column Cards Block]
INDIVIDUAL
$49/month
✓ Unlimited facility access
✓ Group fitness classes
✓ Member discounts
[Join Now Button]
FAMILY
$89/month
✓ 2 adults + children under 18
✓ All Individual benefits
✓ Family programming
[Join Now Button]
SENIOR (65+)
$39/month
✓ All facility access
✓ Senior programs
✓ Wellness support
[Join Now Button]
Conversion tips:
- Show value, not just price ("$1.63/day" vs “$49/month”)
- Address objections in FAQ (cost, commitment, intimidation)
- Offer trial or guest pass (“Try us free for 7 days”)
- Include financial assistance info (remove cost barrier)
Campaign Landing Page
Purpose: Drive specific campaign action (donate, volunteer, participate)
Recommended structure:
- Hero - Campaign theme with urgent CTA
- The Problem - What issue you’re addressing
- Our Solution - How the Y helps (your programs/impact)
- Your Impact - What donation/participation achieves
- “$50 = 1 child in swim lessons for a month”
- Giving Levels - Cards with donation tiers
- Donor Stories - Why others give (testimonials)
- Urgency - Countdown, matching gift, limited time
- Multiple CTAs - Donate, volunteer, share
Impact storytelling example:
[2-Column Section]
Left: Image of child in swim lesson
Right:
H2: "Every Child Deserves to Swim Safely"
"Last year, drowning was the leading cause of death for children ages 1-4. Your donation gives kids like Emma the swimming skills to stay safe—and the confidence to thrive.
$25 = 1 swim lesson
$100 = 4 lessons (one month)
$500 = Full semester for one child
[Donate Now Button]
Campaign best practices:
- Urgency: Deadline, matching gift, or goal tracker
- Specificity: Concrete impact, not vague “support our work”
- Emotion: Real stories, real photos (with permission)
- Social proof: “$45K raised by 180 donors - join them!”
- Multiple ways to help: Donate, volunteer, share on social
About/Storytelling Page
Purpose: Build trust, communicate mission, connect emotionally
Recommended structure:
- Hero - Mission statement or impact stat
- Our Story - History, founding, growth (brief timeline)
- Our Mission - What we do, who we serve, why we exist
- Our Impact - Stats, outcomes, testimonials
- Our People - Leadership team, staff highlights
- Community Partners - Logos, collaboration stories
- Join Our Story - CTA to get involved
Mission communication example:
[Full-Width Banner]
Background: Community photo
Headline: "Strengthening Community for 75 Years"
Subheading: "At the Y, we believe everyone deserves the opportunity to learn, grow, and thrive."
[Body - Simple Content]
H2: Our Mission
"To put Christian principles into practice through programs that build healthy spirit, mind, and body for all."
[3-Column Stats]
150,000 members served
1,200 programs offered
$2M in financial assistance
[Impact Story]
[Photo] + "Meet Carlos: How the Y changed his family's life..."
Storytelling best practices:
- Authentic images: Real photos from your YMCA (not stock)
- Specific stories: Names, faces, concrete outcomes
- “You” language: “You can help change lives” (not “We change lives”)
- Emotional connection: Show impact on real people
- Clear CTA: How visitors can join your mission
Advanced Layout Builder Techniques
Multi-Column Layouts
When to use columns:
- Compare options side-by-side (membership tiers, program levels)
- Feature + image layouts (text left, image right)
- Icon grids (3-4 columns of icon + text)
Column best practices:
- 2 columns: 60/40 or 50/50 split (text/image or equal)
- 3 columns: Cards, statistics, feature lists
- 4 columns: Icons, small features, partner logos
- Mobile: All columns stack vertically on mobile (test!)
Example:
[2-Column Section: 60/40]
Left (60%):
- Simple Content
H2: "Aquatics Programs for All Ages"
Paragraph describing programs
- Bullet list of offerings
[Register Now Button]
Right (40%):
- Image Block
Photo of swim lessons (vertical orientation works best)
Background Colors & Sections
Use background colors to:
- Create visual hierarchy (alternate white/gray sections)
- Highlight important content (colored background for CTA section)
- Separate content themes (programs, testimonials, CTAs)
Best practices:
- Alternate sections: White → Light Gray → White → Light Gray
- CTA sections: YMCA Teal (#00A79D) or Red (#E31E24) background
- Text contrast: Ensure readable (dark text on light, light text on dark)
- Accessibility: Minimum 4.5:1 contrast ratio (WCAG AA standard)
Example:
[White Background Section]
- Simple Content: Program overview
[Light Gray Background Section]
- Cards: Program benefits
[YMCA Teal Background Section]
- Simple Content (white text): "Ready to Get Started?"
- Button (white with teal border): "Register Today"
[White Background Section]
- Testimonials
Responsive Design
Mobile optimization (critical - 82.9% access on mobile!):
- Touch targets: Minimum 44x44px for buttons/links
- Font sizes: Minimum 16px body text (prevents zoom on iOS)
- Images: Optimize for mobile (under 500KB, compress)
- Columns: Test how columns stack on mobile
- Forms: Keep short (mobile users abandon long forms)
Test checklist:
- Text readable on phone (not too small)
- Images load quickly on 4G
- Buttons easy to tap (not too close together)
- Forms work smoothly (large input fields)
- No horizontal scrolling
- CTAs visible without scrolling (sticky button?)
Tools:
- Chrome DevTools device emulation (F12 → Toggle device toolbar)
- Test on real phone (iPhone and Android)
- Browser “responsive design mode”
Conversion Optimization
A/B Testing Ideas
What to test:
- Headlines: Benefit-focused vs. feature-focused
- CTA text: “Join Now” vs. “Start Your Free Trial”
- CTA color: Red vs. Teal vs. Blue
- Image: People vs. facility vs. activity
- Form length: Short (name/email) vs. long (detailed)
- Social proof: Testimonials vs. stats vs. logos
Simple tests (no tools required):
- Change headline on homepage, track bounce rate + time on site (Google Analytics)
- Test CTA button text, measure clicks (heatmap tools like Hotjar)
- Try different hero images, monitor conversions
“Three-word test” success story: One organization changed just three words in their CTA and saw 104% conversion lift.
- Before: “Request a Quote”
- After: “Get My Free Quote” (Added “My” and “Free” - personalization + value)
Heatmaps & User Testing
Tools to understand user behavior:
- Hotjar - Heatmaps, session recordings, surveys (free tier available)
- Microsoft Clarity - Free heatmaps and session recordings
- Google Analytics - Behavior flow, exit pages, conversion funnels
What to look for:
- Heatmaps: Where do users click? Are they finding CTAs?
- Scroll depth: How far down page do users scroll? (CTA too low?)
- Exit pages: Where do users leave? Fix those pages first
- Form abandonment: Which form fields cause drop-off?
User testing (no budget):
- Ask 5 members to navigate your page while you watch
- “Find the membership pricing” - can they do it in 10 seconds?
- “Register for swim lessons” - where do they get stuck?
SEO Optimization
On-Page SEO checklist:
- Title tag: Primary keyword near beginning (50-60 chars)
- Meta description: Compelling preview with keyword (150-160 chars)
- URL: Clean, descriptive (
/youth-programs
not/node/12345
) - H1 heading: One H1 per page (in Banner or Simple Content block)
- H2/H3 subheadings: Organize content, include related keywords
- Alt text: Describe all images (accessibility + SEO)
- Internal links: Link to related pages (2-5 links per page)
- Page speed: Optimize images, minimize blocks (< 3 second load)
Keyword research tips:
- Use Google Autocomplete (type “YMCA [your city]” - see suggestions)
- Check “People also ask” and “Related searches” on Google
- Focus on long-tail keywords (3-4 words) with lower competition
- ✅ “youth swim lessons [city]” (specific, local)
- ❌ “swimming” (too broad, high competition)
Common Mistakes to Avoid
❌ Mistake 1: Too Many CTAs
Problem: Multiple competing CTAs confuse users, reduce conversions Solution: One primary CTA per page (can repeat same CTA, but not 5 different CTAs)
❌ Mistake 2: Walls of Text
Problem: Long paragraphs intimidate readers, especially on mobile Solution: 2-3 sentences per paragraph, use bullets, headings, whitespace
❌ Mistake 3: Generic Stock Photos
Problem: Inauthentic images don’t build trust, feel corporate Solution: Use real photos from your YMCA - real members, real staff, real programs
❌ Mistake 4: Buried Value Proposition
Problem: Visitors don’t understand what you offer in 5 seconds Solution: Clear headline + subheading in hero section (not “Welcome to Our Website”)
❌ Mistake 5: No Social Proof
Problem: Visitors don’t trust claims without evidence Solution: Add testimonials, stats, logos, member quotes
❌ Mistake 6: Missing Mobile Optimization
Problem: 82.9% of users on mobile have poor experience Solution: Test on real phone, ensure text readable, buttons tappable
❌ Mistake 7: Weak CTAs
Problem: “Click here” or “Submit” don’t motivate action Solution: Action verb + benefit (“Start Your Free Trial”, “Get My Pass”)
Troubleshooting
Title Not Displaying on Page
Problem: Entered title but doesn’t appear on published page
Solution: Title field is for SEO/admin only. Add visible title using:
- Banner block with headline
- Simple Content block with H1 heading
- Heading block (if available)
Layout Looks Different on Mobile
Problem: Desktop layout perfect but mobile is broken
Solutions:
- Columns stack on mobile - test order makes sense
- Reduce image sizes (large images slow mobile load)
- Simplify mobile layout (hide decorative elements if needed)
- Test on real phone (emulator not always accurate)
- Check block configuration for mobile-specific settings
Page Loading Slowly
Problem: Page takes >3 seconds to load (bad for SEO and conversions)
Solutions:
- Optimize images: Compress to under 500KB each (use TinyPNG, Squoosh)
- Reduce blocks: Too many blocks (especially complex ones) slow page
- Enable caching: Check site performance settings (Admin → Configuration → Performance)
- Use CDN: If available, enable CDN for images/assets
- Test speed: Use PageSpeed Insights (Google) or GTmetrix
SEO Not Working
Problem: Page not ranking in search results
Solutions:
- Give it time: New pages take 1-3 months to rank
- Check indexing: Use Google Search Console to verify page is indexed
- Optimize title/description: Include target keyword naturally
- Add internal links: Link to this page from other pages on site
- Build backlinks: Get other sites to link to your page (partners, community pages)
- Mobile-friendly: Google prioritizes mobile-friendly pages
Related Resources
- Layout Builder Documentation - Complete Layout Builder guide
- Block Library - 30+ Layout Builder blocks
- Text Editor Guide - Format content with WYSIWYG editor
- Content Types Library - Compare all content types
- SEO Best Practices - Optimize for search engines
Need Help?
- YMCA Community Slack - #content-editors channel
- Monthly Community Calls - Ask questions live
- Troubleshooting Guide - Common solutions
- Quick Reference - Fast answers
Happy building! Landing Page (Layout Builder) is your most powerful tool for creating high-converting, mission-driven pages that engage your community and drive results. 🚀