Skip to content

Page Builder

Menu Location: Settings > Content > Page Builder

Access Level: Administrator

Last Updated: 2026-03-12

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)
  • Blocks: Number of active content blocks on the page
  • Status: Active (live) or Inactive (hidden from visitors)
  • 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
  • Toggle (power icon): Switch between Active and Inactive
  • 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

Steps:

  1. Click the New Page button
  2. Enter a Title (required) — this appears in the browser tab
  3. Optionally enter a Slug — the URL path (auto-generated from title if left blank)
  4. Optionally enter a Meta Description — used by search engines
  5. Click Create Page

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

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. On the main Page Builder screen, look for the Import section
  2. Optionally enter a new Title and Slug (overrides values from the file)
  3. Select a JSON file to upload
  4. 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 label)
  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 Toggle to switch Active/Inactive
Duplicate a page Click the clone icon next to the page
Export a page Click the download icon next to the page
Import a page Use the Import section on the main screen
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 — 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.

Change Log

2026-03-12

  • Initial documentation created

End of Documentation

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