Visual Page Builder

Build and customize pages visually using the Theme Customizer and Code Editor — no coding required for basic pages, full control for advanced customization.

Overview

ZephyrPHP provides two complementary tools for building pages:

Theme Customizer — Visual, drag-and-drop section editor with live preview
Code Editor — Full code access to templates, controllers, CSS, and section schemas

Creating Pages

Static Pages

Open the Customizer or Theme Editor
Click Add Page
Enter a title — URL path auto-generates (e.g., "About Us" → /about-us)
Choose a layout
Add sections to build the page content

Dynamic Collection Pages

Click Add Page
Enter title and URL (e.g., "Blogs" → /blogs)
Select a Collection from the dropdown
Optionally check "Also create detail page" — auto-creates a detail page at /blogs/{slug}
A controller is auto-generated that fetches collection data

The generated controller:

<?php
return function(array $params) {
    $page = max(1, (int)($params['_query']['page'] ?? 1));
    $items = collection('blog_posts', [
        'per_page' => 10,
        'page' => $page,
        'sort_dir' => 'DESC',
    ]);

    return [
        'items' => $items,
    ];
};

The returned variables are available in your template. Edit the controller and template in the Code Editor to customize the output.

Page Sections

Pages are built from reusable sections. Each section has:

Settings — Configurable options (colors, text, sizes, data sources)
Blocks — Repeatable sub-items (e.g., FAQ questions, feature columns)
Template — Twig template that renders the section
Schema — JSON definition of available settings

18 Built-in Section Types

Section	Description
Hero Banner	Full-width headline with background and CTA button
Feature Columns	Multi-column feature grid with icons
Rich Text	WYSIWYG content block for articles/descriptions
Image with Text	Side-by-side image and text layout
Blog List	Dynamic listing from a collection with grid/list/featured layouts
Gallery	Image gallery grid with lightbox
Testimonials	Customer reviews with star ratings
FAQ	Accordion-style Q&A
CTA Banner	Prominent call-to-action with button
Pricing Table	Pricing plan comparison cards
Team	Team member grid with bios and socials
Stats	Animated counter statistics
Contact Form	Form that submits to a collection (public submit)
Newsletter	Email signup form
Logo Cloud	Client/partner logo row
Spacer	Vertical spacing/divider between sections
Custom Code	Raw HTML/CSS/JS block
Dynamic Content	Display entries from any collection

Global Theme Settings

Theme-wide settings apply across all pages:

Primary Color — Used for buttons, links, accents
Background Color — Page background
Text Colors — Primary and secondary text
Typography — Heading and body font families
Custom CSS — Write custom styles that apply globally

Access these in templates via theme_settings().

Layouts

Layouts are the outer frame for pages — they contain the <html>, <head>, header, footer, and a content block. Pages choose which layout to use.

<!DOCTYPE html>
<html>
<head>
    {{ assets_head() }}
</head>
<body>
    {% include "@theme/snippets/header.twig" %}
    {% block content %}{% endblock %}
    {% include "@theme/snippets/footer.twig" %}
    {{ assets_footer() }}
</body>
</html>

Theme File Structure

themes/my-theme/
├── theme.json          # Theme manifest
├── pages.json          # Page definitions and routes
├── config/
│   ├── settings_schema.json   # Global settings definition
│   └── settings_data.json     # Section data per page
├── layouts/
│   └── base.twig       # Main layout template
├── templates/
│   ├── home.twig        # Home page template
│   └── blog.twig        # Blog listing template
├── sections/
│   ├── hero-banner.twig # Section with schema
│   └── feature-columns.twig
├── snippets/
│   ├── header.twig      # Reusable header
│   └── footer.twig      # Reusable footer
├── controllers/
│   └── blog.php         # Page controller
└── public/
    ├── css/theme.css    # Stylesheets
    └── js/app.js        # Scripts

Next Steps

Learn more about the Theme Customizer for visual editing, the Code Editor for template development, and Twig Reference for all available functions.