Skip to content

Page Builder Editor

Menu Location: Settings > Content > Page Builder > Edit (on any page)

Access Level: Administrator

Last Updated: 2026-03-12

Overview

The Page Builder Editor is where you design individual pages by adding, arranging, and editing content blocks. Each page is built from a stack of blocks — like building with LEGO bricks — that you can drag into place, customize with your own content, and reorder at any time.

Primary Functions:

  • Add content blocks from a library of 90+ block types
  • Drag-and-drop to reorder blocks on the page
  • Edit block content (text, images, links, colors)
  • Configure per-page sections (header, footer, pre-header, banner)
  • Preview your page as visitors will see it

Page Layout

Top Section — Page Settings

At the top of the editor you'll see the page's core settings:

  • Title: The page name displayed in the browser tab
  • Slug: The URL path (e.g., about-us = yoursite.com/page/about-us)
  • Meta Description: A short summary for search engines (shown in Google results)
  • Save button to update these fields

Left Panel — Block Library

A searchable list of all available block types, organized by category. Drag a block from here to the right panel to add it to your page.

Right Panel — Page Blocks

Shows all blocks currently on this page, in the order they'll appear. Each block shows its type and has action buttons.

Bottom Section — Section Zones

Controls for per-page overrides of the header, footer, pre-header, and banner.

Adding Blocks

How to Add a Block

Steps:

  1. Browse or search the block library in the left panel
  2. Find a block type you want (e.g., "Hero with Text Overlay")
  3. Drag the block from the left panel and drop it onto the right panel
  4. The block is added to the bottom of the page
  5. Click Edit to customize its content

Block Categories

Blocks are organized into these categories:

Category What It's For Examples
Hero/Banner Large eye-catching headers at the top of a page Full-width image, text overlay, split layout
Header Site navigation with logo and menu Standard header, bordered header, e-commerce header
Features Highlight key benefits or how-it-works steps 3-column grid, 4-column grid, icon features
Content General text and image sections Rich text, text with image, image left/right
Call-to-Action Prompt visitors to take action Background CTA, centered CTA, newsletter signup
Testimonials Customer quotes and reviews Single testimonial, 3-column, auto-rotating
FAQ Frequently asked questions Accordion, from database
Newsletter Email signup forms Centered, horizontal, with image
Logo/Partners Display partner or vendor logos Logo grid, logo cloud
Products/Pricing Showcase products or subscription boxes Featured products, pricing boxes
Video Embedded videos YouTube, Vimeo
Layout/Spacing Visual separators and spacing Divider, spacer, decorative swoosh
Footer Page footers Multiple footer layout options
Gallery Image galleries 6-image grid
Blog Blog post listings Blog post cards
Heading Standalone headings Centered with subtitle
Misc Specialized blocks Contact info, gift certificates, vendor map, team

Editing Block Content

Click the Edit button on any block to open the block editor.

What You Can Edit

The block editor shows you all the customizable fields for that block type:

  • Text fields: Headlines, descriptions, button labels, paragraphs
  • Image fields: Upload or paste image URLs (with preview)
  • URL fields: Links for buttons and navigation items
  • Alt text: Image accessibility descriptions
  • Style fields: Colors and text sizes

How the Editor Works

  1. Click Edit on a block in the page editor
  2. The block editor opens showing a live preview of the block and editable fields below
  3. Change any field values — text, images, URLs, colors
  4. Click Save to apply your changes
  5. The preview updates to show your changes

Style Options

When editing a block, you may see style controls:

  • Background Color: Set a colored background behind the block (any hex color)
  • Text Color: Change the text color
  • Text Size: Choose from responsive size classes

Reordering Blocks

Drag blocks up or down in the right panel to change the order they appear on the page. The order is saved automatically when you drop a block into its new position.

Block Actions

Each block in the page editor has these action buttons:

  • Edit (pencil icon): Open the block editor to change content
  • Preview (eye icon): See how the block looks on the front end
  • Remove (unlink icon): Remove the block from this page (it becomes orphaned — not deleted)
  • Delete (trash icon): Permanently delete the block and its content

Remove vs. Delete

Remove (orphan) keeps the block in the system so you can re-use it later. Delete is permanent and cannot be undone. If you're unsure, use Remove.

Section Zones

