PixelGrid User Guide

A comprehensive guide to building, managing, and publishing websites with PixelGrid.

---

Table of Contents

1. Getting Started
2. Dashboard
   • Page Header and Subscription Badges
   • Creating a New Website
   • Onboarding Wizard Steps
   • Site Cards
   • Publishing Your Website
   • Custom Domains
   • Danger Zone: Unpublishing and Deleting
3. Toolbar and Navigation
   • Toolbar Layout
   • Dashboard Mode Navigation
   • Editor Mode Tabs
   • Switching Between Modes
   • Resizing and Collapsing the Toolbar
   • Editor Header Bar
4. Site Editor: Content Tab
   • Header and Navigation Editor
   • Pages Editor
   • Sections Overview
   • Hero Section
   • Features Section
   • Pricing Section
   • Testimonials Section
   • Carousel Section
   • Gallery Section
   • Media Section
   • Call-to-Action (CTA) Section
   • Contact Section
   • Google Maps Section
   • FAQ Section
   • Footer Editor
   • Section Spacing Controls
   • Moving Sections Between Pages
   • Deleting a Section
5. Site Editor: Design Tab
   • Color Palettes
   • Fonts
6. Site Editor: SEO Tab
   • Site SEO Settings
   • Page SEO Settings
   • Google Search Preview
   • Structured Data
7. Link Configuration (NavLink Editor)
8. Subscription Plans and Limits
9. Tips and Best Practices

---

Getting Started

PixelGrid is a website builder that allows you to create, design, and publish professional websites. After logging in, you are taken to the Dashboard, where you can manage all of your websites. From the Dashboard, you can create new sites, open the editor to customize content and design, publish your sites to the web, and configure custom domains.

The primary workflow is:

1. Create a new website from the Dashboard.
2. Open the site in the Editor to customize its content, design, and SEO settings.
3. Preview your changes in real time using the live preview panel.
4. Publish the site when you are ready to make it publicly accessible.

---

Dashboard

The Dashboard is the home screen of PixelGrid. It shows all of your websites and provides the controls needed to create, edit, publish, and manage them.

Page Header and Subscription Badges

At the top of the Dashboard, you will see the page title "Websites" along with the description "Manage your projects or create a new one." To the right of the title are subscription usage badges and a button to create new sites.

Drafts Badge

The Drafts badge displays how many draft websites you currently have out of your plan's limit (for example, "2/5"). It uses a folder icon and a cyan-blue color scheme.

• When you are under the limit, the badge is informational and shows your current usage.
• When you have reached the draft limit, the badge begins pulsing in amber. You can click it to navigate directly to the Billing page where you can upgrade your subscription.

Live Badge

The Live badge displays how many published websites you have out of your plan's limit (for example, "1/3"). It uses a rocket icon and a green color scheme.

• When you are under the limit, the badge is informational.
• When you have reached the publish limit, the badge begins pulsing in amber. You can click it to navigate to the Billing page.

New Website Button

The New Website button is located to the right of the badges. It creates a new draft website.

• The button is disabled and grayed out while subscription limits are loading (a spinner appears in place of the plus icon).
• The button is also disabled when you have reached your draft site limit. In this case, the tooltip reads: "Draft limit reached. Click the flashing counter to upgrade."
• When available, clicking the button opens the Onboarding Wizard to guide you through creating a new AI-generated website.

Creating a New Website

To create a new website, click the New Website button in the Dashboard header. This opens the Onboarding Wizard, a 5-step guided process that gathers information about your business so the AI can generate a complete website for you.

Onboarding Wizard Steps

1. Business Basics -- Enter your business name, industry (required), and a description of your product or service (required). The description should cover what your business does, who your customers are, and what makes you stand out.

2. Audience & Tone -- Define your target audience (required) and select a tone of voice for the generated content. Available tones:

   • Professional
   • Friendly & Casual
   • Playful & Fun
   • Luxurious & Elegant
   • Direct & To-the-point

3. Page Structure -- Select which sections you want on your home page. Available section types include Hero, Features, Carousel, Gallery, About, Testimonials, Pricing, FAQ, Call-to-Action, Contact, and Google Maps. You can add, remove, and reorder sections later in the editor.

4. Section Details (Optional) -- Provide specific instructions or keywords for each selected section. For example, you might tell the AI to emphasize speed, security, and support for a Features section. This step is optional; leaving fields blank lets the AI decide based on your business description.

5. Review & Confirm -- Review all your choices in a summary view. Each summary card has an "Edit" button to jump back to that step if you need to make changes. When everything looks good, click "Generate My Website" to start AI generation.

During generation, a loading screen appears with the message "Building Your Masterpiece!" and progress updates. Once complete, the new site opens in the Editor where you can further customize it.

Notes:

• The "Next" button is disabled until all required fields in the current step are filled in.
• You can close the wizard at any time using the X button or the "Cancel" button. No site is created until you click "Generate My Website."
• If you have reached your draft limit, the New Website button is disabled. You must either delete an existing draft or upgrade your subscription plan before creating a new one.

If you have no websites yet, the Dashboard displays an empty state message: "No websites yet! Click the button above to create your first website with AI."

