Skip to main content

Create visually stunning and accessible pages

Updated over 2 months ago

Building engaging web pages for your school community doesn't have to be complicated. This guide will walk you through the essential elements needed to create pages that look professional and help visitors find information quickly.

Start with a Strong Hero Image

Your hero image is the first thing visitors see when they land on your page. Think of it as the welcome mat for your digital front door.

What makes a great hero image:

  • Choose images that represent your school's personality and values

  • Use photos of students learning, campus scenes, or school events

  • Ensure the image tells a story about what makes your school special

Technical requirements:

  • Upload images that are at least 1200 pixels wide for crisp, clear display

  • For a banner-style look, use a 3:1 ratio (like 1200 x 400 pixels)

  • The platform's built-in tools will help compress your images while keeping them looking sharp

Hero image example

Design Clear Navigation Menus

Your website navigation acts like hallway signs in your school building - it helps people find where they need to go quickly.

Choose your navigation style:

  • Horizontal top navigation: Works well for schools with fewer main sections

  • Side menu: Perfect when you have many departments or lots of content to organize

Best practices for menu organization:

  • Keep your main menu items to 7 or fewer to avoid overwhelming visitors

  • Arrange items by importance (most-visited pages first)

  • Group related pages together (all athletics pages under "Athletics," all academics under "Academics")

Make Buttons and Links Work for You

Buttons guide visitors to take important actions like registering for events, accessing parent portals, or contacting staff.

Button placement strategy: Position buttons where parents and community members naturally expect to find them:

  • Contact forms and phone numbers on staff pages

  • Registration links on event announcements

  • Portal logins prominently on your homepage

Visual design: The platform automatically uses your school's colors for buttons, ensuring they stand out while matching your brand. This creates a professional, cohesive look without extra design work.

Showcase Your Staff with Professional Photos

Adding photos of teachers and staff members helps build trust and puts a friendly face on your school community.

Photo guidelines:

  • Use high-quality, recent photos of staff members

  • Keep all photos the same size for a clean, organized appearance

  • Upload square images that are at least 200 x 200 pixels for best results

  • Consider having a consistent background or lighting style across all staff photos

When to use staff blocks:

  • Create dedicated staff directory pages for departments

  • Add individual staff contact blocks to relevant program pages

  • Include key administrator photos on your main "About Us" page

Build with Accessibility in Mind

Making your website accessible ensures all community members can access important school information, regardless of their abilities.

Key accessibility practices:

  • Use clear, readable fonts and adequate text size

  • Ensure sufficient color contrast between text and backgrounds

  • Add descriptive text for images (especially important for photos of school events)

  • Organize content with clear headings that screen readers can navigate

Getting started: The platform includes built-in accessibility features and guidelines. Review the Accessibility page in your admin area to understand all available tools and requirements.

Putting It All Together

Remember that your school website serves busy parents, prospective families, and community members who need information quickly. By combining compelling visuals with clear navigation and accessible design, you'll create pages that effectively serve your entire school community.

Start with one page at a time, apply these principles consistently, and you'll build a website that truly represents your school's excellence.

Did this answer your question?