Skip to content

Page Builder Editor

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

Last Updated: 2026-09-30

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)
  • Auto-apply discount code: A discount code to hand to visitors who land on this page
  • Auto-set pickup location: Optionally bind this page to a pickup location (co-op)
  • Save button to update these fields

Auto-Apply Discount Code

Use this when you're running an ad (or any campaign) to a landing page and want the discount applied automatically instead of asking people to type a code. Enter the code (for example FREEEGGS) and save the page, then point the ad at that page.

When a visitor lands on the page, the code is stored in their browser for 16 days. If they sign up while it's stored, the code is applied automatically. The customer is tagged with the promotion and any dollar credit it carries is applied to the account. Visitors never have to type anything.

A code the visitor typed themselves at signup always wins over the landing-page code. Each page can carry its own code; leave the field blank for no code. Codes are stored letters-and-numbers only, so punctuation is stripped when saved.

You can also override the saved code per link by adding ?code=YOURCODE to the page URL (for example yoursite.com/page/marina-heights?code=SPRING). The URL code wins over the saved field, so a single page can carry a different tracking code for each flyer or QR code you hand out.

Auto-Set Pickup Location

The Auto-set pickup location dropdown binds this landing page to a pickup location (co-op). Leave it on None for a normal home-delivery signup. Pick a location and everyone who lands on this page is auto-linked to it at signup: they get that location's shared pickup address, its delivery route and day, and no home-delivery or frequency choice, exactly as if they had arrived through the location's own invite link.

Build the pickup location first under Co-Ops, since only active locations appear in the dropdown. This is what lets you point a flyer or QR code at your own branded page instead of the generic invite page.

When a page is bound to a location, the code the visitor gets is decided in this order: a ?code= in the URL first, then the page's own Auto-apply discount code, then the pickup location's own auto discount code.

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

Importing a Block from a JSON File

If you have a block saved as a JSON file (for example, one shared from another page), you can import it instead of rebuilding it by hand.

Steps:

  1. Click Import Block JSON in the header of the Page Blocks panel (top right of the panel)
  2. Choose the .json file
  3. The block is added at the top of the page's block list and marked with a green Imported badge
  4. Drag it down into the position you want — the order saves automatically

The Imported badge and highlight are a spot-the-new-block cue only; they clear on the next page load.

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, image background with rich text, 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 (add or remove questions), from database
Newsletter Email signup forms Centered, horizontal, with image
Form Contact forms visitors fill in Working contact form, styled contact form (design only)
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

Rich Text Fields

Some blocks include a rich text field: a freeform area you can format directly on the preview. Click into it and a formatting toolbar appears just above the field you're editing, so it stays with your text as you scroll. It offers the usual bold/italic/underline, headings, lists, links, images, alignment, colors, and a Styles dropdown with five text sizes:

Style Effect
Smallest Smallest text
Smaller Slightly smaller than normal
Larger Slightly larger than normal
Large Noticeably larger
Largest Largest of the presets

Pick a size with text selected to apply it. Re-selecting the same size removes it, and the Remove Format button clears all formatting from the selection.

Hero with Image Background + Rich Text

The Hero with Image Background + Rich Text block pairs a full-width background photo with a single rich text area, so you can format your headline, subheading, and copy however you like instead of filling in separate fixed fields.

Set the photo with the Background Image URL field in the block editor: paste a URL or use the upload button beside it. The block editor shows this field for any block that has a background image, so you never have to click the image in the preview to change it. Beyond the background image, it has:

  • Hero Height: Auto (content height), Small, Medium, Large, or Full Screen
  • Overlay Color: A tint laid over the photo so text stays readable (defaults to black)
  • Overlay Opacity: How strong that tint is, from 0 to 1 (blank keeps the default multiply blend)