Site Cards

Each website is displayed as a card on the Dashboard. The cards contain all the essential information and actions for managing that site.

Left Side: Site Information

• Site Name: Displayed as a bold heading at the top of the card. If no name has been set, it shows "Untitled Project."
• Status Badge: A colored badge showing the current state of the site:
  • Draft (amber, pencil icon) -- The site has not been published yet or has been unpublished.
  • Publishing... (blue, spinner icon) -- The site is currently in the process of being published.
  • Live (green, checkmark icon) -- The site is published and accessible on the internet.
• Unpublished Changes Badge: An amber badge that appears when you have made edits to a live site that have not yet been published. It displays a warning icon and the text "Unpublished Changes." Clicking this badge opens the publish confirmation dialog so you can push your updates live.
• DNS Status Indicator: If a custom domain is configured for the site, this indicator shows the current DNS resolution status. While the status is being checked, it displays "Checking DNS..." with a spinner. Once checked, it shows whether DNS is fully resolved or still needs setup. Clicking the indicator opens the DNS configuration modal.
• Custom Domain Link: If a custom domain is set, the card shows the domain as a clickable link (for example, "Custom Domain: https://your-domain.com"). The link opens in a new browser tab.
• Default URL Link: For live sites, the card shows the default Firebase Hosting URL (for example, "Default URL: https://my-site.web.app") as a clickable link that opens in a new browser tab.

Right Side: Action Buttons (Desktop)

On desktop screens, four action buttons are displayed in a vertical column on the right side of each site card:

1. Edit (cyan-blue button): Opens the site in the editor where you can modify content, design, and SEO settings. This button is always available regardless of subscription status.

2. Publish / Update (green button): Publishes the site for the first time, or publishes updates to an already-live site. The label reads "Publish" for draft sites and "Update" for live sites. This button is hidden while the site is in the "Publishing" state. It is disabled (grayed out) if you do not have an active subscription.

3. Domain (gray button): Opens the DNS/Domain configuration modal where you can set up a custom domain for your site. This button is disabled without an active subscription.

4. Danger Zone (red button): Opens the Danger Zone modal where you can unpublish or delete the site. This button is disabled without an active subscription.

Right Side: Action Buttons (Mobile)

On mobile screens, the four action buttons are consolidated into a three-dot menu (vertical ellipsis icon). Tapping the menu reveals a dropdown with the same options:

• Edit
• Publish / Update
• Domain
• Danger Zone (separated by a divider from the other options)

The same subscription restrictions apply to the mobile menu items.

Card Footer

At the bottom of each site card, you will find version and timestamp information:

• Live Version: Shows the version number that is currently published. Displays "N/A" if the site has never been published.
• Draft Version: Shows the current working version number.
• Last Updated: The date and time of the most recent edit.
• Created: The date and time the site was originally created.

Publishing Your Website

First-Time Publish

When you publish a site for the first time, the Choose Your Domain dialog appears. This is where you select the subdomain for your site's default URL on the .web.app domain.

1. Enter your desired subdomain in the text field. The ".web.app" suffix is shown to the right of the input.
2. The input automatically sanitizes your entry to only allow lowercase letters, numbers, and hyphens.
3. The subdomain must be at least 3 characters long. If it is shorter, a message appears: "Domain must be at least 3 characters."
4. After you stop typing for about half a second, PixelGrid checks whether the domain is available:
   • A spinner and "Checking availability..." message appear during the check.
   • A green checkmark and "[name].web.app is available!" appear if the domain is free.
   • A red X and an error message appear if the domain is already taken or invalid.
5. The Publish button remains disabled until an available domain is confirmed.
6. An information box below the input explains: "Your site will be published to your custom .web.app domain. The publishing process may take a few minutes."
7. Click Publish to begin publishing, or Cancel to close the dialog.

Re-Publishing (Updating a Live Site)

When you publish updates to an already-live site, a simpler confirmation dialog appears:

1. It asks: "Are you ready to publish [site name]?"
2. An information box states: "This will make your website live and accessible to the public. The publishing process may take a few minutes."
3. Click Publish to publish, or Cancel to close.

Publish Limit Reached

If you attempt to publish but have reached your plan's publish limit, the Publish Limit Reached modal appears:

• It shows a warning icon and your current usage (for example, "2/2 published sites used").
• It suggests two options: unpublish an existing site to free up a slot, or upgrade your subscription for more capacity.
• Click Upgrade Plan to navigate to the Billing page, or Cancel to close.

Note: Re-publishing an already-live site does not count as an additional published site. The limit only applies when publishing a new site for the first time.

Custom Domains

To configure a custom domain for your site, click the Domain button on the site card (or click the DNS status indicator if one is already configured). This opens the DNS Info Modal.

The DNS Info Modal allows you to:

• Enter or change your custom domain name.
• View the DNS records that need to be added to your domain provider (such as A records, TXT records, or CNAME records).
• Copy DNS record values to your clipboard for easy entry at your domain registrar.
• Check the verification status of your domain and SSL certificate.

Each DNS record row shows:

