Editor guide

Build your site like it's made of blocks. Because it is.

Every Electbase page is a stack of campaign-specific design blocks you can add, edit, and rearrange — no code, no designer, no way to break it. Here's how the editor works, and every block in the library.

What the editor is

The Electbase editor is a drag-and-drop page builder built on Puck, the open-source visual editor — the same class of tool the big website platforms use, tuned for one job: campaign sites. You never start from a blank page. You pick a design from the template gallery, Electbase generates your whole 8-page site around your campaign, and the editor is where you make it yours.

How to use it

  1. Start from a template. Every design in the gallery is a complete 8-page site kit — Home, Issues, About, Events, Donate, Volunteer, Sign Request, and Contact — already assembled from the blocks below.
  2. Click anything to edit it. Select a block on the canvas and its fields open in a side panel — headline, body copy, photos, button labels, links. Type, and the page updates live.
  3. Drag to rearrange. Blocks reorder by dragging. Want endorsements above your issues? Move them. Every block is designed to sit next to every other block.
  4. Add blocks from the library. Open the block library, pick a section — a fundraising band, an FAQ, a photo gallery — and drop it where you want it. Delete anything you don't need (with one exception below).
  5. Set your theme once. Colors, fonts, and your logo live at the site level. Change your campaign blue, and every block on every page updates — buttons, headings, dividers, all of it.
  6. Preview and publish. Preview at desktop and phone widths, then publish. Building and previewing are free — you subscribe when you're ready to go live.

The guardrails (what you can't break)

The block library

Thirty-two blocks, organized by what they do for the campaign. Every block picks up your theme automatically, and every text, image, and button in each one is editable.

Structure & identity

The frame every page shares.

Header

Your campaign wordmark, menu, social icons, and a Donate button. Five logo styles (serif, condensed, block, stacked, script) and solid, navy, or transparent-over-hero variants.

Hero

The masthead. A border-to-border candidate photo on one side, your name as a large campaign wordmark, slogan, and an inline signup form on the other — or a photo-less centered statement version. Background images, secondary buttons, and event pills are optional.

Footer

Menu columns, socials, and the “Paid for by” compliance disclaimer. The disclaimer is locked — you edit the committee name, but the block can never be deleted.

Tell your story

Who you are and why you're running.

Intro

A clean centered “Why I’m running” prose section — eyebrow, title, and paragraphs.

Bio

Portrait, your story in editable paragraphs, and a signature line.

Story

Alternating photo-and-text rows with large rounded frames — community storytelling.

Timeline

A service-record rail: year, milestone, and blurb for each stop.

Video

A 16:9 campaign-video frame with a play button and poster image.

Gallery

A community photo grid with optional stitched captions.

News

Updates and press preview cards — tag, headline, and date.

Issues & platform

What you'll do in office.

Issues

Your priorities as a numbered card grid — the workhorse block, with an icon set covering safety, economy, education, water, veterans, and more.

Features

An icon-panel grid for neighborhood-level priorities.

Pledges

Numbered promise cards with a sharp accent — the reform-pledge strip.

Steps

A numbered how-we-get-there process row.

Tabs

Interactive policy-detail tabs — fully keyboard-accessible.

Contrast

The “choice is clear” table: their way ✕, your plan ✓, row by row.

FAQ

An accessible accordion for the questions voters actually ask.

Social proof

Let others make your case.

Endorsements

Quote cards plus an optional wall of endorser names.

Testimonial

One prominent centered quote with attribution.

TrustBar

A slim strip of short trust phrases between stars.

Stats

Big-number stat cards — doors knocked, dollars raised, years served.

Action & fundraising

Turn visitors into supporters.

Donate

Amount buttons, a featured amount, optional deadline line and goal-progress bar — wired to your own payment processor. Electbase never touches the money.

CTABand

A full-width call-to-action band on your accent color.

SplitCTA

Volunteer and Donate panels side by side.

Momentum

Three action cards — volunteer, give, host a sign.

Events

Dated event listings with RSVP buttons, as a list or bulletin cards.

Forms & supporter capture

Every form feeds your supporter database.

Signup

The volunteer/join form — name, email, ZIP, and optional interest checkboxes.

Newsletter

A lightweight inline email capture.

SignRequestForm

Yard-sign requests: name, address, and quantity.

ContactForm

Name, email, and message, with optional office contact details.

Finishing touches

Small pieces that make a page feel designed.

StarDivider

A thin rule — three stars — a thin rule.

WaveDivider

A flowing wave transition between sections, drawn in pure CSS.

Where the blocks come from

Every template in the gallery is built from this same library — so anything you see on any template, you can add to your own site. Browse a few templates and click around: the sections you're looking at are the blocks above, doing their job.

Launching soon

The editor ships with the Electbase platform. Join the waitlist for early access — and if you want us to build it for you instead, concierge setup exists for exactly that.