Skip to content

Page Builder

Menu Location: Settings > Content > Page Builder

Last Updated: 2026-08-28

Overview

The Page Builder lets you create custom pages for your website using drag-and-drop content blocks. Instead of coding HTML, you pick from a library of pre-designed blocks (heroes, features, testimonials, CTAs, etc.) and customize them with your own text, images, and colors.

Primary Functions:

  • Create and manage custom website pages
  • Build pages by adding and arranging content blocks
  • Set site-wide default headers, footers, and pre-headers
  • Configure your site's theme colors and fonts
  • Import, export, and clone pages

Page Layout

Top Buttons

  • Navigation Menus: Opens the navigation menu manager (for header menus)
  • New Page: Opens a dialog to create a new page
  • Theme Config: Opens site-wide color and font settings

Tabs

The page has three tabs:

  • Pages: Your list of all pages
  • Defaults: Site-wide header, pre-header, and footer blocks
  • Orphaned Blocks: Blocks that have been removed from pages but not deleted (only shown if any exist)

Pages Tab

This is the main view showing all your pages in a table.

Page Table Columns

  • ID: Internal page identifier
  • Title: The page name (shown in the browser tab)
  • Slug: The URL path where the page lives (e.g., /page/about), with a preview icon that opens the live page in a new tab
  • Blocks: Number of active content blocks on the page
  • Status: Active (live) or Inactive (hidden from visitors). The status itself is a button; click it to toggle a page between Active and Inactive without opening it.
  • Updated: When the page was last changed

Page Actions

Each page has these action buttons:

  • Edit (pencil icon): Open the page editor to add/edit blocks
  • Home (house icon): Set this page as your site's front page, or remove it as front page
  • Export (download icon): Download the page as a JSON file
  • Clone (copy icon): Create a duplicate of this page with all its blocks
  • Delete (trash icon): Permanently delete the page (blocks become orphaned, not destroyed)

Front Page

One page can be designated as your Front Page (homepage). It will have a blue "Front Page" label next to its title. When a page is set as the front page, its slug changes to index.

Creating a New Page

Clicking New Page opens a two-step dialog. First choose how you want to start, then fill in the page details. The Create button only appears once you've picked an option, and Back to options returns you to the three choices.

Step 1: Choose how you want to start

  • Start from a template: A ready-made layout you can customize. This option only appears if your store has templates installed.
  • Blank page: Start empty and add your own sections.
  • Import from JSON: Upload a page you exported earlier.

Step 2: Details

  1. Enter a Title (required), which appears in the browser tab
  2. Optionally enter a Slug (the URL path, auto-generated from the title if left blank)
  3. Optionally enter a Meta Description for search engines
  4. Click Create Page, Create from Template, or Import Page depending on what you chose

You'll be taken directly to the page editor to start adding blocks.

Slug Tips

  • Slugs should be short, descriptive, and lowercase (e.g., about-us, how-it-works)
  • Slugs are auto-generated from the title if you leave the field blank
  • Each slug must be unique across all pages
  • Starting from a template auto-suffixes a duplicate slug (e.g. about-2) instead of stopping you

Page Templates

Templates are vetted, ready-made full-page layouts you can use as a starting point instead of assembling sections by hand. Each one comes with placeholder copy and real photos already in its hero, story, banner, and call-to-action image slots, so a new page looks finished the moment you create it. Replace the words and photos with your own when you're ready. Because your brand colors and fonts come from Theme Config, a template automatically picks up your store's look.

The templates that ship with the page builder are:

  • Home / Landing: Hero, stats, "why choose us", your box types, a story block, testimonials and a closing call to action. A strong default for the home page.
  • How It Works: Explains the subscription flow in simple steps, with a customization block, a short FAQ and a closing call to action.
  • About Us: Tells your story, with a page header, a story block, a stats band, customer testimonials and a closing call to action.
  • FAQ: A header, an accordion of common questions, and a button to reach out for anything else.
  • Contact: A header, your contact details, and a working message form (Name, Email, Message) that sends to the same place as your live Contact page.

Each template in the Start from a template list shows its name, how many sections it contains, and a short description. Click Preview to open the template in a new browser tab and see exactly how it will look with your own colors, fonts and buttons. The preview is admin-only and nothing is saved. It is a look, not a page.