• Action: What needs to be done (ADD, REMOVE, or VERIFIED).
• Type: The DNS record type (A, CNAME, TXT, etc.).
• Host: The hostname to enter at your DNS provider. A copy button is provided.
• Value: The record value to enter. A copy button is provided.

If you edit an existing custom domain, a confirmation dialog warns you that the current configuration will be deleted, and you will need to update DNS records for the new domain.

Tip: DNS changes can take up to 48 hours to propagate across the internet, though most updates are visible within a few hours. The DNS status indicator on your site card will update once propagation is complete.

Danger Zone: Unpublishing and Deleting

The Danger Zone modal provides access to destructive actions for your site. It opens as a menu with two options:

Unpublish Website

This option is only shown for sites that are currently live. It takes your site offline while preserving all of your content and settings.

1. Click Unpublish Website in the Danger Zone menu.
2. Review what will happen:
   • Your site will be taken offline and no longer accessible.
   • The site will be converted back to draft status.
   • All your content and settings will be preserved.
   • You can republish the site later at any time.
   • This frees up a published site slot in your subscription.
3. Type UNPUBLISH in the confirmation field (the text must match exactly).
4. Click the Unpublish button to confirm, or Back to return to the menu.

Delete Website

This option permanently removes the site from your account.

1. Click Delete Website in the Danger Zone menu.
2. Review the warnings:
   • The site will be removed from your account.
   • If the site is live, it will be shut down and no longer accessible online.
   • Site data is preserved by support and may be recoverable -- contact support if you need assistance.
3. Type DELETE in the confirmation field (the text must match exactly).
4. Click Delete Forever to confirm, or Back to return to the menu.

Important: Deletion cannot be undone through the application. If you need to recover a deleted site, contact PixelGrid support.

---

Toolbar and Navigation

The toolbar is a vertical panel on the left side of the application. It serves as the primary navigation control and, when in the editor, provides access to all site editing tools.

Toolbar Layout

The toolbar has the following structural elements from top to bottom:

1. Logo: The PixelGrid logo at the top. When the toolbar is expanded, the full logo is displayed. When collapsed, only the icon version is shown. Clicking the logo navigates you back to the homepage.

2. Mode Toggle Button (editor view only): A rectangular button that appears below the logo when the toolbar is expanded, and you are in the editor view. It allows you to switch between "Editor Tools" and "Dashboard" navigation without leaving the editor. See Switching Between Modes for details.

3. Main Content Area: Either the navigation menu (Dashboard mode) or the editing tabs (Editor mode).

4. Expand/Collapse Button: A small circular button positioned at the right edge of the toolbar. It shows a left-pointing chevron when the toolbar is expanded and a right-pointing chevron when collapsed. The toolbar remembers your preference between sessions.

5. Resize Handle (desktop only): When the toolbar is expanded, you can drag the right edge of the toolbar to resize it. The width can range from 320 pixels to 600 pixels. The width setting is shared between Dashboard mode and Editor mode.

Dashboard Mode Navigation

Dashboard mode is active whenever you are viewing the Dashboard, Analytics, Billing, Account, Support, or Admin pages. The toolbar displays a vertical navigation menu with the following items:

The currently active page is highlighted with a cyan-blue gradient background. When the toolbar is collapsed to its icon-only view, hovering over an icon reveals a tooltip with the item's name.

Editor Mode Tabs

When you open a site in the editor, the toolbar provides three tabs for editing different aspects of your site:

1. Content (pen-to-square icon): Edit the text, images, and structure of your site. This is where you manage the header, pages, sections, and footer.

2. Design (palette icon): Change the visual appearance of your site by selecting color palettes and font pairs.

3. SEO (magnifying glass icon): Configure search engine optimization settings including titles, descriptions, keywords, and structured data.

Click a tab name to switch between them. The active tab is highlighted with a cyan-blue gradient.

Switching Between Modes

When you are in the editor view, the toolbar provides a mode toggle button at the top (below the logo). This button allows you to access the Dashboard navigation menu without leaving the editor.

• When in Editor Tools mode, clicking the toggle switches to Dashboard mode, revealing the standard navigation menu (Site Status, Analytics, Billing, etc.).
• When in Dashboard mode, clicking the toggle switches back to Editor Tools mode, showing the Content, Design, and SEO tabs.

This is useful when you want to quickly navigate to the Billing or Account page while in the middle of editing a site.

Resizing and Collapsing the Toolbar

Collapsing/Expanding:

• Click the small circular button at the edge of the toolbar (chevron icon) to toggle between the expanded and collapsed states.
• The collapsed toolbar shows only icons (72 pixels wide on desktop).
• On mobile devices in the editor view, collapsing the toolbar hides it completely.

Resizing (Desktop Only):

• When the toolbar is expanded, hover over the right edge until your cursor changes to a resize cursor.
• Click and drag to resize the toolbar between 320 and 600 pixels wide.

Show/Hide Toolbar:

• If the toolbar has been completely hidden, a floating circular button appears near the top-left corner of the screen (life-ring icon with cyan-blue gradient).
• Click this button to show the toolbar again.

Editor Header Bar

When you are inside the site editor, a header bar runs across the top of the screen. It provides quick access to saving, publishing, viewport switching, and navigation.