Each page can override the site-wide default for these sections:

A promotional bar at the very top of the page (above everything).

Pre-Header

A slim bar above the main header — good for phone numbers or quick links.

The main navigation header with your logo and menu.

The footer at the bottom of the page.

Section Mode Options

Each section zone has three modes:

Mode What It Does
Default Uses the site-wide default block (set in Page Builder > Defaults tab)
Custom Uses a block you choose specifically for this page
None Hides this section entirely on this page

To configure a section:

  1. Scroll to the Section Zones area at the bottom of the page editor
  2. Choose a mode for each section (Default, Custom, or None)
  3. If you chose Custom, select a block type to create for that section
  4. Click Save Sections

Block Layout Settings

When viewing blocks in the editor, you may see layout options:

  • Full Width (pb-full): Block stretches edge-to-edge
  • Wide (pb-wide): Block uses most of the screen width
  • Contained (pb-contained): Block stays within a centered container

And spacing options:

  • None: No vertical padding
  • Tight: Minimal padding
  • Normal: Standard padding (default)
  • Loose: Extra padding for breathing room

Common Use Cases

Use Case 1: Build a Landing Page from Scratch

Goal: Create a complete marketing page.

Steps:

  1. From the Page Builder list, create a new page
  2. Add a Hero block — edit it with your headline, subheading, and background image
  3. Add a Features block — fill in your 3-4 key benefits with icons
  4. Add a Testimonial block — add real customer quotes
  5. Add a CTA block — set your button text and link
  6. Reorder blocks by dragging until the flow feels right
  7. Preview the page to check it looks good

Use Case 2: Customize an Existing Block

Goal: Update the text and images in a block.

Steps:

  1. Open the page editor for your page
  2. Click Edit on the block you want to change
  3. Update the text fields with your new content
  4. Paste a new image URL or upload a new image
  5. Adjust colors if needed
  6. Click Save

Use Case 3: Replace a Block with a Different Type

Goal: Swap out a block for a different design.

Steps:

  1. Remove the existing block (don't delete it, in case you want it back)
  2. Drag a new block type from the library
  3. Edit the new block with your content
  4. Reorder if needed

Troubleshooting

Block fields aren't showing in the editor

Symptoms: You click Edit but see no editable fields.

Solutions:

  1. Some blocks auto-generate content from your site data (like testimonials or FAQ from database). These blocks have fewer or no manual fields.
  2. Try refreshing the page and opening the editor again.

Changes aren't visible on the page preview

Symptoms: You saved changes in the block editor but the preview looks the same.

Solutions:

  1. Hard-refresh your browser (Ctrl+Shift+R) to clear any cached version.
  2. Make sure you clicked Save in the block editor before closing it.

Drag-and-drop isn't working

Symptoms: Blocks won't move when you try to drag them.

Check:

  1. Make sure you're dragging from the handle area (not the buttons)
  2. Try refreshing the page — JavaScript may need to reload

Best Practices

Content Tips

  1. Write clear, benefit-focused headlines — visitors scan before they read
  2. Use high-quality images that are relevant to your content
  3. Keep button text action-oriented ("Get Started", "Order Now", not "Click Here")
  4. Write short paragraphs — large blocks of text are hard to read on screen

Layout Tips

  1. Alternate between text-heavy and visual blocks for variety
  2. Use spacer blocks to add breathing room between sections
  3. Don't overload a page with too many blocks — 5-8 is usually the sweet spot
  4. Preview on both desktop and mobile to make sure everything looks good

Things to Avoid

  • Don't use multiple hero blocks on the same page — one at the top is enough
  • Don't leave placeholder/template text in published blocks
  • Don't use very similar colors for text and background — ensure good contrast

Quick Reference Card

Task Action/Location
Add a block to the page Drag from left panel to right panel
Edit a block's content Click Edit button on the block
Reorder blocks Drag blocks up/down in the right panel
Remove a block (keep it) Click Remove (unlink icon)
Delete a block permanently Click Delete (trash icon)
Preview a single block Click Preview (eye icon) on the block
Change page title/slug Edit fields at top and click Save
Override the header for this page Section Zones > Header > Custom
Hide the footer on this page Section Zones > Footer > None

Change Log

2026-03-12

  • Initial documentation created

End of Documentation

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