Creating a page from a template:

  1. Click New Page
  2. Choose Start from a template
  3. Pick a template from the list (use Preview to check one first)
  4. Optionally change the Title, Slug, and Meta Description. If you leave them blank, the title defaults to the template's name and the meta description to the template's own
  5. Click Create from Template

The new page is created as Inactive (a draft) with all the template's sections in place, and opens straight in the page editor. Replace the placeholder text and images, then set the page Active when it's ready.

Defaults Tab

The Defaults tab controls site-wide blocks that appear on every page unless a specific page overrides them.

Default Site Pre-Header

A slim bar that appears above the header on every page. Great for phone numbers, quick links, or announcements.

To set up:

  1. Go to the Defaults tab
  2. Click Create Default Pre-Header
  3. Click Edit to customize the content

Default Site Header

A custom header with your logo and navigation that replaces the built-in header.

To set up:

  1. Go to the Defaults tab
  2. Click Create Default Header
  3. Click Edit to customize logo, navigation, and links

A custom footer block shown at the bottom of every page.

To set up:

  1. Go to the Defaults tab
  2. Click Create Default Footer
  3. Click Edit to customize footer content

Default Block Actions

Each default block has these actions:

  • Edit: Open the block editor to change content
  • Toggle: Show or hide the block site-wide
  • Preview: See how it looks on the front end
  • Remove: Delete the default block (site falls back to the built-in version)

Theme Configuration

Click the Theme Config button to set site-wide colors and fonts that apply to all page builder blocks.

Colors

  • Primary Color: Main brand color used for buttons and highlights
  • Secondary Color: Accent color for secondary elements
  • Heading Color: Color for all headings (h1-h6)
  • Body Text Color: Default text color
  • Link Color: Color for clickable links

Fonts

  • Heading Font: Font family for headings
  • Body Font: Font family for body text

Sizes

  • H1-H4 Size: Font sizes for each heading level
  • Body Size: Default body text size
  • Size Scale: Multiplier for responsive sizing

Auto-Populate

The theme config can auto-detect colors and fonts from your existing site CSS. Values you've already saved take priority over auto-detected values.

Importing a Page

You can import pages that were previously exported (or shared from another site).

Steps:

  1. Click New Page on the main Page Builder screen
  2. Choose Import from JSON
  3. Select a page JSON file to upload
  4. Optionally enter a new Title, Slug, and Meta Description (these override values from the file)
  5. Click Import Page

The imported page will include all its blocks with their content intact.

Orphaned Blocks Tab

When you remove a block from a page or delete a page, the blocks become "orphaned" — they still exist in the system but aren't attached to any page. This tab lets you:

  • View orphaned blocks and their types
  • Preview what they look like
  • Delete them permanently if no longer needed
  • Re-attach them to a page via the page editor

Common Use Cases

Use Case 1: Create a Landing Page

Goal: Build a marketing page for a promotion.

Steps:

  1. Click New Page and enter a title like "Spring Sale"
  2. Set the slug to spring-sale
  3. In the page editor, add a Hero block for the banner
  4. Add a Features block to highlight key benefits
  5. Add a CTA block with a signup button
  6. Add a Testimonials block for social proof
  7. Add a FAQ block for common questions
  8. Make sure the page status is Active

Tips:

  • Use the drag-and-drop reorder to arrange blocks in the best flow
  • Preview your page to see how it looks to visitors

Goal: Replace the built-in header and footer with your own branded versions.

Steps:

  1. Go to Page Builder and click the Defaults tab
  2. Click Create Default Header and then Edit to customize it
  3. Set your logo, navigation links, and call-to-action button
  4. Click Create Default Footer and then Edit to customize it
  5. Add your contact info, social links, and any footer navigation

Use Case 3: Create and Set a Homepage

Goal: Make a custom page the first thing visitors see.

Steps:

  1. Create a new page with your homepage content
  2. Add blocks for your hero, value proposition, featured products, etc.
  3. Return to the Page Builder list
  4. Click the home icon on your new page
  5. Confirm to set it as the front page

Use Case 4: Copy a Page to Start a New One

Goal: Use an existing page as a starting point.

Steps:

  1. Find the page you want to copy in the Pages list
  2. Click the Clone button (copy icon)
  3. A new page is created with all the same blocks
  4. Edit the cloned page to customize the content

Troubleshooting

Page isn't showing on the website

Symptoms: Visitors can't see your page at the expected URL.

