Getting Started for Content Editors

Welcome to YMCA Website Services! This guide will help you get started creating beautiful, engaging content for your YMCA website.

What You’ll Learn

By the end of this guide, you’ll be able to:

• ✅ Log in and navigate the admin interface
• ✅ Create your first landing page with Layout Builder
• ✅ Add and configure blocks from the Block Library
• ✅ Upload and manage images and media
• ✅ Publish and preview your content

Estimated time: 15-20 minutes

Step 1: Log In and Find Your Way Around

Accessing the Admin

1. Navigate to your YMCA website and add /user/login to the end of the URL
   • Example: https://yourymca.org/user/login
2. Enter your username and password
3. Click Log in

The Admin Toolbar

Once logged in, you’ll see a black toolbar at the top of the page. This is your admin toolbar with quick access to:

• Content - Create and manage all your pages and posts
• Structure - Configure menus, blocks, and site structure
• Appearance - Theme and visual settings
• Extend - Add new features and modules

Step 2: Explore the Block Library 🧱

The Block Library is your toolkit for building pages. Before creating your first page, take 5 minutes to browse what’s available.

Most Popular Blocks for Beginners

• Banner - Full-width hero images with headlines and CTAs
• Cards - Flexible card grid layouts (2-4 columns)
• Accordion - Expandable Q&A sections
• Article Views - Automatically display recent blog posts
• Testimonials - Member quote carousels

→ Browse the Full Block Library (30+ blocks organized by category)

Step 3: Create Your First Landing Page

Let’s build a simple landing page using Layout Builder!

Create the Page

1. Click Content in the admin toolbar
2. Click the blue Add content button
3. Select Landing Page (Layout Builder)
4. Fill in the required fields:
   • Title: “Welcome to [Your YMCA Name]”
   • Leave other fields as defaults for now
5. Click Save and edit layout

You’re now in Layout Builder! This is where the magic happens.

Understanding Sections and Blocks

• Sections = Rows that structure your page (like shelves)
• Blocks = Content components that fill sections (like items on shelves)

Add Your First Section

1. Click Add section at the top
2. Choose One column layout
3. Click Add section

Add a Banner Block

1. In your new section, click Add block
2. Click Create custom block
3. Select Banner
4. Fill in:
   • Title: “Welcome to Our YMCA”
   • Description: “Building healthy communities since [year]”
   • Image: Click Select Image and upload a photo
   • Link URL: /join (or your membership page)
   • Link text: “Join Today”
5. Click Add block

Save and Publish

1. Click Save layout at the top
2. Click the Edit tab
3. Check the Published checkbox
4. Click Save

🎉 Congratulations! You’ve created your first page. Click View to see it live.

Step 4: Add More Content

Now let’s add variety to your page.

Add a Cards Block

1. Click the Layout tab
2. Click Add section below your banner
3. Choose One column layout
4. Click Add block → Create custom block → Cards
5. Set # of columns to 3
6. Add 3 card items with:
   • Heading: Program names (e.g., “Youth Sports”)
   • Description: Brief summary
   • Link: Link to program page
7. Click Add block

Add an Accordion (FAQ Section)

1. Add another section
2. Add an Accordion block
3. Add 3-4 accordion items with common questions:
   • “What are your hours?”
   • “How do I join?”
   • “Do you offer financial assistance?”
4. Fill in the answers
5. Save the block

Preview and Publish

1. Click Save layout
2. View your page to see how it looks
3. Make adjustments as needed

Step 5: Working with Images and Media

Upload an Image

1. When adding a block with an image field
2. Click Select Image
3. Click Upload tab
4. Drag and drop your image or click Choose File
5. Fill in:
   • Alternative text: Describe the image for accessibility
   • Name: Descriptive file name
6. Click Save

Image Best Practices

• File size: Keep under 500KB (use tools like TinyPNG to compress)
• Dimensions: 1920x1080 for banners, 800x600 for cards
• Alt text: Always describe the image for screen readers
• File names: Use descriptive names like youth-soccer-team.jpg

→ Learn more about media management

Next Steps

Now that you’ve mastered the basics, explore these topics:

Continue Learning

Advanced Topics

• Schedules - Display class schedules and programs
• Membership Calculator - Add membership pricing tools
• SEO & Structured Data - Improve search rankings
• Content Editing Basics - Deep dive into fields and workflows

Quick Reference

Common Tasks

Keyboard Shortcuts

• Ctrl+S (Cmd+S on Mac) - Save content
• Ctrl+Shift+S - Save and continue editing
• Ctrl+F - Search page

Need Help?

Troubleshooting

• Blocks not appearing? Troubleshoot Layout Builder Issues
• Images not uploading? Check file size and format (JPG, PNG, WebP under 500KB)
• Page not saving? Try clearing your browser cache (Ctrl+Shift+R)

Get Support

• Quick Reference - Instant answers to common questions
• Troubleshooting Guide - Solutions organized by category
• Community Forum - Ask questions and share tips
• Monthly Community Calls - Live Q&A with experts

Additional Resources

• Original User Manual - Comprehensive PDF guide
• Video Tutorials - Watch the Layout Builder playlist
• Content Editing Basics - Detailed field-by-field reference

Ready to build amazing content? Start with the Block Library and explore what’s possible! 🚀