Left Side

• "Editing: [Page Name]": Displays the name of the page you are currently editing. This updates automatically when you switch pages.
• Hamburger Menu (mobile only): A bars icon button appears on small screens when the toolbar is closed or collapsed. Tapping it opens or expands the sidebar toolbar.

Center: Viewport Switcher

Three toggle buttons let you preview your site at different screen sizes:

• Desktop (monitor icon): Shows the full desktop-width preview.
• Tablet (tablet icon): Shows a tablet-width preview.
• Mobile (phone icon): Shows a mobile-width preview.

The active viewport is highlighted in indigo. Switching viewports does not affect your content -- it only changes the preview width so you can see how your site will look on different devices.

Right Side (Desktop)

Three action buttons are displayed on larger screens:

1. Draft (floppy-disk icon, indigo): Saves your current work to the server.

   • While saving, the button shows a spinner and "Saving..." text, and is temporarily disabled.
   • After a successful save, the button briefly turns green and displays a checkmark with "Saved!" before reverting to its default state.

2. Publish (shuttle-space icon, green): Publishes the site or publishes updates to a live site.

   • Disabled while saving or publishing is in progress.
   • Disabled (grayed out) if you do not have an active subscription and the site has not been previously published.
   • While publishing, shows a spinner and "Publishing..." text.

3. Dashboard (arrow-left icon, red): Returns you to the Dashboard. This does not automatically save your work -- be sure to save your draft first if you have unsaved changes.

Right Side (Mobile)

On smaller screens, the three desktop buttons are replaced by a three-dot menu (ellipsis-vertical icon) that opens a dropdown containing the same options: Draft, Publish (with green highlight), and a divider followed by Dashboard (with red highlight).

---

Site Editor: Content Tab

The Content tab is the primary editing interface where you manage all the text, images, and structural elements of your website. It is organized into collapsible panels that you can open and close as needed.

Header and Navigation Editor

The Header editor controls the site's top navigation bar. To access it, expand the "Header + Navigation" panel in the Content tab.

Logo Image

The logo image area supports both drag-and-drop and click-to-upload. The upload area is displayed at a 2:1 aspect ratio.

• To upload a logo: Click the upload area or drag an image file onto it. The area displays "Click to upload or drag & drop" when empty.
• To replace a logo: Hover over the existing logo image. An overlay appears with the message "Click or drag to replace." Click or drop a new image to replace it.
• To remove a logo: Click the Remove Logo button that appears below the logo image.

Logo Text

A text input field for your brand name or text-based logo. This text is displayed in the site header alongside (or instead of) the logo image.

Navigation Links

Navigation links appear in your site's header as the main menu. Each link is shown as a collapsible panel displaying the link's display text as its title.

• To add a link: Click "Add Nav Link" at the bottom of the navigation links list.
• To edit a link: Expand a link's panel to access its settings. Each link uses the NavLink Editor for configuration (display text, link type, and destination).
• To reorder links: Drag a link by its grip handle to a new position, or use the up/down arrow buttons.
• To delete a link: Expand the link's panel and click the red "Delete Link" button at the bottom.

Pages Editor

The Pages editor manages the pages of your website. To access it, expand the "Pages" panel in the Content tab.

Your site can have multiple pages (for example, Home, About, Services, Contact). Each page contains its own set of sections.

Page List

Pages are displayed as draggable cards. The currently active page (the one being edited) has a cyan border highlight.

Each page card shows:

• Grip handle: Used for drag-and-drop reordering.
• Page name: Click the name to switch to that page for editing.
• Home badge: A small "Home" label that appears on the page designated as the homepage.
• Up/Down arrows: Move the page up or down in the page order.
• Set as Home Page button (house icon): Designates this page as the site's homepage. This button is hidden on the page that is already set as the homepage.
• Edit button (pencil icon): Switches the card into edit mode where you can modify the page name and URL slug. Click Save to apply changes or Cancel to discard them.
• Delete button (trash icon): Removes the page. This button is disabled when only one-page remains, since a site must have at least one page.

Adding a New Page

Click the "Add New Page" button at the bottom of the page list. An inline form appears where you can type a name for the new page. Click Add to create the page or X to cancel.

Page URL Slug

When editing a page (via the pencil icon), you can set the URL Slug -- the path that appears in the browser's address bar for that page. For example, a slug of /about means the page will be accessible at https://your-site.web.app/about.

Sections Overview

Sections are the building blocks of each page. The Content tab shows a heading "Sections for '[Page Name]'" followed by the list of sections on the currently active page.

Adding a Section

Click the "Add Section" button (cyan-blue gradient) at the top of the sections area. A modal opens showing all available section types. Select the type you want to add, and it will be appended to the current page.

Available section types include: Hero, Features, Testimonials, Call-to-Action (CTA), Carousel, Gallery, Pricing, Contact, Google Maps, and FAQ.

Reordering Sections

You can reorder sections in two ways:

• Drag and drop: Grab a section by its drag handle and move it to a new position. The instruction text reads: "Use the handle to drag and drop sections to reorder them."
• Arrow buttons: Use the up and down arrow buttons on each section panel to move it one position at a time.

