Prozon Layout Editor

JSON-driven layout editor

Corner Roundness

Default rounding for cards, images, panels, zones, and related site elements.

Global Spacing

Base spacing used by general containers, cards, and repeated site elements.

rem

Shadows

Overall depth level for cards, image zones, feature panels, and other raised areas.

Button Style

Default shape for buttons and CTA links.

Animation Level

Controls the default transition speed and motion feel.

Container Width

Maximum width for the exported page content area.

Section Gap

Default vertical and grid gap between major page sections and zone rows.

rem

Quick Shape Preview

Card / Zone / Button Preview This preview shows the selected site radius, spacing, shadow, button shape, and animation level. Sample Button

Current Page

Page Title

Page Slug / File Name

Use index for the home page. Other pages can use slugs like about, menu, or contact.

Feature Type

This chooses the universal Page Feature Area for the selected page. Use the Text Source control below to show custom hero text, the automatic page title, or no text.

New Zone Type

Business Name

Show logo image

Uses /images/logo.png, logo.jpg, or logo.gif automatically.

Logo Size (px)

Enter the displayed logo width in pixels. Height stays proportional automatically.

Turn off top navigation on mobile

Keeps the mobile bottom navigation, but hides the header navigation on phone-size screens.

Header Style

Transparent lets the page background show through. Glass adds a soft tint and blur.

Shared Navigation

One item per line. Format: Label|URL

Selected Page Feature Type

Choose the feature area for the selected page. Only the controls needed for that choice are shown below.

Hero Text Source

Custom Text shows the editable text fields. Auto Page Header uses the selected page title. Hide Text Area creates a clean feature with no text box.

Custom Text

Show supporting text

Supporting Text

Show CTA button

CTA Text

CTA Link

Hero Text Alignment

Drag the text box in the preview to place it over the feature area per device view.

Text Area Background

Background Transparency

Show background image

Uses the page-specific image below. If no image is set, it can fall back to /images/hero.jpg.

Image Upload

Uploaded images are saved under /images/hero/, optimized as WebP when possible, and the path is stored in site-data.json.

Image Alt Text

Image Focus

Height

rem

Feature Darkness

0 means no dark overlay. Higher values darken the image or feature area behind the text.

Image Optimization

Balanced targets about 330 KB after resizing large images to a web-friendly width. Hero images are converted to WebP when possible.

Slider Image Paths

One image path per line. The first valid image is used as the exported background for now.

Video URL

MP4 paths render as a video background. Other URLs show a clean video feature placeholder.

Stack Layout Preset

Select one or more zones with Shift-click. If nothing is selected, all zones are arranged.

This does not create a separate export system. It updates the existing zone positions so your current live grid keeps working.

Title

Subtitle

Text

Include Path

Image Upload

Uploaded images are saved under /images/zone/. Resize handles keep Image Zones proportional.

Image Alt Text

Zone ID

Width

Height

Z-Index

View

Font Face 1

Font Face 2

Font Face 3

Browse Fonts

Text TypeFaceSize

Site Header

rem

Navigation/Menu

rem

Hero

rem

Body Text

rem

Mobile Body Text Body Face

rem

Buttons (Call to Action)

rem

Footer/Captions

rem

Saved in theme.fontComposition. Mobile Body Text and Mobile Navigation only change phone-sized output; they keep the matching desktop font faces.

Colors