Text inside the block is white by default so it reads against the photo. The included call-to-action button is styled for you. Just edit its label and set its link with the toolbar's link tool.

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 put two background-image blocks directly on top of each other - the two photos run together with no visual break. Separate them with a plain or light block, or leave one block's background image empty
  • 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-09-30

  • Page Settings gained an Auto-set pickup location dropdown. Bind a landing page to a pickup location (co-op) and everyone who lands on the page is auto-linked to that location at signup: shared pickup address, the location's route and delivery day, and no home-delivery or frequency choice. The default is None for a normal home-delivery signup. Build the location first under Co-Ops; only active ones appear in the dropdown.
  • The Auto-apply discount code field now honors a ?code= in the page URL. The URL code wins over the saved code, so one page can carry a different tracking code for each flyer or QR code.
  • New Promo Code Unlocked block (Call to Action category): a banner that appears only to visitors who arrive with a promo code (a ?code= link, or a code auto-applied by a landing page). It shows what the offer is (a dollar or percent amount, or the promotion's name) and that it applies automatically at signup. It renders nothing for visitors without a code, so it is safe to place on any page. Its editable fields are the headline, subtext, and a fallback offer line.
  • New Hero with Buttons block (Hero category): a full-width hero with a background image, a dark overlay, a large centered headline and subtitle, and up to two call-to-action buttons (one solid, one outlined). Its editable fields are the Background Image URL, Overlay Opacity (None, Light, Medium, Medium Dark, Dark, Very Dark; default Medium), Hero Height (Full Screen, Large, Medium, Small, Auto; default Large), the headline and subtitle, and each button's text and link. Clear a button's text to hide it. It renders the hero only, with no header or navigation bar.
  • The Promo Code Unlocked block now stays hidden unless the code is a real promotion that would actually apply at signup. A code that does not match any discount (a typo, or a code that was removed or not created yet) no longer shows an "offer unlocked" banner that promises nothing; it hides, the same as when no code is present. While editing the page you still see the block so you can style it.
  • The Promo Code Unlocked block now also recognizes codes that are not tied to a promotion: a free-item code shows the product it gives ("Free "), and a standalone dollar- or percent-off code shows its amount. Any live code (active and not expired) is picked up, so free-product and flat-discount codes no longer fall back to the generic offer line.

2026-09-29

  • The Background Image URL field now appears in the block editor for any block that has a background image, including Hero with Image Background + Rich Text. Previously it only showed for the two background CTA block types, so with a hero you had to click the photo itself in the preview, which the overlay and text layers sat on top of. Paste a URL or use the upload button; changes show in the preview right away.

2026-09-28

  • New Contact Form block (Form category): the real, working contact form. It is a narrow Name / Email / Message form that actually sends (to the same place as your live Contact page), prefills (and locks) the name and email for visitors who are signed in, and is protected for signed-out visitors by the same human check as your Contact page. Its editable fields are the headline, description, and button label.
  • The old styled contact form block is now named Contact Form (styled, static) so it is not mistaken for the working one. It is a two-column design layout (name, company, email, subject, message) for mockups; it does not send anything.
  • Hero blocks now default to Auto height (they size to their content) instead of full screen; pick Small, Medium, Large, or Full Screen only for a deliberate splash hero
  • Page Settings now has an Auto-apply discount code field: give a page a code and visitors who land on it get that code applied automatically at signup (stored in their browser for 16 days), so ad traffic never has to type it.
  • The FAQ Accordion block is now repeater-driven: instead of a fixed set of four questions, you can add and remove question/answer pairs, with room for as many as you need. The first question starts expanded on the page.
  • New SociableKIT Social Feed block (Content category): shows a social media feed (Instagram, Facebook, TikTok, reviews, and other feed types) using a free SociableKIT account. In the block settings, enter the feed type (the widget name, such as instagram-hashtag-feed), the numeric embed ID from your SociableKIT dashboard, an optional heading, and a background color. Until an embed ID is entered, the block shows a placeholder on the page instead of the feed.

2026-09-22

  • Import Block JSON moved to the header of the Page Blocks panel, and imported blocks now land at the top of the list with a temporary green Imported badge (the old "Block imported" popup is gone). Drag the new block into place; the order saves automatically.
  • Block cards and their Edit / Remove / Delete buttons now use the neutral admin button style, coloring only on hover; the per-category "production ready" checkmark is gone, and the Orphaned Blocks panel lists one block per row with the date it was orphaned
  • Removed the "Show all blocks (including unfinished)" toggle and the Add All Blocks button from the Add Block panel
  • Admin-wide blue-grey palette: panels, borders, wells, tables, dropdowns, and form controls now share the app background hue instead of the flat Bootstrap greys
  • New Hero with Image Background + Rich Text block: a background photo with a color overlay and a single freeform rich text area (plus Hero Height, Overlay Color, and Overlay Opacity settings)
  • The inline rich text toolbar now sits directly above the field you're editing and adds a Styles dropdown with five text sizes (Smallest, Smaller, Larger, Large, Largest)

2026-08-28

  • Block rendering polish: steps-row shows a branded numbered circle when a step has no image; contact-info hides rows whose field is set-but-empty; centered-with-subtitle eyebrow uses the site's primary color; hero image-background height presets were rebalanced and new blocks default to Auto

2026-03-12

  • Initial documentation created

End of Documentation

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