Section Panels

Each section appears as a collapsible panel. The panel title shows the section type name. When a section is currently generating AI images, a loading indicator and "Generating images..." message appear in the panel header.

Expand a section panel to access its specific editor (described in detail below), along with spacing controls, move-to-page controls, and a delete button at the bottom.

Hero Section

The Hero section is typically the first thing visitors see on your page. It contains a prominent headline, supporting text, and an optional call-to-action button.

Fields:

• Headline: The main heading text for the hero area.
• Subheadline: Supporting text that appears below the headline. This is a multi-line text area.
• Enable Call-to-Action Button: A checkbox that toggles the CTA button on or off.
  • When enabled, a styled container appears with the NavLink Editor for configuring the button's text and destination.
  • When disabled, no button is displayed in the hero section.

Features Section

The Features section showcases key features or benefits, each with an icon, title, and description.

Fields:

• Headline: The section heading (for example, "Our Features" or "Why Choose Us").

Feature Items:

Each feature is displayed as a collapsible panel showing the feature's icon and title. Features can be reordered by dragging.

For each feature:

• Title: The feature name.
• Description: A multi-line text description of the feature.
• Icon Picker: Opens an icon selection interface where you can browse and choose from a library of FontAwesome icons. The selected icon appears next to the feature in the panel header.
• Delete Feature: A red button at the bottom of each feature to remove it.

Click "Add Feature" (cyan-blue gradient button) to add a new feature item.

Pricing Section

The Pricing section displays your product or service tiers with pricing information.

Fields:

• Headline: The section heading (for example, "Pricing Plans" or "Choose Your Plan").

Pricing Plans:

Each plan is displayed as a collapsible panel with a tag icon. Plans can be reordered by dragging.

For each plan:

• Plan Name: The name of the pricing tier (for example, "Basic", "Pro", "Enterprise").
• Price: The price displayed on the tier (for example, "$9.99").
• Frequency: The billing period (for example, "/month" or "/year").
• CTA Text: The text on the plan's action button (for example, "Get Started" or "Sign Up").
• CTA Link: The destination URL or anchor link for the action button. Accepts a full URL (such as https://example.com/signup) or an anchor to a section on the page (such as #contact).
• Featured Plan: A checkbox to highlight this tier visually, making it stand out from the other plans.
• Features List: A list of text features included in the plan. Each feature is an editable text field with a deleted (X) button. Click "Add Feature" to add more feature items to the list.
• Delete Plan: A red button at the bottom to remove the entire pricing tier.

Click "Add Pricing Plan" (cyan-blue gradient button) to add a new pricing tier.

Testimonials Section

The Testimonials section displays customer quotes and endorsements.

Fields:

• Headline: The section heading (for example, "What Our Customers Say").

Testimonial Items:

Each testimonial is displayed as a collapsible panel with a quote icon and the author's name as the title. Testimonials can be reordered by dragging.

For each testimonial:

• Quote: A multi-line text area for the testimonial text.
• Author: The name of the person giving the testimonial.
• Company / Role: The author's company or role (placeholder text shows "e.g., CEO, TechCorp").
• Delete Testimonial: A red button to remove the testimonial.

Click "Add Manually" (indigo button) to add a new testimonial by hand.

Carousel Section

The Carousel section displays a rotating slideshow of images.

Fields:

• Headline: The section heading.
• Full Width Carousel: A checkbox to make the carousel stretch edge-to-edge across the page.
• Auto-rotate Speed: A dropdown to control automatic image rotation. Options are Off, 1 second, 2 seconds, 3 seconds, 4 seconds, or 5 seconds.

Images:

Current carousel images are displayed in a 3-column grid. You can:

• Reorder images: Drag and drop images within the grid.
• Delete an image: Hover over an image and click the X (delete) button that appears.

If no images have been added, the area shows "No images yet."

Adding New Images:

There are two methods to add images, presented in separate sections:

1. Generate with AI:

   • Optionally enter a prompt describing the kind of images you want (for example, "A modern office with people collaborating"). If left blank, AI will use your business information to generate relevant images.
   • Select the number of images to generate from the dropdown (1 to 10).
   • Click "Generate" to start AI image generation. A spinner and "Generating..." text appear while images are being created.

2. Upload Your Own:

   • Click the upload area or drag and drop image files onto it.
   • Multiple files can be uploaded at once.
   • The area displays "Click to upload or drag and drop."

Tip: You can use both methods together. Generate AI images as a starting point, then supplement with your own uploaded photos.

Gallery Section

The Gallery section organizes items into groups, each with images, videos, descriptions, and optional action buttons. It is designed for showcasing structured content where each item has context — titles, descriptions, and calls to action. This is well-suited for portfolios, product catalogs, menus, or project showcases. If you just need to display raw images and videos without titles or descriptions, use the Media Section instead.

Fields:

• Headline: The section heading.

• Layout Style: A 4-option toggle for how gallery items are displayed:

  • Grid: Items in a standard grid layout.
  • Compact: Items in a tighter grid with less spacing.
  • List: Items displayed vertically in a list.
  • Compact List: A tighter vertical list layout.

  The active layout option is highlighted with a cyan-blue gradient.

Gallery Groups:

Content is organized into groups, each displayed as a collapsible panel with a layers icon. Groups can be reordered by dragging.

For each group:

• Group Title: The name of the group (for example, "Web Design Projects" or "Appetizers").

Items Within a Group:

Each group contains items, displayed as nested collapsible panels with an image icon. Items can be reordered by dragging within their group.

For each item:

• Show Media: A checkbox to enable or disable media display for this item.
• Show Media List: A checkbox that appears only when media is enabled and the item has more than one media entry. This controls whether all media entries are visible or just the cover.
• Media Upload: When media is enabled, a click-to-upload or drag-and-drop area appears for adding images and videos (MP4, WebM). You can also embed a video by pasting a YouTube or Vimeo URL in the URL field below the upload area.
• Media Grid: When media is present, it is displayed in a 3-column grid. The first entry is labeled "Cover" and serves as the primary media for the item. Video entries show a thumbnail frame with a play icon overlay. Hover over any entry to reveal a delete overlay. Drag entries to reorder them. A note reads: "First item is the cover. Drag to reorder."
• Title: The item's heading.
• Description: A multi-line text description of the item.
• Enable Button: A checkbox to add an action button to the item. When enabled, the NavLink Editor appears for configuring the button.
• Delete Item: A red button to remove the item from the group.

Click "Add Item to Group" to add a new item within the current group. Click "Delete Group" (red button) to remove the entire group and all its items. Click "Add Gallery Group" (indigo button) to create a new group.

Media Section

The Media section displays a collection of images and videos in a simple layout without titles, descriptions, or buttons on individual items. It is designed for raw media presentation — photo galleries, video reels, behind-the-scenes footage, or any situation where the media speaks for itself. If you need structured items with titles, descriptions, and action buttons, use the Gallery Section instead.

Fields:

• Headline: The section heading.
• Subheadline: Optional supporting text below the headline.
• Layout: Controls how media items are arranged:
  • Grid: Items in a uniform grid with fixed-height rows.
  • Single Column: Items stacked vertically at full width.
  • Masonry: Items in a Pinterest-style column layout that preserves each item's natural aspect ratio.

Media Items:

Existing media items are displayed as a list. Each item shows a thumbnail preview — images show the image, videos show a frame from the video with a play icon overlay. Items can be reordered by dragging. Each item has a caption field and a delete button.

Adding New Media:

A combined upload control appears below the item list:

• Upload area: Click to browse or drag and drop files. Accepts images and videos (MP4, WebM).
• Embed a URL: Paste a YouTube or Vimeo URL and click Add (or press Enter) to embed a video.

Media loads in the background on deployed sites so it does not block the initial page load.

Call-to-Action (CTA) Section

The CTA section is a prominent area designed to drive visitors toward a specific action, such as signing up, contacting you, or making a purchase.

Fields:

• Headline: The main CTA heading.
• Subheadline: Supporting text below the headline.

Buttons:

Each button is displayed as a collapsible panel showing the button's display text as its title. Buttons can be reordered by dragging.

For each button:

• The full NavLink Editor is available for configuring the button's text and destination.
• Delete Button: A red button to remove it.

Click "Add Button" (indigo button) to add a new CTA button.

Contact Section

The Contact section provides your visitors with ways to reach you.

Fields:

• Headline: The section heading (for example, "Get in Touch").
• Subheadline: Supporting text for the contact section.

Contact Methods:

Each contact method is displayed as a draggable row with a grip handle for reordering.

For each method:

• Type: A dropdown to select the method type. Options include:
  • email
  • phone
  • website
  • address
  • x (formerly Twitter)
  • linkedin
  • github
  • instagram
  • facebook
• Value: A text input for the contact value. The placeholder changes based on the selected type (for example, "contact@example.com" for email, or "https://..." for other types).
• Delete button (trash icon): Removes the contact method.

Click "Add Contact Method" (indigo button) to add a new entry.

Google Maps Section

The Google Maps section embeds an interactive map showing your business location.

Fields:

• Headline: The section heading.

• Subheadline: Supporting text.

• Address: The physical address to display on the map. Enter a full street address (the placeholder shows "123 Main St, Anytown, USA").

• Map Size: A 3-option toggle to control the height of the map embed:

  • Small
  • Medium
  • Large

  The active size is highlighted with a cyan-blue gradient.

FAQ Section

The FAQ (Frequently Asked Questions) section lets you present common questions and their answers in an expandable format.

Fields:

• Headline: The section heading (for example, "Frequently Asked Questions").

FAQ Items:

Each FAQ is displayed as a collapsible panel with a question-circle icon. FAQs can be reordered by dragging.

For each FAQ:

• Question: A multi-line text area for the question.
• Answer: A multi-line text area (5 rows) for the answer.
• Delete FAQ: A red button to remove the FAQ item.

Click "Add FAQ" (cyan-blue gradient button) to add a new question-and-answer pair.

Footer Editor

The Footer editor controls the content at the bottom of every page. To access it, expand the "Footer" panel at the bottom of the Content tab.

Fields:

• Copyright Text: The copyright notice displayed in the footer (for example, "(c) 2025 Your Company. All rights reserved.").

Social Links:

Social media links appear as icons in the footer. Each link is displayed as a draggable row.

For each social link:

• Platform: A dropdown to select the social network. Options include: x (formerly Twitter), LinkedIn, GitHub, Instagram, and Facebook.
• Profile URL: A text input for the URL to your profile on that platform.
• Delete button (trash icon): Removes the social link.

Click "Add Social Link" to add a new social media entry. Drag links to reorder them.

Section Spacing Controls

Every section includes a Spacing control at the bottom of its editor panel. This collapsible control (gear icon) lets you fine-tune the vertical spacing around the section.

When collapsed, it shows a summary of the current values (for example, "Padding: 5/5, Margin: 0/0").

When expanded, it shows four numeric inputs arranged in a 2x2 grid:

All values are in rem units (a relative unit based on font size). The minimum value is 0 and values increment by 0.5.

Tip: Padding affects space inside the section's background area, while margin affects space between sections. Use padding to give your content breathing room within a section, and margin to create separation between different sections.

Moving Sections Between Pages

If your site has multiple pages, each section includes a "Move Section to Page" control below the spacing editor. This control is hidden when the site has only one page.

To move a section to a different page:

1. Select the destination page from the dropdown menu (all pages except the current one are listed).
2. Click the Move button.

The section will be removed from the current page and appended to the selected destination page.

Deleting a Section

At the very bottom of each section's editor panel, a red "Delete Section" button allows you to permanently remove the section from the page.

Important: Deleting a section cannot be undone. Make sure you no longer need the section before deleting it.

---

Site Editor: Design Tab

The Design tab lets you control the visual appearance of your entire site through color palettes and font selections.

Color Palettes

The Color Palettes area displays all available palette options. Each palette card shows:

• Palette name: A descriptive name for the color scheme.
• Six color circles: Representing the palette's primary, secondary, accent, background, text, and heading colors. Hovering over a circle shows a tooltip with the color's role name.

Selecting a Palette: Click on any palette card to apply it to your site. The active palette is highlighted with a cyan ring border.

Customizing Colors: When a palette is active (selected), you can click on any of its individual color circles to open a color picker. This allows you to fine-tune specific colors while keeping the rest of the palette intact.

Tip: Start with a palette that is close to your desired look, then customize individual colors to match your brand precisely.

Fonts

The Fonts area displays available font pairs. Each font card shows:

• Font pair name: Displayed in the heading font style.
• Sample text: "The quick brown fox jumps over the lazy dog." displayed in the body font style.

Click on a font card to apply that font pair to your site. The active font pair is highlighted with a cyan ring border.

Each font pair defines two complementary fonts -- one for headings and one for body text -- ensuring visual consistency across your site.

---

Site Editor: SEO Tab

The SEO (Search Engine Optimization) tab helps your site appear in search engine results. It contains settings that influence how search engines understand and display your pages.

Site SEO Settings

The Site SEO Settings panel (open by default) contains site-wide settings that apply globally. An information button (circle-info icon) next to the title opens a floating tooltip explaining how SEO works, including:

• What SEO is and why it matters.
• How long it typically takes to see results (1-4 weeks after publishing).
• How Google discovers and indexes your site.
• Tips for achieving better search rankings.

Fields:

• Site Title: The primary title for your website as it appears in search results and browser tabs. If left empty, your logo text is used as a default.
• Site Description: A description of your website for search engines. Aim for 150-160 characters. This text appears below your site title in search results.
• Business Type: A dropdown that categorizes your business for structured data purposes. Options include:
  • Organization (General)
  • Local Business
  • Restaurant
  • Professional Service
  • Store / E-commerce
  • Medical / Healthcare
• Keywords: Comma-separated keywords relevant to your site (for example, "website builder, AI, landing page"). Keywords are saved when you click outside the field.
• OG Image URL: The URL of an image that appears when your site is shared on social media platforms. The recommended size is 1200 x 630 pixels.

Page SEO Settings

The Page SEO panel appears only for pages that are not the homepage. It allows you to override site-level SEO settings on a per-page basis.

Fields:

• Page Title Override: A custom title for this specific page. If left empty, the page name is used.
• Page Description Override: A custom description for this page. If left empty, the site-level description is used.
• Hide from search engines (noindex): A checkbox that, when enabled, tells search engines not to include this page in their index. Use this for pages that should not appear in search results (such as internal landing pages or thank-you pages).

Google Search Preview

Below the SEO settings, a Google Search Preview card shows an approximation of how your page may appear in Google search results. The preview includes:

• Blue title link: Shows your page title (for the homepage) or "Page Title | Site Title" (for other pages).
• Green URL: Shows the full URL path using your custom domain or Firebase URL.
• Gray description: Shows your meta description or "No description set" if none is configured.

This preview updates in real time as you edit your SEO settings, so you can see the effect of your changes immediately.

Structured Data

The Structured Data card informs you that your site automatically includes JSON-LD structured data based on your selected business type. Structured data helps search engines understand your content and can enable rich results (such as business information panels, review stars, or enhanced listings).

The card shows the current @type value (matching your Business Type selection). No manual configuration is needed -- this is generated automatically when your site is published.

---

Link Configuration (NavLink Editor)

The NavLink Editor is a reusable component that appears whenever you configure a button or navigation link. It is used in the Header navigation, Hero CTA button, CTA section buttons, and Gallery item buttons.

Fields:

• Display Text: The text that visitors see on the button or link.
• Link Type: A dropdown that determines the link's destination. There are three options:

When the link type is changed, the additional fields update accordingly. For "Page" and "Section on a Page" types, use the dropdown menus to select the destination.

Tip: Use "Section on a Page" links for smooth-scrolling navigation within a single page. For example, a Hero button can link to the Contact section further down the page.

---

Subscription Plans and Limits

PixelGrid offers multiple subscription tiers, each with different capabilities:

Your current usage is always visible in the Dashboard header badges. When you reach a limit, the relevant badge pulses amber and becomes clickable to navigate to the Billing page.

To manage your subscription:

1. Navigate to Billing using the toolbar navigation.
2. View available plans and their features (when not subscribed). Shows Current Subscription when subscribed.
3. Select a plan to start or change your subscription.
4. Use the billing portal to manage payment methods and invoices.

---

Frequently Asked Questions

How long does it take to build a website with PixelGrid?

Typically under two minutes from entering your business details to having a complete, AI-generated website ready to preview and edit. Publishing to the web takes a few additional minutes for cloud deployment to Firebase Hosting.

What AI models does PixelGrid use?

PixelGrid uses Google Gemini for content generation (headlines, body text, testimonials, FAQs, and pricing descriptions) and Google Imagen for image generation. Both models are optimized to generate original, brand-specific content tailored to your business type and target audience.

Can I use my own domain name with PixelGrid?

Yes. Custom domain support is available on all paid plans: Bronze ($10/mo), Silver ($15/mo), and Gold ($20/mo). You configure your domain via the Domain button on your site card in the Dashboard, then add the DNS records provided to your domain registrar. DNS propagation typically takes 24–48 hours.

Does PixelGrid include analytics?

Yes, on Silver and Gold plans. Silver includes 30 days of analytics history, and Gold includes 90 days. Analytics are powered by Google Analytics 4 (GA4) and automatically track page views, sessions, bounce rates, traffic sources, and user behavior. Free and Bronze plans do not include analytics.

What happens if I cancel my subscription?

Your published sites remain live on the web. You lose the ability to publish new sites or make changes to existing published sites. You can still create and edit draft websites on the free plan. To republish a site after cancelling, you would need to resubscribe to a paid plan.

Is there a free plan?

Yes. PixelGrid's free plan lets you create and edit one draft website with full AI generation for content and images. Publishing to the web requires upgrading to a paid plan starting at $10/month (Bronze tier).

How many websites can I create?

The number of draft and published websites depends on your subscription plan:

• Free: 1 draft site
• Bronze: 3 draft sites, 1 published site
• Silver: 5 draft sites, 2 published sites
• Gold: 10 draft sites, 3 published sites

You can delete sites at any time to free up space for new ones.

Does PixelGrid handle SSL certificates?

Yes. All sites deployed on PixelGrid receive a free HTTPS (SSL) certificate automatically. This is included in all plans and applies to both PixelGrid subdomains (.web.app) and custom domains.

---

Tips and Best Practices

General Workflow:

• Save your work frequently. Changes to your site are not saved automatically as you edit.
• Use the live preview panel to see how your changes look in real time before publishing.
• Start with AI-generated content as a foundation, then customize it to match your voice and brand.

Content Tips:

• Keep headlines concise and impactful. Visitors typically scan headings before reading body text.
• Use high-quality images. AI-generated images can be supplemented or replaced with your own photography.
• Write descriptive text for accessibility. Screen readers rely on text alternatives for images and clear headings.

Design Tips:

• Choose a color palette that aligns with your brand identity, then customize individual colors if needed.
• Select fonts that are easy to read. The heading font can be more decorative, but the body font should prioritize legibility.
• Use section spacing to create visual breathing room between content areas.

SEO Tips:

• Fill in the Site Title and Description -- these are the most important fields for search engine visibility.
• Choose relevant keywords that your target audience would search for.
• Set a descriptive OG Image so your site looks professional when shared on social media.
• After publishing, allow 1-4 weeks for search engines to discover and index your site.
• Use the Google Search Preview to check how your pages will appear in search results.

Publishing Tips:

• Choose a memorable, descriptive subdomain for your .web.app URL.
• Consider setting up a custom domain for a more professional appearance.
• After configuring DNS records for a custom domain, allow up to 48 hours for propagation.
• Use the "Unpublished Changes" badge on the Dashboard to quickly identify sites that need to be updated.

Organization Tips:

• Use multiple pages to organize your content logically (for example, Home, About, Services, Contact).
• Drag and drop to reorder pages, sections, and list items -- this is faster than using arrow buttons for large moves.
• Use the "Move Section to Page" feature to reorganize content between pages without recreating sections.
• Collapse toolbar panels you are not actively using to reduce visual clutter.