Solutions:

  1. Check that the page status is Active (green button)
  2. Verify the slug is correct — the page URL will be yoursite.com/page/your-slug
  3. Make sure the page has at least one active block

Changes aren't appearing on the live site

Symptoms: You edited a block but the website still shows the old version.

Solutions:

  1. The page builder automatically clears the cache when you save. Try a hard refresh in your browser (Ctrl+Shift+R)
  2. If using Cloudflare, the CDN cache may need a few minutes to update

Block editor shows blank content

Symptoms: Opening a block editor shows no fields to edit.

Check:

  1. The block type may not have any editable fields — some blocks pull content dynamically (like testimonials from the database)
  2. Try removing the block and adding it again

Best Practices

Page Organization

  1. Use descriptive, short slugs (about-us not about-us-page-version-2)
  2. Give pages clear titles that make sense in browser tabs
  3. Write meta descriptions for SEO — keep them under 160 characters

Block Layout

  1. Start with a hero block to create a strong first impression
  2. Follow with features or benefits to explain your value
  3. Include social proof (testimonials, reviews) in the middle
  4. End with a clear call-to-action
  5. Keep pages focused — a landing page with 5-7 blocks is usually ideal

Site Defaults

  1. Always set up a default header and footer so every page looks consistent
  2. Use the pre-header bar for time-sensitive announcements or contact info
  3. Configure your theme colors and fonts before building pages — blocks will inherit these settings

Things to Avoid

  • Don't create too many pages with similar content — consolidate when possible
  • Don't leave pages in Active status if they're not ready — use Inactive until the content is finalized
  • Don't delete blocks you might want to reuse — orphan them instead, and re-attach later

Quick Reference Card

Task Action/Location
Create a new page Click New Page button on main screen
Edit a page's blocks Click Edit button next to the page
Set a page as homepage Click the home icon next to the page
Make a page live/hidden Click the Status button (Active/Inactive) on the page row
Duplicate a page Click the clone icon next to the page
Export a page Click the download icon next to the page
Start from a ready-made layout Click New Page then Start from a template
Import a page Click New Page then Import from JSON
Set up site header Defaults tab > Create Default Header
Set up site footer Defaults tab > Create Default Footer
Change theme colors Click Theme Config button

FAQs

What's the difference between deleting and orphaning a block?

Deleting permanently removes the block and its content. Orphaning removes the block from the page but keeps it in the system — you can find it in the Orphaned Blocks tab and re-attach it to any page later.

Can I use the same block on multiple pages?

No, each block belongs to one page at a time. However, you can clone a page (which copies all its blocks) or manually add the same block type to different pages and customize each one separately.

How do I make my page show up in the header navigation?

Go to Navigation Menus (button at the top of the Page Builder screen) and add your page's URL as a menu item. Then make sure the navigation menu is linked to your header block.

What happens if I delete a page?

The page is permanently removed, but its blocks are orphaned (not deleted). You can find them in the Orphaned Blocks tab and either re-use them or delete them.

Can I preview a page before making it live?

Yes, you can. After editing a page, use the Preview link in the page editor to see how it looks. You can also keep the page set to Inactive while working on it, then toggle it to Active when ready. While you are signed in as an admin, an Inactive page also opens at its own URL exactly as it will look live; visitors get a not-found page until you set it Active.

Change Log

2026-09-28

  • Page templates now ship with real, hosted produce photography in their hero, story, banner, and call-to-action image slots, so a page created from a template looks finished instead of empty; the Contact template's message form is now the real, working contact form
  • Admins can now open an Inactive page at its own URL to see it as it will look live; visitors still get a not-found page until the page is set Active
  • Page templates: The New Page dialog now offers ready-made full-page layouts (Home / Landing, How It Works, About Us, FAQ, Contact) with placeholder content, so you can start from a finished layout instead of building every section by hand
  • Each template has a Preview link that opens it in a new tab rendered with your store's own colors, fonts and buttons; nothing is saved
  • Pages created from a template are drafts (Inactive) and open straight in the page editor
  • The New Page dialog is now a two-step chooser (Start from a template / Blank page / Import from JSON) with a Back to options link; importing a page moved into this dialog

2026-08-28

  • Slug column now has a preview icon that opens the page in a new tab
  • Status is now a click-to-toggle button right on the page row; the separate Toggle action button was removed

2026-03-12

  • Initial documentation created

End of Documentation

For additional help, contact your system administrator or Kiva Logic support.