Page Builder

Overview

The Page Builder is a powerful, flexible system for creating and customizing web pages without requiring technical knowledge. It allows you to build pages by adding and arranging different section types, each with its own purpose and customization options.

How It Works

The Page Builder uses a section-based approach where each page is composed of multiple sections stacked vertically. Each section can be independently styled, configured, and filled with content.

Key Concepts

1. Sections: Self-contained blocks of content (e.g., headers, text blocks, image galleries)
2. Properties: Configuration options that control how a section behaves and appears
3. Content: The actual text, images, and other media displayed in a section

Website Theming

The Page Builder inherits your website's theme, ensuring visual consistency across all pages. The theme system includes:

Color Palette

Your website uses a predefined color palette that determines all visual elements. You can:

• Choose from preset color palettes with professionally designed color combinations
• Create a custom palette by selecting your own colors
• Edit individual colors for specific elements

Each color palette generates five background variations with automatically calculated text, button, and form field colors that maintain proper contrast and accessibility.

Theme Inheritance

All Page Builder sections automatically use your website's theme colors. When you change your theme:

• All sections update to reflect the new colors
• Text remains readable with proper contrast
• Interactive elements maintain consistent styling
• Your brand identity stays cohesive across all pages

Available Section Types

Header

A prominent section typically used at the top of a page with a headline, description, and call-to-action.

Text

A versatile section for displaying formatted text content.

Call to Action

A focused section designed to prompt user action.

Form

Embeds a form for collecting user information.

Blog Post Feed

Displays a collection of blog posts from your website.

People with Bios

Showcases team members or other individuals with photos and biographical information.

Events

Displays upcoming events with details and registration options in list, calendar, or map views.

Resources

Presents downloadable files or links to external resources.

Logos

Displays partner or sponsor logos in a grid or carousel.

List

Creates a structured list of items, useful for features, benefits, or steps.

Videos

Embeds video content from YouTube, Vimeo, or other sources.

Donate

Creates a donation form section with customizable options.

Styling Options

Each section includes various styling options:

1. Background: Choose from your theme's color palette
2. Text Alignment: Left, center, or right alignment
3. Spacing: Control the padding and margins
4. Width: Full-width or contained layouts
5. Typography: Headline and body text styling options

Advanced Features

Eyebrow Text

Small text that appears above the headline in most sections. Can be styled as a pill for emphasis.

Responsive Behavior

All sections automatically adapt to different screen sizes, with specific mobile-optimized layouts.

Interactive Elements

Some sections include interactive features like maps, carousels, and form validation.

Content Management

Support for translations, image management, and direct content editing.

Best Practices

1. Start with a clear structure: Plan your page layout before building
2. Use consistent styling: Maintain visual coherence across sections
3. Prioritize readability: Ensure text is legible against backgrounds
4. Don't overcrowd: Leave adequate spacing between elements
5. Test on mobile: Verify your page looks good on all device sizes
6. Use eyebrow text sparingly: For emphasis on important sections
7. Optimize images: Compress images for faster page loading