Page Customizer

1. Overview

The Webpage Customizer is a drag‑and‑drop editor that activates when you select Smart Content as the content type while creating a page. It provides ready‑made section blocks, predefined styles, and responsive previews, enabling you to build professional layouts in minutes—without coding.

2. Interface Layout

A. Left Panel – Domains, Headers, Footers, and Page Sections

• Domains: Switch between connected domains to preview how your site looks across different setups. Changes are smooth and instant.

• Headers & Footers: Customize global elements like navigation menus, logos, and footer links.

• Page Container: Control overall page structure, including scroll animations and layout behavior.

• Page Sections: Add, expand, and manage sections such as hero, features, pricing, team, FAQ, and more.

  • Each section shows its style (e.g., hero‑rotate, featureV‑4‑col‑simple).

  • Expand a section to reveal its elements (e.g., container, pre‑header, header, info text, feature list).

  • Use the edit icon (pencil) to modify text, images, or buttons.

  • Use the delete icon (trash) to remove unwanted sections.

B. Central Preview Area

• Displays a live preview of your page.

• Updates instantly as you edit text, images, or layout.

• Lets you test different section styles before committing.

C. Right Panel – Styling & Animation

• Customize fonts, colors, spacing, and alignment.

• Apply animations (fade‑in, slide, zoom) to individual elements.

• Control responsiveness for desktop, tablet, and mobile views.

• Fine‑tune margins and spacing, or apply Bootstrap classes for advanced styling.

• Some pre-defined css classes in addition to Bootstrap classes that you can use in bootstap classes

  • light-mode and dark-mode that you can use for the containers,

  • big-button and rounded-button you can use for buttons,

  • mat-primary, mat-success, mat-warning, mat-default and mat-danger you can use for cards

  • mat-small-icon, mat-medium-icon and mat-large-icon can be used for icons

3. Key Features

• Ready‑Made Layouts: Preview section styles before adding them.

• Drag‑and‑Drop Editing: Build layouts quickly by stacking hero, features, pricing, team, and more.

• Element-Level Editing: Expand sections to edit individual components (headers, icons, content blocks).

• Predefined Styles: Adjust spacing, margins, and animations with ease.

• Responsive Preview: Test across devices to ensure mobile‑friendly design.

• Save & Publish Controls:

  • Save Draft: Keep changes without going live.

  • Publish: Push updates instantly to your domain.

4. Workflow Example

1. Switch Domain → Preview how the site looks on different setups.

2. Add a Hero Section → Insert images, buttons, and a headline.

3. Add a Features Section → Use a four‑column layout to highlight offerings.

4. Expand Section → Edit individual elements like headers, icons, or text.

5. Customize Styling → Adjust margins, spacing, and experiment with colors, backgrounds, and effects.

6. Switch Modes → Apply dark mode for a modern aesthetic.

7. Add a Pricing Section → Showcase plans clearly with a simple four‑column layout.

8. Add a Team Section → Introduce your people with profile cards (photo, name, title, description).

9. Preview Responsiveness → Ensure everything flows seamlessly across devices.

10. Save Draft or Publish → Finalize changes for your live site.

5. Best Practices

• Use Hero sections for impactful first impressions.

• Keep Features concise and easy to scan.

• Showcase clients, portfolio, and team with real images for authenticity.

• Maintain consistent branding (colors, fonts, logos).

• Apply animations sparingly for a polished look.

• Always preview in mobile view before publishing.

✅ Takeaway: The Smart Content Webpage Customizer gives you full control - from domains to headers, footers, and section elements. By expanding sections and editing individual components, you can fine‑tune both layout and style, ensuring your site is modern, responsive, and engaging.