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

Sections: Self-contained blocks of content (e.g., headers, text blocks, image galleries)
Properties: Configuration options that control how a section behaves and appears
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

Common 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

Shows upcoming events. The 'Layout Style' options are 'Card View', 'Calendar View', and 'Map View'.

When an Events section is configured to show events filtered by tag, you can control whether events must match any of the selected tags or all of them. Enable the 'Match All Selected Tags' toggle in the section's sidebar to require that every selected tag be present on an event before it appears. When the toggle is off (the default), an event matching any one of the selected tags will be included.

Resources

Presents downloadable files or links to external resources.

Logos

Shows partner or sponsor logos in a grid. For a rotating display, use the 'Image Carousel' section.

List

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

Videos

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

Donate Links

Shows donation amount buttons that each link to a URL you set, and it takes no payment. To take a donation on a landing page, add a 'Form' section and select a Donate page.

Styling Options

Sections can include these styling options:

Background: Choose from your theme's color palette
Text Alignment: Select text in a 'Text' section of the page preview. Then click 'Align Left', 'Align Center', or 'Align Right' in the floating toolbar.
Width: Only the 'Custom HTML', 'Videos', and 'Form' sections have a width setting.

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

Start with a clear structure: Plan your page layout before building
Use consistent styling: Maintain visual coherence across sections
Prioritize readability: Ensure text is legible against backgrounds
Don't overcrowd: Leave adequate spacing between elements
Test on mobile: Verify your page looks good on all device sizes
Use eyebrow text sparingly: For emphasis on important sections
Optimize images: Compress images for faster page loading
Add alt text to images: Select an inline image and click the "Edit Alt Text" (A) button in its floating toolbar to add an alternative text description for accessibility and screen readers